add breadcrumb and cleanup docs loader

src/app/(pages)/documentation/[[...slug]]/page.tsx

@@ -1,8 +1,17 @@
-import { getDocumentation } from "@/app/common/documentation";
 import { CustomMDX } from "@/app/components/mdx-components";
 import { Metadata } from "next";
 import { generateEmbed } from "@/app/common/embed";
 import { Title } from "@/app/components/title";
+import { getDocContent, getDocsContent, getDocsDirectories, getMetadata } from "@/app/common/documentation";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/app/components/ui/breadcrumb";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
 
 type DocumentationPageParams = {
   params: {
@@ -11,36 +20,15 @@ type DocumentationPageParams = {
 };
 
 export async function generateStaticParams() {
-  let documentationPages = getDocumentation();
+  let documentationPages = getDocsContent();
 
   return documentationPages.map(page => ({
     slug: [page.slug],
   }));
 }
 
-/**
- * Gets a documentation page by its slug.
- *
- * @param slug The slug of the documentation page.
- */
-function getPage(slug?: string) {
-  const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === slug);
-
-  // Fallback to the landing page
-  if (!page && !slug) {
-    page = documentationPages.find(page => page.slug === "landing");
-  }
-
-  // We still can't find the page, return undefined
-  if (!page) {
-    return undefined;
-  }
-  return page;
-}
-
 export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
-  const page = getPage(slug?.join("/"));
+  const page = getDocContent(slug);
 
   // Fallback to page not found
   if (!page) {
@@ -51,13 +39,13 @@ export async function generateMetadata({ params: { slug } }: DocumentationPagePa
   }
 
   return generateEmbed({
-    title: `${page.metadata.title} - Documentation`,
-    description: `${page.metadata.description}\n\nClick to view this page`,
+    title: `${page.title} - Documentation`,
+    description: `${page.summary}\n\nClick to view this page`,
   });
 }
 
 export default function Page({ params: { slug } }: DocumentationPageParams) {
-  const page = getPage(slug?.join("/"));
+  const page = getDocContent(slug);
 
   // Page was not found, show an error page
   if (!page) {
@@ -69,11 +57,35 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
     );
   }
 
+  const slugParts = page.slug.split("/");
+
   return (
     <div className="w-full px-4 flex flex-col gap-4">
+      {slugParts.length > 1 && (
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/documentation">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            {slugParts.map((slug, index, array) => {
+              const path = array.slice(0, index + 1).join("/");
+
+              return (
+                <>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem key={slug}>
+                    <BreadcrumbLink href={`/documentation/${path}`}>{capitalizeFirstLetter(slug)}</BreadcrumbLink>
+                  </BreadcrumbItem>
+                </>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
+
       {/* The documentation page title and description */}
       <div className="text-center mb-4">
-        <Title title={page.metadata.title} subtitle={page.metadata.description} />
+        <Title title={page.title} subtitle={page.summary} />
       </div>
 
       {/* The content of the documentation page */}