ShipSaaS

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

  1. Install dependencies:

    pnpm install
  2. Generate documentation types:

    pnpm fumadocs-mdx
  3. Start development server:

    pnpm dev
  4. Visit documentation:

🌐 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

  1. Create a new .mdx file with language suffix (e.g., page.en.mdx, page.zh.mdx)
  2. Add frontmatter:
    ---
    title: Page Title
    description: Page Description
    ---
  3. Write content
  4. Update the corresponding meta.json file to include the new page
  5. Run pnpm fumadocs-mdx to 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