docs: change notes across docs based on redesign (#8662)

Change the prerequisites / soon / other notes based on latest redesign

Depends on #8661
This commit is contained in:
Shahed Nasser
2024-08-23 07:59:48 +00:00
committed by GitHub
parent 320b01f45d
commit b23f0f8188
41 changed files with 291 additions and 220 deletions
@@ -1,4 +1,4 @@
import { Table } from "docs-ui"
import { Table, Prerequisites } from "docs-ui"
export const metadata = {
title: `Redis Cache Module`,
@@ -12,11 +12,12 @@ The Redis Cache Module uses Redis to cache data in your store. In production, it
## Install the Redis Cache Module
<Note type="check">
- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
</Note>
<Prerequisites items={[
{
text: "Redis installed and Redis server running",
link: "https://redis.io/docs/getting-started/installation/"
}
]} />
To install Redis Cache Module, run the following command in the directory of your Medusa application:
@@ -1,4 +1,4 @@
import { Table } from "docs-ui"
import { Table, Prerequisites } from "docs-ui"
export const metadata = {
title: `Redis Event Bus Module`,
@@ -16,11 +16,12 @@ In production, it's recommended to use this module.
## Install the Redis Events Bus Module
<Note type="check">
- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
</Note>
<Prerequisites items={[
{
text: "Redis installed and Redis server running",
link: "https://redis.io/docs/getting-started/installation/"
}
]} />
To install Redis Event Bus Module, run the following command in the directory of your Medusa application:
@@ -1,4 +1,4 @@
import { Table } from "docs-ui"
import { Table, Prerequisites } from "docs-ui"
export const metadata = {
title: `SendGrid Notification Module Provider`,
@@ -12,13 +12,20 @@ The SendGrid Notification Module Provider integrates [SendGrid](https://sendgrid
## Install the SendGrid Notification Module
<Note type="check">
- [SendGrid account](https://signup.sendgrid.com)
- [Setup SendGrid single sender](https://docs.sendgrid.com/ui/sending-email/sender-verification)
- [SendGrid API Key](https://docs.sendgrid.com/ui/account-and-settings/api-keys)
</Note>
<Prerequisites items={[
{
text: "SendGrid account",
link: "https://signup.sendgrid.com"
},
{
text: "Setup SendGrid single sender",
link: "https://docs.sendgrid.com/ui/sending-email/sender-verification"
},
{
text: "SendGrid API Key",
link: "https://docs.sendgrid.com/ui/account-and-settings/api-keys"
}
]} />
To install the SendGrid Notification Module Provider, run the following command in the directory of your Medusa application:
@@ -1,4 +1,4 @@
import { Table } from "docs-ui"
import { Table, Prerequisites } from "docs-ui"
export const metadata = {
title: `Redis Workflow Engine Module`,
@@ -12,11 +12,12 @@ The Redis Workflow Engine Module uses Redis to track workflow executions and han
## Install the Redis Workflow Engine Module
<Note type="check">
- [Redis installed and Redis server running](https://redis.io/docs/getting-started/installation/).
</Note>
<Prerequisites items={[
{
text: "Redis installed and Redis server running",
link: "https://redis.io/docs/getting-started/installation/"
}
]} />
To install Redis Workflow Engine Module, run the following command in the directory of your Medusa application:
@@ -2,7 +2,7 @@
sidebar_label: "Stripe"
---
import { Table } from "docs-ui"
import { Table, Prerequisites } from "docs-ui"
export const metadata = {
title: `Stripe Module Provider`,
@@ -22,13 +22,20 @@ These features are also available in a safe test environment, allowing for a con
## Install the Stripe Module Provider
<Note type="check">
- [Stripe account](https://stripe.com/).
- [Stripe Secret API Key](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard)
- For deployed Medusa applications, a [Stripe webhook secret](https://docs.stripe.com/webhooks#add-a-webhook-endpoint). When creating the Webhook, set the endpoint URL to `{medusa_url}/hooks/payment/stripe`, where `{medusa_url}` with the URL to your deployed Medusa application.
</Note>
<Prerequisites items={[
{
text: "Stripe account",
link: "https://stripe.com/"
},
{
text: "Stripe Secret API Key",
link: "https://support.stripe.com/questions/locate-api-keys-in-the-dashboard"
},
{
text: "For deployed Medusa applications, a Stripe webhook secret. When creating the Webhook, set the endpoint URL to {medusa_url}/hooks/payment/stripe, where {medusa_url} with the URL to your deployed Medusa application.",
link: "https://docs.stripe.com/webhooks#add-a-webhook-endpoint"
}
]} />
To install the Stripe Module Provider, run the following command in the directory of your Medusa application:
@@ -1,4 +1,4 @@
import { Table, DetailsList } from "docs-ui"
import { Table, DetailsList, Prerequisites } from "docs-ui"
import PortForwardingTroubleshooting from "../troubleshooting/_sections/create-medusa-app-errors/forwarding.mdx"
import DBUrlTroubleshooting from "../troubleshooting/_sections/create-medusa-app-errors/db-url-error.mdx"
import EaddrinuseTroubleshooting from "../troubleshooting/_sections/other/eaddrinuse.mdx"
@@ -17,13 +17,20 @@ export const metadata = {
The `create-medusa-app` CLI tool simplifies the process of creating a new Medusa project and provides an onboarding experience.
<Note type="check">
- [Node.js v20+](https://nodejs.org/en/download)
- [Git CLI tool](https://git-scm.com/downloads)
- [PostgreSQL](https://www.postgresql.org/download/)
</Note>
<Prerequisites items={[
{
text: "Node.js v20+",
link: "https://nodejs.org/en/download"
},
{
text: "Git CLI tool",
link: "https://git-scm.com/downloads"
},
{
text: "PostgreSQL",
link: "https://www.postgresql.org/download/"
}
]} />
## Usage
@@ -2,6 +2,8 @@
sidebar_label: "Vercel"
---
import { Prerequisites } from "docs-ui"
export const metadata = {
title: `Deploy Medusa Admin to Vercel`,
}
@@ -18,12 +20,16 @@ As Medusa v2 is still in active development, it's highly recommended not to depl
---
<Note type="check">
- [Medusa application](!docs!)s codebase hosted on GitHub repository.
- [Deployed Medusa application](../../page.mdx#medusa-application).
</Note>
<Prerequisites items={[
{
text: "Medusa applications codebase hosted on GitHub repository.",
link: "!docs!"
},
{
text: "Deployed Medusa application.",
link: "../../page.mdx#medusa-application"
},
]} />
## 1. Configure Admin in Medusa
@@ -2,7 +2,7 @@
sidebar_label: "Railway"
---
import { DetailsList } from "docs-ui"
import { Prerequisites, DetailsList } from "docs-ui"
import OutdatedPreviewContent from "../../../troubleshooting/_sections/common-installation-errors/outdated-preview.mdx"
export const metadata = {
@@ -35,11 +35,12 @@ The same Medusa project is used to deploy the server and worker modes. Learn mor
---
<Note type="check">
- [Medusa application](!docs!) hosted in a GitHub repository.
</Note>
<Prerequisites items={[
{
text: "Medusa applications codebase hosted on GitHub repository.",
link: "!docs!"
},
]} />
## 1. Configure Medusa Application
@@ -2,6 +2,8 @@
sidebar_label: "Vercel"
---
import { Prerequisites } from "docs-ui"
export const metadata = {
title: `Deploy Medusa Admin to Vercel`,
}
@@ -18,12 +20,16 @@ As Medusa v2 is still in active development, it's highly recommended not to depl
---
<Note type="check">
- [Storefront codebase](../../../nextjs-starter/page.mdx) hosted in a GitHub repository.
- [Deployed Medusa application](../../page.mdx#medusa-application) with at least one region.
</Note>
<Prerequisites items={[
{
text: "Storefront codebase hosted in a GitHub repository.",
link: "../../../nextjs-starter/page.mdx"
},
{
text: "Deployed Medusa application with at least one region.",
link: "../../page.mdx#medusa-application"
},
]} />
## 1. Create Vercel Project
+15 -7
View File
@@ -1,4 +1,4 @@
import { Table } from "docs-ui"
import { Table, Prerequisites } from "docs-ui"
export const metadata = {
title: `Medusa CLI Tool`,
@@ -8,12 +8,20 @@ export const metadata = {
The Medusa CLI tool provides commands that facilitate your development.
<Note type="check">
- [Node.js v20+](https://nodejs.org/en/download)
- [Git CLI tool](https://git-scm.com/downloads)
</Note>
<Prerequisites items={[
{
text: "Node.js v20+",
link: "https://nodejs.org/en/download"
},
{
text: "Git CLI tool",
link: "https://git-scm.com/downloads"
},
{
text: "PostgreSQL",
link: "https://www.postgresql.org/download/"
}
]} />
## Usage
+17 -19
View File
@@ -1,4 +1,4 @@
import { DetailsList } from "docs-ui"
import { DetailsList, BetaBadge, Prerequisites } from "docs-ui"
import CmaOptionTroubleshooting from "../troubleshooting/_sections/nextjs/cma-option.mdx"
import CorsErrorTroubleshooting from "../troubleshooting/_sections/other/cors-errors.mdx"
import ModuleXErrorTroubleshooting from "../troubleshooting/_sections/common-installation-errors/module-x-error.mdx"
@@ -7,22 +7,19 @@ export const metadata = {
title: `Next.js Starter`,
}
# {metadata.title}
<Note type="soon">
Next.js starter is currently in development and doesn't fully support Medusa v2 yet.
</Note>
# {metadata.title} <BetaBadge text="Beta" tooltipText="Next.js starter is currently in development and doesn't fully support Medusa v2 yet." />
The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or as a starting point to build a storefront for their Medusa application.
<Note type="check">
- [Node.js v18+](https://nodejs.org/en/download)
- At least one region in the Medusa application.
</Note>
<Prerequisites items={[
{
text: "Node.js v20+",
link: "https://nodejs.org/en/download"
},
{
text: "At least one region in the Medusa application.",
},
]} />
## Installation
@@ -95,11 +92,12 @@ The Next.js Starter storefront is compatible with Medusa's Stripe and PayPal plu
### Stripe Integration
<Note type="check">
- [Stripe module provider](../commerce-modules/payment/payment-provider/stripe/page.mdx) installed in the Medusa application.
</Note>
<Prerequisites items={[
{
text: "Stripe module provider installed in the Medusa application.",
link: "../commerce-modules/payment/payment-provider/stripe/page.mdx"
},
]} />
In your Next.js Starter project, set the following environment variables for the Stripe integration:
+2 -13
View File
@@ -1,19 +1,14 @@
import { AcademicCapSolid, UsersSolid } from "@medusajs/icons"
import { BetaBadge } from "docs-ui"
export const metadata = {
title: `B2B Recipe`,
}
# {metadata.title}
# {metadata.title} <BetaBadge text="Soon" tooltipText="This recipe is a work in progress, as some features are not ready yet in Medusa V2." />
This recipe provides the general steps to implement a B2B store with Medusa.
<Note type="soon" title="In Development">
This recipe is a work in progress, as some features are not ready yet in Medusa V2.
</Note>
## Overview
In a B2B store, you provide different types of customers with relevant pricing, products, shopping experience, and more.
@@ -176,12 +171,6 @@ This is useful in B2B sales, as you often negotiate special prices with each cus
You can create a B2B module that adds necessary data models to represent a B2B company. Then, you link that company to a customer group. Any customer belonging to that group also belongs to the company, meaning they're a B2B customer.
<Note type="soon">
Module Relationships is coming soon.
</Note>
<CardList items={[
{
href: "!docs!/basics/modules-and-services",
@@ -1,20 +1,14 @@
import { AcademicCapSolid, BoltSolid } from "@medusajs/icons"
import { LearningPath } from "docs-ui"
import { LearningPath, BetaBadge } from "docs-ui"
export const metadata = {
title: `Commerce Automation Recipe`,
}
# {metadata.title}
# {metadata.title} <BetaBadge text="Soon" tooltipText="This recipe is a work in progress, as some features are not ready yet in Medusa V2." />
This recipe provides the general steps to implement a B2B store with Medusa.
<Note type="soon" title="In Development">
This recipe is a work in progress, as some features are not ready yet in Medusa V2.
</Note>
## Overview
Commerce automation is essential for businesses to save costs, provide a better user experience, and avoid manual, repetitive tasks that lead to human errors. Businesses utilize automation in different domains, including marketing, customer support, and order management.
@@ -1,4 +1,5 @@
import { Github, PlaySolid } from "@medusajs/icons"
import { Prerequisites } from "docs-ui"
export const metadata = {
title: `Digital Products Recipe Example`,
@@ -41,11 +42,12 @@ By following this example, youll have a commerce application with the followi
---
<Note type="check">
- [A new Medusa application installed.](!docs!#get-started)
</Note>
<Prerequisites items={[
{
text: "A new Medusa application installed.",
link: "!docs!#get-started"
},
]} />
## Step 1: Create the Digital Product Module
@@ -1,4 +1,5 @@
import { Github, PlaySolid } from "@medusajs/icons"
import { Prerequisites } from "docs-ui"
export const metadata = {
title: `Marketplace Recipe: Vendors Example`,
@@ -40,11 +41,12 @@ By following this example, youll have a marketplace with the following featur
---
<Note type="check">
- [A new Medusa application installed.](!docs!#get-started)
</Note>
<Prerequisites items={[
{
text: "A new Medusa application installed.",
link: "!docs!#get-started"
},
]} />
## Step 1: Create Marketplace Module
@@ -95,12 +95,6 @@ If you store the personalized data using a custom module:
- Call that API Route from the storefront after adding the item to the cart.
- Listen to the `order.placed` event to attach the personalized data to the Order Module's `LineItem` data model.
<Note type="soon">
The `order.placed` event is currently not emitted.
</Note>
<CardList items={[
{
href: "!docs!/basics/api-routes",
@@ -1,4 +1,5 @@
import { Github, PlaySolid } from "@medusajs/icons"
import { Prerequisites } from "docs-ui"
export const metadata = {
title: `Subscriptions Recipe`,
@@ -41,11 +42,12 @@ By following this example, youll have a subscription commerce store with the
---
<Note type="check">
- [A new Medusa application installed.](!docs!#get-started)
</Note>
<Prerequisites items={[
{
text: "A new Medusa application installed.",
link: "!docs!#get-started"
},
]} />
## Step 1: Create Subscription Module
@@ -6,6 +6,7 @@ import {
typeListLinkFixerPlugin,
localLinksRehypePlugin,
workflowDiagramLinkFixerPlugin,
prerequisitesLinkFixerPlugin,
} from "remark-rehype-plugins"
import MDXComponents from "@/components/MDXComponents"
import mdxOptions from "../../../mdx-options.mjs"
@@ -62,6 +63,13 @@ export default async function ReferencesPage({ params }: PageProps) {
checkLinksType: "value",
},
],
[
prerequisitesLinkFixerPlugin,
{
...pluginOptions,
checkLinksType: "value",
},
],
[localLinksRehypePlugin, pluginOptions],
],
remarkPlugins: mdxOptions.options.remarkPlugins,
@@ -1,4 +1,4 @@
import { CodeTabs, CodeTab } from "docs-ui"
import { CodeTabs, CodeTab, Prerequisites } from "docs-ui"
export const metadata = {
title: `Payment with Stripe in React Storefront`,
@@ -14,12 +14,16 @@ For other types of storefronts, the steps are similar. However, refer to [Stripe
</Note>
<Note type="check">
- [Stripe Module Provider](../../../../commerce-modules/payment/payment-provider/stripe/page.mdx) installed and configured in your Medusa application.
- [Stripe publishable API key](https://support.stripe.com/questions/locate-api-keys-in-the-dashboard).
</Note>
<Prerequisites items={[
{
text: "Stripe Module Provider installed and configured in your Medusa application.",
link: "../../../../commerce-modules/payment/payment-provider/stripe/page.mdx"
},
{
text: "Stripe publishable API key.",
link: "https://support.stripe.com/questions/locate-api-keys-in-the-dashboard"
},
]} />
## 1. Install Stripe SDK
@@ -50,7 +50,7 @@ Learn more about the `formatPrice` function in [this guide](../show-price/page.m
For example, in a React-based storefront:
<Note type="check">
<Note>
The example only passes the `region_id` query parameter for pricing. Learn how to store and retrieve the customer's region in the [Regions guides](../../../../regions/context/page.mdx).
@@ -45,7 +45,7 @@ const formatPrice = (amount: number): string => {
The following React-based storefront example retrieves the product's price based on the selected variant:
<Note type="check">
<Note>
The example only passes the `region_id` query parameter for pricing. Learn how to store and retrieve the customer's region in the [Regions guides](../../../../regions/context/page.mdx).
@@ -82,7 +82,7 @@ Aside from the `calculated_amount_with_tax` property, a variant's `calculated_pr
For example, in a React-based storefront:
<Note type="check">
<Note>
The example passes the `region_id` query parameter for pricing. Learn how to store and retrieve the customer's region in the [Regions guides](../../../../regions/context/page.mdx).
@@ -10,9 +10,7 @@ In this document, you'll learn how to select a product variant to be added to th
<Note>
{/* TODO add the link once available. */}
The add-to-cart functionality is explained in the Cart's guides.
The add-to-cart functionality is explained in the [Cart's guides](../../cart/page.mdx).
</Note>
+13 -2
View File
@@ -2,10 +2,10 @@ import mdx from "@next/mdx"
import {
brokenLinkCheckerPlugin,
localLinksRehypePlugin,
prerequisitesLinkFixerPlugin,
typeListLinkFixerPlugin,
workflowDiagramLinkFixerPlugin,
} from "remark-rehype-plugins"
import { slugChanges } from "./generated/slug-changes.mjs"
import mdxPluginOptions from "./mdx-options.mjs"
const withMDX = mdx({
@@ -16,7 +16,18 @@ const withMDX = mdx({
[brokenLinkCheckerPlugin],
[localLinksRehypePlugin],
[typeListLinkFixerPlugin],
[workflowDiagramLinkFixerPlugin],
[
workflowDiagramLinkFixerPlugin,
{
checkLinksType: "value",
},
],
[
prerequisitesLinkFixerPlugin,
{
checkLinksType: "value",
},
],
],
remarkPlugins: mdxPluginOptions.options.remarkPlugins,
jsx: true,