441 - 《Mako 开发日志（10） - makojs.dev》

1、手动搭了个 mako 的官网， https://makojs.dev/ ，没有用任何文档站工具，包括 dumi、vitepress、docuraurus 等。原因是，1）看腻了，各官网都千篇一律，想尝试点不一样的，2）官网技术栈应该可以很简单，不需要 tailwind.css，不需要 ssr & ssg，也不需要 react、vue 等框架，简单的 markdown 转 html，然后加点样式和脚本就够了，回归 10 年前的技术栈，3）初始上线时内容较少，类 esbuild 官网的这种结构看起来内容会更丰富一些。

2、部署参考 437 - 《VPS》，部署在搬瓦工的机器上，国内访问还是挺快的，不需要翻墙，用 1Panel 面板，https 啥的读一键搞定，部署目前文档量不多，用的最原始的 scp 文件上传。

3、说下实现。

1）article 部分的样式直接问 chatgpt 要来的，还挺好看。

2）布局是左右结构，左侧 sticky 显式在固定位置，需要注意的是 flex 下不能直接 sticky，需要套一层。

// 这样不行
<display: flex>
  <position: sticky />
</display: flex>

// 这样可以
<display: flex>
  <div><position: sticky /></div>
</display: flex>

3）做了简单的响应式，当 < 800px 时，会切到小屏模式，隐藏左侧菜单，此时通过点击页头图标会给外部元素加 .open 样式，唤出左侧菜单。

/* 左侧菜单 */
aside { display: none }
@media (min-width: 800px) {
  aside { display: block }
}
.open aside { display: block }

/* 顶部菜单 */
.menubar { display: none }
@media (min-width: 800px) {
  .menubar { display: block }
}

4）锚点菜单高亮。找到 viewport 里的第一个锚点，和左侧菜单做 url 比对，一致的加粗显示。

function highlightNav() {
  let headerAnchor = getFirstVisi