MemShellParty/web/app/docs/page.tsx

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 });

    return {
        path: page.path,
        markdownUrl: getPageMarkdownUrl(page).url,
        pageTree: await source.serializePageTree(source.getPageTree()),
    };
}

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="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 { pageTree, path, markdownUrl } = useFumadocsLoader(loaderData);

    return (
        <DocsLayout {...baseOptions()} tree={pageTree}>
            {clientLoader.useContent(loaderData.path, {
                markdownUrl,
                path,
            })}
        </DocsLayout>
    );
}