文档系统

概述架构

文档系统构建在一个 Next.js 应用程序之上，该应用程序处理 MDX 文件并使用自定义组件进行渲染。该系统提供交互式文档，具有实时组件预览、复制到剪贴板功能和响应式导航。

文档处理流程

来源：apps/www/app/(app)/docs/[[...slug]]/page.tsx:1-154，apps/www/components/mdx-components.tsx1-348 apps/www/lib/rehype-npm-command.ts1-99

MDX 组件系统

文档使用了全面的自定义 MDX 组件，它们提供了超越标准 Markdown 的增强功能。这些组件在 mdx-components.tsx 文件中定义，并处理从基本排版到复杂交互元素的所有内容。

来源：apps/www/components/mdx-components.tsx44-330

内容处理管道

Rehype 插件系统

文档系统在构建时使用 rehype 插件来转换 MDX 内容。主要插件处理 npm 命令转换，以支持多种包管理器。

名为 rehype-npm-command 的插件会处理包含包管理器命令的代码块，并自动生成 npm、yarn、pnpm 和 bun 的等效命令。

将 npm install 转换为 yarn add、pnpm add、bun add。
将 npx create- 转换为 yarn create、pnpm create、bunx --bun create。
将 npx 命令转换为 pnpm dlx、bunx --bun。
将 npm run 转换为 yarn、pnpm、bun。

来源：apps/www/lib/rehype-npm-command.ts4-99

代码块增强

文档中的代码块通过 MDX 组件系统获得特殊处理。

来源：apps/www/components/mdx-components.tsx183-235 apps/www/components/copy-button.tsx24-75

文档导航通过 docsConfig 对象配置，并使用专用导航组件进行渲染。

来源：apps/www/components/docs-nav.tsx7-86 apps/www/components/mobile-nav.tsx7-135

文档页面结构

每个文档页面都遵循一致的结构，包括面包屑导航、内容区域和目录。

来源：apps/www/app/(app)/docs/[[...slug]]/page.tsx:84-154

交互功能

复制到剪贴板系统

该文档包含复杂的复制功能，支持不同类型的内容并跟踪用户交互。

来源：apps/www/components/copy-button.tsx24-207

主题和样式集成

文档系统与全局主题系统集成，可在所有组件中提供一致的样式。

全局 CSS 定义了用于主题的 CSS 自定义属性，这些属性在整个文档中使用。

浅色和深色模式配色方案。
排版和间距工具。
用于步骤、滚动条和布局容器的组件特定样式。

来源：apps/www/styles/globals.css5-156

内容生成

静态站点生成

文档使用 Next.js 静态站点生成在构建时预渲染所有文档页面。

generateStaticParams 为所有文档文件创建路由。
generateMetadata 为每个页面生成 SEO 元数据。
内容通过 Contentlayer 和 rehype 插件进行处理。
最终页面使用交互式 MDX 组件进行渲染。

来源：apps/www/app/(app)/docs/[[...slug]]/page.tsx:24-82

组件集成

文档无缝集成了注册表中的实际 UI 组件，允许在文档内容中进行实时示例和交互式预览。这通过 ComponentPreview、ComponentExample 和 ComponentSource 组件实现，这些组件在所有 MDX 文件中均可用。

来源：apps/www/components/mdx-components.tsx247-249