feat: upgrade docs

web/app/docs/page.tsx

@@ -1,56 +1,73 @@
-import browserCollections from "fumadocs-mdx:collections/browser";
-import { useFumadocsLoader } from "fumadocs-core/source/client";
-import { ImageZoom } from "fumadocs-ui/components/image-zoom";
-import { DocsLayout } from "fumadocs-ui/layouts/docs";
-import {
-  DocsBody,
-  DocsDescription,
-  DocsPage,
-  DocsTitle,
-} from "fumadocs-ui/layouts/docs/page";
-import defaultMdxComponents from "fumadocs-ui/mdx";
-import { baseOptions } from "@/lib/layout.shared";
-import { source } from "@/lib/source";
 import type { Route } from "./+types/page";
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import {
+    DocsBody,
+    DocsDescription,
+    DocsPage,
+    DocsTitle,
+    MarkdownCopyButton,
+    ViewOptionsPopover,
+} from 'fumadocs-ui/layouts/docs/page';
+import { getPageMarkdownUrl, source } from '@/lib/source';
+import browserCollections from 'collections/browser';
+import { baseOptions } from '@/lib/layout.shared';
+import { useFumadocsLoader } from 'fumadocs-core/source/client';
+import { useMDXComponents } from '@/components/mdx';
 
 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 });
+    const slugs = params['*'].split('/').filter((v) => v.length > 0);
+    const page = source.getPage(slugs);
+    if (!page) throw new Response('Not found', { status: 404 });
 
-  return {
-    path: page.path,
-    pageTree: await source.serializePageTree(source.pageTree),
-  };
+    return {
+        path: page.path,
+        markdownUrl: getPageMarkdownUrl(page).url,
+        pageTree: await source.serializePageTree(source.getPageTree()),
+    };
 }
 
 const clientLoader = browserCollections.docs.createClientLoader({
-  component({ toc, default: Mdx, frontmatter }) {
-    return (
-      <DocsPage toc={toc}>
-        <title>{frontmatter.title}</title>
-        <meta name="description" content={frontmatter.description} />
-        <DocsTitle>{frontmatter.title}</DocsTitle>
-        <DocsDescription>{frontmatter.description}</DocsDescription>
-        <DocsBody>
-          <Mdx
-            components={{
-              ...defaultMdxComponents,
-              img: (props) => <ImageZoom {...(props as any)} />,
-            }}
-          />
-        </DocsBody>
-      </DocsPage>
-    );
-  },
+    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="flex flex-row gap-2 items-center border-b -mt-4 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 Content = clientLoader.getComponent(loaderData.path);
-  const { pageTree } = useFumadocsLoader(loaderData);
-  return (
-    <DocsLayout {...baseOptions()} tree={pageTree}>
-      <Content />
-    </DocsLayout>
-  );
-}
+    const { pageTree, path, markdownUrl } = useFumadocsLoader(loaderData);
+
+    return (
+        <DocsLayout {...baseOptions()} tree={pageTree}>
+            {clientLoader.useContent(loaderData.path, {
+                markdownUrl,
+                path,
+            })}
+        </DocsLayout>
+    );
+}