docs: make code blocks collapsible (#7606)

* added collapsible code feature * fixed side shadow * fix build errors * change design * make code blocks collapsible
2024-06-05 10:28:41 +03:00
parent dc087bf310
commit 4a6327e497
44 changed files with 815 additions and 446 deletions
@@ -72,7 +72,7 @@ For example:

 export const highlights = [["18", "parseCorsOrigins", "A utility function that parses the CORS configurations in `medusa-config.js`"]]

-```ts title="src/api/middlewares.ts" highlights={highlights}
+```ts title="src/api/middlewares.ts" highlights={highlights} collapsibleLines="1-7" expandButtonLabel="Show Imports"
 import {
  ConfigModule,
  MiddlewaresConfig,
@@ -57,7 +57,7 @@ You can access the logged-in customer’s ID in all API routes starting with `/s

 For example:

-```ts title="src/api/store/customers/me/custom/route.ts" highlights={[["16", "", "Access the logged-in customer's ID."]]}
+```ts title="src/api/store/customers/me/custom/route.ts" highlights={[["16", "", "Access the logged-in customer's ID."]]} collapsibleLines="1-7" expandButtonLabel="Show Imports"
 import type {
  AuthenticatedMedusaRequest,
  MedusaResponse,
@@ -90,7 +90,7 @@ You can access the logged-in admin user’s ID in all API Routes starting with `

 For example:

-```ts title="src/api/admin/custom/route.ts" highlights={[["16", "req.user.userId", "Access the logged-in admin user's ID."]]}
+```ts title="src/api/admin/custom/route.ts" highlights={[["16", "req.user.userId", "Access the logged-in admin user's ID."]]} collapsibleLines="1-7" expandButtonLabel="Show Imports"
 import type {
  AuthenticatedMedusaRequest,
  MedusaResponse,
@@ -125,12 +125,11 @@ To protect custom API Routes that don’t start with `/store/customers/me` or `/
 For example:

 export const highlights = [
-  ["11", "authenticate", "Only authenticated admin users can access routes starting with `/custom/admin`"],
-  ["17", "authenticate", "Only authenticated customers can access routes starting with `/custom/customers`"]
+  ["8", "authenticate", "Only authenticated admin users can access routes starting with `/custom/admin`"],
+  ["14", "authenticate", "Only authenticated customers can access routes starting with `/custom/customers`"]
 ]

 ```ts title="src/api/middlewares.ts" highlights={highlights}
-// TODO update import
 import { MiddlewaresConfig, authenticate } from "@medusajs/medusa"

 export const config: MiddlewaresConfig = {
@@ -35,7 +35,7 @@ For building relationships between data models in different modules, refer to th

 The following example showcase a data model with common definitions:

-```ts
+```ts collapsibleLines="1-10" expandButtonLabel="Show Imports"
 import { 
  Entity, 
  Enum, 
@@ -20,7 +20,7 @@ When retrieving or listing records of that data model, records having their `del

 To create a soft-deletable model, first, add the following filter decorator to the data model class:

-```ts title="src/module/hello/models/my-soft-deletable.ts" highlights={[["7"]]}
+```ts title="src/module/hello/models/my-soft-deletable.ts" highlights={[["7"]]} collapsibleLines="1-7" expandButtonLabel="Show Imports"
 // other imports...
 import { Entity, Filter } from "@mikro-orm/core"
 import { DALUtils } from "@medusajs/utils"
@@ -20,10 +20,10 @@ export const highlights = [
  ["9", '"data" in data ? data.data.id : data.id', "The payload data is either in `data.data` or directly in `data`."]
 ]

-```ts title="src/subscribers/product-created.ts" highlights={highlights}
-import {
+```ts title="src/subscribers/product-created.ts" highlights={highlights} collapsibleLines="1-5" expandButtonLabel="Show Imports"
+import type {
  SubscriberArgs,
-  type SubscriberConfig,
+  SubscriberConfig,
 } from "@medusajs/medusa"

 export default async function productCreateHandler({
@@ -48,7 +48,7 @@ When the loader function is created outside a module, it receives the Medusa con

 For example:

-```ts title="src/loaders/hello-world.ts"
+```ts title="src/loaders/hello-world.ts" collapsibleLines="1-5" expandButtonLabel="Show Imports"
 import { MedusaContainer } from "@medusajs/medusa"
 import { IProductModuleService } from "@medusajs/types"
 import { ModuleRegistrationName } from "@medusajs/modules-sdk"
@@ -40,7 +40,7 @@ The Medusa application resolves these relationships while maintaining isolation

 Consider you’re creating a data model that adds custom fields associated with a product:

-```ts title="src/modules/hello/models/custom-product-data.ts" highlights={[["17"]]}
+```ts title="src/modules/hello/models/custom-product-data.ts" highlights={[["17"]]} collapsibleLines="1-8" expandButtonLabel="Show Imports"
 import { BaseEntity } from "@medusajs/utils"
 import { 
  Entity, 
@@ -83,7 +83,7 @@ export const relationshipsHighlight = [
  ["42", "foreignKey", "The name of the field in your data models referencing the other module’s model."],
 ]

-```ts title="src/modules/hello/service.ts" highlights={relationshipsHighlight}
+```ts title="src/modules/hello/service.ts" highlights={relationshipsHighlight} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 // other imports...
 import { MyCustom } from "./models/custom-product-data"
 import { CustomProductData } from "./models/custom-product-data"
@@ -12,28 +12,27 @@ The remote link is a class with utility methods to manage links defined by the l

 For example:

-```ts
+```ts collapsibleLines="1-9" expandButtonLabel="Show Imports"
 import { 
  MedusaRequest, 
  MedusaResponse,
 } from "@medusajs/medusa"
 import { 
-	ModuleRegistrationName, 
-	RemoteLink,
-} from "@medusajs/modules-sdk"
-import { 
-	ContainerRegistrationKeys,
+  ContainerRegistrationKeys,
 } from "@medusajs/utils"
+import { 
+  RemoteLink,
+} from "@medusajs/modules-sdk"

 export async function POST(
  req: MedusaRequest,
  res: MedusaResponse
 ): Promise<void> {
-	const remoteLink: RemoteLink = req.scope.resolve(
-	  ContainerRegistrationKeys.REMOTE_LINK
-	)
-	
-	// ...
+  const remoteLink: RemoteLink = req.scope.resolve(
+    ContainerRegistrationKeys.REMOTE_LINK
+  )
+    
+  // ...
 }
 ```

@@ -28,7 +28,7 @@ export const exampleHighlights = [
  ["27", "remoteQuery", "Run the query using the remote query."]
 ]

-```ts title="src/api/store/query/route.ts" highlights={exampleHighlights} apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query"
+```ts title="src/api/store/query/route.ts" highlights={exampleHighlights} apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query" collapsibleLines="1-12" expandButtonLabel="Show Imports"
 import { 
  MedusaRequest, 
  MedusaResponse,
@@ -210,7 +210,7 @@ The remote query function alternatively accepts a string with GraphQL syntax as

    ### Basic GraphQL usage

-    ```ts title="src/api/store/query/route.ts" apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query"
+    ```ts title="src/api/store/query/route.ts" apiTesting testApiMethod="GET" testApiUrl="http://localhost:9000/store/query" collapsibleLines="1-10" expandButtonLabel="Show Imports"
    import { 
      MedusaRequest, 
      MedusaResponse,
@@ -146,7 +146,7 @@ export const typeArgsHighlights = [
  ["27", "AllModelsDTO", "The expected input/output type of the generated methods of every data model."],
 ]

-```ts title="src/modules/hello/service.ts" highlights={typeArgsHighlights}
+```ts title="src/modules/hello/service.ts" highlights={typeArgsHighlights} collapsibleLines="1-22" expandButtonLabel="Show More"
 import { ModulesSdkUtils } from "@medusajs/utils"
 import { MyCustom } from "./models/my-custom"

@@ -19,7 +19,7 @@ export const highlights = [
  ["14", "throwOnError", "Specify that errors occuring during the workflow's execution should be returned, not thrown."],
 ]

-```ts title="src/api/store/workflows/route.ts" highlights={highlights}
+```ts title="src/api/store/workflows/route.ts" highlights={highlights} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import type {
  MedusaRequest,
  MedusaResponse,
@@ -46,7 +46,7 @@ export const updateProductHighlights = [
  ["39", "", "Revert the product’s data using the `previousProductData` passed from the step to the compensation function."]
 ]

-```ts title="src/workflows/update-product-erp/steps/update-product.ts" highlights={updateProductHighlights}
+```ts title="src/workflows/update-product-erp/steps/update-product.ts" highlights={updateProductHighlights} collapsibleLines="1-9" expandButtonLabel="Show Imports"
 import {
  createStep,
  StepResponse,
@@ -145,7 +145,7 @@ export const updateErpHighlights = [
  ["37", "updateProductErpData", "Revert the product's data in the ERP system to its previous state using the `previousErpData`."]
 ]

-```ts title="src/workflows/update-product-erp/steps/update-erp.ts" highlights={updateErpHighlights}
+```ts title="src/workflows/update-product-erp/steps/update-erp.ts" highlights={updateErpHighlights} collapsibleLines="1-8" expandButtonLabel="Show Imports"
 import {
  createStep,
  StepResponse,
@@ -208,7 +208,7 @@ With the steps ready, you'll create the workflow that runs these steps to update

 Change the content of `src/workflows/update-product-erp/index.ts` to the following:

-```ts title="src/workflows/update-product-erp/index.ts"
+```ts title="src/workflows/update-product-erp/index.ts" collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import { createWorkflow } from "@medusajs/workflows-sdk"
 import { UpdateProductDTO, ProductDTO } from "@medusajs/types"
 import updateProduct from "./steps/update-product"
@@ -12,7 +12,7 @@ Errors can occur in a workflow. To avoid data inconsistency, define a function t

 For example:

-```ts title="src/workflows/hello-world.ts" highlights={[["16"], ["17"], ["18"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["16"], ["17"], ["18"]]} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 // other imports...
 import { 
  createStep,
@@ -52,7 +52,7 @@ const step2 = createStep(

 2. Use the steps in a workflow. For example:

-```ts title="src/workflows/hello-world.ts"
+```ts title="src/workflows/hello-world.ts" collapsibleLines="1-7" expandButtonLabel="Show Imports"
 import {
  // other imports...
  createWorkflow,
@@ -81,7 +81,7 @@ export default myWorkflow

 3. Execute the workflow from a resource, such as an API route:

-```ts title="src/api/store/workflow/route.ts"
+```ts title="src/api/store/workflow/route.ts" collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import type {
  MedusaRequest,
  MedusaResponse,
@@ -22,7 +22,7 @@ A workflow is considered long-running if at least one step has its `async` confi

 For example, consider the following workflow and steps:

-```ts title="src/workflows/hello-world.ts" highlights={[["13"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["13"]]} collapsibleLines="1-10" expandButtonLabel="Show More"
 import { 
  createStep,  
  createWorkflow,
@@ -88,7 +88,7 @@ export const highlights = [
  ["24", "subscribe", "Subscribe to status changes of the workflow execution."],
 ]

-```ts title="src/api/store/workflows/route.ts" highlights={highlights}
+```ts title="src/api/store/workflows/route.ts" highlights={highlights} collapsibleLines="1-11" expandButtonLabel="Show Imports"
 import type {
  MedusaRequest,
  MedusaResponse,
@@ -19,7 +19,7 @@ export const highlights = [
  ["23", "parallelize", "Run the steps passed as parameters in parallel."],
 ]

-```ts highlights={highlights}
+```ts highlights={highlights} collapsibleLines="1-12" expandButtonLabel="Show Imports"
 import {
  createWorkflow,
  parallelize,
@@ -12,7 +12,7 @@ By default, when an error occurs in a step, the step and the workflow fail, and

 You can configure the step to retry on failure. The `createStep` function can accept a configuration object instead of the step’s name as a first parameter:

-```ts title="src/workflows/hello-world.ts" highlights={[["10"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["10"]]} collapsibleLines="1-6" expandButtonLabel="Show Imports"
 import { 
  createStep, 
  StepResponse, 
@@ -20,7 +20,7 @@ Timeout doesn't stop the execution of a running step. The timeout only affects t

 For example:

-```ts title="src/workflows/hello-world.ts" highlights={[["22"]]}
+```ts title="src/workflows/hello-world.ts" highlights={[["22"]]} collapsibleLines="1-16" expandButtonLabel="Show More"
 import { 
  createStep,  
  createWorkflow,