initial to gitea

app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,105 @@
+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>
+  );
+}

app/docs/layout.tsx

@@ -0,0 +1,14 @@
+import { Leftbar } from "@/components/leftbar";
+
+export default function DocsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="flex items-start gap-8">
+      <Leftbar key="leftbar" />
+      <div className="flex-[5.25]">{children}</div>
+    </div>
+  );
+}