docs: fix code block titles (medusajs#5733)

* docs: fix code block titles

* remove console

* fix build error

Author: shahednasser

www/apps/api-reference/package.json

@@ -35,7 +35,7 @@
     "openapi-sampler": "^1.3.1",
     "openapi-types": "^12.1.3",
     "postcss": "8.4.27",
-    "prism-react-renderer": "^2.0.6",
+    "prism-react-renderer": "^2.3.0",
     "react": "latest",
     "react-dom": "latest",
     "react-instantsearch": "^7.0.1",

www/apps/docs/content/admin/configuration.md

@@ -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) => {

www/apps/docs/content/admin/onboarding.mdx

@@ -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"

www/apps/docs/content/admin/quickstart.mdx

@@ -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 = [
   // ...
   {

www/apps/docs/content/admin/routes.md

@@ -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 = () => {

www/apps/docs/content/admin/setting-pages.md

@@ -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"