docs: fix code block titles (#5733)

* docs: fix code block titles

* remove console

* fix build error
This commit is contained in:
Shahed Nasser
2023-11-27 16:08:10 +00:00
committed by GitHub
parent de8f748674
commit 547b16ead5
110 changed files with 483 additions and 456 deletions
+2 -2
View File
@@ -271,7 +271,7 @@ Medusa allows you to create custom API Routes exposed as REST APIs.
For example, create the following API Route that allows you to check the customers group and whether it has the `is_b2b` flag enabled:
```ts title=src/api/store/customers/is-b2b/route.ts
```ts title="src/api/store/customers/is-b2b/route.ts"
import type {
CustomerService,
MedusaRequest,
@@ -303,7 +303,7 @@ Medusa allows you to create custom API Routes exposed as REST APIs.
Then add the `requireCustomerAuthentication` middleware in `src/api/middlewares.ts` that ensures only authenticated customer can access this API Route:
```ts title=src/api/middlewares.ts
```ts title="src/api/middlewares.ts"
import {
requireCustomerAuthentication,
type MiddlewaresConfig,
@@ -105,7 +105,7 @@ Medusa also provides official notification plugins that integrate with third-par
Heres an example of a subscriber that uses the SendGrid plugin to send an email to the customer when the order has a new note:
```ts title=src/subscribers/new-note.ts
```ts title="src/subscribers/new-note.ts"
import {
type SubscriberConfig,
type SubscriberArgs,
@@ -190,7 +190,7 @@ You can implement automatic synchronization in Medusa using scheduled jobs. A sc
Heres an example of synchronizing products with a third party service using a [loader](../development/loaders/create.md):
```ts title=src/loaders/sync-products.ts
```ts title="src/loaders/sync-products.ts"
import {
Logger,
ProductService,
@@ -409,7 +409,7 @@ For example, if you're grouping customers with over twenty orders, you can use a
Heres an example of a subscriber that listens to the `order.placed` event and checks if the customer should be added to the VIP customer group based on their number of orders:
```ts title=src/subscribers/add-custom-to-vip.ts
```ts title="src/subscribers/add-custom-to-vip.ts"
import {
type SubscriberConfig,
type SubscriberArgs,
@@ -520,7 +520,7 @@ You can alternatively have a Scheduled Job that checks if the number of new prod
Heres an example of listening to the `product.created` event in a subscriber and send a newsletter if the condition is met:
```ts title=src/subscribers/send-products-newsletter.ts
```ts title="src/subscribers/send-products-newsletter.ts"
import {
type SubscriberConfig,
type SubscriberArgs,
@@ -142,7 +142,7 @@ For example, if you're selling the Harry Potter movies, you would have a `Produc
To do that, create the file `src/models/product-media.ts` with the following content:
```ts title=src/models/product-media.ts
```ts title="src/models/product-media.ts"
import {
BeforeInsert,
Column,
@@ -272,7 +272,7 @@ Creating an API Route also requires creating a service, which is a class that ty
Before creating the API Routes, youll create the `ProductMediaService`. Create the file `src/services/product-media.ts` with the following content:
```ts title=src/services/product-media.ts
```ts title="src/services/product-media.ts"
import {
FindConfig,
ProductVariantService,
@@ -454,7 +454,7 @@ Creating an API Route also requires creating a service, which is a class that ty
You can now create the API Routes. Create the file `src/api/admin/product-media/route.ts` with the following content:
```ts title=src/api/admin/product-media/route.ts
```ts title="src/api/admin/product-media/route.ts"
import type {
MedusaRequest,
MedusaResponse,
@@ -575,7 +575,7 @@ To add an interface that allows the admin user to upload digital products, you c
You also need to create types for the expected requests and responses of the API Routes you created. This is helpful when using Medusa Reacts custom hooks. To do that, create the file `src/types/product-media.ts` with the following content:
```ts title=src/types/product-media.ts
```ts title="src/types/product-media.ts"
import {
MediaType,
ProductMedia,
@@ -605,7 +605,7 @@ To add an interface that allows the admin user to upload digital products, you c
You can now create your admin UI route. To do that, create the file `src/admin/routes/product-media/page.tsx` with the following content:
```tsx title=src/admin/routes/product-media/page.tsx
```tsx title="src/admin/routes/product-media/page.tsx"
import { RouteConfig } from "@medusajs/admin"
import { DocumentText } from "@medusajs/icons"
import { useAdminCustomQuery } from "medusa-react"
@@ -714,7 +714,7 @@ To add an interface that allows the admin user to upload digital products, you c
In the drawer, you show the Create Digital Product form. To create this form, create the file `src/admin/components/product-media/CreateForm/index.tsx` with the following content:
```tsx title=src/admin/components/product-media/CreateForm/index.tsx
```tsx title="src/admin/components/product-media/CreateForm/index.tsx"
import { useState } from "react"
import { MediaType } from "../../../../models/product-media"
import {
@@ -952,7 +952,7 @@ Finally, you can send a notification, such as an email, to the customer using th
Heres an example of a subscriber that retrieves the download links and sends them to the customer using the SendGrid plugin:
```ts title=src/subscribers/handle-order.ts
```ts title="src/subscribers/handle-order.ts"
import {
type SubscriberConfig,
type SubscriberArgs,
@@ -1055,7 +1055,7 @@ To implement this, create a storefront API Route that allows you to fetch the di
Create the file `src/api/store/product-media/route.ts` with the following content:
```ts title=src/api/store/product-media/route.ts
```ts title="src/api/store/product-media/route.ts"
import type {
MedusaRequest,
MedusaResponse,
@@ -1095,7 +1095,7 @@ To implement this, create a storefront API Route that allows you to fetch the di
First, if you're using TypeScript for your development, create the file `src/types/product-media.ts` with the following content:
```ts title=src/types/product-media.ts
```ts title="src/types/product-media.ts"
import { Product } from "@medusajs/medusa"
import { ProductVariant } from "@medusajs/product"
@@ -1132,7 +1132,7 @@ To implement this, create a storefront API Route that allows you to fetch the di
Then, add in `src/lib/data/index.ts` a new function that retrieves the product media of the product variant being viewed:
```ts title=src/lib/data/index.ts
```ts title="src/lib/data/index.ts"
import {
DigitalProduct,
ProductMedia,
@@ -1165,7 +1165,7 @@ To implement this, create a storefront API Route that allows you to fetch the di
To allow customers to download the file preview without exposing its URL, create a Next.js API route in the file `src/app/api/download/preview/route.ts` with the following content:
```ts title=src/app/api/download/preview/route.ts
```ts title="src/app/api/download/preview/route.ts"
import { NextRequest, NextResponse } from "next/server"
export async function GET(req: NextRequest) {
@@ -1208,7 +1208,7 @@ To implement this, create a storefront API Route that allows you to fetch the di
Next, create the preview button in the file `src/modules/products/components/product-media-preview/index.tsx`:
```tsx title=src/modules/products/components/product-media-preview/index.tsx
```tsx title="src/modules/products/components/product-media-preview/index.tsx"
import Button from "@modules/common/components/button"
import { ProductMedia } from "types/product-media"
@@ -1243,7 +1243,7 @@ To implement this, create a storefront API Route that allows you to fetch the di
Finally, add the button as one of the product actions defined in `src/modules/products/components/product-actions/index.tsx`. These are the actions shown to the customer in the product details page:
```tsx title=src/modules/products/components/product-actions/index.tsx
```tsx title="src/modules/products/components/product-actions/index.tsx"
// other imports...
import ProductMediaPreview from "../product-media-preview"
import { getProductMediaPreviewByVariant } from "@lib/data"
@@ -1315,7 +1315,7 @@ You can change this section to show information relevant to the product. For exa
Next, change the `ProductTabs`, `ProductInfoTab`, and `ShippingInfoTab` components defined in `src/modules/products/components/product-tabs/index.tsx` to the following:
```tsx title=src/modules/products/components/product-tabs/index.tsx
```tsx title="src/modules/products/components/product-tabs/index.tsx"
const ProductTabs = ({ product }: ProductTabsProps) => {
const tabs = useMemo(() => {
return [
@@ -1426,7 +1426,7 @@ When a customer purchases a digital product, the shipping form shown during chec
<!-- eslint-skip -->
```tsx title=src/lib/context/checkout-context.tsx
```tsx title="src/lib/context/checkout-context.tsx"
"use client"
import { medusaClient } from "@lib/config"
@@ -1877,7 +1877,7 @@ When a customer purchases a digital product, the shipping form shown during chec
<!-- eslint-disable max-len -->
```tsx title=src/modules/checkout/components/addresses/index.tsx
```tsx title="src/modules/checkout/components/addresses/index.tsx"
import { useCheckout } from "@lib/context/checkout-context"
import Button from "@modules/common/components/button"
import Spinner from "@modules/common/icons/spinner"
@@ -1949,7 +1949,7 @@ When a customer purchases a digital product, the shipping form shown during chec
Finally, change the shipping details shown in the order confirmation page by replacing the content of `src/modules/order/components/shipping-details/index.tsx` with the following:
```tsx title=src/modules/order/components/shipping-details/index.tsx
```tsx title="src/modules/order/components/shipping-details/index.tsx"
import { Address, ShippingMethod } from "@medusajs/medusa"
type ShippingDetailsProps = {
@@ -2011,7 +2011,7 @@ After the customer purchases the digital product you can show a download button
Create the file `src/api/store/product-media/download/[variant_id]/route.ts` with the following content:
```ts title=src/api/store/product-media/download/route.ts
```ts title="src/api/store/product-media/download/route.ts"
import type {
AbstractFileService,
MedusaRequest,
@@ -2082,7 +2082,7 @@ After the customer purchases the digital product you can show a download button
Then, add the `requireCustomerAuthentication` middleware to this API Route in `src/api/middlewares.ts`:
```ts title=src/api/middlewares.ts
```ts title="src/api/middlewares.ts"
import {
requireCustomerAuthentication,
type MiddlewaresConfig,
@@ -2104,7 +2104,7 @@ After the customer purchases the digital product you can show a download button
To mask the presigned URL, create a Next.js API route at `src/app/api/download/main/[variant_id]/route.ts` with the following content:
```ts title=src/app/api/download/main/[variant_id]/route.ts
```ts title="src/app/api/download/main/[variant_id]/route.ts"
import { NextRequest, NextResponse } from "next/server"
export async function GET(
@@ -2173,7 +2173,7 @@ After the customer purchases the digital product you can show a download button
<!-- eslint-disable max-len -->
```tsx title=src/modules/order/components/items/index.tsx
```tsx title="src/modules/order/components/items/index.tsx"
import useEnrichedLineItems from "@lib/hooks/use-enrich-line-items"
import { LineItem, Region } from "@medusajs/medusa"
import LineItemOptions from "@modules/common/components/line-item-options"
@@ -46,7 +46,7 @@ To associate these entities with the `Store` entity, you need to extend and cust
For example, to associate the `User` entity with the `Store` entity, create the file `src/models/user.ts` with the following content:
```ts title=src/models/user.ts
```ts title="src/models/user.ts"
import {
Column,
Entity,
@@ -73,7 +73,7 @@ To associate these entities with the `Store` entity, you need to extend and cust
Then, you need to extend the `UserRepository` to point to your extended entity. To do that, create the file `src/repositories/user.ts` with the following content:
```ts title=src/repositories/user.ts
```ts title="src/repositories/user.ts"
import { User } from "../models/user"
import {
dataSource,
@@ -102,7 +102,7 @@ To associate these entities with the `Store` entity, you need to extend and cust
This creates a file in the `src/migrations` directory of the format `<TIMESTAMP>_add-user-store-id.ts`. Replace the `up` and `down` methods in that file with the methods here:
```ts title=src/migrations/<TIMESTAMP>_add-user-store-id.ts
```ts title="src/migrations/<TIMESTAMP>_add-user-store-id.ts"
// ...
export class AddUserStoreId1681287255173
@@ -188,7 +188,7 @@ You can also extend services if you need to customize a functionality implemente
<!-- eslint-disable prefer-rest-params -->
```ts title=src/services/user.ts
```ts title="src/services/user.ts"
import { Lifetime } from "awilix"
import {
UserService as MedusaUserService,
@@ -273,7 +273,7 @@ To listen to events, you need to create Subscribers that subscribe a handler fun
To listen to the `order.placed` event, create the file `src/subscribers/orderNotifier.ts` with the following content:
```ts title=src/subscribers/orderNotifier.ts
```ts title="src/subscribers/orderNotifier.ts"
import {
type SubscriberConfig,
type SubscriberArgs,
+1 -1
View File
@@ -99,7 +99,7 @@ To search through product variants by their barcode, you can create a custom API
Heres an example of creating a custom API Route at `/store/pos/search-barcode` that searches product variants by a barcode:
```ts title=src/api/store/pos/search-barcode/route.ts
```ts title="src/api/store/pos/search-barcode/route.ts"
import type {
MedusaRequest,
MedusaResponse,