feat(docs): reorganize documentation structure and update navigation links

docs/src/lib/cn.ts

@@ -0,0 +1 @@
+export { twMerge as cn } from 'tailwind-merge';

docs/src/lib/doc-page.tsx

@@ -0,0 +1,48 @@
+import { getMDXComponents } from '@/components/mdx';
+import { gitConfig } from '@/lib/shared';
+import { getPageImage, getPageMarkdownUrl, source } from '@/lib/source';
+import type { Metadata } from 'next';
+import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
+import {
+  MarkdownCopyButton,
+  ViewOptionsPopover,
+} from 'fumadocs-ui/layouts/docs/page';
+
+export type DocPageData = (typeof source)['$inferPage'];
+
+export function DocPageContent({ page }: { page: DocPageData }) {
+  const MDX = page.data.body;
+  const markdownUrl = getPageMarkdownUrl(page).url;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full} className="md:pt-20 xl:pt-24">
+      <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} />
+        <ViewOptionsPopover
+          markdownUrl={markdownUrl}
+          githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/${gitConfig.docsContentDir}/${page.path}`}
+        />
+      </div>
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export function getDocPageMetadata(page: DocPageData): Metadata {
+  return {
+    title: page.data.title,
+    description: page.data.description,
+    openGraph: {
+      images: getPageImage(page).url,
+    },
+  };
+}

docs/src/lib/layout.shared.tsx

@@ -0,0 +1,55 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import { appName, gitConfig } from './shared';
+import { ArrowUpRight } from 'lucide-react';
+
+const githubUrl = `https://github.com/${gitConfig.user}/${gitConfig.repo}`;
+const qqUrl = 'https://qm.qq.com/q/DFnKzZ807u';
+
+export function baseOptions(): BaseLayoutProps {
+  return {
+    nav: {
+      title: (
+        <span className="inline-flex items-center gap-2 font-semibold">
+          <img src="/logo.svg" alt={appName} className="h-6 w-6" />
+          <span>{appName}</span>
+        </span>
+      ),
+    },
+    links: [
+      {
+        text: '文档导航',
+        url: '/docs/overview/quick-start',
+        on: 'nav',
+      },
+      {
+        text: (
+          <span className="inline-flex items-center gap-1.5">
+            <span>在线体验</span>
+            <ArrowUpRight className="size-4" />
+          </span>
+        ),
+        url: 'https://infinite-canvas-cpco.onrender.com/',
+        external: true,
+        on: 'nav',
+      },
+      {
+        type: 'icon',
+        text: 'GitHub',
+        label: 'GitHub',
+        url: githubUrl,
+        external: true,
+        on: 'menu',
+        icon: <img src="/github.svg" alt="" className="size-4" />,
+      },
+      {
+        type: 'icon',
+        text: 'QQ',
+        label: 'QQ',
+        url: qqUrl,
+        external: true,
+        on: 'menu',
+        icon: <img src="/qq.svg" alt="" className="size-4" />,
+      },
+    ],
+  };
+}

docs/src/lib/shared.ts

@@ -0,0 +1,12 @@
+export const appName = '无限画布';
+export const docsRoute = '/docs';
+export const docsImageRoute = '/og/docs';
+export const docsContentRoute = '/llms.mdx/docs';
+
+// fill this with your actual GitHub info, for example:
+export const gitConfig = {
+  user: 'basketikun',
+  repo: 'infinite-canvas',
+  branch: 'main',
+  docsContentDir: 'docs/content/docs',
+};

docs/src/lib/source.ts

@@ -0,0 +1,36 @@
+import { docs } from 'collections/server';
+import { loader } from 'fumadocs-core/source';
+import { docsContentRoute, docsImageRoute, docsRoute } from './shared';
+
+// See https://fumadocs.dev/docs/headless/source-api for more info
+export const source = loader({
+  baseUrl: docsRoute,
+  source: docs.toFumadocsSource(),
+  plugins: [],
+});
+
+export function getPageImage(page: (typeof source)['$inferPage']) {
+  const segments = [...page.slugs, 'image.png'];
+
+  return {
+    segments,
+    url: `${docsImageRoute}/${segments.join('/')}`,
+  };
+}
+
+export function getPageMarkdownUrl(page: (typeof source)['$inferPage']) {
+  const segments = [...page.slugs, 'content.md'];
+
+  return {
+    segments,
+    url: `${docsContentRoute}/${segments.join('/')}`,
+  };
+}
+
+export async function getLLMText(page: (typeof source)['$inferPage']) {
+  const processed = await page.data.getText('processed');
+
+  return `# ${page.data.title} (${page.url})
+
+${processed}`;
+}