asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: make code blocks collapsible (#7606)

Browse Source 
* added collapsible code feature

* fixed side shadow

* fix build errors

* change design

* make code blocks collapsible
This commit is contained in:
Shahed Nasser
2024-06-05 10:28:41 +03:00
committed by GitHub
parent dc087bf310
commit 4a6327e497
44 changed files with 815 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/resources/app/architectural-modules/notification/send-notification/page.mdx
+1 -1
View File
@@ -20,7 +20,7 @@ export const highlights = [
["21", "data", "The data to pass to the template defined in the third-party service."]
]
```ts title="src/subscribers/product-created.ts" highlights={highlights}
```ts title="src/subscribers/product-created.ts" highlights={highlights} collapsibleLines="1-7" expandButtonLabel="Show Imports"
import type {
SubscriberArgs,
SubscriberConfig,
www/apps/resources/app/architectural-modules/notification/sendgrid/page.mdx
+1 -1
View File
@@ -146,7 +146,7 @@ export const highlights = [
["21", "data", "The data to pass to the template defined in SendGrid."]
]
```ts title="src/subscribers/product-created.ts" highlights={highlights}
```ts title="src/subscribers/product-created.ts" highlights={highlights} collapsibleLines="1-7" expandButtonLabel="Show Imports"
import type {
SubscriberArgs,
SubscriberConfig,
www/apps/resources/app/commerce-modules/api-key/examples/page.mdx
+2 -2
View File
@@ -119,7 +119,7 @@ In this guide, you’ll find common examples of how you can use the API Key Modu
<CodeTabs groupId="app-type">
<CodeTab label="Medusa API Router" value="medusa">
```ts
```ts collapsibleLines="1-9" expandButtonLabel="Show Imports"
import {
AuthenticatedMedusaRequest,
MedusaResponse
@@ -257,7 +257,7 @@ In this guide, you’ll find common examples of how you can use the API Key Modu
<CodeTabs groupId="app-type">
<CodeTab label="Medusa API Router" value="medusa">
```ts
```ts collapsibleLines="1-8" expandButtonLabel="Show Imports"
import {
AuthenticatedMedusaRequest,
MedusaResponse
www/apps/resources/app/commerce-modules/auth/examples/page.mdx
+3 -3
View File
@@ -19,7 +19,7 @@ This example uses the [jsonwebtoken NPM package](https://www.npmjs.com/package/j
<CodeTabs groupId="app-type">
<CodeTab label="Medusa API Router" value="medusa">
```ts
```ts collapsibleLines="1-10" expandButtonLabel="Show Imports"
import { MedusaRequest, MedusaResponse } from "@medusajs/medusa"
import {
IAuthModuleService,
@@ -122,7 +122,7 @@ This example uses the [jsonwebtoken NPM package](https://www.npmjs.com/package/j
<CodeTabs groupId="app-type">
<CodeTab label="Medusa API Router" value="medusa">
```ts
```ts collapsibleLines="1-10" expandButtonLabel="Show Imports"
import { MedusaRequest, MedusaResponse } from "@medusajs/medusa"
import {
IAuthModuleService,
@@ -171,7 +171,7 @@ This example uses the [jsonwebtoken NPM package](https://www.npmjs.com/package/j
</CodeTab>
<CodeTab label="Next.js App Router" value="nextjs">
```ts
```ts collapsibleLines="1-7" expandButtonLabel="Show Imports"
import { NextResponse } from "next/server"
import {
www/apps/resources/app/commerce-modules/cart/promotions/page.mdx
+2 -2
View File
@@ -41,7 +41,7 @@ Learn more about actions in the [Promotion Module’s documentation](../../promo
</Note>
```ts
```ts collapsibleLines="1-8" expandButtonLabel="Show Imports"
import {
ComputeActionAdjustmentLine,
ComputeActionItemLine,
@@ -101,7 +101,7 @@ The `computeActions` method accepts the existing adjustments of line items and s
Then, use the returned `addItemAdjustment` and `addShippingMethodAdjustment` actions to set the cart’s line item and the shipping method’s adjustments.
```ts
```ts collapsibleLines="1-9" expandButtonLabel="Show Imports"
import {
AddItemAdjustmentAction,
AddShippingMethodAdjustment,
www/apps/resources/app/commerce-modules/order/promotion-adjustments/page.mdx
+2 -2
View File
@@ -41,7 +41,7 @@ Learn more about actions in the [Promotion Module’s documentation](../../promo
</Note>
```ts
```ts collapsibleLines="1-10" expandButtonLabel="Show Imports"
import {
ComputeActionAdjustmentLine,
ComputeActionItemLine,
@@ -103,7 +103,7 @@ The `computeActions` method accepts the existing adjustments of line items and s
Then, use the returned `addItemAdjustment` and `addShippingMethodAdjustment` actions to set the order’s line items and the shipping method’s adjustments.
```ts
```ts collapsibleLines="1-9" expandButtonLabel="Show Imports"
import {
AddItemAdjustmentAction,
AddShippingMethodAdjustment,
www/apps/resources/app/commerce-modules/pricing/examples/page.mdx
+1 -1
View File
@@ -323,7 +323,7 @@ In this document, you’ll find common examples of how you can use the Pricing M
<CodeTabs groupId="app-type">
<CodeTab value="medusa" label="Medusa API Router">
```ts
```ts collapsibleLines="1-8" expandButtonLabel="Show Imports"
import { MedusaRequest, MedusaResponse } from "@medusajs/medusa"
import {
IPricingModuleService,
www/apps/resources/app/js-client/page.mdx
+55 -61
View File
@@ -1,4 +1,4 @@
import { Table, LegacyCodeTabs } from "docs-ui"
import { Table, CodeTabs, CodeTab } from "docs-ui"
export const metadata = {
title: `Medusa JS Client`,
@@ -267,13 +267,11 @@ Once the user or customer is authenticated successfully, the Medusa client autom
For example:
<LegacyCodeTabs tabs={[
{
label: "Admin User",
value: "user",
code: {
lang: "ts",
source: `import Medusa from "@medusajs/medusa-js"
<CodeTabs group="client-authentication-type">
<CodeTab label="Admin User" value="user">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
@@ -282,15 +280,14 @@ For example:
email: "user@example.com",
password: "supersecret",
})
// send authenticated requests now`
}
},
{
label: "Customer",
value: "customer",
code: {
lang: "ts",
source: `import Medusa from "@medusajs/medusa-js"
// send authenticated requests now
```
</CodeTab>
<CodeTab label="Customer" value="customer">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
@@ -299,10 +296,11 @@ For example:
email: "user@example.com",
password: "supersecret",
})
// send authenticated requests now`
}
}
]} group="client-authentication-type" />
// send authenticated requests now
```
</CodeTab>
</CodeTabs>
### Cookie Session ID
@@ -314,13 +312,11 @@ Once the user or customer is authenticated successfully, the Medusa client sets
For example:
<LegacyCodeTabs tabs={[
{
label: "Admin User",
value: "user",
code: {
lang: "ts",
source: `import Medusa from "@medusajs/medusa-js"
<CodeTabs group="client-authentication-type">
<CodeTab label="Admin User" value="user">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
@@ -329,15 +325,14 @@ For example:
email: "user@example.com",
password: "supersecret",
})
// send authenticated requests now`
}
},
{
label: "Customer",
value: "customer",
code: {
lang: "ts",
source: `import Medusa from "@medusajs/medusa-js"
// send authenticated requests now
```
</CodeTab>
<CodeTab label="Customer" value="customer">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
@@ -346,10 +341,11 @@ For example:
email: "user@example.com",
password: "user@example.com",
})
// send authenticated requests now`
}
}
]} group="client-authentication-type" />
// send authenticated requests now
```
</CodeTab>
</CodeTabs>
### API Key
@@ -357,13 +353,11 @@ You can authenticate admin users with a personal API Token.
If a user doesn't have a personal API token, create one with the [admin.users.update](/references/js-client/AdminUsersResource#update) method or the [Update User API route](https://docs.medusajs.com/api/admin#users_postusersuser):
<LegacyCodeTabs tabs={[
{
label: "JS Client",
value: "js-client",
code: {
lang: "ts",
source: `import Medusa from "@medusajs/medusa-js"
<CodeTabs group="client-type">
<CodeTab label="JS Client" value="js-client">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
@@ -374,23 +368,23 @@ If a user doesn't have a personal API token, create one with the [admin.users.up
})
.then(({ user }) => {
console.log(user.api_token)
})`
}
},
{
label: "cURL",
value: "curl",
code: {
lang: "bash",
source: `curl -L -X POST '<BACKEND_URL>/admin/users/<USER_ID>' \\
})
```
</CodeTab>
<CodeTab label="cURL" value="curl">
```bash
curl -L -X POST '<BACKEND_URL>/admin/users/<USER_ID>' \\
-H 'Cookie: connect.sid={sid}' \\
-H 'Content-Type: application/json' \\
--data-raw '{
"api_token": "{api_token}"
}'`
}
}
]} group="client-type" />
}'
```
</CodeTab>
</CodeTabs>
Then, initialize the Medusa client passing it the `apiKey` option:
www/apps/resources/app/medusa-react/page.mdx
+19 -21
View File
@@ -1,4 +1,4 @@
import { Table, LegacyCodeTabs } from "docs-ui"
import { Table, CodeTabs, CodeTab } from "docs-ui"
export const metadata = {
title: `Medusa React`,
@@ -216,13 +216,11 @@ There are two ways to authenticate an admin user:
For example:
<LegacyCodeTabs tabs={[
{
value: "useadminlogin",
label: "useAdminLogin hook",
code: {
lang: "ts",
source: `import React from "react"
<CodeTabs group="admin-auth">
<CodeTab label="useAdminLogin hook" value="useadminlogin">
```ts
import React from "react"
import { useAdminLogin } from "medusa-react"
const Login = () => {
@@ -244,15 +242,14 @@ For example:
// ...
}
export default Login`
}
},
{
value: "apikey",
label: "apikey Option",
code: {
lang: "tsx",
source: `import { MedusaProvider } from "medusa-react"
export default Login
```
</CodeTab>
<CodeTab label="apikey Option" value="apikey">
```tsx
import { MedusaProvider } from "medusa-react"
import Storefront from "./Storefront"
import { QueryClient } from "@tanstack/react-query"
import React from "react"
@@ -271,10 +268,11 @@ For example:
)
}
export default App`
}
}
]} group="admin-auth" />
export default App
```
</CodeTab>
</CodeTabs>
### Customer Authentication
www/apps/resources/app/troubleshooting/_sections/cli-installation-errors/yarn-error.mdx
+18 -23
View File
@@ -1,4 +1,4 @@
import { LegacyCodeTabs } from "docs-ui"
import { CodeTabs, CodeTab } from "docs-ui"
If you install the Medusa CLI tool with Yarn, then try to use the CLI tool but get the error:
@@ -8,28 +8,23 @@ command not found: medusa
You have to add Yarn’s install location to the PATH variable:
<LegacyCodeTabs
tabs={[
{
label: "MacOS / Linux",
value: "unix",
code: {
lang: "bash",
source: `export PATH="$(yarn global bin):$PATH"`
}
},
{
label: "Windows",
value: "windows",
code: {
lang: "bash",
source: `# MAKE SURE TO INCLUDE %path%
<CodeTabs group="operating-systems">
<CodeTab label="MacOS / Linux" value="unix">
```plain
export PATH="$(yarn global bin):$PATH
```
</CodeTab>
<CodeTab label="Windows" value="windows">
```bash
# MAKE SURE TO INCLUDE %path%
setx path "%path%;c:\\users\\YOURUSERNAME\\appdata\\local\\yarnbin"
# YOURUSERNAME is your account username`
}
}
]}
group="operating-systems"
/>
# YOURUSERNAME is your account username
```
</CodeTab>
</CodeTabs>
You can learn more in [Yarn’s documentation](https://classic.yarnpkg.com/en/docs/cli/global#adding-the-install-location-to-your-path).
www/apps/resources/app/troubleshooting/_sections/common-installation-errors/module-x-error.mdx
+19 -21
View File
@@ -1,26 +1,24 @@
import { LegacyCodeTabs } from "docs-ui"
import { CodeTabs, CodeTab } from "docs-ui"
This error can occur while installing any of Medusa's projects (for example, Next.js Starter Template). There is no specific cause to this error.
One way to resolve it is by removing the `node_modules` directory in the project and re-installing the dependencies:
<LegacyCodeTabs tabs={[
{
label: "MacOS / Linux",
value: "unix",
code: {
lang: "bash",
source: `rm -rf node_modules
yarn install`
}
},
{
label: "Windows",
value: "windows",
code: {
lang: "bash",
source: `rd /s /q node_modules
yarn install`
}
}
]} group="operating-systems" />
<CodeTabs group="operating-systems">
<CodeTab label="MacOS / Linux" value="unix">
```bash
rm -rf node_modules
yarn install
```
</CodeTab>
<CodeTab label="Windows" value="windows">
```bash
rd /s /q node_modules
yarn install
```
</CodeTab>
</CodeTabs>