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({
@@ -36,20 +51,13 @@ export async function generateMetadata({ params: { slug } }: DocumentationPagePa
   }
 
   return generateEmbed({
-    title: page.metadata.title,
+    title: `${page.metadata.title} - Documentation`,
     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 === 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;
 };
 
 /**

src/app/components/mdx-renderer.tsx

@@ -1,6 +1,7 @@
 import { CodeHighlighter } from "@/app/components/code-highlighter";
 import { Separator } from "@/app/components/ui/separator";
 import Link from "next/link";
+import { ReactElement } from "react";
 
 /**
  * Create a heading component.
@@ -8,7 +9,7 @@ import Link from "next/link";
  * @param level The level of the heading.
  * @param props The props to pass to the heading.
  */
-export function formatHeading(level: number, props: any) {
+export function formatHeading(level: number, props: any): ReactElement {
   const Tag = `h${level}`;
   const paddingBottom = level > 1 ? "pt-6" : "";
   const textSize = 4 - level;
@@ -26,7 +27,7 @@ export function formatHeading(level: number, props: any) {
  *
  * @param props The props to pass to the code block.
  */
-export function formatCode(props: any) {
+export function formatCode(props: any): ReactElement {
   if (!props.className) {
     return <code className="text-xs bg-secondary p-1 rounded-md leading-none" {...props} />;
   }
@@ -46,7 +47,7 @@ export function formatCode(props: any) {
  *
  * @param props The props to pass to the list.
  */
-export function formatList(props: any) {
+export function formatList(props: any): ReactElement {
   return <ul className="list-disc pl-4 ml-2 pt-2">{props.children}</ul>;
 }
 
@@ -55,7 +56,7 @@ export function formatList(props: any) {
  *
  * @param props The props to pass to the link.
  */
-export function formatLink(props: any) {
+export function formatLink(props: any): ReactElement {
   return (
     <Link href={props.href} className="text-primary hover:opacity-85 transition-all transform-gpu">
       {props.children}