梦境汇编

--UPDATE--

可以发布评论了

支持 i18n 了，但内容必须在浏览器渲染，会有 Layout Shift 🥲 后面有时间了再折腾一下用 CF Workers 做一个分流

把评论做成接近可视区域才 lazy load 的形状了，fork 了一份 rehype-pretty-code 掺了点魔法去掉了对 crypto 的依赖（不然我们的小聪明 Next.js 会把 polyfill 塞进 first chunk 😅），fork 了一份 next-contentlayer 稍微改了一下让整个文章内容都 SSR 渲染，这样就不需要客户端再水合了

另外弄了一个 remark 插件和一个 rehype 插件处理 markdown 里面的图片添加元数据让 Next.js 可以用一个模糊底图当 placeholder（credit to圖片效能最佳化，使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22

今天的优化就到这里，睡觉（

评论系统做得挺有意思的，我最近新增的评论区实践是查$id_{article} \leftarrow id_{discussion}$表后从 GitHub API 拉 repo discussions 区内对应该文章的 post 下的评论区，效果参考https://neruthes.xyz/articles-comments/?id=2022-12-12.0。不过因为我不打算为单独文章做 HTML 版本，所以无法将文章内容与评论区放在同一页面内。

给评论加上了 KaTeX 支持，以及 inline critical css, 制作了一个小的 GA 代理

但是样式又烂掉了）

UPDATE：支持了 RSS 和 tag，调整了一下样式

總算找到了一個比較搭的英文字體，把主色調修改到了 REC2020 色域的藍/綠色，在支持廣色域的設備和瀏覽器上會看到更鮮艷的顏色（？

以及略微調整了一下樣式

从 Next.js 迁移到了 Astro，并且框架从 React 换成了 Preact，再也不用忍受优化不掉的 100+KB (gzipped) 的 React+Next 大礼包了 😇 现在文章页面不包含评论区只需要 27.1 KB，而原先需要 274 KB

调整了一下样式以及给每篇文章加上了自动生成的 OG Image，支持了发送邮件通知（

刚迁移完还有好多 Bug

折腾了一下 GeoDNS 和分区 CDN，用旧域名搭建了一个境内加速站点

当然备案是不可能有备案的，只能用 CloudFront 的东亚节点这样子

用 thumbhash 复刻了 Next.js 的 image placeholder，现在文章图片也有加载动效啦

把 Next.js 的 link prefetch 也复刻了一下，配合 CloudFront 就可以秒开了

对评论做了一下服务端预渲染，不过因为 astro 的类 RSC 特性再加上用了异步 remark/rehype 插件没有办法同步渲染所以实现得有点 tricky。

并且滚动到评论区触发 hydration 第一次渲染的时候会因为 markdown 是异步渲染的（渲染完再setState），不管返回了什么都会替换掉服务端渲染好的 markdown DOM，这一小段 loading 时间只能展示点别的东西（比如现在是恢复成未渲染的 markdown），这下学艺不精了