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

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();

  return documentationPages.map(page => ({
    slug: [page.slug],
  }));
}

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();
  let page = documentationPages.find(page => page.slug === slug);

  // Fallback to the landing page
  if (!page) {
    page = documentationPages.find(page => page.slug === "landing");
  }

  // Fallback to a 404 page if we still can't find the 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="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 content of the documentation page */}
      <div className="text-left w-full">
        <CustomMDX source={page.content} />
      </div>
    </div>
  );
}