generate metadata for the documentation page

next.config.mjs

@@ -1,4 +1,4 @@
-import createMDX from '@next/mdx'
+import createMDX from "@next/mdx";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

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

@@ -1,5 +1,13 @@
 import { getDocumentation } from "@/common/documentation";
 import { CustomMDX } from "@/app/components/mx-components";
+import { Metadata } from "next";
+import { generateEmbed } from "@/common/embed";
+
+type DocumentationPageParams = {
+  params: {
+    slug?: string;
+  };
+};
 
 export async function generateStaticParams() {
   let documentationPages = getDocumentation();
@@ -9,11 +17,22 @@ export async function generateStaticParams() {
   }));
 }
 
-type DocumentationPageParams = {
-  params: {
-    slug?: string;
-  };
-};
+export async function generateMetadata({ params: { slug } }: DocumentationPageParams): Promise<Metadata> {
+  const documentationPages = getDocumentation();
+  let page = documentationPages.find(page => page.slug === slug);
+
+  if (!page) {
+    return generateEmbed({
+      title: "Page not found",
+      description: "The documentation page was not found",
+    });
+  }
+
+  return generateEmbed({
+    title: page.metadata.title,
+    description: "Click to view this page",
+  });
+}
 
 export default function Page({ params: { slug } }: DocumentationPageParams) {
   const documentationPages = getDocumentation();

src/app/components/logo.tsx

@@ -1,6 +1,5 @@
 import Image from "next/image";
 import { ReactElement } from "react";
-import config from "@root/config.json";
 
 type LogoProps = {
   /**