feat: add Langfuse Academy section

app/academy/[[...slug]]/not-found.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link";
+
+export default function AcademyNotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
+      <h1 className="text-2xl font-semibold">Page not found</h1>
+      <p className="text-fd-muted-foreground">
+        The academy page you're looking for doesn't exist or has moved.
+      </p>
+      <Link href="/academy" className="text-fd-primary hover:underline">
+        Back to Academy
+      </Link>
+    </div>
+  );
+}

app/academy/[[...slug]]/page.tsx

@@ -0,0 +1,71 @@
+import type { Metadata } from "next";
+import { academySource } from "@/lib/source";
+import { buildOgImageUrl, buildPageUrl } from "@/lib/og-url";
+import { DocsPage } from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { DocsContributors } from "@/components/DocsContributors";
+import { DocBodyChrome } from "@/components/DocBodyChrome";
+import { getMDXComponents } from "@/mdx-components";
+import type { ComponentType } from "react";
+
+type PageProps = {
+  params: Promise<{ slug?: string[] }>;
+};
+
+export default async function AcademyPage(props: PageProps) {
+  const params = await props.params;
+  const slug = params.slug ?? [];
+  const page = academySource.getPage(slug);
+
+  if (!page) notFound();
+
+  const { toc } = page.data;
+  const MDX = page.data.body as ComponentType<{ components?: Record<string, ComponentType> }>;
+
+  return (
+    <DocsPage
+      toc={toc}
+      breadcrumb={{ includePage: true, includeRoot: true }}
+      tableOfContent={{ footer: <DocsContributors pageTitle={page.data.title} /> }}
+    >
+      <DocBodyChrome>
+        <MDX components={getMDXComponents()} />
+      </DocBodyChrome>
+    </DocsPage>
+  );
+}
+
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+  const params = await props.params;
+  const slug = params.slug ?? [];
+  const page = academySource.getPage(slug);
+  if (!page)
+    return {
+      title: "Not Found",
+    };
+  const pageData = page.data as typeof page.data & {
+    canonical?: string | null;
+    seoTitle?: string | null;
+    ogImage?: string | null;
+  };
+  const pagePath = `/academy${slug.length > 0 ? `/${slug.join("/")}` : ""}`;
+  const canonicalUrl = pageData.canonical ?? buildPageUrl(pagePath);
+  const seoTitle = pageData.seoTitle || page.data.title;
+  const ogImage = buildOgImageUrl({
+    title: seoTitle,
+    description: page.data.description,
+    section: "Academy",
+    staticOgImage: pageData.ogImage,
+  });
+  return {
+    title: seoTitle,
+    description: page.data.description ?? undefined,
+    alternates: { canonical: canonicalUrl },
+    openGraph: { images: [{ url: ogImage }], url: canonicalUrl },
+    twitter: { images: [{ url: ogImage }] },
+  };
+}
+
+export function generateStaticParams() {
+  return academySource.generateParams();
+}

app/academy/layout.tsx

@@ -0,0 +1,10 @@
+import { academySource, getPageTreeWithShortTitles } from "@/lib/source";
+import { SharedDocsLayout } from "@/app/docs/SharedDocsLayout";
+
+export default function AcademyLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <SharedDocsLayout tree={getPageTreeWithShortTitles(academySource, "/academy")}>{children}</SharedDocsLayout>;
+}

components/NavLinks.tsx

@@ -22,6 +22,7 @@ const productLinks = [
 ];
 
 const resourcesLinks = [
+  { name: "Academy", href: "/academy" },
   { name: "Blog", href: "/blog" },
   { name: "Changelog", href: "/changelog" },
   { name: "Roadmap", href: "/docs/roadmap" },