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/book/app/_not-found.mdx

@@ -1,3 +1,7 @@
+---
+hide_content_menu: true
+---
+
 import { CardList, H1 } from "docs-ui"
 import {
   BookOpen,
@@ -10,7 +14,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/book/app/learn/customization/customize-admin/widget/page.mdx

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"
 
 export const metadata = {

www/apps/book/app/learn/customization/extend-features/define-link/page.mdx

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"
 
 export const metadata = {

www/apps/book/app/learn/customization/extend-features/extend-create-product/page.mdx

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"
 
 export const metadata = {

www/apps/book/app/learn/customization/extend-features/query-linked-records/page.mdx

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites } from "docs-ui"
 
 export const metadata = {

www/apps/book/components/MDXComponents/index.tsx

@@ -1,10 +1,9 @@
 import type { MDXComponents as MDXComponentsType } from "mdx/types"
-import { Link, MDXComponents as UiMdxComponents } from "docs-ui"
+import { MDXComponents as UiMdxComponents } from "docs-ui"
 import Feedback from "../Feedback"
 
 const MDXComponents: MDXComponentsType = {
   ...UiMdxComponents,
-  a: Link,
   Feedback,
 }
 

www/apps/book/config/index.ts

@@ -1,6 +1,7 @@
 import { DocsConfig, Sidebar } from "types"
 import { globalConfig } from "docs-ui"
 import { generatedSidebars } from "../generated/sidebar.mjs"
+import { basePathUrl } from "../utils/base-path-url"
 
 const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
@@ -23,4 +24,11 @@ export const config: DocsConfig = {
       },
     ],
   },
+  version: {
+    ...globalConfig.version,
+    bannerImage: {
+      light: basePathUrl("/images/get-started-card.png"),
+      dark: basePathUrl("/images/get-started-card-dark.png"),
+    },
+  },
 }

www/apps/book/next.config.mjs

@@ -7,11 +7,15 @@ import {
   cloudinaryImgRehypePlugin,
   pageNumberRehypePlugin,
   crossProjectLinksPlugin,
+  recmaInjectMdxDataPlugin,
+  remarkAttachFrontmatterDataPlugin,
 } from "remark-rehype-plugins"
 import path from "path"
 import redirects from "./utils/redirects.mjs"
 import { generatedSidebars } from "./generated/sidebar.mjs"
 import { catchBadRedirects } from "build-scripts"
+import remarkFrontmatter from "remark-frontmatter"
+import withExtractedTableOfContents from "@stefanprobst/rehype-extract-toc"
 
 const withMDX = mdx({
   extension: /\.mdx?$/,
@@ -90,7 +94,10 @@ const withMDX = mdx({
           sidebar: generatedSidebars[0].items,
         },
       ],
+      [withExtractedTableOfContents],
     ],
+    remarkPlugins: [[remarkFrontmatter], [remarkAttachFrontmatterDataPlugin]],
+    recmaPlugins: [[recmaInjectMdxDataPlugin]],
     jsx: true,
   },
 })

www/apps/book/package.json

@@ -18,6 +18,7 @@
     "@mdx-js/react": "^3.1.0",
     "@medusajs/icons": "2.8.3",
     "@next/mdx": "15.3.1",
+    "@stefanprobst/rehype-extract-toc": "^3.0.0",
     "clsx": "^2.1.0",
     "docs-ui": "*",
     "docs-utils": "*",
@@ -26,6 +27,7 @@
     "react-dom": "rc",
     "rehype-mdx-code-props": "^2.0.0",
     "rehype-slug": "^6.0.0",
+    "remark-frontmatter": "^5.0.0",
     "remark-rehype-plugins": "*"
   },
   "devDependencies": {