MDX 组件集合

这是一篇组件集合，不是正式文章。下面每段对应一种帖子里能用的 MDX 写法。配图都是 avatar.png（站点头像 portrait-chibi-avatar.png 的副本，320×335）。

图片

Markdown 图片会走 ZoomImage，路径必须带宽高：./avatar.png#320x335。有 title 时出现图注。

点击可放大。轻微倾斜来自文件名 hash。

PhotoStack 一次展示一组照片，共用一条图注。点封面只选中，不跳走。

行内徽章。可用：Codex、Claude Code、ATS、Control、Dex、Slack、App Store。

一个周末，Codex 和 Claude Code 把流程跑了起来。

TimeAllocationChart 没有参数，文案写死在组件里（宝宝助手应用）。

前期规划5%

决策、体验设计与反复优化50%

界面调试与原型迭代45%

业务代码反而不是主要瓶颈。个人回顾估算，并非精确工时统计。

<Tweet id="..." /> 读取同目录的 tweet-<id>.json。有 tweet-<id>-avatar.png 就用本地头像，否则构建时去拉。

```mermaid 会转成 MermaidDiagram。caption 写在 fence 的 meta 里。

从想法到一篇带组件的帖子。

pre 换成带标题的 CodeBlockPre。title 写在 fence 上。

app/blog/[slug]/page.tsx

export default function Page({ params }: { params: { slug: string } }) {
  return <article>{params.slug}</article>
}

命令行

pnpm dev

外链走 ExternalLink（favicon + hover 预览）。站内路径还是普通 <a>。

时间分配图