Skip to content

Conversation

@Crokily
Copy link
Contributor

@Crokily Crokily commented Sep 12, 2025

关联 Issue: Issue #8


What

此 PR 完成了以下主要工作:

  1. 迁移内容管理系统: 将项目的内容管理框架从 Contentlayer 完全迁移到 Fumadocs
  2. 集成 Fumadocs UI: 实现了 Fumadocs UI 的核心组件和样式,为文档站点带来了现代化界面。
  3. 更新贡献指南: 在 CONTRIBUTING.md 文件中增加了关于功能开发前提交 Issue 的说明,并提供了 UI 开发建议,强调优先使用 Fumadocs UI 组件库。

Why

进行这些更改的原因如下:

  • 解决 Contentlayer 过时问题: 原始的 Contentlayer 库已停止维护,并且在效果上已无法满足项目需求。
  • 提升用户和开发者体验: Fumadocs 作为一个专为 Next.js 设计的现代文档框架,提供了更美观、功能更丰富的 UI 组件,并简化了文档内容的管理和渲染流程。
  • 规范贡献流程: 增加开发前提 Issue 的说明,旨在避免重复开发,统一开发方向,并提高社区协作效率。
  • 明确 UI 开发标准: 明确指出在 UI 开发中应优先使用 Fumadocs UI 库,以保持项目设计和代码风格的一致性。

How

这些更改的实现方式和测试验证包括:

  1. Fumadocs 核心配置:
    • 移除了 contentlayernext-contentlayer 依赖。
    • 安装了 fumadocs-core, fumadocs-ui, fumadocs-mdx
    • 创建了 source.config.ts 定义文档集合。
    • 更新了 next.config.mjs,使用 createMDX 替换 withContentlayer
    • 创建了 lib/source.ts 加载 Fumadocs 内容源。
    • 更新了 package.json 中的 postinstall 脚本以生成 Fumadocs 类型。
    • 修改了 tsconfig.json 以识别新的 .source 目录别名。
  2. Fumadocs UI 集成:
    • 创建了 mdx-components.tsx 用于管理 MDX 渲染组件。
    • 更新了 app/layout.tsx,用 RootProvider 包裹应用以提供全局 UI 上下文。
    • app/globals.css 中引入了 Fumadocs UI 的基础样式。
    • 创建了 lib/layout.shared.tsx 来定义全局导航配置(如网站标题)。
    • 创建了 app/docs/layout.tsx,使用 DocsLayout 提供文档页面的整体布局(包含侧边栏)。
    • 重构了 app/docs/[...slug]/page.tsx,使其通过 source.getPage() 获取内容,并使用 DocsPageDocsBody 组件渲染,同时支持 generateStaticParamsgenerateMetadata
  3. 贡献指南更新:
    • CONTRIBUTING.md 文件中,新增了"📋 开发流程"和"💡 UI 开发建议"章节,详细说明了相关规范和建议。

Testing

在提交此 PR 之前,已进行了以下测试:

  • 本地开发服务器验证: 运行 pnpm dev,确认应用成功启动,所有文档页面正常渲染,导航、目录、主题切换等 Fumadocs UI 功能按预期工作。
  • 内容构建验证: 运行 pnpm build,确保 Fumadocs 内容生成和 Next.js 静态导出过程无错误。
  • 代码质量检查: 对所有修改过的 TypeScript/JavaScript 文件进行了 linter 检查,未发现错误。
  • 文档更新验证: 检查 CONTRIBUTING.md 文件,确保新增的说明内容正确、格式清晰,且中英文版本均已更新。

Breaking Changes

是的,此 PR 引入了以下破坏性更改

  • 内容获取方式: 所有从 Contentlayer 获取文档内容的逻辑(例如 import { allDocs } from 'contentlayer/generated')都需要更新为 Fumadocs 的 source.getPage()source.getPages() 方法。
  • MDX 渲染组件: 原有的 MDXContent 组件已不再使用,渲染逻辑已迁移至 Fumadocs UI 提供的 DocsPageDocsBody
  • 配置文件结构: Contentlayer 的配置文件 contentlayer.config.ts 已被 Fumadocs 的 source.config.ts 取代。

@longsizhuo longsizhuo requested a review from Copilot September 12, 2025 18:27
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR migrates the documentation site from Contentlayer to Fumadocs as the content management framework, modernizing the UI components and updating the contribution guidelines. The migration addresses Contentlayer's discontinued maintenance status and provides a more modern documentation experience.

  • Replaced Contentlayer with Fumadocs for content management and MDX processing
  • Integrated Fumadocs UI components for modern documentation interface with built-in features like TOC and theme switching
  • Updated contribution guidelines to require Issue submission before development and emphasize Fumadocs UI component usage

Reviewed Changes

Copilot reviewed 19 out of 21 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
source.config.ts New Fumadocs configuration defining docs collection from app/docs directory
package.json Updated dependencies - removed Contentlayer packages, added Fumadocs packages, changed postinstall script
next.config.mjs Replaced withContentlayer with createMDX from fumadocs-mdx/next
lib/source.ts New source loader configuration for Fumadocs
app/docs/[...slug]/page.tsx Refactored to use Fumadocs source.getPage() and DocsPage/DocsBody components
app/layout.tsx Added RootProvider wrapper and updated metadata
app/globals.css Added Fumadocs UI CSS imports for styling
CONTRIBUTING.md Added development workflow guidelines requiring Issues before development and UI development recommendations

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

export async function generateMetadata({ params }: Param): Promise<Metadata> {
const { slug } = await params;
const page = source.getPage(slug);
if (page == null) notFound();
Copy link

Copilot AI Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The notFound() call should include a return statement to satisfy TypeScript's control flow analysis and make the code intention clearer.

Suggested change
if (page == null) notFound();
if (page == null) {
notFound();
return;
}

Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@longsizhuo longsizhuo merged commit 0fc17ad into InvolutionHell:main Sep 12, 2025
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants