add libraries to the docs (will probably re-design later)

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

@@ -5,7 +5,7 @@ import { generateEmbed } from "@/common/embed";
 
 type DocumentationPageParams = {
   params: {
-    slug?: string;
+    slug?: string[];
   };
 };
 
@@ -18,9 +18,16 @@ export async function generateStaticParams() {
 }
 
 export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
+  const pageSlug = slug?.join("/");
   const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === slug);
+  let page = documentationPages.find(page => page.slug === pageSlug);
 
+  // Use the landing page on "/documentation"
+  if (!page && !slug) {
+    page = documentationPages.find(page => page.slug === "landing");
+  }
+
+  // Fallback to page not found
   if (!page) {
     return generateEmbed({
       title: "Page not found",
@@ -30,34 +37,37 @@ export async function generateMetadata({ params: { slug } }: DocumentationPagePa
 
   return generateEmbed({
     title: page.metadata.title,
-    description: "Click to view this page",
+    description: `${page.metadata.description}\n\nClick to view this page`,
   });
 }
 
 export default function Page({ params: { slug } }: DocumentationPageParams) {
+  const pageSlug = slug?.join("/");
   const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === slug);
+  let page = documentationPages.find(page => page.slug === pageSlug);
 
-  // Fallback to the landing page
-  if (!page) {
+  // Use the landing page on "/documentation"
+  if (!page && !slug) {
     page = documentationPages.find(page => page.slug === "landing");
   }
 
-  // Fallback to a 404 page if we still can't find the page
+  // Page was not found, show an error page
   if (!page) {
-    page = {
-      metadata: {
-        title: "404 - Not Found",
-      },
-      content: "If you are seeing this, it means that the documentation page you are looking for does not exist.",
-      slug: "empty",
-    };
+    return (
+      <div className="text-center flex flex-col gap-2">
+        <h1 className="text-red-400 text-2xl">Not Found</h1>
+        <p>The page you are looking for was not found.</p>
+      </div>
+    );
   }
 
   return (
     <div className="w-full px-4 flex flex-col gap-4">
-      {/* The documentation page title */}
-      {page.metadata.title && <h1 className="text-center">{page.metadata.title}</h1>}
+      {/* The documentation page title and description */}
+      <div className="text-center mb-4">
+        {page.metadata.title && <h1 className="text-2xl">{page.metadata.title}</h1>}
+        {page.metadata.description && <h1>{page.metadata.description}</h1>}
+      </div>
 
       {/* The content of the documentation page */}
       <div className="text-left w-full">