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
2025-05-30 16:55:36 +03:00
parent 490bd7647f
commit 009d00f27d
293 changed files with 1975 additions and 506 deletions
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,14 @@
+---
+products:
+  - customer
+  - order
+  - payment
+  - product
+  - promotion
+  - region
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,5 +1,7 @@
 ---
 sidebar_label: "Promotions Adjustments"
+products:
+  - promotion
 ---

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - tax
+---
+
 export const metadata = {
  title: `Tax Lines in Cart Module`,
 }
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - payment
+  - cart
+  - order
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - order
+  - pricing
+  - product
+  - stock location
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -4,6 +4,9 @@ tags:
  - product
  - stock location
  - concept
+products:
+  - product
+  - stock location
 ---

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,15 @@
+---
+products:
+  - customer
+  - cart
+  - fulfillment
+  - payment
+  - product
+  - promotion
+  - region
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,5 +1,7 @@
 ---
 sidebar_label: "Promotions Adjustments"
+products:
+  - promotion
 ---

 export const metadata = {
@@ -1,5 +1,7 @@
 ---
 sidebar_label: "Tax Lines"
+products:
+  - tax
 ---

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - cart
+  - customer
+  - order
+  - region
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,9 @@
+---
+products:
+  - fulfillment
+  - product
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,13 @@
+---
+products:
+  - cart
+  - fulfillment
+  - inventory
+  - order
+  - pricing
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -3,6 +3,8 @@ sidebar_label: "Product Shipping Requirement"
 tags:
    - concept
    - fulfillment
+products:
+  - fulfillment
 ---

 import { Table } from "docs-ui"
@@ -5,6 +5,10 @@ tags:
    - inventory
    - stock location
    - sales channel
+products:
+  - inventory
+  - stock location
+  - sales channel
 ---

 export const metadata = {
@@ -1,3 +1,9 @@
+---
+products:
+  - cart
+  - order
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - cart
+  - order
+  - payment
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,12 @@
+---
+products:
+  - api key
+  - cart
+  - order
+  - product
+  - stock location
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - api key
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - fulfillment
+  - inventory
+  - sales channel
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - currency
+---
+
 import { CodeTabs, CodeTab, Table } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { CodeTabs, CodeTab } from "docs-ui"

 export const metadata = {
@@ -5,6 +5,11 @@ tags:
    - pricing
    - server
    - tutorial
+    - product
+products:
+  - cart
+  - pricing
+  - product
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -5,6 +5,10 @@ tags:
    - order
    - server
    - tutorial
+products:
+  - cart
+  - order
+  - customer
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -6,6 +6,8 @@ tags:
    - server
    - tutorial
    - notification
+products:
+  - cart
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -11,6 +11,11 @@ tags:
      label: "Implement Loyalty Points"
    - name: promotion
      label: "Implement Loyalty Points"
+products:
+  - cart
+  - order
+  - customer
+  - promotion
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -7,6 +7,9 @@ tags:
      label: "Implement Phone Authentication"
    - server
    - tutorial
+products:
+  - customer
+  - auth
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -5,6 +5,9 @@ tags:
      label: "Implement Product Reviews"
    - server
    - tutorial
+products:
+  - product
+  - customer
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -5,6 +5,8 @@ tags:
      label: "Implement Re-Order"
    - server
    - tutorial
+products:
+  - order
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -11,6 +11,8 @@ keywords:
    - payment provider
    - checkout
    - nextjs
+products:
+  - payment
 ---

 import { Github, PlaySolid, EllipsisHorizontal } from "@medusajs/icons"
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
 import { Github, PlaySolid } from "@medusajs/icons"

@@ -5,6 +5,8 @@ tags:
    - name: product
      label: "Localization with Contentful"
    - tutorial
+products:
+  - product
 ---

 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Card, Prerequisites, WorkflowDiagram } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,8 @@
+---
+products:
+  - order
+---
+
 import { Card, Prerequisites, Details } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Card, Prerequisites, Details } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -4,6 +4,8 @@ tags:
    - server
    - tutorial
    - analytics
+products:
+  - order
 ---

 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
@@ -1,3 +1,10 @@
+---
+products:
+  - fulfillment
+  - cart
+  - order
+---
+
 import { Card, Prerequisites, Details } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { Table, Prerequisites, ChildDocs } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,7 @@
+---
+generate_toc: true
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -2,6 +2,8 @@
 tags:
  - storefront
  - payment
+products:
+  - payment
 ---

 import { Prerequisites } from "docs-ui"
@@ -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.

@@ -4,6 +4,10 @@ tags:
    - product
    - tutorial
    - server
+products:
+  - product
+  - customer
+  - sales channel
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -1,3 +1,11 @@
+---
+products:
+  - product
+  - customer
+  - sales channel
+  - pricing
+---
+
 import { AcademicCapSolid, UsersSolid } from "@medusajs/icons"

 export const metadata = {
@@ -7,6 +7,9 @@ tags:
    - tutorial
    - name: product
      label: "Implement Bundled Products"
+products:
+  - cart
+  - product
 ---

 import { Github, PlaySolid } from "@medusajs/icons"
@@ -1,5 +1,10 @@
+---
+products:
+  - product
+  - cart
+---
+
 import { AcademicCapSolid, PuzzleSolid } from "@medusajs/icons";
-import { ChildDocs } from "docs-ui"

 export const metadata = {
  title: `Bundled Products Recipe`,
@@ -1,3 +1,10 @@
+---
+products:
+  - product
+  - customer
+  - order
+---
+
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,10 @@
+---
+products:
+  - product
+  - sales channel
+  - inventory
+---
+
 import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"
 import { Github } from "@medusajs/icons"

@@ -1,3 +1,11 @@
+---
+products:
+  - product
+  - fulfillment
+  - cart
+  - order
+---
+
 import { Github, PlaySolid } from "@medusajs/icons"
 import { Prerequisites } from "docs-ui"

@@ -1,5 +1,10 @@
+---
+products:
+  - product
+  - order
+  - fulfillment
+---
 import { AcademicCapSolid, BoltSolid, PuzzleSolid } from "@medusajs/icons"
-import { ChildDocs } from "docs-ui"

 export const metadata = {
  title: `Digital Products Recipe`,
@@ -1,3 +1,8 @@
+---
+products:
+  - product
+---
+
 import { Prerequisites, WorkflowDiagram } from "docs-ui"

 export const metadata = {
@@ -1,3 +1,12 @@
+---
+products:
+  - product
+  - pricing
+  - cart
+  - order
+  - inventory
+---
+
 import { Prerequisites } from "docs-ui"

 export const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1740556002/Medusa%20Resources/erp-guide_sucmxz.jpg"
@@ -1,3 +1,12 @@
+---
+products:
+  - fulfillment
+  - order
+  - product
+  - cart
+  - auth
+---
+
 import { WorkflowDiagram, Prerequisites } from "docs-ui"
 import { Github, PlaySolid } from "@medusajs/icons"

@@ -1,3 +1,9 @@
+---
+products:
+  - product
+  - order
+---
+
 import { Github, PlaySolid } from "@medusajs/icons"
 import { Prerequisites, WorkflowDiagram } from "docs-ui"

@@ -1,3 +1,9 @@
+---
+products:
+  - product
+  - order
+---
+
 import { ChildDocs } from "docs-ui"
 import { AcademicCapSolid } from "@medusajs/icons"

@@ -1,3 +1,13 @@
+---
+products:
+  - region
+  - currency
+  - tax
+  - payment
+  - fulfillment
+  - pricing
+---
+
 import { AcademicCapSolid, UsersSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,8 @@
+---
+products:
+  - sales channel
+---
+
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - order
+  - fulfillment
+  - inventory
+  - sales channel
+---
+
 import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"
 import { LearningPath } from "docs-ui"

@@ -1,3 +1,9 @@
+---
+products:
+  - product
+  - order
+---
+
 import { AcademicCapSolid, NextJs } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,12 @@
+---
+products:
+  - product
+  - inventory
+  - order
+  - sales channel
+  - payment
+---
+
 import { AcademicCapSolid } from "@medusajs/icons"

 export const metadata = {
@@ -1,3 +1,11 @@
+---
+products:
+  - order
+  - payment
+  - cart
+  - customer
+---
+
 import { Github, PlaySolid, EllipsisHorizontal } from "@medusajs/icons"
 import { Prerequisites, InlineIcon } from "docs-ui"

@@ -1,3 +1,9 @@
+---
+products:
+  - order
+  - payment
+---
+
 import { AcademicCapSolid, Github } from "@medusajs/icons"

 export const metadata = {
@@ -8,12 +8,14 @@ import {
  localLinksRehypePlugin,
  workflowDiagramLinkFixerPlugin,
  prerequisitesLinkFixerPlugin,
+  recmaInjectMdxDataPlugin,
 } from "remark-rehype-plugins"
 import MDXComponents from "@/components/MDXComponents"
 import mdxOptions from "../../../mdx-options.mjs"
 import { filesMap } from "../../../generated/files-map.mjs"
 import { Metadata } from "next"
-import { cache } from "react"
+import { cache, Suspense } from "react"
+import { Loading } from "docs-ui"

 type PageProps = {
  params: Promise<{
@@ -37,40 +39,50 @@ export default async function ReferencesPage(props: PageProps) {
  }

  return (
-    <MDXRemote
-      source={fileData.content}
-      components={MDXComponents}
-      options={{
-        mdxOptions: {
-          rehypePlugins: [
-            ...mdxOptions.options.rehypePlugins,
-            [
-              typeListLinkFixerPlugin,
-              {
-                ...pluginOptions,
-                checkLinksType: "md",
-              },
-            ],
-            [
-              workflowDiagramLinkFixerPlugin,
-              {
-                ...pluginOptions,
-                checkLinksType: "value",
-              },
-            ],
-            [
-              prerequisitesLinkFixerPlugin,
-              {
-                ...pluginOptions,
-                checkLinksType: "value",
-              },
-            ],
-            [localLinksRehypePlugin, pluginOptions],
-          ],
-          remarkPlugins: mdxOptions.options.remarkPlugins,
-        },
-      }}
-    />
+    <Suspense fallback={<Loading />}>
+      <div className="animate animate-fadeIn">
+        <MDXRemote
+          source={fileData.content}
+          components={MDXComponents}
+          options={{
+            mdxOptions: {
+              rehypePlugins: [
+                ...mdxOptions.options.rehypePlugins,
+                [
+                  typeListLinkFixerPlugin,
+                  {
+                    ...pluginOptions,
+                    checkLinksType: "md",
+                  },
+                ],
+                [
+                  workflowDiagramLinkFixerPlugin,
+                  {
+                    ...pluginOptions,
+                    checkLinksType: "value",
+                  },
+                ],
+                [
+                  prerequisitesLinkFixerPlugin,
+                  {
+                    ...pluginOptions,
+                    checkLinksType: "value",
+                  },
+                ],
+                [localLinksRehypePlugin, pluginOptions],
+              ],
+              remarkPlugins: [...mdxOptions.options.remarkPlugins],
+              recmaPlugins: [
+                [
+                  recmaInjectMdxDataPlugin,
+                  { isRemoteMdx: true, mode: process.env.NODE_ENV },
+                ],
+              ],
+            },
+          }}
+        />
+      </div>
+    </Suspense>
  )
 }

@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -1,3 +1,8 @@
+---
+products:
+  - cart
+---
+
 import { ChildDocs } from "docs-ui"

 export const metadata = {
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab, Table } from "docs-ui"
@@ -2,6 +2,9 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
+  - customer
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -3,6 +3,9 @@ sidebar_label: "Checkout Step 2: Set Address"
 tags:
  - cart
  - storefront
+products:
+  - cart
+  - customer
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -4,6 +4,10 @@ tags:
  - order
  - payment
  - storefront
+products:
+  - cart
+  - order
+  - payment
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - cart
  - storefront
+products:
+  - cart
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - order
  - storefront
+products:
+  - order
 ---

 import { CodeTabs, CodeTab, Table } from "docs-ui"
@@ -1,3 +1,12 @@
+---
+products:
+  - cart
+  - customer
+  - payment
+  - fulfillment
+  - order
+---
+
 export const metadata = {
  title: `Checkout in Storefront`,
 }
@@ -3,6 +3,9 @@ tags:
  - cart
  - storefront
  - payment
+products:
+  - cart
+  - payment
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -4,6 +4,9 @@ tags:
  - storefront
  - stripe
  - payment
+products:
+  - cart
+  - payment
 ---

 import { CodeTabs, CodeTab, Prerequisites } from "docs-ui"
@@ -3,6 +3,9 @@ tags:
  - cart
  - storefront
  - fulfillment
+products:
+  - cart
+  - fulfillment
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - customer
  - storefront
+products:
+  - customer
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -2,6 +2,8 @@
 tags:
  - customer
  - storefront
+products:
+  - customer
 ---

 export const metadata = {
@@ -3,6 +3,9 @@ tags:
  - customer
  - storefront
  - auth
+products:
+  - customer
+  - auth
 ---

 import { CodeTabs, CodeTab } from "docs-ui"
@@ -3,6 +3,9 @@ tags:
  - customer
  - storefront
  - auth
+products:
+  - customer
+  - auth
 ---

 import { CodeTabs, CodeTab, Table } from "docs-ui"
--- a/Show More
+++ b/Show More