docs: redesign table of content (#12647)

* implement toc

* added to projects

* fixes and adapt for references

* added product frontmatter

* remove action menu from 404 pages

www/apps/ui/src/app/layout.tsx

@@ -4,7 +4,7 @@ import { Providers } from "@/providers"
 
 import { siteConfig } from "@/config/site"
 import "../styles/globals.css"
-import { BareboneLayout, TightLayout } from "docs-ui"
+import { BareboneLayout, InjectedMDXData, TightLayout } from "docs-ui"
 import { Inter, Roboto_Mono } from "next/font/google"
 import clsx from "clsx"
 
@@ -60,7 +60,19 @@ export default function RootLayout({
       htmlClassName={clsx(inter.variable, robotoMono.variable)}
       gaId={process.env.NEXT_PUBLIC_GA_ID}
     >
-      <TightLayout ProvidersComponent={Providers}>{children}</TightLayout>
+      <TightLayout ProvidersComponent={Providers}>
+        {children}
+        {/* 
+          Since we use contentlayer in this project, we can't use a Recma plugin.
+          This is a workaround until we move from contentlayer.
+        */}
+        <InjectedMDXData
+          frontmatter={{
+            generate_toc: true,
+          }}
+          toc={[]}
+        />
+      </TightLayout>
     </BareboneLayout>
   )
 }

www/apps/ui/src/app/not-found.mdx

@@ -10,7 +10,7 @@ export const metadata = {
   title: `Page Not Found`,
 }
 
-<H1 hideLlmDropdown>{metadata.title}</H1>
+# {metadata.title}
 
 The page you were looking for isn't available.
 

www/apps/ui/src/app/not-found.tsx

@@ -20,7 +20,7 @@ export default function NotFound() {
   return (
     <div>
       {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
-      <H1 hideLlmDropdown>Page Not Found</H1>
+      <H1>Page Not Found</H1>
       {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <P>The page you were looking for isn&apos;t available.</P>
       {/* @ts-expect-error React v19 doesn't recognize these as elements. */}