106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { getDocsForSlug, getDocsTocs } from "@/lib/markdown";
|
|
import DocsBreadcrumb from "@/components/docs-breadcrumb";
|
|
import Pagination from "@/components/pagination";
|
|
import Toc from "@/components/toc";
|
|
import { Typography } from "@/components/typography";
|
|
import EditThisPage from "@/components/edit-on-github";
|
|
import { formatDate2 } from "@/lib/utils";
|
|
import docuConfig from "@/docu.json";
|
|
import MobToc from "@/components/mob-toc";
|
|
import { ScrollToTop } from "@/components/scroll-to-top";
|
|
|
|
const { meta } = docuConfig;
|
|
|
|
type PageProps = {
|
|
params: {
|
|
slug: string[];
|
|
};
|
|
};
|
|
|
|
// Function to generate metadata dynamically
|
|
export async function generateMetadata({ params: { slug = [] } }: PageProps) {
|
|
const pathName = slug.join("/");
|
|
const res = await getDocsForSlug(pathName);
|
|
|
|
if (!res) {
|
|
return {
|
|
title: "Page Not Found",
|
|
description: "The requested page was not found.",
|
|
};
|
|
}
|
|
|
|
const { title, description, image } = res.frontmatter;
|
|
|
|
// Absolute URL for og:image
|
|
const ogImage = image
|
|
? `${meta.baseURL}/images/${image}`
|
|
: `${meta.baseURL}/images/og-image.png`;
|
|
|
|
return {
|
|
title: `${title}`,
|
|
description,
|
|
openGraph: {
|
|
title,
|
|
description,
|
|
url: `${meta.baseURL}/docs/${pathName}`,
|
|
type: "article",
|
|
images: [
|
|
{
|
|
url: ogImage,
|
|
width: 1200,
|
|
height: 630,
|
|
alt: title,
|
|
},
|
|
],
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title,
|
|
description,
|
|
images: [ogImage],
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function DocsPage({ params: { slug = [] } }: PageProps) {
|
|
const pathName = slug.join("/");
|
|
const res = await getDocsForSlug(pathName);
|
|
|
|
if (!res) notFound();
|
|
|
|
const { title, description, image, date } = res.frontmatter;
|
|
|
|
// File path for edit link
|
|
const filePath = `contents/docs/${slug.join("/") || ""}/index.mdx`;
|
|
|
|
const tocs = await getDocsTocs(pathName);
|
|
|
|
return (
|
|
<div className="flex items-start gap-10">
|
|
<div className="flex-[4.5] pt-10">
|
|
<DocsBreadcrumb paths={slug} />
|
|
<div className="mb-8">
|
|
<MobToc tocs={tocs} />
|
|
</div>
|
|
<Typography>
|
|
<h1 className="text-3xl !-mt-0.5">{title}</h1>
|
|
<p className="-mt-4 text-muted-foreground text-[16.5px]">{description}</p>
|
|
<div>{res.content}</div>
|
|
<div className="my-8 flex justify-end items-center border-b-2 border-x-muted-foreground">
|
|
{date && (
|
|
<p className="text-[13px] text-muted-foreground">
|
|
Published on {formatDate2(date)}
|
|
</p>
|
|
)}
|
|
{/* <EditThisPage filePath={filePath} /> */}
|
|
</div>
|
|
<Pagination pathname={pathName} />
|
|
</Typography>
|
|
<ScrollToTop />
|
|
</div>
|
|
<Toc path={pathName} />
|
|
</div>
|
|
);
|
|
}
|