docs: comprehensive documentation overhaul with i18n support (English & Chinese)

packages/docs/README.md

@@ -1,14 +1,208 @@
-# docs
+# DropOut Documentation
 
-This is a React Router application generated with
-[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+This is the official documentation site for DropOut Minecraft Launcher, built with [Fumadocs](https://fumadocs.dev) and React Router v7.
 
-Run development server:
+## Overview
+
+The documentation covers:
+- **Getting Started**: Installation and first-time setup
+- **Features**: Detailed guides for all launcher features
+- **Architecture**: Technical design and implementation details
+- **Development**: Building and contributing to DropOut
+- **Troubleshooting**: Common issues and solutions
+
+### Multi-language Support
+
+The documentation is available in:
+- **English** (default) - `content/docs/en/`
+- **简体中文** (Simplified Chinese) - `content/docs/zh/`
+
+## Development
+
+### Prerequisites
+
+- Node.js 22+
+- pnpm 9+
+
+### Setup
+
+Install dependencies:
+
+```bash
+pnpm install
+```
+
+### Run Development Server
 
 ```bash
-npm run dev
-# or
 pnpm dev
-# or
-yarn dev
 ```
+
+This starts the development server at `http://localhost:5173` with hot reload enabled.
+
+The documentation automatically supports language switching between English and Chinese.
+
+### Build for Production
+
+```bash
+pnpm build
+```
+
+The production build will be output to the `build/` directory.
+
+### Type Checking
+
+```bash
+pnpm types:check
+```
+
+### Linting and Formatting
+
+```bash
+# Check code
+pnpm lint
+
+# Format code
+pnpm format
+```
+
+## Project Structure
+
+```
+packages/docs/
+├── content/
+│   └── docs/              # Documentation content (MDX)
+│       ├── en/            # English documentation
+│       │   ├── index.mdx
+│       │   ├── getting-started.mdx
+│       │   ├── architecture.mdx
+│       │   ├── development.mdx
+│       │   ├── troubleshooting.mdx
+│       │   └── features/
+│       └── zh/            # Chinese documentation
+│           ├── index.mdx
+│           ├── getting-started.mdx
+│           ├── architecture.mdx
+│           ├── development.mdx
+│           ├── troubleshooting.mdx
+│           └── features/
+├── app/                   # React Router app
+├── public/                # Static assets
+├── source.config.ts       # Fumadocs configuration (i18n enabled)
+└── react-router.config.ts # React Router configuration
+```
+
+## Internationalization (i18n)
+
+### Structure
+
+Documentation is organized by locale:
+- English: `content/docs/en/`
+- Chinese: `content/docs/zh/`
+
+Each locale has the same structure with translated content.
+
+### Configuration
+
+i18n is configured in:
+- `source.config.ts`: Enables i18n support
+- `app/lib/source.ts`: Defines available languages and default
+
+### Adding a New Language
+
+1. Create a new directory: `content/docs/{locale}/`
+2. Copy the structure from `en/` or `zh/`
+3. Translate all `.mdx` files
+4. Update `meta.json` files with translated titles
+5. Add the language to `app/lib/source.ts`
+
+## Writing Documentation
+
+### MDX Format
+
+All documentation is written in MDX (Markdown with JSX):
+
+```mdx
+---
+title: Page Title
+description: Page description for SEO
+---
+
+# Page Title
+
+Content goes here...
+
+<Cards>
+  <Card title="Link Title" href="/path" />
+</Cards>
+```
+
+### Available Components
+
+Fumadocs provides several components:
+
+- `<Card>` - Link cards
+- `<Cards>` - Card container
+- `<Callout>` - Info/warning boxes
+- `<Tabs>` - Tabbed content
+- `<Steps>` - Numbered steps
+- Code blocks with syntax highlighting
+
+### Adding New Pages
+
+1. Create new `.mdx` file in `content/docs/{locale}/`
+2. Add frontmatter with title and description
+3. Write content using MDX
+4. Update `meta.json` to include the page
+5. Repeat for all supported languages
+6. Test locally with `pnpm dev`
+
+### Translation Guidelines
+
+When translating content:
+- Keep all code blocks in English
+- Translate frontmatter (title, description)
+- Keep technical terms (Tauri, Rust, Svelte, etc.) in English
+- Translate UI elements and descriptions
+- Keep all links and URLs unchanged
+- Maintain the same structure and formatting
+
+### Organizing Content
+
+Use `meta.json` files to organize navigation:
+
+```json
+{
+  "title": "Section Title",
+  "pages": [
+    "page1",
+    "page2",
+    {
+      "title": "Subsection",
+      "pages": ["sub1", "sub2"]
+    }
+  ]
+}
+```
+
+## Deployment
+
+The documentation is automatically deployed when changes are merged to the main branch.
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes (in all supported languages)
+4. Test locally
+5. Submit a pull request
+
+## Links
+
+- [DropOut Repository](https://github.com/HydroRoll-Team/DropOut)
+- [Fumadocs](https://fumadocs.dev)
+- [React Router](https://reactrouter.com)
+
+## License
+
+MIT License - see the main repository for details.

packages/docs/app/docs/page.tsx

@@ -1,51 +1,58 @@
 import type { Route } from './+types/page';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
+import { DocsPage, DocsBody, DocsDescription, DocsTitle } from 'fumadocs-ui/page';
+import { Card, Cards } from 'fumadocs-ui/components/card';
 import { source } from '@/lib/source';
-import defaultMdxComponents from 'fumadocs-ui/mdx';
-import browserCollections from 'fumadocs-mdx:collections/browser';
+import { i18n } from '@/lib/i18n';
 import { baseOptions } from '@/lib/layout.shared';
 import { useFumadocsLoader } from 'fumadocs-core/source/client';
+import browserCollections from 'fumadocs-mdx:collections/browser';
 
 export async function loader({ params }: Route.LoaderArgs) {
-  const slugs = params['*'].split('/').filter((v) => v.length > 0);
-  const page = source.getPage(slugs);
-  if (!page) throw new Response('Not found', { status: 404 });
+  // 从路由参数获取语言，如果没有则使用默认语言
+  // URL 格式: /docs/getting-started (默认语言 zh)
+  // URL 格式: /en/docs/getting-started (英语)
+  const lang = (params.lang && i18n.languages.includes(params.lang as any))
+    ? (params.lang as 'zh' | 'en')
+    : (i18n.defaultLanguage as 'zh' | 'en');
+
+  // 获取文档路径 slugs
+  const slugs = params['*']?.split('/').filter((v) => v.length > 0) || [];
+
+  const page = source.getPage(slugs, lang);
+
+  if (!page) {
+    throw new Response('Not found', { status: 404 });
+  }
 
   return {
     path: page.path,
-    pageTree: await source.serializePageTree(source.getPageTree()),
+    pageTree: await source.serializePageTree(source.getPageTree(lang)),
+    lang,
   };
 }
 
 const clientLoader = browserCollections.docs.createClientLoader({
-  component(
-    { toc, frontmatter, default: Mdx },
-    // you can define props for the `<Content />` component
-    props?: {
-      className?: string;
-    },
-  ) {
+  component({ toc, frontmatter, default: Mdx }) {
     return (
-      <DocsPage toc={toc} {...props}>
-        <title>{frontmatter.title}</title>
-        <meta name="description" content={frontmatter.description} />
+      <DocsPage toc={toc}>
         <DocsTitle>{frontmatter.title}</DocsTitle>
         <DocsDescription>{frontmatter.description}</DocsDescription>
         <DocsBody>
-          <Mdx components={{ ...defaultMdxComponents }} />
+          <Mdx components={{ ...defaultMdxComponents, Card, Cards }} />
         </DocsBody>
       </DocsPage>
     );
   },
 });
 
-export default function Page({ loaderData }: Route.ComponentProps) {
-  const { path, pageTree } = useFumadocsLoader(loaderData);
+export default function Page({ loaderData, params }: Route.ComponentProps) {
+  const { pageTree, lang } = useFumadocsLoader(loaderData);
 
   return (
-    <DocsLayout {...baseOptions()} tree={pageTree}>
-      {clientLoader.useContent(path)}
+    <DocsLayout {...baseOptions(lang)} tree={pageTree}>
+      {clientLoader.useContent(loaderData.path)}
     </DocsLayout>
   );
 }

packages/docs/app/docs/search.ts

@@ -3,8 +3,11 @@ import { createFromSource } from 'fumadocs-core/search/server';
 import { source } from '@/lib/source';
 
 const server = createFromSource(source, {
-  // https://docs.orama.com/docs/orama-js/supported-languages
-  language: 'english',
+  localeMap: {
+    zh: {
+      language: 'english',
+    },
+  },
 });
 
 export async function loader({ request }: Route.LoaderArgs) {

packages/docs/app/lib/i18n.ts

@@ -0,0 +1,8 @@
+import { defineI18n } from 'fumadocs-core/i18n';
+
+export const i18n = defineI18n({
+  defaultLanguage: 'zh',
+  languages: ['zh', 'en'],
+  hideLocale: 'default-locale',
+  parser: 'dir', // 使用目录结构 (content/zh/*, content/en/*)
+});

packages/docs/app/lib/layout.shared.tsx

@@ -1,9 +1,24 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import { i18n } from './i18n';
 
-export function baseOptions(): BaseLayoutProps {
+export function baseOptions(locale: string): BaseLayoutProps {
+  // 默认语言（zh）不显示前缀，其他语言显示前缀
+  const isDefaultLocale = locale === i18n.defaultLanguage;
+  const localePrefix = isDefaultLocale ? '' : `/${locale}`;
+
   return {
+    i18n,
     nav: {
-      title: 'React Router',
+      title: 'DropOut',
+      url: localePrefix || '/',
     },
+    githubUrl: 'https://github.com/HydroRoll-Team/DropOut',
+    links: [
+      {
+        type: 'main',
+        text: locale === 'zh' ? '文档' : 'Documentation',
+        url: `${localePrefix}/docs`,
+      },
+    ],
   };
 }

packages/docs/app/lib/source.ts

@@ -1,7 +1,12 @@
 import { loader } from 'fumadocs-core/source';
 import { docs } from 'fumadocs-mdx:collections/server';
+import { i18n } from './i18n';
 
 export const source = loader({
   source: docs.toFumadocsSource(),
   baseUrl: '/docs',
+  i18n,
+  // hideLocale: 'default-locale' 会自动生成正确的 URL:
+  // - 默认语言 (zh): /docs/getting-started
+  // - 其他语言 (en): /en/docs/getting-started
 });