refactor: docubook@latest template nextjs-docker

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

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation"
-import { getDocsForSlug, getDocsTocs } from "@/lib/markdown"
+import { getDocsForSlug, getDocsFrontmatterForSlug, getDocsStaticParams } from "@/lib/markdown"
 import DocsBreadcrumb from "@/components/DocsBreadcrumb"
 import Pagination from "@/components/pagination"
 import Toc from "@/components/toc"
@@ -17,6 +17,8 @@ type PageProps = {
   }>
 }
 
+export const dynamicParams = true
+
 // Function to generate metadata dynamically
 export async function generateMetadata(props: PageProps) {
   const params = await props.params
@@ -24,22 +26,24 @@ export async function generateMetadata(props: PageProps) {
   const { slug = [] } = params
 
   const pathName = slug.join("/")
-  const res = await getDocsForSlug(pathName)
+  // React.cache() deduplicates within this request, so if the page component
+  // also calls getDocsFrontmatterForSlug, they share the same file read
+  const frontmatter = await getDocsFrontmatterForSlug(pathName)
 
-  if (!res) {
+  if (!frontmatter) {
     return {
       title: "Page Not Found",
       description: "The requested page was not found.",
     }
   }
 
-  const { title, description, image } = res.frontmatter
+  const { title, description, image } = frontmatter
 
-  // Absolute URL for og:image
+  // Absolute URL for og:image - compute once
   const ogImage = image ? `${meta.baseURL}/images/${image}` : `${meta.baseURL}/images/og-image.png`
 
   return {
-    title: `${title}`,
+    title,
     description,
     openGraph: {
       title,
@@ -64,6 +68,10 @@ export async function generateMetadata(props: PageProps) {
   }
 }
 
+export async function generateStaticParams() {
+  return getDocsStaticParams()
+}
+
 export default async function DocsPage(props: PageProps) {
   const params = await props.params
 
@@ -76,11 +84,11 @@ export default async function DocsPage(props: PageProps) {
 
   const { title, description, image: _image, date } = res.frontmatter
   const filePath = res.filePath
-  const tocs = await getDocsTocs(pathName)
+  const tocs = res.tocs
 
   return (
     <div className="flex w-full flex-1 px-0 pb-4 lg:px-8 lg:pb-8 lg:h-[calc(100vh-4rem)]">
-      <div id="scroll-container" className="max-lg:scroll-p-54 bg-card dark:bg-card/20 border-muted-foreground/20 flex w-full flex-col items-start lg:h-full lg:rounded-xl rounded-b-3xl border shadow-md backdrop-blur-sm lg:flex-row lg:overflow-y-auto relative">
+      <div id="scroll-container" className="max-lg:scroll-p-54 bg-card dark:bg-card border-muted-foreground/20 flex w-full flex-col items-start lg:h-full lg:rounded-xl rounded-b-3xl border shadow-md lg:backdrop-blur-sm lg:dark:bg-card/20 lg:flex-row lg:overflow-y-auto relative">
         <div className="flex-7 w-full min-w-0 px-4 py-4 lg:px-8 lg:py-8">
           <MobToc tocs={tocs} title={title} />
           <DocsBreadcrumb paths={slug} />
@@ -95,7 +103,7 @@ export default async function DocsPage(props: PageProps) {
               {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
               {date && (
                 <p className="text-muted-foreground text-[13px]">
-                  Published on {formatDate2(date)}
+                  Last updated {formatDate2(date)}
                 </p>
               )}
             </div>

app/docs/layout.tsx

@@ -11,7 +11,7 @@ export default function DocsLayout({
     <div className="docs-layout flex flex-col min-h-screen w-full">
       <div className="flex flex-1 items-start w-full">
         <Leftbar key="leftbar" />
-        <main className="flex-1 min-w-0 dark:bg-background/50 min-h-screen flex flex-col">
+        <main className="flex-1 min-w-0 dark:bg-background min-h-screen flex flex-col">
           <DocsNavbar />
           <div className="flex-1 w-full">
             {children}

app/layout.tsx

@@ -7,6 +7,7 @@ import { Footer } from "@/components/footer";
 import { SearchProvider } from "@/components/SearchContext";
 import docuConfig from "@/docu.json";
 import "@docsearch/css";
+import "@docubook/mdx-content/styles.css";
 import "@/styles/algolia.css";
 import "@/styles/override.css";
 import "@/styles/globals.css";
@@ -35,9 +36,10 @@ const defaultMetadata: Metadata = {
     locale: "en_US",
     type: "website",
   },
-  other: {
-    "algolia-site-verification": "6E413CE39E56BB62",
-  },
+  /* to implementations domains verification for Algolia with Meta Tag */
+  // other: {
+  //   "algolia-site-verification": "value",
+  // },
 };
 
 // Dynamic Metadata Getter
@@ -60,14 +62,16 @@ export function getMetadata({
       ...defaultMetadata.openGraph,
       title: title || defaultMetadata.openGraph?.title,
       description: description || defaultMetadata.openGraph?.description,
-      images: ogImage ? [
-        {
-          url: ogImage,
-          width: 1200,
-          height: 630,
-          alt: String(title || defaultMetadata.openGraph?.title),
-        },
-      ] : defaultMetadata.openGraph?.images,
+      images: ogImage
+        ? [
+            {
+              url: ogImage,
+              width: 1200,
+              height: 630,
+              alt: String(title || defaultMetadata.openGraph?.title),
+            },
+          ]
+        : defaultMetadata.openGraph?.images,
     },
   };
 }
@@ -91,7 +95,7 @@ export default function RootLayout({
         >
           <SearchProvider>
             <Navbar id="main-navbar" />
-            <main id="main-content" className="sm:container mx-auto w-[90vw] h-auto scroll-smooth">
+            <main id="main-content" className="mx-auto h-auto w-[90vw] scroll-smooth sm:container">
               {children}
             </main>
             <Footer id="main-footer" />