use title components in docs

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

@@ -2,6 +2,7 @@ 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";
 
 type DocumentationPageParams = {
   params: {
@@ -17,16 +18,30 @@ export async function generateStaticParams() {
   }));
 }
 
-export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
-  const pageSlug = slug?.join("/");
+/**
+ * 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 === pageSlug);
+  let page = documentationPages.find(page => page.slug === slug);
 
-  // Use the landing page on "/documentation"
+  // 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("/"));
+
   // Fallback to page not found
   if (!page) {
     return generateEmbed({
@@ -42,14 +57,7 @@ export async function generateMetadata({ params: { slug } }: DocumentationPagePa
 }
 
 export default function Page({ params: { slug } }: DocumentationPageParams) {
-  const pageSlug = slug?.join("/");
-  const documentationPages = getDocumentation();
-  let page = documentationPages.find(page => page.slug === pageSlug);
-
-  // Use the landing page on "/documentation"
-  if (!page && !slug) {
-    page = documentationPages.find(page => page.slug === "landing");
-  }
+  const page = getPage(slug?.join("/"));
 
   // Page was not found, show an error page
   if (!page) {
@@ -65,8 +73,7 @@ export default function Page({ params: { slug } }: DocumentationPageParams) {
     <div className="w-full px-4 flex flex-col gap-4">
       {/* 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>}
+        <Title title={page.metadata.title} subtitle={page.metadata.description} />
       </div>
 
       {/* The content of the documentation page */}

src/app/common/documentation.ts

@@ -14,7 +14,7 @@ type Metadata = {
   /**
    * The description of the documentation page.
    */
-  description?: string;
+  description: string;
 };
 
 /**