Migrate documentation from VuePress 2 to Fumadocs

.dockerignore

@@ -1,5 +1,16 @@
 **/*
 !package.json
-!package-lock.json
-!guide
-!nginx.conf
+!pnpm-lock.yaml
+!pnpm-workspace.yaml
+!next.config.mjs
+!postcss.config.mjs
+!source.config.ts
+!tsconfig.json
+!app
+!components
+!lib
+!content
+!data
+!public
+!scripts
+!nginx.conf

.gitignore

@@ -7,8 +7,23 @@ data.json
 build*.sh
 ignore/*
 .DS_Store
-guide/.vuepress/public/images/*.*
 .vscode
 OnTemplate.md
 .env
-guide/.vuepress/public/docs-pages.json
+
+# next / fumadocs
+.source
+/.next/
+/out/
+*.tsbuildinfo
+next-env.d.ts
+.vercel
+
+# remote images cached locally by lib/remark/images.ts
+guide/.vuepress/public/images/*.*
+
+# browser-automation session artifacts (snapshots, console logs)
+.playwright-mcp/
+
+.pnpm-store
+docs-pages.json

Dockerfile

@@ -2,16 +2,17 @@
 FROM node:24-alpine AS builder
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm ci  --legacy-peer-deps
+RUN npm i -g pnpm@11
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN pnpm install --frozen-lockfile
 
 COPY . .
-# adjust the build command if your project uses a different script
-RUN npm run build
+RUN pnpm build
 
 # Stage 2 — serve with nginx
 FROM nginx:1.25-alpine
-ARG BUILD_DIR=guide/.vuepress/dist
+ARG BUILD_DIR=out
 
 # Remove default config and add a simple SPA-friendly config
 COPY nginx.conf /etc/nginx/conf.d/default.conf
@@ -20,4 +21,5 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/${BUILD_DIR} /usr/share/nginx/html
 
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]
+

DockerfileDev

@@ -1,10 +1,11 @@
-# Stage 1 — build the static assets
-FROM node:24-alpine3.21 AS builder
+FROM node:24-alpine3.21
 WORKDIR /app
 
-COPY package*.json ./
-RUN npm i  --legacy-peer-deps
+RUN npm i -g pnpm@11
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN pnpm install --frozen-lockfile
 
 COPY . .
 
-CMD ["npm", "run", "dev"]
+CMD ["pnpm", "dev"]

README.md

@@ -21,7 +21,7 @@ For larger changes involving many files, we recommend using your IDE and the dev
 ### Requirements
 
 [Git](https://git-scm.com/install/),  
-[Node.js](https://nodejs.org/en/download/current) `>=22.18.0` or [Docker Desktop](https://www.docker.com/products/docker-desktop/)
+[Node.js](https://nodejs.org/en/download/current) `>=22.18.0` with [pnpm](https://pnpm.io/installation), or [Docker Desktop](https://www.docker.com/products/docker-desktop/)
 
 ### Steps
 
@@ -43,13 +43,13 @@ git clone git@github.com:YOUR_USERNAME/ccdoc.git
 3\. Install dependencies:
 
 ```bash
-npm i
+pnpm install
 ```
 
 4\. Start the dev server and go to [localhost:8080](http://localhost:8080):
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 ### Docker Compose
@@ -60,6 +60,16 @@ npm run dev
 docker compose up
 ```
 
+### Termux
+
+The default Turbopack does not natively run on Android. You need to download their fixed package:
+
+```bash
+pkg i turbopack
+```
+
+Restart your app and then continue using the [Node.js](#nodejs) method.
+
 ## Saving Changes
 
 After your changes are done, you need to update your fork.
@@ -79,7 +89,11 @@ git commit -m "Updated category Member"
 3\. Push changes to your fork:
 
 ```bash
-git push
+git push origin
 ```
 
-To send these changes for review, open your cloned fork on GitHub and click the `Open Pull Request` button.
+To send these changes for review, open your cloned fork on GitHub, and click the `Open Pull Request` button.
+
+## Naviagation
+
+All documentation files are stored at `/content/docs`.

app/(docs)/[[...slug]]/page.tsx

@@ -0,0 +1,83 @@
+import { getPageMarkdownUrl, source } from "@/lib/source";
+import {
+    DocsBody,
+    DocsDescription,
+    DocsPage,
+    DocsTitle,
+    MarkdownCopyButton,
+    ViewOptionsPopover,
+} from "fumadocs-ui/layouts/docs/page";
+import { notFound } from "next/navigation";
+import { getMDXComponents } from "@/components/mdx";
+import type { Metadata } from "next";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { appName, gitConfig, socialImage, appDescription } from "@/lib/shared";
+import { Button } from "@/components/ui/button";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+
+export default async function Page(props: PageProps<"/[[...slug]]">) {
+    const params = await props.params;
+    const page = source.getPage(params.slug);
+    if (!page) notFound();
+
+    const MDX = page.data.body;
+    const markdownUrl = getPageMarkdownUrl(page).url;
+
+    return (
+        <DocsPage toc={page.data.toc} full={page.data.full}>
+            <DocsTitle>{page.data.title}</DocsTitle>
+            <DocsDescription className="mb-0">
+                {page.data.description}
+            </DocsDescription>
+            <div className="flex flex-row gap-2 items-center border-b pb-6">
+                <MarkdownCopyButton markdownUrl={markdownUrl} />
+                <Button
+                    color="secondary"
+                    icon={<GitHubLogoIcon />}
+                    link={`https://github.com/${gitConfig.user}/${gitConfig.repo}/edit/${gitConfig.branch}/content/docs/${page.path}`}
+                >
+                    Edit This Page
+                </Button>
+            </div>
+            <DocsBody>
+                <MDX
+                    components={getMDXComponents({
+                        a: createRelativeLink(source, page),
+                    })}
+                />
+            </DocsBody>
+        </DocsPage>
+    );
+}
+
+export async function generateStaticParams() {
+    return source.generateParams();
+}
+
+export async function generateMetadata(
+    props: PageProps<"/[[...slug]]">,
+): Promise<Metadata> {
+    const params = await props.params;
+    const page = source.getPage(params.slug);
+    if (!page) notFound();
+
+    const social = page.data.title
+        ? `${page.data.title} | ${appName}`
+        : `${appName} Documentation`;
+
+    return {
+        title: page.data.title,
+        description: appDescription,
+        openGraph: {
+            title: social,
+            description: appDescription,
+            images: socialImage,
+        },
+        twitter: {
+            card: "summary",
+            title: social,
+            description: appDescription,
+            images: socialImage,
+        },
+    };
+}

app/(docs)/layout.tsx

@@ -0,0 +1,11 @@
+import { source } from "@/lib/source";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: LayoutProps<"/">) {
+    return (
+        <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
+            {children}
+        </DocsLayout>
+    );
+}

app/api/search/route.ts

@@ -0,0 +1,53 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export const revalidate = false;
+
+/** difficulty labels were never treated as tags */
+const NOT_A_TAG = /Easy|Difficult|Read Below|Medium|Bugged/i;
+
+/**
+ * The old VuePress search fed `<Badge text="…" />` values into the index via
+ * `parseTags.js`, which is how searching "kick" or "reactions" finds a
+ * function. Badge props are JSX attributes, so they never reach the structured
+ * content Fumadocs indexes by default — read them back off the source file.
+ */
+function tagsFor(filePath: string, title: string) {
+  const raw = fs.readFileSync(path.join(process.cwd(), 'content/docs', filePath), 'utf8');
+
+  const tags: string[] = [];
+  for (const [, text] of raw.matchAll(/<(?:Badge|Tag)[^>]*\btext="([^"]*)"/g)) {
+    if (text.length > 1 && !NOT_A_TAG.test(text)) tags.push(text);
+  }
+  // the old plugin also indexed the bare function name
+  if (title.startsWith('$')) tags.push(title.slice(1));
+
+  return [...new Set(tags)];
+}
+
+export const { staticGET: GET } = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+  buildIndex(page) {
+    const structuredData = page.data.structuredData;
+    const tags = tagsFor(page.path, page.data.title);
+
+    return {
+      id: page.url,
+      title: page.data.title,
+      description: page.data.description,
+      url: page.url,
+      structuredData: tags.length
+        ? {
+            ...structuredData,
+            contents: [
+              ...structuredData.contents,
+              { heading: undefined, content: tags.join(' ') },
+            ],
+          }
+        : structuredData,
+    };
+  },
+});

