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">

src/app/components/code-highlighter.tsx

@@ -9,6 +9,11 @@ type CodeHighlighterProps = {
    */
   code: string;
 
+  /**
+   * The language of the code.
+   */
+  language?: string;
+
   /**
    * Should the element be rounded?
    */
@@ -62,11 +67,11 @@ function rowRenderer({
   });
 }
 
-export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
+export function CodeHighlighter({ code, language = "json", rounded = true }: CodeHighlighterProps): ReactElement {
   return (
     <div className="text-xs md:text-md">
       <SyntaxHighlighter
-        language="json"
+        language={language}
         style={atomOneDark}
         wrapLongLines
         renderer={rowRenderer}

src/app/components/mx-components.tsx

@@ -1,8 +1,53 @@
 import { MDXRemote } from "remote-mdx/rsc";
+import { CodeHighlighter } from "@/app/components/code-highlighter";
+import { Separator } from "@/app/components/ui/separator";
+import { cn } from "@/common/utils";
+import Link from "next/link";
 
+/**
+ * Create a heading component.
+ *
+ * @param level the level of the heading.
+ */
+function createHeading(level: number) {
+  // eslint-disable-next-line react/display-name
+  return (props: any) => {
+    const Tag = `h${level}`;
+    return (
+      <div className={cn("pb-4", level > 1 ? "pt-6" : null)}>
+        <Tag className={`text-${4 - level}xl font-semibold pb-2`} {...props} />
+        <Separator />
+      </div>
+    );
+  };
+}
+
+/**
+ * The components to use in the MDX renderer.
+ */
 const components = {
-  h1: (props: any) => <h1 className="text-2xl font-semibold pb-2" {...props} />,
-  h2: (props: any) => <h1 className="text-xl font-semibold pb-2 pt-4" {...props} />,
+  h1: (props: any) => createHeading(1)(props),
+  h2: (props: any) => createHeading(2)(props),
+  code: (props: any) => {
+    if (!props.className) {
+      return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
+    }
+
+    return (
+      <div className="pt-4">
+        <CodeHighlighter
+          language={props.className ? props.className.replace("language-") : undefined}
+          code={props.children}
+        />
+      </div>
+    );
+  },
+  ul: (props: any) => <ul className="list-disc pl-4 py-2">{props.children}</ul>,
+  a: (props: any) => (
+    <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
+      {props.children}
+    </Link>
+  ),
 };
 
 export function CustomMDX(props: any) {