docs: redesigned code blocks (#2745)

* docs: redesigned code blocks to include titles

* docs: added a title where necessary

docs/content/add-plugins/algolia.md

@@ -85,7 +85,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_ADMIN_API_KEY>` are respectively the Applicatio
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -170,7 +170,7 @@ The Next.js storefront has the Algolia integration available out of the box. To
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
   "features": {
     "search": true
@@ -190,7 +190,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_SEARCH_API_KEY>` are respectively the Applicati
 
 Finally, change the code in `src/lib/search-client.ts` to the following:
 
-```jsx
+```jsx title=src/lib/search-client.ts
 import algoliasearch from "algoliasearch/lite"
 
 const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || "" // You should add this to your environment variables
@@ -247,7 +247,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
   Highlight,
   Hits,
@@ -310,13 +310,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />

docs/content/add-plugins/contentful/customize-contentful.md

@@ -22,7 +22,7 @@ The Contentful migrations are located in the `contentful-migrations` directory i
 
 Here’s an example of a migration created in a new file `contentful-migrations/rich-text.js`:
 
-```jsx
+```jsx title=contentful-migrations/rich-text.js
 #! /usr/bin/env node
 
 require("dotenv").config();
@@ -152,7 +152,7 @@ After creating a new content model in your Contentful Space, you must add the ne
 
 To render the Rich Text content you created in the previous example, create the file `src/components/rich-text/rich-text.js` with the following content:
 
-```jsx
+```jsx title=src/components/rich-text/rich-text.js
 import React from "react"
 import { renderRichText } from "gatsby-source-contentful/rich-text"
 
@@ -180,13 +180,13 @@ Since the Rich Text model can be added to any page, you must edit `src/pages/{Co
 
 In `src/pages/{ContentfulPage.slug}.js`, import the `RichText` component at the top of the file:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 Then, in the returned JSX add a new case to the switch statement:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 switch (cm.internal.type) {
   //...
   case "ContentfulRichText":
@@ -200,7 +200,7 @@ If the content model of a tile is Rich Text, you’ll display it with the `RichT
 
 Finally, to retrieve all necessary data of the Rich Text content, in the `query` GraphQL variable add the following after the `... on ContentfulTileSection` fragment:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
         # find the following line
         ... on ContentfulTileSection {
@@ -246,7 +246,7 @@ In the example migration, you also edited the product page to include a new Cont
 
 To render them on the Product Page, add the following in the GraphQL query defined in the `query` variable inside `product`:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
   query ($id: String!) {
     product: contentfulProduct(id: { eq: $id }) {
@@ -275,13 +275,13 @@ If you added other accepted Content Models to the `contentModules` field of the
 
 Then, in `src/views/product.js` import the `RichText` component:
 
-```jsx
+```jsx title=src/views/product.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 And in the returned JSX add the following before the last `</div>`:
 
-```jsx
+```jsx title=src/views/product.js
 <div className={styles.contentModules}>
   {product.contentModules?.map((cm) => {
     switch (cm.internal.type) {

docs/content/add-plugins/contentful/index.md

@@ -38,7 +38,7 @@ This installs a new Medusa server in the directory `medusa-contentful`.
 
 Change to the `medusa-contentful` directory. In `.env` you’ll find three variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 CONTENTFUL_ENV=
@@ -116,7 +116,7 @@ You can find the format of the PostgreSQL database URL in [PostgreSQL’s docume
 
 Then, in `medusa-config.js` in the exported object, comment out or remove the SQLite database configurations and add the PostgreSQL database configurations:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     //...
@@ -239,7 +239,7 @@ mv .env.template .env
 
 Then, open `.env`. You should find the following environment variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 ```

docs/content/add-plugins/mailchimp.md

@@ -51,7 +51,7 @@ Make sure to replace `<YOUR_API_KEY>` with your API Key and `<YOUR_NEWSLETTER_LI
 
 Open `medusa-config.js` and add the new plugin into the `plugins` array:
 
-```js
+```js title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -72,7 +72,7 @@ This plugin adds a new `POST` endpoint at `/mailchimp/subscribe`. This endpoint
 
 Try sending a `POST` request to `/mailchimp/subscribe` with the following JSON body:
 
-```json noHeader
+```json noReport
 {
   "email": "example@gmail.com"
 }
@@ -90,7 +90,7 @@ If you check your Mailchimp dashboard, you should find the email added to your A
 
 Here’s an example of sending additional data with the subscription:
 
-```json noHeader
+```json noReport
 {
     "email": "example@gmail.com",
     "data": {
@@ -107,7 +107,7 @@ If you want to subscribe to users without using this endpoint or at a specific p
 
 Here’s an example of using the `mailchimpService` inside an endpoint:
 
-```jsx
+```jsx title=src/api/index.ts
 const mailchimpService = req.scope.resolve("mailchimpService")
 
 mailchimpService.subscribeNewsletter(

docs/content/add-plugins/meilisearch.md

@@ -51,7 +51,7 @@ Where `<YOUR_MEILISEARCH_HOST>` is the host of your MeiliSearch instance. By def
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -144,7 +144,7 @@ The Next.js storefront has the MeiliSearch integration available out of the box.
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
   "features": {
     "search": true
@@ -206,7 +206,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
   Highlight,
   Hits,
@@ -269,13 +269,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />

docs/content/add-plugins/minio.md

@@ -97,7 +97,7 @@ Where `<ENDPOINT>` is the URL of your MinIO server, `<BUCKET>` is the name of th
 
 Finally, configure your `medusa-config.js` to include the plugin with the required options:
 
-```bash
+```js title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -145,7 +145,7 @@ MINIO_PRIVATE_BUCKET=exports
 
 Then, add a new option to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -170,7 +170,7 @@ Where `<YOUR_PRIVATE_ACCESS_KEY>` and `<YOUR_PRIVATE_SECRET_KEY>` are the access
 
 Then, add two new options to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
     resolve: `medusa-file-minio`,
     options: {
@@ -189,7 +189,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-c
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...

docs/content/add-plugins/paypal.md

@@ -51,7 +51,7 @@ Notice that during development it’s highly recommended to set `PAYPAL_SANDBOX`
 
 Then, in `medusa-config.js`, add the PayPal plugin to the `plugins` array with the configurations necessary:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //other plugins...
   {
@@ -119,7 +119,7 @@ Medusa has a Next.js storefront that you can easily use with your Medusa server.
 
 In your `.env.local` file (or the file you’re using for your environment variables), add the following variable:
 
-```bash
+```bash title=.env.local
 NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
 ```
 
@@ -137,7 +137,7 @@ Medusa also has a Gatsby storefront that you can use as your ecommerce storefron
 
 In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with its value set to the Client ID:
 
-```bash
+```bash title=.env.development
 GATSBY_PAYPAL_CLIENT_ID=<CLIENT_ID>
 ```
 
@@ -149,7 +149,7 @@ npm install @paypal/react-paypal-js
 
 Next, create a new file `src/components/payment/paypal-payment/index.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/payment/paypal-payment/index.jsx
 import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
 import React, { useMemo, useState } from "react";
 
@@ -253,7 +253,7 @@ The last step is to add this component as the component to render when PayPal is
 
 In `src/components/payment/index.js` you’ll find in the return statement a switch statement that checks the payment provider for each payment session and renders the component based on the ID. Add before the `default` case a case for `paypal`:
 
-```jsx
+```jsx title=src/components/payment/index.js
 switch (ps.provider_id) {
   case "stripe":
     //...

docs/content/add-plugins/s3.md

@@ -108,7 +108,7 @@ Where:
 
 Finally, in `medusa-config.js`, add to the `plugins` array the following new item:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -156,7 +156,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...

docs/content/add-plugins/segment.md

@@ -102,7 +102,7 @@ Where `<YOUR_SEGMENT_WRITE_KEY>` is the Write Key shown on the page of the Segme
 
 Finally, in `medusa-config.js`, add the following new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -142,7 +142,7 @@ In some cases, you might want to track more events or custom events. You can do
 
 For example, you can add the following subscriber to listen to the `customer.created` event and add tracking for every customer created:
 
-```jsx
+```jsx title=src/subscribers/customer.ts
 class CustomerSubscriber {
   constructor({ segmentService, eventBusService }) {
     this.segmentService = segmentService;

docs/content/add-plugins/sendgrid.mdx

@@ -79,7 +79,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "beforeInsert": [Function],
     "billing_address": null,
@@ -306,7 +306,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "beforeInsert": [Function],
     "billing_address": null,
@@ -537,7 +537,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "date": Any<String>,
     "email": "test@testson.com",
@@ -819,7 +819,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "date": Any<String>,
     "email": "test@testson.com",
@@ -1261,7 +1261,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "date": Any<String>,
     "email": "test@testson.com",
@@ -1703,7 +1703,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "claim": Object {
       "canceled_at": null,
@@ -2000,7 +2000,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "locale": null,
     "swap": Object {
@@ -2509,7 +2509,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "additional_total": "16.88 USD",
     "date": Any<String>,
@@ -3089,7 +3089,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   {
     "locale": null,
     "swap": Object {
@@ -3599,7 +3599,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "code": Any<String>,
     "value": 4,
@@ -3766,7 +3766,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "id": Any<String>,
     "email": "test@testson.com",
@@ -3786,7 +3786,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "email": "test@testson.com",
     "token": Any<String>,
@@ -3803,7 +3803,7 @@ You don’t have to create a template for every type in the reference. You can s
 <details>
   <summary>Example Data</summary>
 
-  ```json noHeader
+  ```json noReport
   Object {
     "product": Object {
       "collection_id": null,
@@ -3918,7 +3918,7 @@ Where `<ORDER_PLACED_TEMPLATE_ID` is the ID of your template for order placed em
 
 Finally, in your `medusa-config.js` file, add the SendGrid plugin into the array of plugins:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {

docs/content/add-plugins/slack.md

@@ -75,7 +75,7 @@ npm install medusa-plugin-slack-notification
 
 After that, open `medusa-config.js` and add the new plugin with its configurations in the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {

docs/content/add-plugins/spaces.md

@@ -95,7 +95,7 @@ Where:
 
 Finally, in `medusa-config.js` add a new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {
@@ -143,7 +143,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...

docs/content/add-plugins/strapi.md

@@ -82,7 +82,7 @@ The `--seed` flag creates an SQLite database and seeds it with some demo data.
 
 Once the command is done executing, change to the newly created `medusa-server` directory. Then, in `medusa-config.js`, change the exported object at the end of the file to enable Redis:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
   projectConfig: {
     redis_url: REDIS_URL,
@@ -128,7 +128,7 @@ Where:
 
 Finally, open `medusa-config.js` and add the following new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   //...
   {

docs/content/add-plugins/stripe.md

@@ -42,7 +42,7 @@ Next, you need to add configurations for your stripe plugin.
 
 In `medusa-config.js` add the following at the end of the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -123,7 +123,7 @@ Medusa has a Next.js storefront that you can easily use with your Medusa server.
 
 In your `.env.local` file (or the file you’re using for your environment variables), add the following variable:
 
-```bash
+```bash title=.env.local
 NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
 ```
 
@@ -139,7 +139,7 @@ Medusa also has a Gatsby storefront that you can use as your ecommerce store. If
 
 In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with the value set to the Publishable Key:
 
-```jsx
+```jsx title=.env.development
 GATSBY_STRIPE_KEY=pk_
 ```
 

docs/content/add-plugins/twilio-sms.md

@@ -44,7 +44,7 @@ Make sure to replace `<YOUR_ACCOUNT_SID>`, `<YOUR_AUTH_TOKEN>`, and `<YOUR_TWILI
 
 Finally, add the plugin and its options in the `medusa-config.js` file to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
   ...,
   {
@@ -72,7 +72,7 @@ For this example to work, you’ll need to install and configure Redis on your s
 
 Create the file `src/services/sms.js` in your Medusa server with the following content:
 
-```jsx
+```jsx title=src/services/sms.js
 class SmsSubscriber {
   constructor({ twilioSmsService, orderService, eventBusService }) {
     this.twilioSmsService_ = twilioSmsService;