mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-28 07:09:50 +00:00
zeekay
1ca81b4206
- Bump @hanzo/docs-mdx 14.2.11 -> 14.3.1 (surpass orphaned 14.3.0 on npm) - Bump @hanzo/docs-docgen 3.0.8 -> 3.1.1 (surpass orphaned 3.1.0 on npm) - Set changeset access to public for scoped @hanzo/* packages - Update create-app templates to use getPageMarkdownUrl() helper
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import type { Route } from './+types/docs';
|
|
import { DocsLayout } from '@hanzo/docs-ui/layouts/docs';
|
|
import {
|
|
DocsBody,
|
|
DocsDescription,
|
|
DocsPage,
|
|
DocsTitle,
|
|
MarkdownCopyButton,
|
|
ViewOptionsPopover,
|
|
} from '@hanzo/docs-ui/layouts/docs/page';
|
|
import { getPageMarkdownUrl, source } from '@/lib/source';
|
|
import browserCollections from 'collections/browser';
|
|
import { baseOptions } from '@/lib/layout.shared';
|
|
import { gitConfig } from '@/lib/shared';
|
|
import { useFumadocsLoader } from '@hanzo/docs-core/source/client';
|
|
import { getPageImagePath } from '@/lib/og';
|
|
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()),
|
|
imagePath: getPageImagePath(slugs),
|
|
};
|
|
}
|
|
|
|
const clientLoader = browserCollections.docs.createClientLoader({
|
|
component(
|
|
{ toc, frontmatter, default: Mdx },
|
|
// you can define props for the `<Content />` component
|
|
{
|
|
markdownUrl,
|
|
path,
|
|
imagePath,
|
|
}: {
|
|
markdownUrl: string;
|
|
path: string;
|
|
imagePath: string;
|
|
},
|
|
) {
|
|
return (
|
|
<DocsPage toc={toc}>
|
|
<title>{frontmatter.title}</title>
|
|
<meta name="description" content={frontmatter.description} />
|
|
<meta property="og:image" content={imagePath} />
|
|
<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/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/content/docs/${path}`}
|
|
/>
|
|
</div>
|
|
<DocsBody>
|
|
<Mdx components={useMDXComponents()} />
|
|
</DocsBody>
|
|
</DocsPage>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default function Page({ loaderData }: Route.ComponentProps) {
|
|
const { path, pageTree, imagePath, markdownUrl } = useFumadocsLoader(loaderData);
|
|
|
|
return (
|
|
<DocsLayout {...baseOptions()} tree={pageTree}>
|
|
{clientLoader.useContent(path, { markdownUrl, path, imagePath })}
|
|
</DocsLayout>
|
|
);
|
|
}
|