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
1 parent 490bd7647f
commit 009d00f27d
@@ -58,9 +58,9 @@ export default function RootLayout({
      gaId={process.env.NEXT_PUBLIC_GA_ID}
    >
      <WideLayout
        showToc={false}
        showBreadcrumbs={false}
        ProvidersComponent={Providers}
        showContentMenu={false}
      >
        {children}
      </WideLayout>
@@ -17,7 +17,7 @@ import ClientLibraries from "./client-libraries.mdx"
 <DividedMarkdownContent>
-<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction" hideLlmDropdown>Medusa V2 Admin API Reference</H1>
+<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction">Medusa V2 Admin API Reference</H1>
 This API reference includes Medusa v2's Admin APIs, which are REST APIs exposed by the Medusa application. They are used to perform admin functionalities or create an admin dashboard to access and manipulate your commerce store's data.
@@ -17,7 +17,7 @@ import ClientLibraries from "./client-libraries.mdx"
 <DividedMarkdownContent>
-<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction" hideLlmDropdown>Medusa V2 Store API Reference</H1>
+<H1 className={"!h2-docs scroll-m-[184px] lg:scroll-m-[264px]"} id="introduction">Medusa V2 Store API Reference</H1>
 This API reference includes Medusa v2's Store APIs, which are REST APIs exposed by the Medusa application. They are used to create a storefront for your commerce store, such as a webshop or a commerce mobile app.
@@ -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.
@@ -1,3 +1,8 @@
 ---
 products:
  - product
 ---
 import { Prerequisites } from "docs-ui"
 export const metadata = {
@@ -1,3 +1,8 @@
 ---
 products:
  - product
 ---
 import { Prerequisites } from "docs-ui"
 export const metadata = {
@@ -1,3 +1,8 @@
 ---
 products:
  - product
 ---
 import { Prerequisites } from "docs-ui"
 export const metadata = {
@@ -1,3 +1,8 @@
 ---
 products:
  - product
 ---
 import { Prerequisites } from "docs-ui"
 export const metadata = {
@@ -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,
 }
@@ -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"),
    },
  },
 }
@@ -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,
  },
 })
@@ -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": {
@@ -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
+    <Suspense fallback={<Loading />}>
-      source={fileData.content}
+      <div className="animate animate-fadeIn">
-      components={MDXComponents}
+        <MDXRemote
-      options={{
+          source={fileData.content}
-        mdxOptions: {
+          components={MDXComponents}
-          rehypePlugins: [
+          options={{
-            ...mdxOptions.options.rehypePlugins,
+            mdxOptions: {
-            [
+              rehypePlugins: [
-              typeListLinkFixerPlugin,
+                ...mdxOptions.options.rehypePlugins,
-              {
+                [
-                ...pluginOptions,
+                  typeListLinkFixerPlugin,
-                checkLinksType: "md",
+                  {
-              },
+                    ...pluginOptions,
-            ],
+                    checkLinksType: "md",
-            [
+                  },
-              workflowDiagramLinkFixerPlugin,
+                ],
-              {
+                [
-                ...pluginOptions,
+                  workflowDiagramLinkFixerPlugin,
-                checkLinksType: "value",
+                  {
-              },
+                    ...pluginOptions,
-            ],
+                    checkLinksType: "value",
-            [
+                  },
-              prerequisitesLinkFixerPlugin,
+                ],
-              {
+                [
-                ...pluginOptions,
+                  prerequisitesLinkFixerPlugin,
-                checkLinksType: "value",
+                  {
-              },
+                    ...pluginOptions,
-            ],
+                    checkLinksType: "value",
-            [localLinksRehypePlugin, pluginOptions],
+                  },
-          ],
+                ],
-          remarkPlugins: mdxOptions.options.remarkPlugins,
+                [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"