app/global.css

@@ -0,0 +1,24 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+
+html {
+    scrollbar-gutter: stable;
+}
+
+html > body[data-scroll-locked] {
+    margin-right: 0px !important;
+    --removed-body-scroll-bar-size: 0px !important;
+}
+
+discord-messages {
+    display: block;
+    margin: 1rem 0;
+    border-radius: 8px;
+    overflow: hidden;
+}
+@layer utilities {
+  .prose p {
+    margin-top: 0.25rem !important;
+  }
+}

app/layout.tsx

@@ -0,0 +1,44 @@
+import { Inter } from "next/font/google";
+import type { Metadata, Viewport } from "next";
+import { Provider } from "@/components/provider";
+import { appDescription, appName, siteUrl, socialImage } from "@/lib/shared";
+import "./global.css";
+
+const inter = Inter({
+    subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+    metadataBase: new URL(siteUrl),
+    title: {
+        template: `%s | ${appName}`,
+        default: `${appName} Documentation`,
+    },
+    description: appDescription,
+    icons: {
+        icon: socialImage,
+    },
+    openGraph: {
+        description: appDescription,
+        images: socialImage,
+    },
+    twitter: {
+        card: "summary",
+        description: appDescription,
+        images: socialImage,
+    },
+};
+
+export const viewport: Viewport = {
+    themeColor: "#74b0f7",
+};
+
+export default function Layout({ children }: LayoutProps<"/">) {
+    return (
+        <html lang="en" className={inter.className} suppressHydrationWarning>
+            <body className="flex flex-col min-h-screen">
+                <Provider>{children}</Provider>
+            </body>
+        </html>
+    );
+}

app/llms-full.txt/route.ts

@@ -0,0 +1,10 @@
+import { getLLMText, source } from '@/lib/source';
+
+export const revalidate = false;
+
+export async function GET() {
+  const scan = source.getPages().map(getLLMText);
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join('\n\n'));
+}