diff --git a/docs/content/admin/quickstart.md b/docs/content/admin/quickstart.md
index b1159cc9b2..472fac07ef 100644
--- a/docs/content/admin/quickstart.md
+++ b/docs/content/admin/quickstart.md
@@ -16,7 +16,9 @@ If you’re not very familiar with Medusa’s architecture, you can learn more a
Instead of manually following this guide to install then later deploy the Medusa Admin, you can deploy the Medusa Admin to Netlify with this button:
-[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin)
+
+
+
## Install the Admin
diff --git a/docs/content/advanced/admin/import-prices.mdx b/docs/content/advanced/admin/import-prices.mdx
index f5c787ccee..0d3a8696ab 100644
--- a/docs/content/advanced/admin/import-prices.mdx
+++ b/docs/content/advanced/admin/import-prices.mdx
@@ -60,7 +60,7 @@ The first step is to upload the CSV file to import prices from.
You can do that by sending the following request to the [Upload Files](https://docs.medusajs.com/api/admin/#tag/Upload/operation/PostUploads) endpoint:
-
+
```jsx
@@ -111,7 +111,7 @@ To start a new price import, you must create a batch job.
You can do that by sending the following request to the [Create a Batch Job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) endpoint:
-
+
```jsx
@@ -196,7 +196,7 @@ After creating the batch job, it will be pre-processed. At this point, the CSV f
You can retrieve all the details of the batch job, including its status and the brief statistics related to the prices by sending the following request:
-
+
```jsx
@@ -255,7 +255,7 @@ A batch job can be confirmed only once the batch job has the status `pre_process
To confirm a batch job send the following request:
-
+
```jsx
diff --git a/docs/content/advanced/admin/import-products.mdx b/docs/content/advanced/admin/import-products.mdx
index 52e66d12d9..9a52f6e698 100644
--- a/docs/content/advanced/admin/import-products.mdx
+++ b/docs/content/advanced/admin/import-products.mdx
@@ -54,7 +54,7 @@ The first step is to upload the CSV file that you want to import products.
You can do that by sending the following request to the [Upload Files](https://docs.medusajs.com/api/admin/#tag/Upload/operation/PostUploads) endpoint:
-
+
```jsx
@@ -105,7 +105,7 @@ To start a new product import, you must create a batch job.
You can do that by sending the following request to the [Create a Batch Job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobs) endpoint:
-
+
```jsx
@@ -184,7 +184,7 @@ After creating the batch job, it will be pre-processed. At this point, the CSV f
You can retrieve all the details of the batch job, including its status and the brief statistics related to the products by sending the following request:
-
+
```jsx
@@ -243,7 +243,7 @@ A batch job can be confirmed only once the batch job has the status `pre_process
To confirm a batch job send the following request:
-
+
```jsx
diff --git a/docs/content/advanced/admin/use-customergroups-api.mdx b/docs/content/advanced/admin/use-customergroups-api.mdx
index cfe3a0b1e8..ca44ec36df 100644
--- a/docs/content/advanced/admin/use-customergroups-api.mdx
+++ b/docs/content/advanced/admin/use-customergroups-api.mdx
@@ -39,7 +39,7 @@ You can learn more about [authenticating as an admin user in the API reference](
You can create a customer group by sending a request to the Create Customer Group endpoint:
-
+
```jsx
@@ -93,7 +93,7 @@ This request requires the `name` parameter and optionally accepts the `metadata`
You can get a list of all customer groups by sending a request to the List Customer Groups endpoint:
-
+
```jsx
@@ -135,7 +135,7 @@ You can also pass filters and other selection query parameters to the request. C
You can retrieve a single customer group by sending a request to the Get a Customer Group endpoint:
-
+
```jsx
@@ -175,7 +175,7 @@ This request accepts the ID of the customer group to retrieve as a path paramete
You can update a customer group’s data by sending a request to the Update Customer Group endpoint:
-
+
```jsx
@@ -235,7 +235,7 @@ This request accepts the ID of the customer group as a path parameter, and optio
You can delete a customer group by sending a request to the Delete a Customer Group endpoint:
-
+
```jsx
@@ -279,7 +279,7 @@ This request accepts the ID of the customer group to delete as a path parameter.
You can add a customer to a group by sending a request to the Customer Group’s Add Customer endpoint:
-
+
```jsx
@@ -343,7 +343,7 @@ This request accepts the ID of the customer group as a path parameter. In its bo
You can retrieve a list of all customers in a customer group using the List Customers endpoint:
-
+
```jsx
@@ -387,7 +387,7 @@ Removing customers from a group does not remove them entirely. They’ll still b
You can remove customers from a customer group by sending a request to the Remove Customers endpoint:
-
+
```jsx
diff --git a/docs/content/advanced/backend/batch-jobs/create.md b/docs/content/advanced/backend/batch-jobs/create.md
index 27eef3dd0a..87a2f31328 100644
--- a/docs/content/advanced/backend/batch-jobs/create.md
+++ b/docs/content/advanced/backend/batch-jobs/create.md
@@ -254,7 +254,7 @@ The first step is to create a batch job using the [Create Batch Job endpoint](ht
For example, this creates a batch job of the type `publish-products`:
-
+
```jsx
@@ -314,7 +314,7 @@ Make sure to replace `` with the server URL where applicable.
You can retrieve the batch job afterward to get its status and view details about the process in the `result` property:
-
+
```jsx
@@ -367,7 +367,7 @@ Based on the batch job strategy implemented in this documentation, the `result`
To process the batch job, send a request to [confirm the batch job](https://docs.medusajs.com/api/admin/#tag/Batch-Job/operation/PostBatchJobsBatchJobConfirmProcessing):
-
+
```jsx
diff --git a/docs/content/advanced/backend/price-lists/use-api.mdx b/docs/content/advanced/backend/price-lists/use-api.mdx
index 3c311fadf2..7cbf66e19c 100644
--- a/docs/content/advanced/backend/price-lists/use-api.mdx
+++ b/docs/content/advanced/backend/price-lists/use-api.mdx
@@ -63,7 +63,7 @@ You can learn more about what the conditions you can apply on a price list and i
For example, sending the following request creates a price list with two prices: one that is applied when the maximum quantity of the product variant in the cart is 3; another is applied when the minimum quantity of the same variant in the cart is 4:
-
+
```jsx
@@ -172,7 +172,7 @@ You can check the full list of request body parameters in the [API reference](ht
You can retrieve all of a price list’s details using the Get a Price List endpoint:
-
+
```jsx
@@ -212,7 +212,7 @@ After creating a price list, you can update all of its fields including its stat
For example, by sending the following request the end date of the price list will be updated:
-
+
```jsx
@@ -274,7 +274,7 @@ You can also set the `override` request body parameter to `true` to replace the
For example, sending the following request adds a new price to the price list:
-
+
```jsx
@@ -346,7 +346,7 @@ For a full list of request body parameters, check out the [API reference](https:
You can delete all the prices of a product’s variants using the [Delete Product Prices](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceListProductsProductPrices) endpoint:
-
+
```jsx
@@ -386,7 +386,7 @@ This request returns the IDs of the deleted prices.
You can delete all the prices of a variant using the [Delete Variant Prices](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceListVariantsVariantPrices) endpoint:
-
+
```jsx
@@ -428,7 +428,7 @@ This request returns the IDs of the deleted prices.
You can delete a price list, and subsequently all prices defined in it, using the [Delete Price List](https://docs.medusajs.com/api/admin/#tag/Price-List/operation/DeletePriceListsPriceList) endpoint:
-
+
```jsx
diff --git a/docs/content/advanced/backend/sales-channels/manage-admin.mdx b/docs/content/advanced/backend/sales-channels/manage-admin.mdx
index 3f7ee2906e..7fa62dd578 100644
--- a/docs/content/advanced/backend/sales-channels/manage-admin.mdx
+++ b/docs/content/advanced/backend/sales-channels/manage-admin.mdx
@@ -52,7 +52,7 @@ You can learn more about [authenticating as an admin user in the API reference](
You can create a sales channel by sending a request to the Create a Sales Channel endpoint:
-
+
```jsx
@@ -111,7 +111,7 @@ It returns the created sales channel.
You can list all sales channels by sending a request to the List Sales Channels endpoint:
-
+
```jsx
@@ -151,7 +151,7 @@ This request returns an array of all sales channels in your store. You can also
You can retrieve a sales channel’s details by its ID using the Get Sales Channel endpoint:
-
+
```jsx
@@ -191,7 +191,7 @@ This request returns the sales channel with the specified ID.
You can update a Sales Channel’s details and attributes by sending a request to the Update Sales Channel endpoint:
-
+
```jsx
@@ -249,7 +249,7 @@ You can check out [the API Reference for a full list of body parameters](https:/
You can delete a sales channel by sending a request to the Delete Sales Channel endpoint with the ID of the sales channel to delete:
-
+
```jsx
@@ -293,7 +293,7 @@ The ID of the deleted sales channel is returned in the response.
To add a product to a sales channel, send a request to the Sales Channel’s Add Products endpoint:
-
+
```jsx
@@ -359,7 +359,7 @@ This request returns the sales channel.
You can list the products available in a sales channel by sending a request to the List Products endpoint and passing the `sales_channel_id` query parameter to filter by a specific sales channel:
-
+
```jsx
@@ -407,7 +407,7 @@ Deleting a product from a sales channel doesn't delete it completely. It only ma
You can delete a product from a sales channel by sending a request to the Sales Channel’s Delete Products endpoint:
-
+
```jsx
@@ -475,7 +475,7 @@ This request returns the sales channel.
You can filter orders by a specific sales channel by sending a request to the List Orders endpoint and passing the `sales_channel_id` query parameter to filter by a specific sales channel:
-
+
```jsx
diff --git a/docs/content/advanced/backend/upgrade-guides/1-3-0.md b/docs/content/advanced/backend/upgrade-guides/1-3-0.md
index 74148cfeda..a4710f6264 100644
--- a/docs/content/advanced/backend/upgrade-guides/1-3-0.md
+++ b/docs/content/advanced/backend/upgrade-guides/1-3-0.md
@@ -1,3 +1,7 @@
+---
+description: 'Actions Required for v.1.3.0'
+---
+
# v1.3.0
Version 1.3.0 of Medusa introduces new features including the addition of Line Item Adjustments and a more advanced Promotions API, as well as a change in loading environment variables into your Medusa server. The changes do not affect the public APIs and require only running necessary data migrations.
diff --git a/docs/content/advanced/backend/upgrade-guides/1-3-6.md b/docs/content/advanced/backend/upgrade-guides/1-3-6.md
index 308d091fe7..c0a2bd0def 100644
--- a/docs/content/advanced/backend/upgrade-guides/1-3-6.md
+++ b/docs/content/advanced/backend/upgrade-guides/1-3-6.md
@@ -1,3 +1,7 @@
+---
+description: 'Actions Required for v.1.3.0'
+---
+
# v1.3.6
Following the addition of feature flags in version v1.3.3 and the addition of the Sales Channels API in v1.3.5, v1.3.6 introduces a data migration script that moves all products into the Default Sales Channel.
diff --git a/docs/content/advanced/backend/upgrade-guides/1-3-8.md b/docs/content/advanced/backend/upgrade-guides/1-3-8.md
index d38fab4f0e..95a151edfe 100644
--- a/docs/content/advanced/backend/upgrade-guides/1-3-8.md
+++ b/docs/content/advanced/backend/upgrade-guides/1-3-8.md
@@ -1,3 +1,7 @@
+---
+description: 'Actions Required for v.1.3.0'
+---
+
# v1.3.8
Updating your medusa server to version `1.3.8` may cause issues when using NPM. Please refer to this guide for more details on how to resolve it.
diff --git a/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx b/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
index 95a73bf49b..705b8ce047 100644
--- a/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
+++ b/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
@@ -45,7 +45,7 @@ In this step, the customer generally enters their shipping info, then chooses th
After the customer enters their shipping address information, you must send a `POST` request to the [Update a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCart) API endpoint:
-
+
```jsx
@@ -111,7 +111,7 @@ After updating the cart with the customer’s address, the list of available [sh
You can retrieve the list of shipping options by sending a `GET` request to the [Retrieve Shipping Options for Cart API](https://docs.medusajs.com/api/store/#tag/Shipping-Option/operation/GetShippingOptionsCartId) endpoint:
-
+
```jsx
@@ -141,7 +141,7 @@ The request accepts the ID of the cart as a path parameter. It returns the array
Once the customer chooses one of the available shipping options, send a `POST` request to the [Add a Shipping Method](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartShippingMethod) API endpoint. This will create a [shipping method](../backend/shipping/overview.md#shipping-method) based on the shipping option chosen and will associate it with the customer’s cart:
-
+
```jsx
@@ -189,7 +189,7 @@ When the page opens and before the payment providers are displayed to the custom
To initialize the payment sessions, send a `POST` request to the [Initialize Payment Sessions](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessions) API endpoint:
-
+
```jsx
@@ -221,7 +221,7 @@ This endpoint accepts the ID of the cart as a path parameter. It returns the upd
When the customer chooses the payment provider they want to complete purchase with, you should select the payment session associated with that payment provider. To do that, send a `POST` request to the [Select a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSession) API endpoint:
-
+
```jsx
@@ -271,7 +271,7 @@ This step is optional and is only necessary for some payment providers. As menti
If you need to update that data at any point before the purchase is made, send a request to [Update a Payment Session](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartPaymentSessionUpdate) API endpoint:
-
+
```jsx
@@ -323,7 +323,7 @@ The last step is to place the order by completing the cart. When you complete th
To complete a cart, send a `POST` request to the [Complete a Cart](https://docs.medusajs.com/api/store/#tag/Cart/operation/PostCartsCartComplete) API endpoint:
-
+
```jsx
diff --git a/docs/content/advanced/storefront/use-sales-channels.mdx b/docs/content/advanced/storefront/use-sales-channels.mdx
index f4511eb7d3..2473bf5455 100644
--- a/docs/content/advanced/storefront/use-sales-channels.mdx
+++ b/docs/content/advanced/storefront/use-sales-channels.mdx
@@ -29,7 +29,7 @@ If you follow the JS Client code blocks, it’s assumed you already have [Medusa
To filter products by a specific sales channel, pass the `sales_channel_id` query parameter to the List Products endpoint:
-
+
```jsx
@@ -67,7 +67,7 @@ The request returns an array of products. These are the products that are availa
To associate a sales channel with a cart while creating it, you can pass the `sales_channel_id` request body parameter with the ID of the sales channel:
-
+
@@ -108,7 +108,7 @@ The request returns the created cart.
You can update the sales channel of an existing cart by passing the `sales_channel_id` request body parameter with the ID of the sales channel:
-
+
```jsx
diff --git a/docs/content/deployments/admin/deploying-on-netlify.md b/docs/content/deployments/admin/deploying-on-netlify.md
index 7a8438b8f4..3e310835ef 100644
--- a/docs/content/deployments/admin/deploying-on-netlify.md
+++ b/docs/content/deployments/admin/deploying-on-netlify.md
@@ -1,10 +1,16 @@
+---
+description: 'Learn step-by-step.'
+---
+
# Deploy Medusa Admin on Netlify
In this document, you’ll learn how to deploy the Medusa Admin on [Netlify](https://www.netlify.com/).
Alternatively, you can use this button to deploy the Medusa Admin to Netlify directly:
-[](https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/admin)
+
+
+
## Prerequisites
diff --git a/docs/content/deployments/admin/index.mdx b/docs/content/deployments/admin/index.mdx
index 87ca5fa04c..43bdb54b52 100644
--- a/docs/content/deployments/admin/index.mdx
+++ b/docs/content/deployments/admin/index.mdx
@@ -1,3 +1,7 @@
+---
+hide_table_of_contents: true
+---
+
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
diff --git a/docs/content/deployments/server/deploying-on-digital-ocean.md b/docs/content/deployments/server/deploying-on-digital-ocean.md
index 3b2a6edea0..c584cc42a9 100644
--- a/docs/content/deployments/server/deploying-on-digital-ocean.md
+++ b/docs/content/deployments/server/deploying-on-digital-ocean.md
@@ -1,3 +1,7 @@
+---
+description: 'Learn step-by-step.'
+---
+
# Deploy Your Medusa Server to DigitalOcean Apps
In this document, you'll learn how to deploy your Medusa server to a DigitalOcean App.
diff --git a/docs/content/deployments/server/deploying-on-heroku.mdx b/docs/content/deployments/server/deploying-on-heroku.mdx
index f6943f3084..c9d2850454 100644
--- a/docs/content/deployments/server/deploying-on-heroku.mdx
+++ b/docs/content/deployments/server/deploying-on-heroku.mdx
@@ -1,3 +1,7 @@
+---
+description: 'Learn step-by-step.'
+---
+
import styles from '../deployment.module.css';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
@@ -8,7 +12,9 @@ In this document, you'll learn how to deploy your Medusa server on Heroku. Herok
Alternatively, you can use this button to deploy the Medusa server to Heroku directly:
-[](https://heroku.com/deploy?template=https://github.com/medusajs/medusa-starter-default/tree/feat/deploy-heroku)
+
+
+
);
diff --git a/www/docs/src/theme/DocSidebar/Desktop/styles.module.css b/www/docs/src/theme/DocSidebar/Desktop/styles.module.css
index f7ecfcdf8d..000221175d 100644
--- a/www/docs/src/theme/DocSidebar/Desktop/styles.module.css
+++ b/www/docs/src/theme/DocSidebar/Desktop/styles.module.css
@@ -51,4 +51,8 @@
.sidebarFooterList li a {
padding-left: 1.8em !important;
+}
+
+.sidebarSearchContainer {
+ margin: 24px 16px 24px;
}
\ No newline at end of file
diff --git a/www/docs/src/theme/Footer/Layout/index.js b/www/docs/src/theme/Footer/Layout/index.js
new file mode 100644
index 0000000000..f953b4a51a
--- /dev/null
+++ b/www/docs/src/theme/Footer/Layout/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import clsx from 'clsx';
+import SocialLinks from '../SocialLinks';
+import {useThemeConfig} from '@docusaurus/theme-common';
+
+export default function FooterLayout({style, links, logo, copyright}) {
+ const { socialLinks } = useThemeConfig()
+
+ return (
+
+ );
+}
diff --git a/www/docs/src/theme/Footer/SocialLinks/index.js b/www/docs/src/theme/Footer/SocialLinks/index.js
new file mode 100644
index 0000000000..982752b335
--- /dev/null
+++ b/www/docs/src/theme/Footer/SocialLinks/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+
+export default function SocialLinks ({ links = [] }) {
+ const socialIcons = {
+ twitter: {
+ light: useBaseUrl('/img/twitter.png'),
+ dark: useBaseUrl('/img/twitter-dark.png')
+ },
+ github: {
+ light: useBaseUrl('/img/github.png'),
+ dark: useBaseUrl('/img/github-dark.png')
+ },
+ discord: {
+ light: useBaseUrl('/img/discord.png'),
+ dark: useBaseUrl('/img/discord-dark.png')
+ }
+ }
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/www/docs/src/theme/Icon/Discord/index.js b/www/docs/src/theme/Icon/Discord/index.js
new file mode 100644
index 0000000000..bfe6c73192
--- /dev/null
+++ b/www/docs/src/theme/Icon/Discord/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function IconDiscord({width = 18, height = 14}) {
+ return (
+
+ );
+}
diff --git a/www/docs/src/theme/Icon/Edit/index.js b/www/docs/src/theme/Icon/Edit/index.js
new file mode 100644
index 0000000000..6aa4b9bb92
--- /dev/null
+++ b/www/docs/src/theme/Icon/Edit/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export default function IconEdit({className, ...restProps}) {
+ return (
+
+ );
+}
diff --git a/www/docs/src/theme/Icon/Edit/styles.module.css b/www/docs/src/theme/Icon/Edit/styles.module.css
new file mode 100644
index 0000000000..b8ea840625
--- /dev/null
+++ b/www/docs/src/theme/Icon/Edit/styles.module.css
@@ -0,0 +1,6 @@
+.iconEdit {
+ margin-right: 8px;
+ vertical-align: sub;
+ width: 20px;
+ height: 20px;
+}
diff --git a/www/docs/src/theme/Icon/ExternalLink/index.js b/www/docs/src/theme/Icon/ExternalLink/index.js
new file mode 100644
index 0000000000..d5244c1905
--- /dev/null
+++ b/www/docs/src/theme/Icon/ExternalLink/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './styles.module.css';
+export default function IconExternalLink({width = 16, height = 16}) {
+ return (
+
+ );
+}
diff --git a/www/docs/src/theme/Icon/ExternalLink/styles.module.css b/www/docs/src/theme/Icon/ExternalLink/styles.module.css
new file mode 100644
index 0000000000..9468b1998b
--- /dev/null
+++ b/www/docs/src/theme/Icon/ExternalLink/styles.module.css
@@ -0,0 +1,3 @@
+.iconExternalLink {
+ margin-left: 0.3rem;
+}
diff --git a/www/docs/src/theme/Icon/GitHub/index.js b/www/docs/src/theme/Icon/GitHub/index.js
new file mode 100644
index 0000000000..098631906b
--- /dev/null
+++ b/www/docs/src/theme/Icon/GitHub/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function IconGitHub({width = 18, height = 18}) {
+ return (
+
+ );
+}
diff --git a/www/docs/src/theme/Icon/Twitter/index.js b/www/docs/src/theme/Icon/Twitter/index.js
new file mode 100644
index 0000000000..89e259276b
--- /dev/null
+++ b/www/docs/src/theme/Icon/Twitter/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function IconTwitter({width = 18, height = 16}) {
+ return (
+
+ );
+}
diff --git a/www/docs/src/theme/MDXComponents/InlineCode.js b/www/docs/src/theme/MDXComponents/InlineCode.js
new file mode 100644
index 0000000000..8db161d468
--- /dev/null
+++ b/www/docs/src/theme/MDXComponents/InlineCode.js
@@ -0,0 +1,11 @@
+import React, {isValidElement} from 'react';
+import CopyButton from '../CopyButton';
+
+export default function MDXInlineCode(props) {
+
+ return (
+
+
+
+ )
+}
diff --git a/www/docs/src/theme/MDXComponents/index.js b/www/docs/src/theme/MDXComponents/index.js
new file mode 100644
index 0000000000..726ca83f15
--- /dev/null
+++ b/www/docs/src/theme/MDXComponents/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+import InlineCode from './InlineCode'
+
+export default {
+ // Re-use the default mapping
+ ...MDXComponents,
+ // Map the "highlight" tag to our component!
+ // `Highlight` will receive all props that were passed to `highlight` in MDX
+ inlineCode: InlineCode,
+};
\ No newline at end of file
diff --git a/www/docs/src/theme/Navbar/Content/index.js b/www/docs/src/theme/Navbar/Content/index.js
new file mode 100644
index 0000000000..e1f7e97773
--- /dev/null
+++ b/www/docs/src/theme/Navbar/Content/index.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+ splitNavbarItems,
+ useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+import styles from './styles.module.css';
+function useNavbarItems() {
+ // TODO temporary casting until ThemeConfig type is improved
+ return useThemeConfig().navbar.items;
+}
+function NavbarItems({items}) {
+ return (
+ <>
+ {items.map((item, i) => (
+
+ ))}
+ >
+ );
+}
+function NavbarContentLayout({left, right}) {
+ return (
+
+
{left}
+
{right}
+
+ );
+}
+export default function NavbarContent() {
+ const mobileSidebar = useNavbarMobileSidebar();
+ const items = useNavbarItems();
+ const [leftItems, rightItems] = splitNavbarItems(items);
+ return (
+
+ {!mobileSidebar.disabled && }
+
+
+ >
+ }
+ right={
+ // TODO stop hardcoding items?
+ // Ask the user to add the respective navbar items => more flexible
+ <>
+
+
+
+
+
+ >
+ }
+ />
+ );
+}
diff --git a/www/docs/src/theme/Navbar/Content/styles.module.css b/www/docs/src/theme/Navbar/Content/styles.module.css
new file mode 100644
index 0000000000..4c9471e109
--- /dev/null
+++ b/www/docs/src/theme/Navbar/Content/styles.module.css
@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+ .colorModeToggle {
+ display: none;
+ }
+}
diff --git a/www/docs/src/theme/Navbar/MobileSidebar/Header/index.js b/www/docs/src/theme/Navbar/MobileSidebar/Header/index.js
new file mode 100644
index 0000000000..266b277769
--- /dev/null
+++ b/www/docs/src/theme/Navbar/MobileSidebar/Header/index.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+function CloseButton() {
+ const mobileSidebar = useNavbarMobileSidebar();
+ return (
+
+ );
+}
+export default function NavbarMobileSidebarHeader() {
+ return (
+
+
+
+
+ );
+}
diff --git a/www/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js b/www/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
new file mode 100644
index 0000000000..f09af72939
--- /dev/null
+++ b/www/docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import NavbarItem from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+function useNavbarItems() {
+ // TODO temporary casting until ThemeConfig type is improved
+ return useThemeConfig().navbar.items;
+}
+// The primary menu displays the navbar items
+export default function NavbarMobilePrimaryMenu() {
+ const mobileSidebar = useNavbarMobileSidebar();
+ // TODO how can the order be defined for mobile?
+ // Should we allow providing a different list of items?
+ const items = useNavbarItems();
+ return (
+