docs: fix code block titles (#5733)
* docs: fix code block titles * remove console * fix build error
This commit is contained in:
Shahed Nasser
GitHub
@@ -12,7 +12,7 @@ In this document, you'll learn about the different ways you can configure the ad
|
||||
|
||||
The `build` command in the admin CLI allows you to manually build the admin dashboard. If you intend to use it, you should typically add it to the `package.json` of the Medusa backend:
|
||||
|
||||
```json title=package.json
|
||||
```json title="package.json"
|
||||
{
|
||||
"scripts": {
|
||||
// other scripts...
|
||||
@@ -29,7 +29,7 @@ You can add the following option to the `medusa-admin build` command:
|
||||
|
||||
The `develop` command in the admin CLI allows you to run the admin dashboard in development separately from the Medusa backend. If you intend to use it, you should typically add it to the `package.json` of the Medusa backend:
|
||||
|
||||
```json title=package.json
|
||||
```json title="package.json"
|
||||
{
|
||||
"scripts": {
|
||||
// other scripts...
|
||||
@@ -84,7 +84,7 @@ This is an advanced feature and requires knowledge of configuring webpack. If co
|
||||
|
||||
For example:
|
||||
|
||||
```js title=src/admin/webpack.config.js
|
||||
```js title="src/admin/webpack.config.js"
|
||||
import { withCustomWebpackConfig } from "@medusajs/admin"
|
||||
|
||||
export default withCustomWebpackConfig((config, webpack) => {
|
||||
|
||||
@@ -62,7 +62,7 @@ Each of the collapsible elements below hold the path to the file that you should
|
||||
<Details>
|
||||
<Summary>src/admin/types/icon-type.ts</Summary>
|
||||
|
||||
```tsx title=src/admin/types/icon-type.ts
|
||||
```tsx title="src/admin/types/icon-type.ts"
|
||||
import React from "react"
|
||||
|
||||
type IconProps = {
|
||||
@@ -80,7 +80,7 @@ Each of the collapsible elements below hold the path to the file that you should
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/shared/icons/get-started.tsx
|
||||
```tsx title="src/admin/components/shared/icons/get-started.tsx"
|
||||
import React from "react"
|
||||
import IconProps from "../../../types/icon-type"
|
||||
|
||||
@@ -115,7 +115,7 @@ Each of the collapsible elements below hold the path to the file that you should
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/shared/icons/dollar-sign-icon.tsx
|
||||
```tsx title="src/admin/components/shared/icons/dollar-sign-icon.tsx"
|
||||
import React from "react"
|
||||
import IconProps from "../../../types/icon-type"
|
||||
|
||||
@@ -162,7 +162,7 @@ Each of the collapsible elements below hold the path to the file that you should
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/shared/accordion.tsx
|
||||
```tsx title="src/admin/components/shared/accordion.tsx"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import React from "react"
|
||||
import { CheckCircleSolid, CircleMiniSolid } from "@medusajs/icons"
|
||||
@@ -295,7 +295,7 @@ Each of the collapsible elements below hold the path to the file that you should
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/shared/card.tsx
|
||||
```tsx title="src/admin/components/shared/card.tsx"
|
||||
import { Text, clx } from "@medusajs/ui"
|
||||
|
||||
type CardProps = {
|
||||
@@ -348,7 +348,7 @@ An [entity](../development/entities/overview.mdx) represents a table in the data
|
||||
|
||||
To create the entity, create the file `src/models/onboarding.ts` with the following content:
|
||||
|
||||
```ts title=src/models/onboarding.ts
|
||||
```ts title="src/models/onboarding.ts"
|
||||
import { BaseEntity } from "@medusajs/medusa"
|
||||
import { Column, Entity } from "typeorm"
|
||||
|
||||
@@ -367,7 +367,7 @@ export class OnboardingState extends BaseEntity {
|
||||
|
||||
Then, create the file `src/repositories/onboarding.ts` that holds the repository of the entity with the following content:
|
||||
|
||||
```ts title=src/repositories/onboarding.ts
|
||||
```ts title="src/repositories/onboarding.ts"
|
||||
import {
|
||||
dataSource,
|
||||
} from "@medusajs/medusa/dist/loaders/database"
|
||||
@@ -450,7 +450,7 @@ Start by creating the file `src/types/onboarding.ts` with the following content:
|
||||
|
||||
<!-- eslint-disable @typescript-eslint/no-empty-interface -->
|
||||
|
||||
```ts title=src/types/onboarding.ts
|
||||
```ts title="src/types/onboarding.ts"
|
||||
import { OnboardingState } from "../models/onboarding"
|
||||
|
||||
export type UpdateOnboardingStateInput = {
|
||||
@@ -472,7 +472,7 @@ Then, create the file `src/services/onboarding.ts` with the following content:
|
||||
|
||||
<!-- eslint-disable prefer-rest-params -->
|
||||
|
||||
```ts title=src/services/onboarding.ts
|
||||
```ts title="src/services/onboarding.ts"
|
||||
import { TransactionBaseService } from "@medusajs/medusa"
|
||||
import OnboardingRepository from "../repositories/onboarding"
|
||||
import { OnboardingState } from "../models/onboarding"
|
||||
@@ -540,7 +540,7 @@ The last part of this step is to create the [API Routes](../development/api-rout
|
||||
|
||||
To add these API Routes, create the file `src/api/admin/onboarding/route.ts` with the following content:
|
||||
|
||||
```ts title=src/api/admin/onboarding/route.ts
|
||||
```ts title="src/api/admin/onboarding/route.ts"
|
||||
import type {
|
||||
MedusaRequest,
|
||||
MedusaResponse,
|
||||
@@ -597,7 +597,7 @@ Create the file `src/admin/widgets/onboarding-flow/onboarding-flow.tsx` with the
|
||||
|
||||
<!-- eslint-disable @typescript-eslint/ban-types -->
|
||||
|
||||
```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx
|
||||
```tsx title="src/admin/widgets/onboarding-flow/onboarding-flow.tsx"
|
||||
import { OrderDetailsWidgetProps, ProductDetailsWidgetProps, WidgetConfig, WidgetProps } from "@medusajs/admin"
|
||||
import { useAdminCustomPost, useAdminCustomQuery, useMedusa } from "medusa-react"
|
||||
import React, { useEffect, useState, useMemo, useCallback } from "react"
|
||||
@@ -1059,7 +1059,7 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
|
||||
const isCurrent = currentStep === step.id
|
||||
return (
|
||||
<Accordion.Item
|
||||
title={step.title}
|
||||
title="{step.title}"
|
||||
value={step.id}
|
||||
headingSize="medium"
|
||||
active={isCurrent}
|
||||
@@ -1135,7 +1135,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/default/products/products-list.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/default/products/products-list.tsx"
|
||||
import React, { useMemo } from "react"
|
||||
import {
|
||||
useAdminCreateProduct,
|
||||
@@ -1221,7 +1221,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/default/products/product-detail.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/default/products/product-detail.tsx"
|
||||
import React, { useEffect, useMemo } from "react"
|
||||
import {
|
||||
useAdminPublishableApiKeys,
|
||||
@@ -1325,7 +1325,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/default/orders/orders-list.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/default/orders/orders-list.tsx"
|
||||
import React from "react"
|
||||
import {
|
||||
useAdminProduct,
|
||||
@@ -1420,7 +1420,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/default/orders/order-detail.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/default/orders/order-detail.tsx"
|
||||
import React from "react"
|
||||
import {
|
||||
ComputerDesktopSolid,
|
||||
@@ -1571,7 +1571,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/nextjs/products/products-list.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/nextjs/products/products-list.tsx"
|
||||
import React from "react"
|
||||
import {
|
||||
useAdminCreateProduct,
|
||||
@@ -1669,7 +1669,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/nextjs/products/product-detail.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/nextjs/products/product-detail.tsx"
|
||||
import { useAdminProduct } from "medusa-react"
|
||||
import { StepContentProps } from "../../../../widgets/onboarding-flow/onboarding-flow"
|
||||
import { Button, Text } from "@medusajs/ui"
|
||||
@@ -1737,7 +1737,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/nextjs/orders/orders-list.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/nextjs/orders/orders-list.tsx"
|
||||
import React from "react"
|
||||
import {
|
||||
useAdminProduct,
|
||||
@@ -1817,7 +1817,7 @@ Notice that as there are two types of flows, you'll be creating the components f
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/components/onboarding-flow/nextjs/orders/order-detail.tsx
|
||||
```tsx title="src/admin/components/onboarding-flow/nextjs/orders/order-detail.tsx"
|
||||
import React from "react"
|
||||
import { CurrencyDollarSolid, NextJs, SquaresPlusSolid } from "@medusajs/icons"
|
||||
import { IconBadge, Heading, Text } from "@medusajs/ui"
|
||||
|
||||
@@ -56,7 +56,7 @@ npm install @medusajs/admin
|
||||
|
||||
In `medusa-config.js`, add the admin plugin into the array of `plugins`:
|
||||
|
||||
```js title=medusa-config.js
|
||||
```js title="medusa-config.js"
|
||||
const plugins = [
|
||||
// ...
|
||||
{
|
||||
|
||||
@@ -40,7 +40,7 @@ These changes may already be available in your Medusa project. They're included
|
||||
|
||||
First, update your `tsconfig.json` with the following configurations:
|
||||
|
||||
```json title=tsconfig.json
|
||||
```json title="tsconfig.json"
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2019",
|
||||
@@ -81,7 +81,7 @@ The addition of `"jsx": "react-jsx"` specified how should TypeScript transform J
|
||||
|
||||
Next, create the file `tsconfig.server.json` with the following content:
|
||||
|
||||
```json title=tsconfig.server.json
|
||||
```json title="tsconfig.server.json"
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
@@ -96,7 +96,7 @@ This is the configuration that will be used to transpile your custom backend cod
|
||||
|
||||
Finally, create the file `tsconfig.admin.json` with the following content:
|
||||
|
||||
```json title=tsconfig.admin.json
|
||||
```json title="tsconfig.admin.json"
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
@@ -135,7 +135,7 @@ For an admin route to be valid, it must default export a React component. There
|
||||
|
||||
For example, you can create the file `src/admin/routes/custom/page.tsx` with the following content:
|
||||
|
||||
```tsx title=src/admin/routes/custom/page.tsx
|
||||
```tsx title="src/admin/routes/custom/page.tsx"
|
||||
const CustomPage = () => {
|
||||
return (
|
||||
<div>
|
||||
@@ -217,7 +217,7 @@ The object has one property `link`, which is an object having the following prop
|
||||
|
||||
For example, you can change the content of the previous route you created to export a config object:
|
||||
|
||||
```tsx title=src/admin/routes/custom/page.tsx
|
||||
```tsx title="src/admin/routes/custom/page.tsx"
|
||||
import { RouteConfig } from "@medusajs/admin"
|
||||
import { CustomIcon } from "../../icons/custom"
|
||||
|
||||
@@ -261,7 +261,7 @@ If you're installing it in a plugin with admin customizations, make sure to incl
|
||||
|
||||
For example:
|
||||
|
||||
```tsx title=src/admin/routes/custom/[id]/page.tsx
|
||||
```tsx title="src/admin/routes/custom/[id]/page.tsx"
|
||||
import { useParams } from "react-router-dom"
|
||||
|
||||
const CustomPage = () => {
|
||||
@@ -285,7 +285,7 @@ If you want to use routing functionalities such as linking to another page or na
|
||||
|
||||
For example, to add a link to another page:
|
||||
|
||||
```tsx title=src/admin/routes/custom/page.tsx
|
||||
```tsx title="src/admin/routes/custom/page.tsx"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
const CustomPage = () => {
|
||||
@@ -314,7 +314,7 @@ For example, to customize your custom route:
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/routes/custom/page.tsx
|
||||
```tsx title="src/admin/routes/custom/page.tsx"
|
||||
const CustomPage = () => {
|
||||
return (
|
||||
<div
|
||||
@@ -341,7 +341,7 @@ Make sure to also install the Medusa React package first if you’re intending t
|
||||
|
||||
For example, you can retrieve available products and display them in your route:
|
||||
|
||||
```tsx title=src/admin/routes/custom/page.tsx
|
||||
```tsx title="src/admin/routes/custom/page.tsx"
|
||||
import { useAdminProducts } from "medusa-react"
|
||||
|
||||
const CustomPage = () => {
|
||||
|
||||
@@ -36,7 +36,7 @@ These changes may already be available in your Medusa project. They're included
|
||||
|
||||
First, update your `tsconfig.json` with the following configurations:
|
||||
|
||||
```json title=tsconfig.json
|
||||
```json title="tsconfig.json"
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2019",
|
||||
@@ -77,7 +77,7 @@ The addition of `"jsx": "react-jsx"` specified how should TypeScript transform J
|
||||
|
||||
Next, create the file `tsconfig.server.json` with the following content:
|
||||
|
||||
```json title=tsconfig.server.json
|
||||
```json title="tsconfig.server.json"
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
@@ -92,7 +92,7 @@ This is the configuration that will be used to transpile your custom backend cod
|
||||
|
||||
Finally, create the file `tsconfig.admin.json` with the following content:
|
||||
|
||||
```json title=tsconfig.admin.json
|
||||
```json title="tsconfig.admin.json"
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
@@ -131,7 +131,7 @@ For a setting page to be valid, it must default export a React component. There
|
||||
|
||||
For example, you can create the file `src/admin/settings/custom/page.tsx` with the following content:
|
||||
|
||||
```tsx title=src/admin/settings/custom/page.tsx
|
||||
```tsx title="src/admin/settings/custom/page.tsx"
|
||||
import type { SettingConfig } from "@medusajs/admin"
|
||||
import { CustomIcon } from "../../icons/custom"
|
||||
|
||||
@@ -184,7 +184,7 @@ Every route receives props of the type `RouteProps`, which includes the `notify`
|
||||
|
||||
For example:
|
||||
|
||||
```tsx title=src/admin/settings/custom/page.tsx
|
||||
```tsx title="src/admin/settings/custom/page.tsx"
|
||||
import type { SettingConfig } from "@medusajs/admin"
|
||||
import type { SettingProps } from "@medusajs/admin"
|
||||
|
||||
@@ -226,7 +226,7 @@ For example, to customize the style of your custom setting page:
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/settings/custom/page.tsx
|
||||
```tsx title="src/admin/settings/custom/page.tsx"
|
||||
import type { SettingConfig } from "@medusajs/admin"
|
||||
|
||||
const CustomSettingPage = () => {
|
||||
@@ -269,7 +269,7 @@ If you're installing it in a plugin with admin customizations, make sure to incl
|
||||
|
||||
For example, to add a link to another page:
|
||||
|
||||
```tsx title=src/admin/settings/custom/page.tsx
|
||||
```tsx title="src/admin/settings/custom/page.tsx"
|
||||
import type { SettingConfig } from "@medusajs/admin"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
@@ -310,7 +310,7 @@ Make sure to also install the Medusa React package first if you’re intending t
|
||||
|
||||
For example, you can retrieve available products and display them in your route:
|
||||
|
||||
```tsx title=src/admin/settings/custom/page.tsx
|
||||
```tsx title="src/admin/settings/custom/page.tsx"
|
||||
import type { SettingConfig } from "@medusajs/admin"
|
||||
import { useAdminProducts } from "medusa-react"
|
||||
|
||||
|
||||
@@ -956,7 +956,7 @@ These changes may already be available in your Medusa project. They're included
|
||||
|
||||
First, update your `tsconfig.json` with the following configurations:
|
||||
|
||||
```json title=tsconfig.json
|
||||
```json title="tsconfig.json"
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2019",
|
||||
@@ -997,7 +997,7 @@ The addition of `"jsx": "react-jsx"` specified how should TypeScript transform J
|
||||
|
||||
Next, create the file `tsconfig.server.json` with the following content:
|
||||
|
||||
```json title=tsconfig.server.json
|
||||
```json title="tsconfig.server.json"
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
@@ -1012,7 +1012,7 @@ This is the configuration that will be used to transpile your custom backend cod
|
||||
|
||||
Finally, create the file `tsconfig.admin.json` with the following content:
|
||||
|
||||
```json title=tsconfig.admin.json
|
||||
```json title="tsconfig.admin.json"
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
@@ -1029,7 +1029,7 @@ This is the configuration that will be used when transpiling your admin code.
|
||||
|
||||
You can optionally update the following scripts in `package.json` to make your development process easier:
|
||||
|
||||
```json title=package.json
|
||||
```json title="package.json"
|
||||
{
|
||||
// ...
|
||||
"scripts": {
|
||||
@@ -1060,7 +1060,7 @@ To create a new admin widget, start by creating the folder `src/admin/widgets`.
|
||||
|
||||
Then, create the file `src/admin/widgets/product-widget.tsx` with the following content:
|
||||
|
||||
```tsx title=src/admin/widgets/product-widget.tsx
|
||||
```tsx title="src/admin/widgets/product-widget.tsx"
|
||||
import type { WidgetConfig } from "@medusajs/admin"
|
||||
|
||||
const ProductWidget = () => {
|
||||
@@ -1111,7 +1111,7 @@ For example, you can modify the widget you created to show the title of the prod
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/widgets/product-widget.tsx
|
||||
```tsx title="src/admin/widgets/product-widget.tsx"
|
||||
import type {
|
||||
WidgetConfig,
|
||||
ProductDetailsWidgetProps,
|
||||
@@ -1151,7 +1151,7 @@ For example, you can update the widget you created earlier to use Tailwind CSS c
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/widgets/product-widget.tsx
|
||||
```tsx title="src/admin/widgets/product-widget.tsx"
|
||||
import type {
|
||||
WidgetConfig,
|
||||
} from "@medusajs/admin"
|
||||
@@ -1194,7 +1194,7 @@ For example:
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/widgets/product-widget.tsx
|
||||
```tsx title="src/admin/widgets/product-widget.tsx"
|
||||
import type { WidgetConfig } from "@medusajs/admin"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
@@ -1235,7 +1235,7 @@ For example, you can modify the widget you created to retrieve the tags of a pro
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
|
||||
```tsx title=src/admin/widgets/product-widget.tsx
|
||||
```tsx title="src/admin/widgets/product-widget.tsx"
|
||||
import type { ProductDetailsWidgetProps, WidgetConfig } from "@medusajs/admin"
|
||||
import { useAdminProductTags } from "medusa-react"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user