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
This commit is contained in:
Shahed Nasser
2025-05-30 16:55:36 +03:00
committed by GitHub
parent 490bd7647f
commit 009d00f27d
293 changed files with 1975 additions and 506 deletions

View File

@@ -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>

View File

@@ -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.

View File

@@ -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.

View File

@@ -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.

View File

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

View File

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

View File

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

View File

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

View File

@@ -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,
}

View File

@@ -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"),
},
},
}

View File

@@ -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,
},
})

View File

@@ -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": {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,3 +1,8 @@
---
products:
- tax
---
export const metadata = {
title: `Tax Lines in Cart Module`,
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -3,6 +3,8 @@ sidebar_label: "Product Shipping Requirement"
tags:
- concept
- fulfillment
products:
- fulfillment
---
import { Table } from "docs-ui"

View File

@@ -5,6 +5,10 @@ tags:
- inventory
- stock location
- sales channel
products:
- inventory
- stock location
- sales channel
---
export const metadata = {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -5,6 +5,11 @@ tags:
- pricing
- server
- tutorial
- product
products:
- cart
- pricing
- product
---
import { Github, PlaySolid } from "@medusajs/icons"

View File

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

View File

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

View File

@@ -6,6 +6,8 @@ tags:
- server
- tutorial
- notification
products:
- cart
---
import { Github, PlaySolid } from "@medusajs/icons"

View File

@@ -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"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -5,6 +5,8 @@ tags:
- name: product
label: "Localization with Contentful"
- tutorial
products:
- product
---
import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"

View File

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

View File

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

View File

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

View File

@@ -4,6 +4,8 @@ tags:
- server
- tutorial
- analytics
products:
- order
---
import { Card, Prerequisites, Details, WorkflowDiagram } from "docs-ui"

View File

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

View File

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

View File

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

View File

@@ -2,6 +2,8 @@
tags:
- storefront
- payment
products:
- payment
---
import { Prerequisites } from "docs-ui"

View File

@@ -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.

View File

@@ -4,6 +4,10 @@ tags:
- product
- tutorial
- server
products:
- product
- customer
- sales channel
---
import { Github, PlaySolid } from "@medusajs/icons"

View File

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

View File

@@ -7,6 +7,9 @@ tags:
- tutorial
- name: product
label: "Implement Bundled Products"
products:
- cart
- product
---
import { Github, PlaySolid } from "@medusajs/icons"

View File

@@ -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`,

View File

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

View File

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

View File

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

View File

@@ -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`,

View File

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

View File

@@ -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"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>
)
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More