Documentation System
Modern documentation system based on Fumadocs
Welcome to Documentation System
This is a modern documentation system built with Fumadocs, integrated with Next.js 15, React 19, and TypeScript.
π Key Features
- Modern UI: Beautiful, responsive design built with Fumadocs UI
- MDX Support: Use React components in Markdown
- Code Highlighting: Syntax highlighting for multiple programming languages
- Search Functionality: Built-in search feature
- Dark Mode: Automatic dark/light mode support
- Type Safety: Complete TypeScript support
- Internationalization: Support for multiple languages with language switcher
π Project Structure
βββ content/docs/ # Documentation content
β βββ index.en.mdx # English homepage
β βββ index.zh.mdx # Chinese homepage
β βββ ...
βββ src/
β βββ app/[locale]/docs/ # Internationalized documentation routes
β βββ lib/source.ts # Documentation source configuration
β βββ mdx-components.tsx # MDX component configuration
βββ source.config.ts # Fumadocs configuration
βββ .source/ # Auto-generated type filesπ How to Start
-
Install dependencies:
pnpm install -
Generate documentation types:
pnpm fumadocs-mdx -
Start development server:
pnpm dev -
Visit documentation:
- English: http://localhost:3001/en/docs
- Chinese: http://localhost:3001/zh/docs
π Language Support
This documentation system supports multiple languages:
- English (en) - Default language
- δΈζ (zh) - Chinese language
You can switch between languages using the language selector in the navigation bar.
π Adding New Documentation
- Create a new
.mdxfile with language suffix (e.g.,page.en.mdx,page.zh.mdx) - Add frontmatter:
--- title: Page Title description: Page Description --- - Write content
- Update the corresponding
meta.jsonfile to include the new page - Run
pnpm fumadocs-mdxto regenerate types
π§ Configuration Guide
- source.config.ts: Main configuration file, defines document collections and MDX options
- mdx-components.tsx: Custom MDX components
- src/lib/source.ts: Document source loader configuration with i18n support
- src/lib/i18n.ts: Internationalization configuration
π Quick Navigation
- Getting Started - Detailed getting started guide
- Components - Available UI components
- Configuration - System configuration guide