Ubuntu
99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import { allDocs } from "contentlayer/generated";
|
|
import { notFound } from "next/navigation";
|
|
import { format } from "date-fns";
|
|
import MDX from "@/components/MDX";
|
|
import { Text } from "@/components/retroui/Text";
|
|
import { Metadata } from "next";
|
|
import { MoveUpRightIcon } from "lucide-react";
|
|
import { generateToc } from "@/lib/toc";
|
|
import TableOfContents from "@/components/TableOfContents";
|
|
|
|
interface IProps {
|
|
params: { slug: string[] };
|
|
}
|
|
|
|
function getDocParams({ params }: IProps) {
|
|
const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`;
|
|
const doc = allDocs.find((doc) => doc.url === slug);
|
|
|
|
if (!doc) {
|
|
return null;
|
|
}
|
|
|
|
return doc;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: IProps): Promise<Metadata> {
|
|
const doc = getDocParams({ params });
|
|
|
|
if (!doc) {
|
|
return {
|
|
title: "Not Found | Retro UI",
|
|
};
|
|
}
|
|
|
|
return {
|
|
title: `${doc.title} | Retro UI`,
|
|
description: doc.description,
|
|
};
|
|
}
|
|
|
|
export default async function page({ params }: IProps) {
|
|
const doc = getDocParams({ params });
|
|
|
|
if (!doc) {
|
|
return notFound();
|
|
}
|
|
|
|
const toc = await generateToc(doc.body.raw);
|
|
return (
|
|
<>
|
|
{/* Main Content */}
|
|
<div className="flex-1 space-y-12 py-12 px-4 max-w-2xl mx-auto w-full">
|
|
<div className="border-b pb-6">
|
|
<Text as="h1" className="text-4xl">
|
|
{doc.title}
|
|
</Text>
|
|
<p className="text-lg text-muted-foreground mt-2">
|
|
{doc.description}
|
|
</p>
|
|
{doc.links && (
|
|
<div className="flex space-x-4 text-sm mt-4 text-black">
|
|
{doc.links?.api_reference && (
|
|
<a
|
|
className="flex items-center bg-gray-200 px-1.5 py-.5"
|
|
href={doc.links.api_reference}
|
|
target="_blank"
|
|
>
|
|
API Reference <MoveUpRightIcon className="h-3 w-3 ml-1" />
|
|
</a>
|
|
)}
|
|
{doc.links && doc.links?.source && (
|
|
<a
|
|
className="flex items-center bg-gray-200 px-1.5 py-.5"
|
|
href={doc.links.source}
|
|
target="_blank"
|
|
>
|
|
Source <MoveUpRightIcon className="h-3 w-3 ml-1" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<MDX code={doc.body.code} />
|
|
</div>
|
|
<p className="text-right">
|
|
Last Updated: {format(doc.lastUpdated, "dd MMM, yyy")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Table of Contents */}
|
|
<div className="hidden lg:block lg:w-60 flex-shrink-0 sticky top-36 self-start space-y-6">
|
|
<TableOfContents toc={toc} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|