98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import { CustomMDX } from "@/app/components/mdx-components";
|
|
import { Metadata } from "next";
|
|
import { generateEmbed } from "@/app/common/embed";
|
|
import { Title } from "@/app/components/title";
|
|
import { getDocContent, getDocsContent, getDocsDirectories, getMetadata } from "@/app/common/documentation";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/app/components/ui/breadcrumb";
|
|
import { capitalizeFirstLetter } from "@/app/common/string-utils";
|
|
|
|
type DocumentationPageParams = {
|
|
params: {
|
|
slug?: string[];
|
|
};
|
|
};
|
|
|
|
export async function generateStaticParams() {
|
|
let documentationPages = getDocsContent();
|
|
|
|
return documentationPages.map(page => ({
|
|
slug: [page.slug],
|
|
}));
|
|
}
|
|
|
|
export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
|
|
const page = getDocContent(slug);
|
|
|
|
// Fallback to page not found
|
|
if (!page) {
|
|
return generateEmbed({
|
|
title: "Page not found",
|
|
description: "The documentation page was not found",
|
|
});
|
|
}
|
|
|
|
return generateEmbed({
|
|
title: `${page.title} - Documentation`,
|
|
description: `${page.summary}\n\nClick to view this page`,
|
|
});
|
|
}
|
|
|
|
export default function Page({ params: { slug } }: DocumentationPageParams) {
|
|
const page = getDocContent(slug);
|
|
|
|
// Page was not found, show an error page
|
|
if (!page) {
|
|
return (
|
|
<div className="text-center flex flex-col gap-2">
|
|
<h1 className="text-red-400 text-2xl">Not Found</h1>
|
|
<p>The page you are looking for was not found.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const slugParts = page.slug.split("/");
|
|
|
|
return (
|
|
<div className="w-full px-4 flex flex-col gap-4">
|
|
{slugParts.length > 1 && (
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="/docs">Home</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
{slugParts.map((slug, index, array) => {
|
|
const path = array.slice(0, index + 1).join("/");
|
|
|
|
return (
|
|
<div key={slug} className="flex items-center ">
|
|
<BreadcrumbSeparator className="pr-1.5" />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(slug)}</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
</div>
|
|
);
|
|
})}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
)}
|
|
|
|
{/* The documentation page title and description */}
|
|
<div className="text-center mb-4">
|
|
<Title title={page.title} subtitle={page.summary} />
|
|
</div>
|
|
|
|
{/* The content of the documentation page */}
|
|
<div className="text-left w-full">
|
|
<CustomMDX source={page.content} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|