用途:把已完成的代码库学习指南 Markdown 文件转成沉浸式交互学习网页,作为本地 Web 应用运行,风格参考 NYT 互动专题或 Pudding.cool 文章。
主要能力:按指南模板解析各章节(目的、核心概念、系统地图、请求流程、深入剖析、模式约定、边界、测试策略、后续步骤),并映射为对应交互形式,如可展开概念卡片、可拖拽的 D3 力导向系统图、滚动驱动的请求步骤演示、标签页深入剖析、可搜索模式卡片、可展开边界表格、带本地存储的进度清单。同时提供导航侧栏、滚动监听、阅读进度条、平滑滚动与区块淡入。
使用方式:先运行 bash scripts/scaffold.sh <output-directory> "<project-name>" 生成预装 D3、Prism.js 与设计系统的 Vite 项目,再在输出目录执行 npm install;逐节构建组件,参考 references/section-strategies.md 与 references/design-system.md;完成后用 cd <output-directory> && npx vite --open 启动开发服务器。
适用场景:已有符合 codebase-study-guide 模板的学习指南,希望以更易读、可交互的方式呈现给读者。
限制:若 Markdown 不匹配模板结构,需按标题内容自适应识别;页面需在 JavaScript 失效时仍可阅读;需尊重 prefers-reduced-motion 并满足 WCAG AA 对比度。具体收费、平台支持等信息暂未提供。