mostly completed docs

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

@@ -66,13 +66,16 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
               <BreadcrumbLink href="/docs">Home</BreadcrumbLink>
             </BreadcrumbItem>
             {slugParts.map((slug, index, array) => {
-              const path = array.slice(0, index + 1).join("/");
+              const path: string = array.slice(0, index + 1).join("/");
+              const name: string = slug.includes("-")
+                ? slug.split("-").map(capitalizeFirstLetter).join(" ")
+                : capitalizeFirstLetter(slug);
 
               return (
                 <div key={slug} className="flex items-center ">
                   <BreadcrumbSeparator className="pr-1.5" />
                   <BreadcrumbItem>
-                    <BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(slug)}</BreadcrumbLink>
+                    <BreadcrumbLink href={`/docs/${path}`}>{capitalizeFirstLetter(name)}</BreadcrumbLink>
                   </BreadcrumbItem>
                 </div>
               );

src/app/common/documentation.ts

@@ -11,11 +11,6 @@ export type DocsContentMetadata = MDXMetadata & {
    */
   title: string;
 
-  /**
-   * The date this content was published.
-   */
-  published: string;
-
   /**
    * The summary of this content.
    */
@@ -111,7 +106,9 @@ export function getDocsContent(): DocsContentMetadata[] {
 export function getDocContent(path?: string[]): DocsContentMetadata | undefined {
   const slug: string = path ? path.join("/") : "home";
 
-  return cachedDocs.find(doc => doc.slug === slug);
+  return process.env.NODE_ENV === "development"
+    ? getDocsContent().find((doc: DocsContentMetadata) => doc.slug === slug)
+    : cachedDocs.find((doc: DocsContentMetadata) => doc.slug === slug);
 }
 
 /**

src/app/components/container.tsx

@@ -10,7 +10,7 @@ type ContainerProps = {
 
 export default function Container({ children }: ContainerProps): ReactElement {
   return (
-    <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
+    <div className="z-[9999] m-auto flex h-screen flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />
       <div className="w-full flex mt-4 justify-center h-full">{children}</div>
     </div>

src/app/components/mdx-components.tsx

@@ -1,6 +1,15 @@
 import { MDXRemote } from "remote-mdx/rsc";
 import { ReactElement } from "react";
-import { formatCode, formatHeading, formatLink, formatList } from "@/app/components/mdx-renderer";
+import {
+  formatCode,
+  formatHeading,
+  formatLink,
+  formatList,
+  formatTable,
+  formatTableData,
+  formatTableHeader,
+} from "@/app/components/mdx-renderer";
+import remarkGfm from "remark-gfm";
 
 /**
  * The components to use in the MDX renderer.
@@ -15,8 +24,21 @@ const components = {
   code: (props: any) => formatCode(props),
   ul: (props: any) => formatList(props),
   a: (props: any) => formatLink(props),
+  table: (props: any) => formatTable(props),
+  th: (props: any) => formatTableHeader(props),
+  td: (props: any) => formatTableData(props),
 };
 
 export function CustomMDX(props: any): ReactElement {
-  return <MDXRemote {...props} components={{ ...components, ...(props.components || {}) }} />;
+  return (
+    <MDXRemote
+      {...props}
+      components={{ ...components, ...(props.components || {}) }}
+      options={{
+        mdxOptions: {
+          remarkPlugins: [remarkGfm],
+        },
+      }}
+    />
+  );
 }

src/app/components/mdx-renderer.tsx

@@ -32,12 +32,10 @@ export function formatCode(props: any): ReactElement {
     return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
   }
 
+  const language = props.className.replace("language-", "");
   return (
     <div className="pt-4">
-      <CodeHighlighter
-        language={props.className ? props.className.replace("language-") : undefined}
-        code={props.children}
-      />
+      <CodeHighlighter language={props.className ? language : undefined} code={props.children} />
     </div>
   );
 }
@@ -63,3 +61,30 @@ export function formatLink(props: any): ReactElement {
     </Link>
   );
 }
+
+/**
+ * Format a table.
+ *
+ * @param props The props to pass to the table.
+ */
+export function formatTable(props: any): ReactElement {
+  return <table className="table-auto divide-y divide-gray-200 mt-4">{props.children}</table>;
+}
+
+/**
+ * Format table header.
+ *
+ * @param props The props to pass to the table header.
+ */
+export function formatTableHeader(props: any): ReactElement {
+  return <th className="border-border border p-1.5">{props.children}</th>;
+}
+
+/**
+ * Format table data.
+ *
+ * @param props The props to pass to the table data.
+ */
+export function formatTableData(props: any): ReactElement {
+  return <td className="border-border border p-1.5">{props.children}</td>;
+}