综合练习

把 sa-intro 到 sa-when 串起来：用 Astro 搭一个文档页原型——MDX 正文、导航、一个客户端搜索或主题切换岛，静态 build 后可部署。证明你不仅会 react-essentials 组件，还能为 内容交付 选对栈。

学习目标

• 独立完成 Astro 项目从 scaffold 到 dist/ 静态产物
• 应用 Content Collections 或 Markdown 组织至少 2 页
• 衔接 ft-deploy 与 html-css-essentials 语义结构

任务说明

必做

1. npm create astro@latest，选 Docs/Starlight 或 Minimal + 自建布局
2. 两页以上 Markdown/MDX，例如：
   • /docs/react-essentials（链到 /tracks/react-essentials）
   • /docs/vue-essentials（链到 /tracks/vue-essentials）
3. 一个交互岛（React 或 Svelte）：站内搜索过滤标题，或 dark/light toggle
4. astro build 成功；本地 preview 可点通导航
5. README：build 命令、output 目录、若上 Netlify 的 publish 路径

选做

• Tailwind + prose 排版（见 sa-styling）
• 对比同内容纯 nextjs-essentials 页的 JS 体积（Lighthouse）
• 用 fetch 在 build 时拉一条公开 API 展示（见 sa-data）

推荐流程

1. 定信息架构（侧栏 + 2 文档页）
2. 写 MDX，交叉链 nextjs / frontend-toolchain / html-css 各一处
3. 加 client:visible 岛，避免整页 hydrate
4. npm run build → 检查 dist 体积
5. （可选）推 Git，接 Cloudflare Pages 预览

禁止：把整个侧栏做成 client:load 的 React 根；禁止 secrets 进仓库。

自检清单

• 未访问页面 不应 加载搜索/主题岛的 JS（Network 验证）
• 外链均为 /tracks/... 或官方文档，无编造 slug