From c0639ef708ec8182883f15f97fb6476d2b1bdd48 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Mon, 7 Nov 2022 17:36:51 +0200 Subject: [PATCH] docs: added code blocks without headers (#2560) --- docs/content/add-plugins/mailchimp.md | 6 +- docs/content/add-plugins/sendgrid.mdx | 26 ++--- docs/content/admin/quickstart.md | 4 +- docs/content/advanced/admin/import-prices.mdx | 2 +- .../advanced/admin/import-products.mdx | 4 +- .../advanced/backend/batch-jobs/create.md | 2 +- .../advanced/backend/cron-jobs/create.md | 2 +- .../advanced/backend/customer-groups/index.md | 2 +- .../advanced/backend/entities/index.md | 2 +- .../advanced/backend/plugins/create.md | 2 +- .../advanced/backend/price-lists/use-api.mdx | 2 +- .../price-selection-strategy/override.md | 2 +- .../backend/services/create-service.md | 2 +- .../backend/taxes/inclusive-pricing.md | 6 +- docs/content/contribution-guidelines.md | 27 +++++ .../deployments/admin/deploying-on-netlify.md | 4 +- .../storefront/deploying-gatsby-on-netlify.md | 8 +- docs/content/quickstart/quick-start-docker.md | 16 +-- docs/content/quickstart/quick-start.md | 12 +-- .../cli-installation-errors.mdx | 2 +- .../troubleshooting/documentation-error.md | 2 +- docs/content/troubleshooting/s3-acl-error.md | 2 +- .../troubleshooting/signing-in-to-admin.md | 2 +- .../transaction-error-in-checkout.md | 4 +- .../0-set-up-your-development-environment.mdx | 4 +- docs/content/tutorial/development.module.css | 9 +- docs/content/usage/create-medusa-app.mdx | 8 +- www/docs/src/css/_code.css | 28 +++++- www/docs/src/css/_docspage.css | 4 + www/docs/src/css/_note.css | 2 + www/docs/src/css/_variables.css | 12 +-- .../src/theme/CodeBlock/Content/String.js | 99 +++++++++++++++++++ .../theme/CodeBlock/Content/styles.module.css | 85 ++++++++++++++++ www/docs/src/theme/CodeBlock/index.js | 38 +++---- www/docs/src/theme/DocCard/styles.module.css | 2 - 35 files changed, 336 insertions(+), 98 deletions(-) create mode 100644 www/docs/src/theme/CodeBlock/Content/String.js create mode 100644 www/docs/src/theme/CodeBlock/Content/styles.module.css diff --git a/docs/content/add-plugins/mailchimp.md b/docs/content/add-plugins/mailchimp.md index ddb9fe9260..6ec3dc7c89 100644 --- a/docs/content/add-plugins/mailchimp.md +++ b/docs/content/add-plugins/mailchimp.md @@ -61,7 +61,7 @@ const plugins = [ newsletter_list_id: process.env.MAILCHIMP_NEWSLETTER_LIST_ID } } -}; +]; ``` ## Test it Out @@ -72,7 +72,7 @@ This plugin adds a new `POST` endpoint at `/mailchimp/subscribe`. This endpoint Try sending a `POST` request to `/mailchimp/subscribe` with the following JSON body: -```json +```json noHeader { "email": "example@gmail.com" } @@ -90,7 +90,7 @@ If you check your Mailchimp dashboard, you should find the email added to your A Here’s an example of sending additional data with the subscription: -```json +```json noHeader { "email": "example@gmail.com", "data": { diff --git a/docs/content/add-plugins/sendgrid.mdx b/docs/content/add-plugins/sendgrid.mdx index c82bbcfd68..4c84b33007 100644 --- a/docs/content/add-plugins/sendgrid.mdx +++ b/docs/content/add-plugins/sendgrid.mdx @@ -79,7 +79,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "beforeInsert": [Function], "billing_address": null, @@ -306,7 +306,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "beforeInsert": [Function], "billing_address": null, @@ -537,7 +537,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "date": Any, "email": "test@testson.com", @@ -819,7 +819,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "date": Any, "email": "test@testson.com", @@ -1261,7 +1261,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "date": Any, "email": "test@testson.com", @@ -1703,7 +1703,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "claim": Object { "canceled_at": null, @@ -2000,7 +2000,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "locale": null, "swap": Object { @@ -2509,7 +2509,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader Object { "additional_total": "16.88 USD", "date": Any, @@ -3089,7 +3089,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader { "locale": null, "swap": Object { @@ -3599,7 +3599,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader Object { "code": Any, "value": 4, @@ -3766,7 +3766,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader Object { "id": Any, "email": "test@testson.com", @@ -3786,7 +3786,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader Object { "email": "test@testson.com", "token": Any, @@ -3803,7 +3803,7 @@ You don’t have to create a template for every type in the reference. You can s
Example Data - ```jsx + ```json noHeader Object { "product": Object { "collection_id": null, diff --git a/docs/content/admin/quickstart.md b/docs/content/admin/quickstart.md index 472fac07ef..04121bb9aa 100644 --- a/docs/content/admin/quickstart.md +++ b/docs/content/admin/quickstart.md @@ -43,7 +43,7 @@ Before running your Medusa admin, make sure that your Medusa server is running. To run your Medusa server, go to the directory holding the server and run: -```bash npm2yarn +```bash npm2yarn noHeader npm run start ``` @@ -65,7 +65,7 @@ Use your Medusa admin’s user credentials to log in. If you installed the demo data when you installed the Medusa server by using the `--seed` option or running: -```bash npm2yarn +```bash npm2yarn noHeader npm run seed ``` diff --git a/docs/content/advanced/admin/import-prices.mdx b/docs/content/advanced/admin/import-prices.mdx index 0d3a8696ab..7cbccf670f 100644 --- a/docs/content/advanced/admin/import-prices.mdx +++ b/docs/content/advanced/admin/import-prices.mdx @@ -235,7 +235,7 @@ If the batch job has been pre-processed, the status of the batch job will be `pr Here’s an example of the `result` property: -```json +```json noHeader "result": { "count": 5, // Total number of prices to be added "stat_descriptors": [ //details about the prices to be added diff --git a/docs/content/advanced/admin/import-products.mdx b/docs/content/advanced/admin/import-products.mdx index 9a52f6e698..347beb1af0 100644 --- a/docs/content/advanced/admin/import-products.mdx +++ b/docs/content/advanced/admin/import-products.mdx @@ -223,14 +223,14 @@ If the batch job has been pre-processed, the status of the batch job will be `pr Here’s an example of the `result` property: -```jsx +```json noHeader "result": { "count": 5, // Total number of products to be created or updated "stat_descriptors": [ //details about the products to be created/updated { "key": "product-import-count", "name": "Products/variants to import", - "message": "There will be 2 products created (0 updated).\n 3 variants will be created and 0 updated" + "message": "There will be 2 products created (0 updated).\n 3 variants will be created and 0 updated" } ], "advancement_count": 0 //number of products processed so far. Will be 0 before the import is confirmed. diff --git a/docs/content/advanced/backend/batch-jobs/create.md b/docs/content/advanced/backend/batch-jobs/create.md index 87a2f31328..02dc30c9a2 100644 --- a/docs/content/advanced/backend/batch-jobs/create.md +++ b/docs/content/advanced/backend/batch-jobs/create.md @@ -349,7 +349,7 @@ curl --location --request GET '/admin/batch-jobs/' \ Based on the batch job strategy implemented in this documentation, the `result` property could be something like this: -```jsx +```json noHeader "result": { "count": 1, "stat_descriptors": [ diff --git a/docs/content/advanced/backend/cron-jobs/create.md b/docs/content/advanced/backend/cron-jobs/create.md index 1b63c8ae28..0934694095 100644 --- a/docs/content/advanced/backend/cron-jobs/create.md +++ b/docs/content/advanced/backend/cron-jobs/create.md @@ -111,7 +111,7 @@ Once it is time to run your cron job based on the cron job expression pattern, t For example, the above cron job will run at 12 AM and, when it runs, you can see the following logged on your Medusa server: -```bash +```bash noHeader info: Processing cron job: publish-products ``` diff --git a/docs/content/advanced/backend/customer-groups/index.md b/docs/content/advanced/backend/customer-groups/index.md index 97a7a74867..21800e141d 100644 --- a/docs/content/advanced/backend/customer-groups/index.md +++ b/docs/content/advanced/backend/customer-groups/index.md @@ -24,7 +24,7 @@ A customer group is stored in the database as a [CustomerGroup](../../../refere Similar to all entities in Medusa, you can use the `metadata` object attribute to store any custom data you want. For example, you can add some flag or tag to the customer group for a custom use case: -```jsx +```jsx noHeader metadata: { is_seller: true } diff --git a/docs/content/advanced/backend/entities/index.md b/docs/content/advanced/backend/entities/index.md index f550f38bca..1ea4774249 100644 --- a/docs/content/advanced/backend/entities/index.md +++ b/docs/content/advanced/backend/entities/index.md @@ -75,7 +75,7 @@ Be careful with your file names as it can cause unclear errors in Typeorm. Make Before trying this step make sure that you’ve created and run your migrations. You also need to re-build your code using: -```bash npm2yarn +```bash npm2yarn noHeader npm run build ``` diff --git a/docs/content/advanced/backend/plugins/create.md b/docs/content/advanced/backend/plugins/create.md index e3b2066039..2a19999d72 100644 --- a/docs/content/advanced/backend/plugins/create.md +++ b/docs/content/advanced/backend/plugins/create.md @@ -161,7 +161,7 @@ If files and directories aren't placed in the root of your plugin, the Medusa se An example of a plugin's directory before testing or publishing: -``` +```bash noHeader medusa-plugin-custom | |_ _ _ api diff --git a/docs/content/advanced/backend/price-lists/use-api.mdx b/docs/content/advanced/backend/price-lists/use-api.mdx index 7cbf66e19c..e9a8d439b0 100644 --- a/docs/content/advanced/backend/price-lists/use-api.mdx +++ b/docs/content/advanced/backend/price-lists/use-api.mdx @@ -37,7 +37,7 @@ When you create a price list, you can specify different conditions to control wh In the body of your request, aside from the required fields, you can send the following fields to apply different conditions: -```js +```js noHeader { prices: [ { diff --git a/docs/content/advanced/backend/price-selection-strategy/override.md b/docs/content/advanced/backend/price-selection-strategy/override.md index 1615ae52ad..78eaf8b1b1 100644 --- a/docs/content/advanced/backend/price-selection-strategy/override.md +++ b/docs/content/advanced/backend/price-selection-strategy/override.md @@ -72,7 +72,7 @@ This method accepts the variant ID as a first parameter and the [context](./inde This method must return an object having the following fields: -```typescript +```typescript noHeader { originalPrice, //number | null calculatedPrice, //number | null diff --git a/docs/content/advanced/backend/services/create-service.md b/docs/content/advanced/backend/services/create-service.md index 38fb679dfc..0be84bd7f7 100644 --- a/docs/content/advanced/backend/services/create-service.md +++ b/docs/content/advanced/backend/services/create-service.md @@ -54,7 +54,7 @@ In this section, you'll learn how to use services throughout your Medusa server. Before using your service, make sure you run the `build` command: -```bash npm2yarn +```bash npm2yarn noHeader npm run build ``` diff --git a/docs/content/advanced/backend/taxes/inclusive-pricing.md b/docs/content/advanced/backend/taxes/inclusive-pricing.md index 616453611e..c16846ffe4 100644 --- a/docs/content/advanced/backend/taxes/inclusive-pricing.md +++ b/docs/content/advanced/backend/taxes/inclusive-pricing.md @@ -58,7 +58,7 @@ The `ShippingMethod` entity also has the `includes_tax` attribute. Its value is When a price is tax-inclusive, the tax amount is calculated using the following formula: -```jsx +```jsx noHeader const taxAmount = (taxRate * taxInclusivePrice) / (1 + taxRate) ``` @@ -110,7 +110,7 @@ Price lists include a list of prices that can be used to override the original p Each variant’s price in the price list is compared to the variant’s original price using the following condition: -```jsx +```jsx noHeader amount < (1 + taxRate) * calculatedPrice ``` @@ -120,7 +120,7 @@ Where `amount` is the amount of the variant’s price in the price list, `taxRat Here is an example of these fields when tax inclusivity is enabled for both the currency and the price list: -```jsx +```jsx noHeader { original_price: 110, calculated_price: 100, diff --git a/docs/content/contribution-guidelines.md b/docs/content/contribution-guidelines.md index 40653c7105..114115936d 100644 --- a/docs/content/contribution-guidelines.md +++ b/docs/content/contribution-guidelines.md @@ -93,6 +93,33 @@ If the admonition does not match any of the mentioned criteria, always default t If you are adding images to a documentation page, you can host the image on [Imgur](https://imgur.com) for free. +## Code Block Types + +In the Medusa documentation, there are two code block types: code blocks with headers and code blocks without headers. + +Code blocks without headers should be used when: + +- The code block is used inside an Admonition. +- The content of the code block can't be reported (for example, if the code block contains only a text of the expected output). + +In all other cases, code blocks with headers should be used. + +### Code Blocks with Headers + +By default, all code blocks have headers and no additional actions are required to add the header. + +### Code Blocks without Headers + +To add a code block without a header, simply add `noHeader` after the beginning backticks of the code block. For example: + +~~~md +```bash noHeader +this code block does not have a header +``` +~~~ + +`noHeader` should be added after the language of the code block (which is `bash` in the above example). If you used `npm2yarn` as well, `noHeader` should be after it. + ## NPM and Yarn Code Blocks If you’re adding code blocks that use NPM and Yarn, you must use the [npm2yarn syntax](https://docusaurus.io/docs/markdown-features/code-blocks#npm2yarn-remark-plugin). diff --git a/docs/content/deployments/admin/deploying-on-netlify.md b/docs/content/deployments/admin/deploying-on-netlify.md index 3e310835ef..2b0e7c3dc8 100644 --- a/docs/content/deployments/admin/deploying-on-netlify.md +++ b/docs/content/deployments/admin/deploying-on-netlify.md @@ -180,7 +180,7 @@ You’ll have to follow five steps for the initialization: You’ll be asked to either connect to an existing Netlify website or create a new one. Choose the second option to create a new site: -```bash +```bash noHeader ? What would you like to do? ⇄ Connect this directory to an existing Netlify site ❯ + Create & configure a new site @@ -198,7 +198,7 @@ You’ll be asked to optionally enter a site name. At this point, the website is created on Netlify. However, Netlify needs to configure Webhooks and deployment keys. You’ll be asked to either authorize GitHub through Netlify’s website or through a personal access token. You’re free to choose either: -```bash +```bash noHeader ? Netlify CLI needs access to your GitHub account to configure Webhooks and Depl oy Keys. What would you like to do? (Use arrow keys) ❯ Authorize with GitHub through app.netlify.com diff --git a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md index 4ff71cf986..2f22246b2e 100644 --- a/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md +++ b/docs/content/deployments/storefront/deploying-gatsby-on-netlify.md @@ -138,7 +138,7 @@ If you haven’t added any products to your Medusa server, the build process mig Alternatively, you can seed the server with demo data by running this command in the root directory of the server: -```bash +```bash noHeader medusa seed -f data/seed.json ``` @@ -198,7 +198,7 @@ You’ll have to follow five steps for the initialization: You’ll be asked to either connect to an existing Netlify website or create a new one. Choose the second option to create a new site: -```bash +```bash noHeader ? What would you like to do? ⇄ Connect this directory to an existing Netlify site ❯ + Create & configure a new site @@ -216,7 +216,7 @@ You’ll be asked to optionally enter a site name. At this point, the website is created on Netlify. However, Netlify needs to configure Webhooks and deployment keys. You’ll be asked to either authorize GitHub through Netlify’s website or through a personal access token. You’re free to choose either: -```bash +```bash noHeader ? Netlify CLI needs access to your GitHub account to configure Webhooks and Depl oy Keys. What would you like to do? (Use arrow keys) ❯ Authorize with GitHub through app.netlify.com @@ -271,7 +271,7 @@ If you haven’t added any products to your Medusa server, the build process mig Alternatively, you can seed the server with demo data by running this command in the root directory of the server: -```bash +```bash noHeader medusa seed -f data/seed.json ``` diff --git a/docs/content/quickstart/quick-start-docker.md b/docs/content/quickstart/quick-start-docker.md index ca6eadfb81..9a59c7545c 100644 --- a/docs/content/quickstart/quick-start-docker.md +++ b/docs/content/quickstart/quick-start-docker.md @@ -7,7 +7,7 @@ In this document, you will learn how to make a container of Medusa's app on Dock ### Node.js Medusa supports Node versions 14 and 16. You can check which version of Node you have by running the following command: -```bash +```bash noHeader node -v ``` @@ -21,18 +21,18 @@ It is assumed that you have Docker installed on your system. You can install it ### 1. Clone Medusa's starter project from GitHub -```bash +```bash noHeader git clone https://github.com/medusajs/medusa-starter-default.git my-medusa-starter ``` ### 2. Change to the newly created project directory -```bash +```bash noHeader cd my-medusa-starter ``` ### 3. Rename the environment variables(.env) file -```bash +```bash noHeader mv .env.template .env ``` @@ -40,7 +40,7 @@ mv .env.template .env Make sure the Docker Desktop app is running. Then, run the following command: -```bash +```bash noHeader docker-compose up --build ``` @@ -48,7 +48,7 @@ docker-compose up --build If you get the error `ERROR: for postgres Cannot start service postgres: Ports are not available`, change the ports used for PostgreSQL in `docker-compose.yml` to something like this: -```yml +```yml noHeader postgres: ports: - "5433:5433" @@ -68,7 +68,7 @@ Once done, your server will be accessible at `http://localhost:9000`. You can test out your server using tools like Postman or by sending a cURL request: -```bash +```bash noHeader curl -X GET localhost:9000/store/products | python -m json.tool ``` @@ -76,7 +76,7 @@ curl -X GET localhost:9000/store/products | python -m json.tool This command uses Python to format the result of the request better in your command line. If you don't want to use Python you can simply send a request without the formatting: -```bash +```bash noHeader curl localhost:9000/store/products ``` diff --git a/docs/content/quickstart/quick-start.md b/docs/content/quickstart/quick-start.md index a31342f751..74dec39388 100644 --- a/docs/content/quickstart/quick-start.md +++ b/docs/content/quickstart/quick-start.md @@ -6,7 +6,7 @@ This document will guide you through setting up your Medusa server in a few minu Medusa supports Node versions 14 and 16. You can check which version of Node you have by running the following command: -```bash +```bash noHeader node -v ``` @@ -16,7 +16,7 @@ You can install Node from the [official website](https://nodejs.org/en/). ### 1. Install Medusa CLI - ```bash npm2yarn + ```bash npm2yarn noHeader npm install @medusajs/medusa-cli -g ``` @@ -28,13 +28,13 @@ If you run into any errors while installing the CLI tool, check out the [trouble ### 2. Create a new Medusa project - ```bash + ```bash noHeader medusa new my-medusa-store --seed ``` ### 3. Start your Medusa server - ```bash + ```bash noHeader cd my-medusa-store medusa develop ``` @@ -43,7 +43,7 @@ If you run into any errors while installing the CLI tool, check out the [trouble After these three steps and in only a couple of minutes, you now have a complete commerce engine running locally. You can test it out by sending a request using a tool like Postman or through the command line: -```bash +```bash noHeader curl localhost:9000/store/products | python -m json.tool ``` @@ -51,7 +51,7 @@ curl localhost:9000/store/products | python -m json.tool This command uses Python to format the result of the request better in your command line. If you don't want to use Python you can simply send a request without the formatting: -```bash +```bash noHeader curl localhost:9000/store/products ``` diff --git a/docs/content/troubleshooting/cli-installation-errors.mdx b/docs/content/troubleshooting/cli-installation-errors.mdx index 56da7c8d45..5262646939 100644 --- a/docs/content/troubleshooting/cli-installation-errors.mdx +++ b/docs/content/troubleshooting/cli-installation-errors.mdx @@ -19,7 +19,7 @@ You can check out more information in [NPM’s documentation](https://docs.npmjs If you install the Medusa CLI tool with Yarn, then try to use the CLI tool but get the error: -```bash +```bash noHeader command not found: medusa ``` diff --git a/docs/content/troubleshooting/documentation-error.md b/docs/content/troubleshooting/documentation-error.md index ebd5d8b906..4be195b052 100644 --- a/docs/content/troubleshooting/documentation-error.md +++ b/docs/content/troubleshooting/documentation-error.md @@ -12,7 +12,7 @@ For that reason, when the `start` and `build` scripts in `www/docs` are used, th If you receive the following error when you run the `build` command in `www/docs`: -```bash +```bash noHeader FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory ``` diff --git a/docs/content/troubleshooting/s3-acl-error.md b/docs/content/troubleshooting/s3-acl-error.md index 2e05e351de..7cb53031bc 100644 --- a/docs/content/troubleshooting/s3-acl-error.md +++ b/docs/content/troubleshooting/s3-acl-error.md @@ -2,7 +2,7 @@ If you're using the [S3 Plugin](../add-plugins/s3.md) and, when you upload an image, you receive the following error on your Medusa server: -```bash +```bash noHeader AccessControlListNotSupported: The bucket does not allow ACLs ``` diff --git a/docs/content/troubleshooting/signing-in-to-admin.md b/docs/content/troubleshooting/signing-in-to-admin.md index 5a2c09563a..fdd28ec644 100644 --- a/docs/content/troubleshooting/signing-in-to-admin.md +++ b/docs/content/troubleshooting/signing-in-to-admin.md @@ -2,7 +2,7 @@ If you've created a new Medusa server with the `--seed` option or used the `seed` script or command, the default credentials are: -```bash +```bash noHeader email: admin@medusa-test.com password: supersecret ``` diff --git a/docs/content/troubleshooting/transaction-error-in-checkout.md b/docs/content/troubleshooting/transaction-error-in-checkout.md index 9b096505d8..37526b8a19 100644 --- a/docs/content/troubleshooting/transaction-error-in-checkout.md +++ b/docs/content/troubleshooting/transaction-error-in-checkout.md @@ -6,7 +6,7 @@ However, this comes at the expense of important features that are needed in a pr Therefore, you might experience the following error when going through a checkout flow in one of Medusa's starters while using SQLite: -```bash +```bash noHeader Error: Transaction already started for the given connection, commit current transaction before starting a new one. ``` @@ -46,7 +46,7 @@ medusa migrations run If you want to add demo data into your server, you should also seed the database using the following command: -```bash npm2yarn +```bash npm2yarn noHeader npm run seed ``` diff --git a/docs/content/tutorial/0-set-up-your-development-environment.mdx b/docs/content/tutorial/0-set-up-your-development-environment.mdx index 82f16b5cf6..f56879ae7d 100644 --- a/docs/content/tutorial/0-set-up-your-development-environment.mdx +++ b/docs/content/tutorial/0-set-up-your-development-environment.mdx @@ -18,7 +18,7 @@ Node.js is the environment that makes it possible for Medusa to run, so you must Medusa supports versions 14 and 16 of Node.js. You can check your Node.js version using the following command: -```bash +```bash noHeader node -v ``` @@ -118,7 +118,7 @@ The final installation required to get started with Medusa is the Medusa CLI. It You can install Medusa’s CLI with the following command: -```bash npm2yarn +```bash npm2yarn noHeader npm install @medusajs/medusa-cli -g ``` diff --git a/docs/content/tutorial/development.module.css b/docs/content/tutorial/development.module.css index f649207965..430577690f 100644 --- a/docs/content/tutorial/development.module.css +++ b/docs/content/tutorial/development.module.css @@ -1,10 +1,11 @@ .osTabs { - background-color: #f4f4f4; + background-color: var(--ifm-note-background); padding: 10px; - border-radius: 6.4px; - color: #000; + border: 1px solid var(--ifm-note-border-color); + border-radius: var(--ifm-global-radius); + color: var(--ifm-alert-foreground-color); } .osTabs li:not([aria-selected=true]) { - color: #000; + color: var(--ifm-color-content); } \ No newline at end of file diff --git a/docs/content/usage/create-medusa-app.mdx b/docs/content/usage/create-medusa-app.mdx index f7823b0d4d..74dee3c82c 100644 --- a/docs/content/usage/create-medusa-app.mdx +++ b/docs/content/usage/create-medusa-app.mdx @@ -44,7 +44,7 @@ You’ll then be asked to enter the name of the directory you want the project t Next, you’ll be asked to choose the Medusa starter used to install the Medusa server. You can either pick the default Medusa starter, the Contentful starter or enter a starter URL by choosing `Other`: -```bash +```bash noHeader ? Which Medusa starter would you like to install? … ❯ medusa-starter-default medusa-starter-contentful @@ -63,7 +63,7 @@ You can learn more about the Contentful starter in the [Contentful Integration d After choosing the Medusa starter, you’ll be asked to choose the storefront starter. You can choose one of the starters in the list included or choose `None` to skip installing a storefront: -```bash +```bash noHeader ? Which storefront starter would you like to install? ❯ Gatsby Starter Next.js Starter @@ -85,7 +85,7 @@ Learn more about the [Next.js](../starters/nextjs-medusa-starter.md) and [Gatsby After choosing the above starters, the installation of each component will begin along with its dependencies. Once the installation is done, you’ll see instructions related to how to start each component. -```bash +```bash noHeader Your project is ready. The available commands are: Medusa API @@ -107,7 +107,7 @@ The commands will differ based on your choices in previous prompts. Inside the root project directory which was specified at the beginning of the installation process you’ll find the following directory structure: -```bash +```bash noHeader /my-medusa-store /storefront // Medusa storefront starter /backend // Medusa starter as a backend option diff --git a/www/docs/src/css/_code.css b/www/docs/src/css/_code.css index 94a91a227e..3a356d55ad 100644 --- a/www/docs/src/css/_code.css +++ b/www/docs/src/css/_code.css @@ -97,10 +97,14 @@ html[data-theme="dark"] .docusaurus-highlight-code-line { font-size: 13px; } -.theme-code-block { +.theme-code-block:not(.no-header-block) { border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius) !important; } +.theme-code-block.no-header-block { + border-radius: var(--ifm-code-border-radius); +} + .code-action { background-color: transparent; border: none; @@ -128,10 +132,15 @@ a.code-action { width: 20px; } -.theme-code-block [class*=buttonGroup] { +.theme-code-block:not(.no-header-block) [class*=buttonGroup] { display: none; } +.theme-code-block.no-header-block [class*=buttonGroup] button { + opacity: 1 !important; + border: none; +} + .copy-action { cursor: pointer; } @@ -145,8 +154,19 @@ a.code-action { border-bottom: none; } -[data-theme="dark"] .theme-code-block { - border-top: none; +html:not([data-theme="dark"]) .theme-code-block:not(.no-header-block) { + --ifm-code-border-color: #393939; + + border-top: 1px solid var(--ifm-code-border-color); +} + +.theme-code-block.no-header-block code:not(.thin-code), +.theme-code-block:not(.no-header-block) code { + padding: var(--ifm-pre-padding); +} + +.theme-code-block.no-header-block .thin-code { + padding: calc(var(--ifm-pre-padding) / 2); } @media screen and (min-width: 568px) { diff --git a/www/docs/src/css/_docspage.css b/www/docs/src/css/_docspage.css index 251240ea98..41b900ed5c 100644 --- a/www/docs/src/css/_docspage.css +++ b/www/docs/src/css/_docspage.css @@ -137,6 +137,10 @@ html:not([data-theme="dark"]) .doc-footer { z-index: var(--ifm-z-index-overlay); } +details > div { + --docusaurus-details-decoration-color: transparent !important; +} + @media (min-width: 1440px) { .markdown-doc-wrapper { max-width: var(--ifm-container-width-xl) !important; diff --git a/www/docs/src/css/_note.css b/www/docs/src/css/_note.css index 59005eeed7..7396034bf2 100644 --- a/www/docs/src/css/_note.css +++ b/www/docs/src/css/_note.css @@ -19,9 +19,11 @@ html:not([data-theme="dark"]) [class*=alert--] { --ifm-code-background: #F9FAFB !important; --ifm-alert-background-color-highlight: #F9FAFB !important; + --ifm-link-color: #4B5563 !important; } [data-theme="dark"] [class*=alert--] { --ifm-code-background: #222222 !important; --ifm-alert-background-color-highlight: #222222 !important; + --ifm-link-color: #8A8A8A !important; } \ No newline at end of file diff --git a/www/docs/src/css/_variables.css b/www/docs/src/css/_variables.css index 6eccb04481..5208184cf9 100644 --- a/www/docs/src/css/_variables.css +++ b/www/docs/src/css/_variables.css @@ -86,6 +86,8 @@ --ifm-code-tabs-active-bg: transparent; --ifm-code-tabs-active-color: #F4F4F4; --ifm-code-action-hover-bg: rgba(141, 141, 141, 0.16); + --ifm-pre-padding: 16px; + --docusaurus-highlighted-code-line-bg: #393939; /* Tooltip */ --ifm-tooltip-background-color: #fff; @@ -143,12 +145,7 @@ html[data-theme="dark"] { --ifm-hr-background-color: #2D2D2D; /* Colors */ - --ifm-color-primary-dark: #6231ff; - --ifm-color-primary-darker: #5520ff; - --ifm-color-primary-darkest: #3800ed; - --ifm-color-primary: #9675ff; - --ifm-color-primary-lighter: #a386ff; - --ifm-color-primary-lightest: #c9b8ff; + --ifm-color-primary: #F3F3F3; --ifm-background-color: #161616; --ifm-background-surface-color: #161616; --ifm-medusa-gray: #292929; @@ -237,4 +234,7 @@ html[data-theme="dark"] { --ifm-announcement-bar-icon-bg: #393939; --ifm-announcement-bar-icon-border-color: #393939; --ifm-announcement-bar-text-color: #737373; + + /* Tabs */ + --ifm-tabs-color-active: #F3F3F3; } \ No newline at end of file diff --git a/www/docs/src/theme/CodeBlock/Content/String.js b/www/docs/src/theme/CodeBlock/Content/String.js new file mode 100644 index 0000000000..c06a90e3ed --- /dev/null +++ b/www/docs/src/theme/CodeBlock/Content/String.js @@ -0,0 +1,99 @@ +import React from 'react'; +import clsx from 'clsx'; +import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common'; +import { + parseCodeBlockTitle, + parseLanguage, + parseLines, + containsLineNumbers, + useCodeWordWrap, +} from '@docusaurus/theme-common/internal'; +import Highlight, {defaultProps} from 'prism-react-renderer'; +import Line from '@theme/CodeBlock/Line'; +import Container from '@theme/CodeBlock/Container'; +import styles from './styles.module.css'; +import CopyButton from '../../CopyButton'; +import ThemedImage from '@theme/ThemedImage'; +import useBaseUrl from '@docusaurus/useBaseUrl'; + +export default function CodeBlockString({ + children, + className: blockClassName = '', + metastring, + title: titleProp, + showLineNumbers: showLineNumbersProp, + language: languageProp, +}) { + const { + prism: {defaultLanguage, magicComments}, + } = useThemeConfig(); + const language = + languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage; + const prismTheme = usePrismTheme(); + const wordWrap = useCodeWordWrap(); + // We still parse the metastring in case we want to support more syntax in the + // future. Note that MDX doesn't strip quotes when parsing metastring: + // "title=\"xyz\"" => title: "\"xyz\"" + const title = parseCodeBlockTitle(metastring) || titleProp; + const {lineClassNames, code} = parseLines(children, { + metastring, + language, + magicComments, + }); + const showLineNumbers = + showLineNumbersProp ?? containsLineNumbers(metastring); + return ( + + {title &&
{title}
} +
+ + {({className, tokens, getLineProps, getTokenProps}) => ( + 
+              
+                {tokens.map((line, i) => (
+                  
+                ))}
+              
+
+ )} + +
+ {/* */} + + + +
+
+ + ); +} diff --git a/www/docs/src/theme/CodeBlock/Content/styles.module.css b/www/docs/src/theme/CodeBlock/Content/styles.module.css new file mode 100644 index 0000000000..be631aeb45 --- /dev/null +++ b/www/docs/src/theme/CodeBlock/Content/styles.module.css @@ -0,0 +1,85 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + .codeBlockContent { + position: relative; + /* rtl:ignore */ + direction: ltr; + border-radius: inherit; +} + +.codeBlockTitle { + border-bottom: 1px solid var(--ifm-color-emphasis-300); + font-size: var(--ifm-code-font-size); + font-weight: 500; + padding: 0.75rem var(--ifm-pre-padding); + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +.codeBlock { + --ifm-pre-background: var(--prism-background-color); + margin: 0; + padding: 0; +} + +.codeBlockTitle + .codeBlockContent .codeBlock { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.codeBlockStandalone { + padding: 0; +} + +.codeBlockLines { + font: inherit; + /* rtl:ignore */ + float: left; + min-width: 100%; +} + +.codeBlockLinesWithNumbering { + display: table; + padding: var(--ifm-pre-padding) 0; +} + +@media print { + .codeBlockLines { + white-space: pre-wrap; + } +} + +.buttonGroup { + display: flex; + column-gap: 0.2rem; + position: absolute; + right: calc(var(--ifm-pre-padding) / 4 - 2px); + top: calc(var(--ifm-pre-padding) / 4 - 2px); +} + +.buttonGroup button { + display: flex; + align-items: center; + background: var(--prism-background-color); + color: var(--prism-color); + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: var(--ifm-global-radius); + padding: 0.4rem; + line-height: 0; + transition: opacity 200ms ease-in-out; + opacity: 0; +} + +.buttonGroup button:focus-visible, +.buttonGroup button:hover { + opacity: 1 !important; +} + +:global(.theme-code-block:hover) .buttonGroup button { + opacity: 0.4; +} diff --git a/www/docs/src/theme/CodeBlock/index.js b/www/docs/src/theme/CodeBlock/index.js index d1103e7031..f5b03ea4f4 100644 --- a/www/docs/src/theme/CodeBlock/index.js +++ b/www/docs/src/theme/CodeBlock/index.js @@ -1,4 +1,4 @@ -import React, {isValidElement, useCallback, useEffect, useState} from 'react'; +import React, {isValidElement} from 'react'; import useIsBrowser from '@docusaurus/useIsBrowser'; import useBaseUrl from '@docusaurus/useBaseUrl'; import ElementContent from '@theme/CodeBlock/Content/Element'; @@ -21,7 +21,7 @@ function maybeStringifyChildren(children) { // The children is now guaranteed to be one/more plain strings return Array.isArray(children) ? children.join('') : children; } -export default function CodeBlock({children: rawChildren, ...props}) { +export default function CodeBlock({children: rawChildren, noHeader = false, ...props}) { // The Prism theme on SSR is always the default theme but the site theme can // be in a different mode. React hydration doesn't update DOM styles that come // from SSR. Hence force a re-render after mounting to apply the current @@ -34,23 +34,25 @@ export default function CodeBlock({children: rawChildren, ...props}) { return (
-
- - - + + + + + + + - - - - - -
- + +
+ )} + {children} diff --git a/www/docs/src/theme/DocCard/styles.module.css b/www/docs/src/theme/DocCard/styles.module.css index c6d093ec90..fc71a0ec0e 100644 --- a/www/docs/src/theme/DocCard/styles.module.css +++ b/www/docs/src/theme/DocCard/styles.module.css @@ -1,6 +1,4 @@ .cardContainer { - --ifm-link-color: var(--ifm-color-emphasis-800); - --ifm-link-hover-color: var(--ifm-color-emphasis-700); --ifm-link-hover-decoration: none; --ifm-background-color: #fff; --ifm-background-color-hover: #F9FAFB;