refactor: Migrate documentation content, rebuild UI components, and update core architecture.

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

@@ -1,46 +1,42 @@
-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 { notFound } from "next/navigation"
+import { getDocsForSlug, getDocsTocs } from "@/lib/markdown"
+import DocsBreadcrumb from "@/components/DocsBreadcrumb"
+import Pagination from "@/components/pagination"
+import Toc from "@/components/toc"
+import { Typography } from "@/components/typography"
+import EditThisPage from "@/components/EditWithGithub"
+import { formatDate2 } from "@/lib/utils"
+import docuConfig from "@/docu.json"
+import MobToc from "@/components/DocsSidebar"
 
-const { meta } = docuConfig;
+const { meta } = docuConfig
 
 type PageProps = {
   params: Promise<{
-    slug: string[];
-  }>;
-};
+    slug: string[]
+  }>
+}
 
 // Function to generate metadata dynamically
 export async function generateMetadata(props: PageProps) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    slug = []
-  } = params;
+  const { slug = [] } = params
 
-  const pathName = slug.join("/");
-  const res = await getDocsForSlug(pathName);
+  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;
+  const { title, description, image } = res.frontmatter
 
   // Absolute URL for og:image
-  const ogImage = image
-    ? `${meta.baseURL}/images/${image}`
-    : `${meta.baseURL}/images/og-image.png`;
+  const ogImage = image ? `${meta.baseURL}/images/${image}` : `${meta.baseURL}/images/og-image.png`
 
   return {
     title: `${title}`,
@@ -65,53 +61,49 @@ export async function generateMetadata(props: PageProps) {
       description,
       images: [ogImage],
     },
-  };
+  }
 }
 
 export default async function DocsPage(props: PageProps) {
-  const params = await props.params;
+  const params = await props.params
 
-  const {
-    slug = []
-  } = params;
+  const { slug = [] } = params
 
-  const pathName = slug.join("/");
-  const res = await getDocsForSlug(pathName);
+  const pathName = slug.join("/")
+  const res = await getDocsForSlug(pathName)
 
-  if (!res) notFound();
+  if (!res) notFound()
 
-  const { title, description, image: _image, date } = res.frontmatter;
-
-  // File path for edit link
-  const filePath = `contents/docs/${slug.join("/") || ""}/index.mdx`;
-
-  const tocs = await getDocsTocs(pathName);
+  const { title, description, image: _image, date } = res.frontmatter
+  const filePath = res.filePath
+  const tocs = await getDocsTocs(pathName)
 
   return (
-    <div className="flex items-start gap-10">
-      <div className="flex-[4.5] pt-5">
-        <MobToc tocs={tocs} />
-        <DocsBreadcrumb paths={slug} />
-        <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 items-center border-b-2 border-dashed border-x-muted-foreground ${
-                docuConfig.repository?.editLink ? "justify-between" : "justify-end"
-            }`}
+    <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 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} />
+          <Typography>
+            <h1 className="-mt-0.5! text-3xl">{title}</h1>
+            <p className="text-muted-foreground -mt-4 text-[16.5px]">{description}</p>
+            <div>{res.content}</div>
+            <div
+              className={`border-x-muted-foreground my-8 flex items-center border-b-2 border-dashed ${docuConfig.repository?.editLink ? "justify-between" : "justify-end"
+                }`}
             >
-            {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
-            {date && (
-                <p className="text-[13px] text-muted-foreground">
-                Published on {formatDate2(date)}
+              {docuConfig.repository?.editLink && <EditThisPage filePath={filePath} />}
+              {date && (
+                <p className="text-muted-foreground text-[13px]">
+                  Published on {formatDate2(date)}
                 </p>
-            )}
+              )}
             </div>
-          <Pagination pathname={pathName} />
-        </Typography>
+            <Pagination pathname={pathName} />
+          </Typography>
+        </div>
+        <Toc tocs={tocs} />
       </div>
-      <Toc path={pathName} />
     </div>
-  );
+  )
 }

app/docs/layout.tsx

@@ -1,4 +1,6 @@
 import { Leftbar } from "@/components/leftbar";
+import DocsNavbar from "@/components/DocsNavbar";
+import "@/styles/override.css";
 
 export default function DocsLayout({
   children,
@@ -6,10 +8,15 @@ export default function DocsLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex items-start gap-8">
-      <Leftbar key="leftbar" />
-      <div className="flex-[5.25] px-1">
-        {children}
+    <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">
+          <DocsNavbar />
+          <div className="flex-1 w-full">
+            {children}
+          </div>
+        </main>
       </div>
     </div>
   );

app/layout.tsx

@@ -1,14 +1,14 @@
 import type { Metadata } from "next";
-import { ThemeProvider } from "@/components/contexts/theme-provider";
+import { ThemeProvider } from "@/components/ThemeProvider";
 import { Navbar } from "@/components/navbar";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
 import { Footer } from "@/components/footer";
+import { SearchProvider } from "@/components/SearchContext";
 import docuConfig from "@/docu.json";
-import { Toaster } from "@/components/ui/sonner";
 import "@docsearch/css";
 import "@/styles/algolia.css";
-import "@/styles/syntax.css";
+import "@/styles/override.css";
 import "@/styles/globals.css";
 
 const { meta } = docuConfig;
@@ -35,6 +35,9 @@ const defaultMetadata: Metadata = {
     locale: "en_US",
     type: "website",
   },
+  other: {
+    "algolia-site-verification": "6E413CE39E56BB62",
+  },
 };
 
 // Dynamic Metadata Getter
@@ -86,12 +89,13 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <Navbar />
-          <main className="sm:container mx-auto w-[90vw] h-auto scroll-smooth">
-            {children}
-          </main>
-          <Footer />
-          <Toaster position="top-center" />
+          <SearchProvider>
+            <Navbar id="main-navbar" />
+            <main id="main-content" className="sm:container mx-auto w-[90vw] h-auto scroll-smooth">
+              {children}
+            </main>
+            <Footer id="main-footer" />
+          </SearchProvider>
         </ThemeProvider>
       </body>
     </html>

app/page.tsx

@@ -1,5 +1,5 @@
 import { buttonVariants } from "@/components/ui/button";
-import { page_routes } from "@/lib/routes-config";
+import { page_routes } from "@/lib/routes";
 import {
   ArrowRightIcon,
   LayoutDashboard,
@@ -13,7 +13,7 @@ import Link from "next/link";
 import { cn } from "@/lib/utils";
 import AnimatedShinyText from "@/components/ui/animated-shiny-text";
 import { getMetadata } from "@/app/layout";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 
 export const metadata = getMetadata({
   title: "WooNooW - The Ultimate WooCommerce Enhancement Suite",
@@ -23,7 +23,7 @@ export default function Home() {
   return (
     <div className="flex flex-col items-center justify-center px-4 py-8 text-center sm:py-20">
       <Link
-        href="/docs/changelog"
+        href="/docs/resources/changelog"
         className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
       >
         <div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
@@ -33,7 +33,7 @@ export default function Home() {
             )}
           >
             <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
-              <span>🚀 v2.0 Released: Multi-Channel Notifications</span>
+              <span>🚀 v1.0 Released: Multi-Channel Notifications</span>
               <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
             </AnimatedShinyText>
           </div>
@@ -41,7 +41,7 @@ export default function Home() {
       </Link>
 
       <div className="w-full max-w-[900px] pb-8">
-        <h1 className="mb-4 text-3xl font-bold sm:text-6xl bg-clip-text text-transparent bg-gradient-to-r from-green-500 to-lime-500">
+        <h1 className="mb-4 text-3xl font-bold sm:text-6xl bg-clip-text text-transparent bg-linear-to-r from-green-500 to-lime-500">
           Fill the Gap. <br />Elevate Your Store.
         </h1>
         <p className="mb-8 sm:text-xl text-muted-foreground max-w-2xl mx-auto">
@@ -52,7 +52,7 @@ export default function Home() {
 
       <div className="flex flex-row items-center gap-6 mb-16">
         <Link
-          href="/docs/getting-started/introduction"
+          href={`/docs${page_routes[0].href}`}
           className={buttonVariants({
             className: "px-8 bg-black text-white hover:bg-neutral-800 dark:bg-white dark:text-black dark:hover:bg-neutral-200",
             size: "lg",
@@ -74,7 +74,7 @@ export default function Home() {
 
       {/* The Gap Analysis */}
       <div className="w-full max-w-5xl mb-20 text-left">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Production Reality (The Problem) */}
           <div className="p-8 rounded-2xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900/30">
             <h3 className="text-xl font-bold mb-4 text-red-700 dark:text-red-400 flex items-center gap-2">
@@ -123,7 +123,7 @@ export default function Home() {
 
       <div className="w-full max-w-6xl">
         <h2 className="text-2xl font-bold mb-8">Core Modules</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           <Card className="text-left hover:border-green-500/50 transition-colors">
             <CardHeader>
               <LayoutDashboard className="size-8 text-green-500 mb-2" />