feat: Documentation and API reference (#348)

Co-authored-by: Vadim Smirnov <smirnou.vadzim@gmail.com>
Co-authored-by: zakariasaad <zakaria.elas@gmail.com>
Co-authored-by: Vilfred Sikker <vilfredsikker@gmail.com>
Co-authored-by: Kasper <kasper@medusa-commerce.com>
Co-authored-by: Sebastian Rindom <skrindom@gmail.com>
Co-authored-by: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com>

www/reference/data/admin-api.json

@@ -0,0 +1 @@
+{"tags":{"Auth":[{"method":"POST","path":"/auth","operationId":"PostAuth","summary":"Authenticate a User","description":"Logs a User in and authorizes them to manage Store settings.","parameters":[],"tags":["Auth"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"user":{"$ref":"#/components/schemas/user"}}}}}}},"requestBody":{"content":{"application/json":{"schema":{"type":"object","required":["email","password"],"properties":{"email":{"type":"string","description":"The User's email."},"password":{"type":"string","description":"The User's password."}}}}}}},{"method":"GET","path":"/auth","operationId":"GetAuth","summary":"Get Session","description":"Gets the currently logged in User.","tags":["Auth"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"user":{"$ref":"#/components/schemas/user"}}}}}}}}],"Collection":[{"method":"POST","path":"/collections","operationId":"PostCollections","summary":"Create a Product Collection","description":"Creates a Product Collection.","requestBody":{"content":{"application/json":{"schema":{"required":["title"],"properties":{"title":{"type":"string","description":"The title to identify the Collection by."},"handle":{"type":"string","description":"An optional handle to be used in slugs, if none is provided we will kebab-case the title."},"metadata":{"description":"An optional set of key-value pairs to hold additional information.","type":"object"}}}}}},"tags":["Collection"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"collection":{"$ref":"#/components/schemas/product_collection"}}}}}}}},{"method":"GET","path":"/collections","operationId":"GetCollections","summary":"List Product Collections","description":"Retrieve a list of Product Collection.","tags":["Collection"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"collection":{"$ref":"#/components/schemas/product_collection"}}}}}}}},{"method":"DELETE","path":"/collections/{id}","operationId":"DeleteCollectionsCollection","summary":"Delete a Product Collection","description":"Deletes a Product Collection.","parameters":[{"in":"path","name":"id","required":true,"description":"The id of the Collection.","schema":{"type":"string"}}],"tags":["Collection"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"id":{"type":"string","description":"The id of the deleted Collection"},"object":{"type":"string","description":"The type of the object that was deleted."},"deleted":{"type":"boolean"}}}}}}}},{"method":"GET","path":"/collections/{id}","operationId":"GetCollectionsCollection","summary":"Retrieve a Product Collection","description":"Retrieves a Product Collection.","parameters":[{"in":"path","name":"id","required":true,"description":"The id of the Product Collection","schema":{"type":"string"}}],"tags":["Collection"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"collection":{"$ref":"#/components/schemas/product_collection"}}}}}}}},{"method":"POST","path":"/collections/{id}","operationId":"PostCollectionsCollection","summary":"Update a Product Collection","description":"Updates a Product Collection.","parameters":[{"in":"path","name":"id","required":true,"description":"The id of the Collection.","schema":{"type":"string"}}],"requestBody":{"content":{"application/json":{"schema":{"properties":{"title":{"type":"string","description":"The title to identify the Collection by."},"handle":{"type":"string","description":"An optional handle to be used in slugs, if none is provided we will kebab-case the title."},"metadata":{"description":"An optional set of key-value pairs to hold additional information.","type":"object"}}}}}},"tags":["Collection"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"collection":{"$ref":"#/components/schemas/product_collection"}}}}}}}}],"Customer":[{"method":"POST","path":"/customers","operationId":"PostCustomers","summary":"Create a Customer","description":"Creates a Customer.","parameters":[],"tags":["Customer"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"customer":{"$ref":"#/components/schemas/customer"}}}}}}},"requestBody":{"content":{"application/json":{"schema":{"type":"object","required":["email","first_name","last_name"],"properties":{"email":{"type":"string","description":"The Customer's email address."},"first_name":{"type":"string","description":"The Customer's first name."},"last_name":{"type":"string","description":"The Customer's last name."},"phone":{"type":"string","description":"The Customer's phone number."}}}}}}},{"method":"GET","path":"/customers","operationId":"GetCustomers","summary":"List Customers","description":"Retrieves a list of Customers.","tags":["Customer"],"responses":{"200":{"description":"OK","content":{"appliLine truncated

www/reference/data/storefront-api.json

@@ -0,0 +1 @@
+{"tags":{"Auth":[{"method":"POST","path":"/auth","operationId":"PostAuth","summary":"Authenticate Customer","description":"Logs a Customer in and authorizes them to view their details. Successful authentication will set a session cookie in the Customer's browser.","parameters":[],"tags":["Auth"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"customer":{"$ref":"#/components/schemas/customer"}}}}}}},"requestBody":{"content":{"application/json":{"schema":{"type":"object","required":["email","password"],"properties":{"email":{"type":"string","description":"The Customer's email."},"password":{"type":"string","description":"The Customer's password."}}}}}}},{"method":"DELETE","path":"/auth","operationId":"DeleteAuth","summary":"Log out","description":"Destroys a Customer's authenticated session.","tags":["Auth"],"responses":{"200":{"description":"OK"}}},{"method":"GET","path":"/auth","operationId":"GetAuth","summary":"Get Session","description":"Gets the currently logged in Customer.","tags":["Auth"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"customer":{"$ref":"#/components/schemas/customer"}}}}}}}},{"method":"GET","path":"/auth/{email}","operationId":"GetAuthEmail","summary":"Check if email has account","description":"Checks if a Customer with the given email has signed up.","parameters":[{"in":"path","name":"email","required":true,"description":"The Customer's email.","schema":{"type":"string"}}],"tags":["Auth"],"responses":{"200":{"description":"OK","content":{"application/json":{"schema":{"properties":{"exists":{"type":"boolean"}}}}}}}}],"Cart":[{"method":"POST","path":"/carts/{id}/shipping-methods","operationId":"PostCartsCartShippingMethod","description":"Adds a Shipping Method to the Cart.","summary":"Add a Shipping Method","tags":["Cart"],"parameters":[{"in":"path","name":"id","required":true,"description":"The cart id.","schema":{"type":"string"}}],"responses":{"200":{"description":"A successful response","content":{"application/json":{"schema":{"properties":{"cart":{"$ref":"#/components/schemas/cart"}}}}}}},"requestBody":{"content":{"application/json":{"schema":{"type":"object","required":["option_id"],"properties":{"option_id":{"type":"string","description":"id of the shipping option to create the method from"},"data":{"type":"object","description":"Used to hold any data that the shipping method may need to process the fulfillment of the order. Look at the documentation for your installed fulfillment providers to find out what to send."}}}}}}},{"method":"POST","path":"/carts/{id}/complete-cart","summary":"Complete a Cart","operationId":"PostCartsCartComplete","description":"Completes a cart. The following steps will be performed. Payment authorization is attempted and if more work is required, we simply return the cart for further updates. If payment is authorized and order is not yet created, we make sure to do so. The completion of a cart can be performed idempotently with a provided header `Idempotency-Key`. If not provided, we will generate one for the request.","parameters":[{"in":"path","name":"id","required":true,"description":"The Cart id.","schema":{"type":"string"}}],"tags":["Cart"],"responses":{"200":{"description":"If a cart was successfully authorized, but requires further action from the user the response body will contain the cart with an updated payment session. If the Cart was successfully completed the response body will contain the newly created Order.","content":{"application/json":{"schema":{"oneOf":[{"type":"object","properties":{"order":{"$ref":"#/components/schemas/order"}}},{"type":"object","properties":{"cart":{"$ref":"#/components/schemas/cart"}}}]}}}}}},{"method":"POST","path":"/carts","summary":"Create a Cart","operationId":"PostCart","description":"Creates a Cart within the given region and with the initial items. If no `region_id` is provided the cart will be associated with the first Region available. If no items are provided the cart will be empty after creation. If a user is logged in the cart's customer id and email will be set.","requestBody":{"content":{"application/json":{"schema":{"properties":{"region_id":{"type":"string","description":"The id of the Region to create the Cart in."},"country_code":{"type":"string","description":"The 2 character ISO country code to create the Cart in."},"items":{"description":"An optional array of `variant_id`, `quantity` pairs to generate Line Items from.","type":"array","items":{"properties":{"variant_id":{"description":"The id of the Product Variant to generate a Line Item from.","type":"string"},"quantity":{"description":"The quantity of the Product Variant to add","type":"integer"}}}},"context":{"description":"An optional object to provide context to the Cart. The `context` field is automatically populated with `ip` and `user_agent`","type":"object"}}}}}},"tags":["Cart"],"responses":{"200":{"description":"Successfully created a Line truncated

www/reference/gatsby-config.js

@@ -61,8 +61,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-algolia-docsearch`,
       options: {
-        apiKey: process.env.ALGOLIA_DOCSEARCH_API_KEY, // required
-        indexName: process.env.ALGOLIA_DOCSEARCH_INDEX_NAME, // required
+        appId: process.env.ALGOLIA_APP_ID || "temp",
+        apiKey: process.env.ALGOLIA_API_KEY || "temp", // required
+        indexName: "medusa-commerce", // required
         inputSelector: "#algolia-doc-search", // required
         debug: false, // (bool) Optional. Default `false`
       },

www/reference/gatsby-node.js

@@ -17,76 +17,87 @@ const createCustomNode = ({ name, node, createNode }) => {
     return {
       name: path,
       methods: Object.entries(values).map(([method, values]) => {
-        const requestBodyValues =
-          values?.requestBody?.content?.["application/json"]?.schema
+        let requestBodyValues = undefined
+
+        if (values.requestBody && values.requestBody.content) {
+          requestBodyValues =
+            values.requestBody.content["application/json"].schema
+        }
 
         return {
           method: method,
           ...values,
           requestBody: {
-            required: requestBodyValues?.required,
-            type: requestBodyValues?.type,
-            properties: Object.entries(requestBodyValues?.properties || {}).map(
-              ([property, values]) => {
-                let ref = null
-                let component_id = null
-                let nestedModelNode = null
-                const { items, anyOf, oneOf, ...rest } = values
-                if (items || anyOf || oneOf) {
-                  if (items?.anyOf) {
-                    component_id = items.anyOf[0]["$ref"].substring(
-                      items.anyOf[0]["$ref"].lastIndexOf("/") + 1
-                    )
-                    ref = node.components.schemas[component_id]
-                  } else if (items) {
-                    const refPath = items["$ref"]
-                    if (refPath) {
-                      component_id = refPath.substring(
-                        items["$ref"].lastIndexOf("/") + 1
-                      )
-                      ref = node.components.schemas[component_id]
-                    }
-                  } else if (anyOf) {
-                    component_id = anyOf[0]["$ref"].substring(
-                      anyOf[0]["$ref"].lastIndexOf("/") + 1
-                    )
-                    ref = node.components.schemas[component_id]
-                  } else if (oneOf) {
-                    component_id = oneOf[0]["$ref"].substring(
-                      oneOf[0]["$ref"].lastIndexOf("/") + 1
+            required: requestBodyValues
+              ? requestBodyValues.required
+              : undefined,
+            type: requestBodyValues ? requestBodyValues.type : undefined,
+            properties: Object.entries(
+              requestBodyValues ? requestBodyValues.properties : {}
+            ).map(([property, values]) => {
+              let ref = null
+              let component_id = null
+              let nestedModelNode = null
+              const { items, anyOf, oneOf, ...rest } = values
+              if (items || anyOf || oneOf) {
+                if (items && items.anyOf) {
+                  component_id = items.anyOf[0]["$ref"].substring(
+                    items.anyOf[0]["$ref"].lastIndexOf("/") + 1
+                  )
+                  ref = node.components.schemas[component_id]
+                } else if (items) {
+                  const refPath = items["$ref"]
+                  if (refPath) {
+                    component_id = refPath.substring(
+                      items["$ref"].lastIndexOf("/") + 1
                     )
                     ref = node.components.schemas[component_id]
                   }
-                }
-                if (ref) {
-                  const { properties, ...rest } = ref
-                  let nestedModelProperties = []
-                  if (properties) {
-                    Object.entries(properties).map(([key, values]) => {
-                      nestedModelProperties.push({
-                        property: key,
-                        ...values,
-                      })
-                    })
-                    nestedModelNode = {
-                      properties: nestedModelProperties,
-                      ...rest,
-                    }
-                  }
-                }
-                return {
-                  property: property,
-                  nestedModel: nestedModelNode,
-                  ...rest,
+                } else if (anyOf) {
+                  component_id = anyOf[0]["$ref"].substring(
+                    anyOf[0]["$ref"].lastIndexOf("/") + 1
+                  )
+                  ref = node.components.schemas[component_id]
+                } else if (oneOf) {
+                  component_id = oneOf[0]["$ref"].substring(
+                    oneOf[0]["$ref"].lastIndexOf("/") + 1
+                  )
+                  ref = node.components.schemas[component_id]
                 }
               }
-            ),
+              if (ref) {
+                const { properties, ...rest } = ref
+                let nestedModelProperties = []
+                if (properties) {
+                  Object.entries(properties).map(([key, values]) => {
+                    nestedModelProperties.push({
+                      property: key,
+                      ...values,
+                    })
+                  })
+                  nestedModelNode = {
+                    properties: nestedModelProperties,
+                    ...rest,
+                  }
+                }
+              }
+              return {
+                property: property,
+                nestedModel: nestedModelNode,
+                ...rest,
+              }
+            }),
           },
 
           responses: Object.entries(values.responses).map(
             ([response, values]) => {
-              const properties =
-                values.content?.["application/json"]?.schema?.properties
+              let properties = undefined
+
+              if (values && values.content) {
+                properties =
+                  values.content["application/json"].schema.properties
+              }
+
               return {
                 status: response,
                 content: properties
@@ -177,7 +188,7 @@ const createCustomNode = ({ name, node, createNode }) => {
 
         let { items, anyOf, oneOf, ...rest } = values
         if (items || anyOf || oneOf) {
-          if (items?.anyOf) {
+          if (items && items.anyOf) {
             component_id = items.anyOf[0]["$ref"].substring(
               items.anyOf[0]["$ref"].lastIndexOf("/") + 1
             )
@@ -261,6 +272,8 @@ const createCustomNode = ({ name, node, createNode }) => {
       existingSection.section.paths.push({ ...current })
     }
 
+    //acc[section].section[current.name] = { ...current }
+
     return acc
   }, [])
 
@@ -317,7 +330,7 @@ const createAllPages = (sections, api, siteData, createPage, template) => {
         data: siteData.data[api],
         api: api,
         title: edge.section.section_name,
-        description: edge.section.schema?.description || "",
+        description: edge.section.schema ? edge.section.schema.description : "",
         to: { section: baseURL, method: null },
       },
     })

www/reference/package.json

@@ -6,7 +6,7 @@
   "license": "0BSD",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "gatsby clean && gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
@@ -14,6 +14,7 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "@docsearch/react": "^3.0.0-alpha.40",
     "@emotion/react": "^11.1.2",
     "@emotion/styled": "^11.0.0",
     "@rebass/forms": "^4.0.6",

www/reference/src/components/content/json-container.js

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from "react"
 import { Box } from "theme-ui"
-import "../../prism-medusa-theme/prism.css"
+import "../../medusa-plugin-themes/prism/theme.css"
 import Prism from "prismjs"
 import "prismjs/components/prism-json"
 import CodeBox from "./code-box"

www/reference/src/components/content/section.js

@@ -14,7 +14,7 @@ import useInView from "../../hooks/use-in-view"
 
 const Section = ({ data }) => {
   const { section } = data
-  const [isExpanded, setIsExpanded] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(true)
   const { openSections, updateSection, updateMetadata } = useContext(
     NavigationContext
   )
@@ -52,10 +52,8 @@ const Section = ({ data }) => {
   }
 
   useEffect(() => {
-    if (isExpanded) {
-      scrollIntoView()
-    }
-  }, [isExpanded])
+    setIsExpanded(false)
+  }, [])
 
   useEffect(() => {
     const shouldOpen = openSections.includes(
@@ -84,7 +82,11 @@ const Section = ({ data }) => {
   }, [isInView])
 
   return (
-    <section ref={sectionRef} id={convertToKebabCase(section.section_name)}>
+    <section
+      ref={sectionRef}
+      id={convertToKebabCase(section.section_name)}
+      className="DocSearch-content"
+    >
       <Box
         sx={{
           borderBottom: "hairline",
@@ -149,7 +151,29 @@ const Section = ({ data }) => {
               ) : null}
             </Flex>
           </ResponsiveContainer>
-          {isExpanded ? (
+          {!isExpanded ? (
+            <Flex
+              sx={{
+                justifyContent: "center",
+                alignItems: "center",
+                width: "100%",
+              }}
+              mt={4}
+            >
+              <Button
+                onClick={handleExpand}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  borderRadius: "24px",
+                  bg: "light",
+                  fontWeight: "500",
+                }}
+              >
+                SHOW <ChevronDown fill={"dark"} styles={{ mr: "-10px" }} />
+              </Button>
+            </Flex>
+          ) : (
             <Box mt={4}>
               {section.paths.map((p, i) => {
                 return (
@@ -173,28 +197,6 @@ const Section = ({ data }) => {
                 )
               })}
             </Box>
-          ) : (
-            <Flex
-              sx={{
-                justifyContent: "center",
-                alignItems: "center",
-                width: "100%",
-              }}
-              mt={4}
-            >
-              <Button
-                onClick={handleExpand}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  borderRadius: "24px",
-                  bg: "light",
-                  fontWeight: "500",
-                }}
-              >
-                SHOW <ChevronDown fill={"dark"} styles={{ mr: "-10px" }} />
-              </Button>
-            </Flex>
           )}
         </Flex>
       </Box>

www/reference/src/components/layout.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { Flex, Box } from "theme-ui"
-import Sidebar from "./sidebar"
+import Sidebar from "./side-bar"
 
 const Layout = ({ data, api, children }) => {
   return (

www/reference/src/components/search/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { DocSearch } from "@docsearch/react"
+import "../../medusa-plugin-themes/docsearch/theme.css"
+
+const algoliaApiKey =
+  process.env.ALGOLIA_API_KEY || "25626fae796133dc1e734c6bcaaeac3c" //second opt is for testing purposes
+const algoliaIndexName = process.env.ALGOLIA_API_KEY || "docsearch"
+
+const Search = () => {
+  return <DocSearch apiKey={algoliaApiKey} indexName={algoliaIndexName} />
+}
+
+export default Search

www/reference/src/components/side-bar/index.js

@@ -5,6 +5,7 @@ import Logo from "../../assets/logo.svg"
 import LogoMuted from "../../assets/logo-muted.svg"
 import SideBarItem from "./sidebar-item"
 import SideBarSelector from "./sidebar-selector"
+import { navigate } from "gatsby"
 
 const SideBarContainer = styled(Flex)`
   --side-bar-width: 220px;
@@ -40,7 +41,6 @@ const Sidebar = ({ data, api }) => {
         setScrollPos(pos)
       }
     }
-
     nav.addEventListener("scroll", handleScroll)
     return () => nav.removeEventListener("scroll", handleScroll)
   }, [])
@@ -71,8 +71,10 @@ const Sidebar = ({ data, api }) => {
           <Image
             src={Logo}
             alt="Medusa logo"
+            onClick={() => navigate("/")}
             sx={{
-              height: "28px",
+              height: "32px",
+              cursor: "pointer",
             }}
           />
         </Flex>

www/reference/src/components/topbar.js

@@ -6,6 +6,7 @@ import GitHub from "../components/icons/github"
 import NavigationContext from "../context/navigation-context"
 import { convertToKebabCase } from "../utils/convert-to-kebab-case"
 import ChevronDown from "./icons/chevron-down"
+import Search from "./search"
 
 const Topbar = ({ data, api }) => {
   const { goTo, reset, currentSection } = useContext(NavigationContext)
@@ -60,6 +61,7 @@ const Topbar = ({ data, api }) => {
               fontWeight: "500",
               flexGrow: "1",
               px: "0",
+              backgroundColor: "light",
               transition: "all .1s ease-in-out",
               "&:focus": {
                 outline: "none !important",
@@ -107,6 +109,8 @@ const Topbar = ({ data, api }) => {
         >
           <GitHub />
         </Link>
+        {/* Re-add once indexing has been fine tuned */}
+        {/* <Search /> */}
       </Flex>
     </Flex>
   )

www/reference/src/medusa-plugin-themes/docsearch/theme.css

@@ -0,0 +1,744 @@
+:root {
+    --docsearch-primary-color: #0a3149;
+    /*dark*/
+    --docsearch-secondary-color: #eef0f5;
+    /*faded*/
+    --docsearch-text-color: rgb(28, 30, 33);
+    --docsearch-spacing: 12px;
+    --docsearch-icon-stroke-width: 1.4;
+    --docsearch-highlight-color: var(--docsearch-primary-color);
+    --docsearch-muted-color: rgb(150, 159, 175);
+    --docsearch-container-background: #eef0f575;
+    --docsearch-logo-color: rgba(84, 104, 255);
+    --docsearch-key-border: 1px solid rgba(0, 0, 0, .05);
+    /* modal */
+    --docsearch-modal-width: 560px;
+    --docsearch-modal-height: 600px;
+    --docsearch-modal-background: white;
+    --docsearch-modal-shadow: 0 15px 35px 0 rgb(59 65 94 / 10%);
+    /* searchbox */
+    --docsearch-searchbox-height: 56px;
+    --docsearch-searchbox-background: rgb(235, 237, 240);
+    --docsearch-searchbox-focus-background: #fff;
+    --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+    /* hit */
+    --docsearch-hit-height: 56px;
+    --docsearch-hit-color: rgb(68, 73, 80);
+    --docsearch-hit-active-color: #fff;
+    --docsearch-hit-background: #fff;
+    --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
+    /* key */
+    --docsearch-key-gradient: linear-gradient( -225deg, rgb(213, 219, 228) 0%, rgb(248, 248, 248) 100%);
+    --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+    /* footer */
+    --docsearch-footer-height: 44px;
+    --docsearch-footer-background: #fff;
+    --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+}
+
+/* Darkmode */
+
+html[data-theme='dark'] {
+    --docsearch-text-color: rgb(245, 246, 247);
+    --docsearch-container-background: rgba(9, 10, 17, 0.8);
+    --docsearch-modal-background: rgb(21, 23, 42);
+    --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9);
+    --docsearch-searchbox-background: rgb(9, 10, 17);
+    --docsearch-searchbox-focus-background: #000;
+    --docsearch-hit-color: rgb(190, 195, 201);
+    --docsearch-hit-shadow: none;
+    --docsearch-hit-background: rgb(9, 10, 17);
+    --docsearch-key-gradient: linear-gradient( -26.5deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%);
+    --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+    --docsearch-footer-background: rgb(30, 33, 54);
+    --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+    --docsearch-logo-color: rgb(255, 255, 255);
+    --docsearch-muted-color: rgb(127, 132, 151);
+}
+
+/* Body modifier */
+
+.DocSearch--active {
+    /*
+   * We need to mark it as important because some websites override the
+   * `style` attribute (e.g. Docusaurus).
+   */
+    overflow: hidden !important;
+}
+
+/* Container & Modal */
+
+.DocSearch-Container, .DocSearch-Container * {
+    box-sizing: border-box;
+}
+
+.DocSearch-Container {
+    background-color: var(--docsearch-container-background);
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    z-index: 200;
+}
+
+.DocSearch-Container a {
+    text-decoration: none;
+}
+
+.DocSearch-Link {
+    appearance: none;
+    background: none;
+    border: 0;
+    color: var(--docsearch-highlight-color);
+    cursor: pointer;
+    font: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+.DocSearch-Modal {
+    background: var(--docsearch-modal-background);
+    border-radius: 8px;
+    box-shadow: var(--docsearch-modal-shadow);
+    flex-direction: column;
+    margin: 60px auto auto;
+    max-width: var(--docsearch-modal-width);
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Ubuntu, sans-serif;
+}
+
+/* Modal Searchbox */
+
+.DocSearch-SearchBar {
+    display: flex;
+    padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
+}
+
+.DocSearch-Form {
+    align-items: center;
+    background: var(--docsearch-searchbox-focus-background);
+    border-radius: 4px;
+    display: flex;
+    height: var(--docsearch-searchbox-height);
+    padding: 0 var(--docsearch-spacing);
+    position: relative;
+    width: 100%;
+}
+
+.DocSearch-Input {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: var(--docsearch-text-color);
+    flex: 1;
+    font: inherit;
+    font-size: 1em;
+    height: 100%;
+    outline: none;
+    padding: 0 0 0 8px;
+    width: 80%;
+}
+
+.DocSearch-Input::placeholder {
+    color: var(--docsearch-muted-color);
+    opacity: 1;
+    /* Firefox */
+}
+
+.DocSearch-Input::-webkit-search-cancel-button, .DocSearch-Input::-webkit-search-decoration, .DocSearch-Input::-webkit-search-results-button, .DocSearch-Input::-webkit-search-results-decoration {
+    display: none;
+}
+
+.DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset {
+    margin: 0;
+    padding: 0;
+}
+
+.DocSearch-MagnifierLabel, .DocSearch-Reset {
+    align-items: center;
+    color: var(--docsearch-highlight-color);
+    display: flex;
+    justify-content: center;
+}
+
+.DocSearch-Container--Stalled .DocSearch-MagnifierLabel {
+    display: none;
+}
+
+.DocSearch-LoadingIndicator {
+    display: none;
+}
+
+.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
+    align-items: center;
+    color: var(--docsearch-highlight-color);
+    display: flex;
+    justify-content: center;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .DocSearch-Reset {
+        animation: none;
+        appearance: none;
+        background: none;
+        border: 0;
+        border-radius: 50%;
+        color: var(--docsearch-icon-color);
+        cursor: pointer;
+        right: 0;
+        stroke-width: var(--docsearch-icon-stroke-width);
+    }
+}
+
+.DocSearch-Reset {
+    animation: fade-in 0.1s ease-in forwards;
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 50%;
+    color: var(--docsearch-icon-color);
+    cursor: pointer;
+    padding: 2px;
+    right: 0;
+    stroke-width: var(--docsearch-icon-stroke-width);
+}
+
+.DocSearch-Reset[hidden] {
+    display: none;
+}
+
+.DocSearch-Reset:focus {
+    outline: none;
+}
+
+.DocSearch-Reset:hover {
+    color: var(--docsearch-highlight-color);
+}
+
+.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
+    height: 1em;
+    width: 1em;
+}
+
+.DocSearch-Cancel {
+    display: none;
+}
+
+/* Modal Dropdown */
+
+.DocSearch-Dropdown {
+    max-height: calc( var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));
+    overflow-y: auto;
+    /* firefox */
+    overflow-y: overlay;
+    padding: 0 var(--docsearch-spacing);
+    scrollbar-color: var(--docsearch-muted-color) var(--docsearch-modal-background);
+    scrollbar-width: thin;
+    border-top: 1px solid var(--docsearch-secondary-color)
+}
+
+.DocSearch-Dropdown::-webkit-scrollbar {
+    width: 12px;
+}
+
+.DocSearch-Dropdown::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.DocSearch-Dropdown::-webkit-scrollbar-thumb {
+    background-color: var(--docsearch-muted-color);
+    border: 3px solid var(--docsearch-modal-background);
+    border-radius: 20px;
+}
+
+.DocSearch-Dropdown ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.DocSearch-Label {
+    color: var(--docsearch-muted-color);
+    font-size: 0.75em;
+    line-height: 1.6em;
+}
+
+.DocSearch-Help {
+    color: var(--docsearch-muted-color);
+    font-size: 0.9em;
+    margin: 0;
+    user-select: none;
+}
+
+.DocSearch-Title {
+    font-size: 1.2em;
+}
+
+.DocSearch-Logo a {
+    display: flex;
+}
+
+.DocSearch-Logo svg {
+    color: var(--docsearch-logo-color);
+    margin-left: 8px;
+}
+
+/* Hit */
+
+.DocSearch-Hits:last-of-type {
+    margin-bottom: 24px;
+}
+
+.DocSearch-Hits mark {
+    background: none;
+    color: var(--docsearch-highlight-color);
+}
+
+.DocSearch-HitsFooter {
+    color: var(--docsearch-muted-color);
+    display: flex;
+    font-size: 0.85em;
+    justify-content: center;
+    margin-bottom: var(--docsearch-spacing);
+    padding: var(--docsearch-spacing);
+}
+
+.DocSearch-HitsFooter a {
+    border-bottom: 1px solid;
+    color: inherit;
+}
+
+.DocSearch-Hit {
+    border-radius: 4px;
+    display: flex;
+    padding-bottom: 4px;
+    position: relative;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .DocSearch-Hit--deleting {
+        transition: none;
+    }
+}
+
+.DocSearch-Hit--deleting {
+    opacity: 0;
+    transition: all 250ms linear;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .DocSearch-Hit--favoriting {
+        transition: none;
+    }
+}
+
+.DocSearch-Hit--favoriting {
+    transform: scale(0);
+    transform-origin: top center;
+    transition: all 250ms linear;
+    transition-delay: 250ms;
+}
+
+.DocSearch-Hit a {
+    background: var(--docsearch-hit-background);
+    border-radius: 4px;
+    box-shadow: var(--docsearch-hit-shadow);
+    display: block;
+    padding-left: var(--docsearch-spacing);
+    width: 100%;
+}
+
+.DocSearch-Hit-source {
+    background: var(--docsearch-modal-background);
+    color: var(--docsearch-highlight-color);
+    font-size: 0.85em;
+    font-weight: 600;
+    line-height: 32px;
+    margin: 0 -4px;
+    padding: 8px 4px 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.DocSearch-Hit-Tree {
+    color: var(--docsearch-muted-color);
+    height: var(--docsearch-hit-height);
+    opacity: 0.5;
+    stroke-width: var(--docsearch-icon-stroke-width);
+    width: 24px;
+}
+
+.DocSearch-Hit[aria-selected='true'] a {
+    background-color: var(--docsearch-highlight-color);
+}
+
+.DocSearch-Hit[aria-selected='true'] mark {
+    text-decoration: underline;
+}
+
+.DocSearch-Hit-Container {
+    align-items: center;
+    color: var(--docsearch-hit-color);
+    display: flex;
+    flex-direction: row;
+    height: var(--docsearch-hit-height);
+    padding: 0 var(--docsearch-spacing) 0 0;
+}
+
+.DocSearch-Hit-icon {
+    color: var(--docsearch-muted-color);
+    height: 20px;
+    stroke-width: var(--docsearch-icon-stroke-width);
+    width: 20px;
+}
+
+.DocSearch-Hit-action {
+    align-items: center;
+    color: var(--docsearch-muted-color);
+    display: flex;
+    height: 22px;
+    stroke-width: var(--docsearch-icon-stroke-width);
+    width: 22px;
+}
+
+.DocSearch-Hit-action svg {
+    display: block;
+    height: 18px;
+    width: 18px;
+}
+
+.DocSearch-Hit-action+.DocSearch-Hit-action {
+    margin-left: 6px;
+}
+
+.DocSearch-Hit-action-button {
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 50%;
+    color: inherit;
+    cursor: pointer;
+    padding: 2px;
+}
+
+svg.DocSearch-Hit-Select-Icon {
+    display: none;
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Select-Icon {
+    display: block;
+}
+
+.DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus {
+    background: rgba(0, 0, 0, 0.2);
+    transition: background-color 0.1s ease-in;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus {
+        transition: none;
+    }
+}
+
+.DocSearch-Hit-action-button:hover path, .DocSearch-Hit-action-button:focus path {
+    fill: #fff;
+}
+
+.DocSearch-Hit-content-wrapper {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    font-weight: 500;
+    justify-content: center;
+    line-height: 1.2em;
+    margin: 0 8px;
+    overflow-x: hidden;
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 80%;
+}
+
+.DocSearch-Hit-title {
+    font-size: 0.9em;
+}
+
+.DocSearch-Hit-path {
+    color: var(--docsearch-muted-color);
+    font-size: 0.75em;
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, .DocSearch-Hit[aria-selected='true'] mark, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree {
+    color: var(--docsearch-hit-active-color) !important;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .DocSearch-Hit-action-button:hover, .DocSearch-Hit-action-button:focus {
+        background: rgba(0, 0, 0, 0.2);
+        transition: none;
+    }
+}
+
+/* No Results - Start Screen - Error Screen */
+
+.DocSearch-NoResults, .DocSearch-StartScreen, .DocSearch-ErrorScreen {
+    font-size: 0.9em;
+    margin: 0 auto;
+    padding: 36px 0;
+    text-align: center;
+    width: 80%;
+}
+
+.DocSearch-Screen-Icon {
+    color: var(--docsearch-muted-color);
+    padding-bottom: 12px;
+}
+
+.DocSearch-NoResults-Prefill-List {
+    display: inline-block;
+    padding-bottom: 24px;
+    text-align: left;
+}
+
+.DocSearch-NoResults-Prefill-List ul {
+    display: inline-block;
+    padding: 8px 0 0;
+}
+
+.DocSearch-NoResults-Prefill-List li {
+    list-style-position: inside;
+    list-style-type: '» ';
+}
+
+.DocSearch-Prefill {
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 1em;
+    color: var(--docsearch-highlight-color);
+    cursor: pointer;
+    display: inline-block;
+    font-size: 1em;
+    font-weight: 700;
+    padding: 0;
+}
+
+.DocSearch-Prefill:hover, .DocSearch-Prefill:focus {
+    outline: none;
+    text-decoration: underline;
+}
+
+/* Modal Footer */
+
+.DocSearch-Footer {
+    align-items: center;
+    background: var(--docsearch-footer-background);
+    border-radius: 0 0 8px 8px;
+    border-top: 1px solid var(--docsearch-secondary-color);
+    display: flex;
+    flex-direction: row-reverse;
+    flex-shrink: 0;
+    height: var(--docsearch-footer-height);
+    justify-content: space-between;
+    padding: 0 var(--docsearch-spacing);
+    position: relative;
+    user-select: none;
+    width: 100%;
+    z-index: 300;
+}
+
+.DocSearch-Commands {
+    color: var(--docsearch-muted-color);
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.DocSearch-Commands li {
+    align-items: center;
+    display: flex;
+}
+
+.DocSearch-Commands li:not(:last-of-type) {
+    margin-right: 0.8em;
+}
+
+.DocSearch-Commands-Key {
+    align-items: center;
+    /* background: var(--docsearch-key-gradient); */
+    border-radius: 2px;
+    /* box-shadow: var(--docsearch-key-shadow); */
+    display: flex;
+    height: 18px;
+    justify-content: center;
+    margin-right: 0.4em;
+    width: 20px;
+}
+
+/* Responsive */
+
+@media screen and (max-width: 848px) {
+    :root {
+        --docsearch-spacing: 10px;
+        --docsearch-footer-height: 40px;
+    }
+    .DocSearch-Dropdown {
+        height: 100%;
+    }
+    .DocSearch-Container {
+        height: 100vh;
+        height: -webkit-fill-available;
+        position: absolute;
+    }
+    .DocSearch-Footer {
+        border-radius: 0;
+        bottom: 0;
+        position: absolute;
+    }
+    .DocSearch-Hit-content-wrapper {
+        display: flex;
+        position: relative;
+        width: 80%;
+    }
+    .DocSearch-Modal {
+        border-radius: 0;
+        box-shadow: none;
+        height: 100vh;
+        height: -webkit-fill-available;
+        margin: 0;
+        max-width: 100%;
+        width: 100%;
+    }
+    .DocSearch-Cancel {
+        appearance: none;
+        background: none;
+        border: 0;
+        color: var(--docsearch-highlight-color);
+        cursor: pointer;
+        display: inline-block;
+        flex: none;
+        font: inherit;
+        font-size: 1em;
+        font-weight: 500;
+        margin-left: var(--docsearch-spacing);
+        outline: none;
+        overflow: hidden;
+        padding: 0;
+        user-select: none;
+        white-space: nowrap;
+    }
+    .DocSearch-Commands {
+        display: none;
+    }
+    .DocSearch-Hit-Tree {
+        display: none;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.DocSearch-Button {
+    display: flex;
+    align-items: center;
+    background: white;
+    border: 0;
+    border-radius: 36px;
+    color: var(--docsearch-muted-color);
+    cursor: pointer;
+    display: flex;
+    font-weight: 500;
+    height: 36px;
+    justify-content: space-between;
+    padding: 0 8px;
+    user-select: none;
+    border: 1px solid var(--docsearch-secondary-color);
+    flex-grow: 1;
+    max-width: 200px;
+    margin-left: 12px;
+}
+
+.DocSearch-Button:hover, .DocSearch-Button:active, .DocSearch-Button:focus {
+    color: var(--docsearch-primary-color);
+    outline: none;
+}
+
+.DocSearch-Button-Container {
+    align-items: center;
+    display: flex;
+}
+
+.DocSearch-Search-Icon {
+    stroke-width: 1.6;
+    height: 1em;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+    color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button-Placeholder {
+    font-size: 1em;
+    padding: 0 12px 0 6px;
+}
+
+.DocSearch-Button-Keys {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: var(--docsearch-key-border);
+    background-color: var(--docsearch-secondary-color);
+    padding: 4px;
+    border-radius: 4px;
+    margin-right: 4px;
+    font-size: .85em;
+}
+
+.DocSearch-Button-Key {
+    align-items: center;
+    border-radius: 3px;
+    color: var(--docsearch-muted-color);
+    display: flex;
+    height: 10px;
+    justify-content: center;
+    position: relative;
+    width: 10px;
+}
+
+.DocSearch-Button-Key:last-of-type {
+    margin-left: 2px;
+    padding-top: 1px;
+}
+
+@media screen and (max-width: 848px) {
+    .DocSearch-Button-Keys, .DocSearch-Button-Placeholder {
+        display: none;
+    }
+    .DocSearch-Button {
+        width: 30px;
+        max-width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        padding: 0;
+        background-color: var(--docsearch-secondary-color);
+        border: none;
+    }
+    .DocSearch-Button .DocSearch-Search-Icon {
+        color: var(--docsearch-primary-color);
+    }
+    .DocSearch-Search-Icon {
+        stroke-width: 2.4;
+        height: 1em;
+    }
+}

www/reference/src/medusa-plugin-themes/prism/theme.css

@@ -0,0 +1,100 @@
+code[class*="language-"], pre[class*="language-"] {
+    color: #0a3149;
+    background: none;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 12px;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+/* Code blocks */
+
+pre[class*="language-"] {
+    padding: 1em;
+    margin: 0;
+    overflow: auto;
+    border-radius: 0.3em;
+}
+
+:not(pre)>code[class*="language-"], pre[class*="language-"] {
+    background: transparent;
+}
+
+/* Inline code */
+
+:not(pre)>code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+}
+
+.token.comment, .token.prolog, .token.doctype, .token.cdata {
+    color: blue;
+}
+
+.token.punctuation {
+    color: #0a3149;
+}
+
+.token.namespace {
+    opacity: 0.7;
+}
+
+.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
+    color: #0a3149;
+}
+
+.token.number {
+    color: #e56f4a;
+}
+
+.token.boolean {
+    color: #3a97d4;
+}
+
+.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
+    color: #09825d;
+}
+
+.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {
+    color: #0a3149;
+}
+
+.token.atrule, .token.attr-value, .token.function, .token.class-name {
+    color: #e6db74;
+}
+
+.token.keyword {
+    color: #3a97d4;
+}
+
+.token.keyword.null {
+    color: grey;
+}
+
+.token.regex, .token.important {
+    color: #fd971f;
+}
+
+.token.important, .token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}

www/reference/src/prism-medusa-theme/prism.css

@@ -1,123 +0,0 @@
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #0a3149;
-  background: none;
-  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  font-size: 12px;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: 0;
-  overflow: auto;
-  border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: transparent;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: blue;
-}
-
-.token.punctuation {
-  color: #0a3149;
-}
-
-.token.namespace {
-  opacity: 0.7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #0a3149;
-}
-
-.token.number {
-  color: #e56f4a;
-}
-
-.token.boolean {
-  color: #3a97d4;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #09825d;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-  color: #0a3149;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
-  color: #e6db74;
-}
-
-.token.keyword {
-  color: #3a97d4;
-}
-
-.token.keyword.null {
-  color: grey;
-}
-
-.token.regex,
-.token.important {
-  color: #fd971f;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}

www/reference/src/templates/reference-page.js

@@ -34,7 +34,7 @@ export default function ReferencePage({
   return (
     <Layout data={data} api={api}>
       <Helmet>
-        <title>{`${siteData.title} | Medusa Commerce API Reference`}</title>
+        <title>{`API | Medusa Commerce API Reference`}</title>
         <meta name="description" content={siteData.description} />
       </Helmet>
       <Content data={data} api={api} />