feat: upgrade fumadocs

web/app/docs/page.tsx

@@ -1,6 +1,5 @@
 import type { Route } from "./+types/page";
 
-import browserCollections from "collections/browser";
 import { useFumadocsLoader } from "fumadocs-core/source/client";
 import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import {
@@ -11,13 +10,14 @@ import {
   MarkdownCopyButton,
   ViewOptionsPopover,
 } from "fumadocs-ui/layouts/docs/page";
+import { use } from "react";
 
 import { useMDXComponents } from "@/components/mdx";
 import { baseOptions } from "@/lib/layout.shared";
-import { getPageMarkdownUrl, source } from "@/lib/source";
+import { docs, getPageMarkdownUrl, source } from "@/lib/source";
 
 export async function loader({ params }: Route.LoaderArgs) {
-  const slugs = params["*"].split("/").filter((v: string | any[]) => v.length > 0);
+  const slugs = params["*"].split("/").filter((v) => v.length > 0);
   const page = source.getPage(slugs);
   if (!page) throw new Response("Not found", { status: 404 });
 
@@ -28,48 +28,40 @@ export async function loader({ params }: Route.LoaderArgs) {
   };
 }
 
-const clientLoader = browserCollections.docs.createClientLoader({
-  component(
-    { toc, frontmatter, default: Mdx },
-    // you can define props for the component
-    {
-      markdownUrl,
-      path,
-    }: {
-      markdownUrl: string;
-      path: string;
-    },
-  ) {
-    return (
-      <DocsPage toc={toc} tableOfContent={{ style: "clerk" }}>
-        <title>{frontmatter.title}</title>
-        <meta name="description" content={frontmatter.description} />
-        <DocsTitle>{frontmatter.title}</DocsTitle>
-        <DocsDescription>{frontmatter.description}</DocsDescription>
-        <div className="-mt-4 flex flex-row items-center gap-2 border-b pb-6">
-          <MarkdownCopyButton markdownUrl={markdownUrl} />
-          <ViewOptionsPopover
-            markdownUrl={markdownUrl}
-            githubUrl={`https://github.com/ReaJason/MemShellParty/blob/master/web/content/docs/${path}`}
-          />
-        </div>
-        <DocsBody>
-          <Mdx components={useMDXComponents()} />
-        </DocsBody>
-      </DocsPage>
-    );
-  },
-});
+function Content({ path, markdownUrl }: { path: string; markdownUrl: string }) {
+  const page = docs.getPage(path);
+  if (!page) throw new Error(`unknown page: ${path}`);
+
+  // content is loaded lazily, call `page.preload()` in the loader to avoid suspending
+  const { toc } = use(page.load());
+  const Mdx = page.body;
+
+  return (
+    <DocsPage toc={toc} tableOfContent={{ style: "clerk" }}>
+      <title>{page.title}</title>
+      <meta name="description" content={page.description} />
+      <DocsTitle>{page.title}</DocsTitle>
+      <DocsDescription>{page.description}</DocsDescription>
+      <div className="-mt-4 flex flex-row items-center gap-2 border-b pb-6">
+        <MarkdownCopyButton markdownUrl={markdownUrl} />
+        <ViewOptionsPopover
+          markdownUrl={markdownUrl}
+          githubUrl={`https://github.com/ReaJason/MemShellParty/blob/master/web/content/docs/${path}`}
+        />
+      </div>
+      <DocsBody>
+        <Mdx components={useMDXComponents()} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
 
 export default function Page({ loaderData }: Route.ComponentProps) {
   const { pageTree, path, markdownUrl } = useFumadocsLoader(loaderData);
 
   return (
     <DocsLayout {...baseOptions()} tree={pageTree}>
-      {clientLoader.useContent(loaderData.path, {
-        markdownUrl,
-        path,
-      })}
+      <Content path={path} markdownUrl={markdownUrl} />
     </DocsLayout>
   );
 }

web/app/docs/search.ts

@@ -1,17 +1,8 @@
-import { stopwords as mandarinStopwords } from "@orama/stopwords/mandarin";
-import { createTokenizer } from "@orama/tokenizers/mandarin";
 import { createFromSource } from "fumadocs-core/search/server";
 
 import { source } from "@/lib/source";
 
-const server = createFromSource(source, {
-  components: {
-    tokenizer: createTokenizer({
-      language: "mandarin",
-      stopWords: mandarinStopwords,
-    }),
-  },
-});
+const server = createFromSource(source);
 
 export async function loader() {
   return server.staticGET();