docs: updated Docusaurus + fix recurring error (#1244)

docs/content/advanced/backend/endpoints/add-admin.md

@@ -36,7 +36,11 @@ This exports a function that returns an Express router. In that function, you ca
 
 Now, if you run your server and send a request to `/admin/hello`, you will receive a JSON response message.
 
-> Custom endpoints are compiled into the `dist` directory of your Backend when you run your server using `medusa develop`, while it’s running, and when you run `npm run build`.
+:::note
+
+Custom endpoints are compiled into the `dist` directory of your Backend when you run your server using `medusa develop`, while it’s running, and when you run `npm run build`.
+
+:::
 
 ## Accessing Endpoints from Admin
 

docs/content/advanced/backend/endpoints/add-storefront.md

@@ -36,7 +36,11 @@ This exports a function that returns an Express router. In that function, you ca
 
 Now, if you run your server and send a request to `/store/hello`, you will receive a JSON response message.
 
-> Custom endpoints are compiled into the `dist` directory of your Backend when you run your server using `medusa develop`, while it’s running, and when you run `npm run build`.
+:::note
+
+Custom endpoints are compiled into the `dist` directory of your Backend when you run your server using `medusa develop`, while it’s running, and when you run `npm run build`.
+
+:::
 
 ## Multiple Endpoints
 

docs/content/troubleshooting/documentation-error.md

@@ -0,0 +1,7 @@
+# Documentation Error
+
+If you have installed the dependencies in the root of this repository (i.e., if you have a `node_modules` directory at the root of this repository), this will cause an error when running this documentation website. This is because the content resides in `docs/content` and when that content is being imported from there, a mix up can happen between the dependencies which will cause an `invalid hook call` error.
+
+For that reason, we added a `clean-node-modules` script that deletes the `node_modules` directory, and we call that script before the `start` and `build` scripts are ran.
+
+So, everytime you run these 2 scripts, the `node_modules` directory at the root will be deleted.

www/docs/README.md

@@ -1,3 +1,11 @@
 # Website
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+## Note Before Development
+
+If you have installed the dependencies in the root of this repository (i.e., if you have a `node_modules` directory at the root of this repository), this will cause an error when running this documentation website. This is because the content resides in `docs/content` and when that content is being imported from there, a mix up can happen between the dependencies which will cause an `invalid hook call` error.
+
+For that reason, we added a `clean-node-modules` script that deletes the `node_modules` directory, and we call that script before the `start` and `build` scripts are ran.
+
+So, everytime you run these 2 scripts, the `node_modules` directory at the root will be deleted.

www/docs/docusaurus.config.js

@@ -6,7 +6,7 @@ const algoliaApiKey = process.env.ALGOLIA_API_KEY || "temp"
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: "Medusa Commerce",
+  title: "Medusa",
   tagline: "Explore and learn how to use Medusa",
   url: "https://docs.medusajs.com",
   baseUrl: "/",
@@ -25,7 +25,10 @@ module.exports = {
     ],
   ],
   themeConfig: {
+    colorMode: {
+      defaultMode: 'light',
       disableSwitch: true,
+    },
     algolia: {
       apiKey: algoliaApiKey,
       indexName: "medusa-commerce",
@@ -35,8 +38,8 @@ module.exports = {
     prism: {
       defaultLanguage: "js",
       plugins: ["line-numbers", "show-language"],
-      theme: require("@kiwicopple/prism-react-renderer/themes/vsDark"),
+      theme: require("prism-react-renderer/themes/vsDark"),
-      darkTheme: require("@kiwicopple/prism-react-renderer/themes/vsDark"),
+      darkTheme: require("prism-react-renderer/themes/vsDark"),
     },
     navbar: {
       hideOnScroll: true,
@@ -44,6 +47,7 @@ module.exports = {
         alt: "Medusa Commerce",
         src: "img/logo.svg",
         srcDark: "img/logo.svg",
+        width: 100
       },
       items: [
         {
@@ -98,12 +102,12 @@ module.exports = {
           title: "More",
           items: [
             {
-              label: "Contact",
+              label: "Medusa Home",
-              href: "https://medusa-commere.com",
+              href: "https://medusajs.com",
             },
             {
-              label: "Privacy & Terms",
+              label: "Contact",
-              href: "https://medusa-commere.com",
+              href: "https://ky5eo2x1u81.typeform.com/get-in-touch",
             },
             {
               label: "GitHub",
@@ -112,7 +116,7 @@ module.exports = {
           ],
         },
       ],
-      copyright: `© ${new Date().getFullYear()} Medusa Commerce`,
+      copyright: `© ${new Date().getFullYear()} Medusa`,
     },
   },
   presets: [

www/docs/package.json

@@ -4,7 +4,10 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
+    "clean-node-modules": "rm -rf ../../node_modules",
+    "prestart": "yarn clean-node-modules",
     "start": "docusaurus clear && docusaurus start",
+    "prebuild": "yarn clean-node-modules",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
@@ -14,17 +17,14 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.3",
+    "@docusaurus/core": "2.0.0-beta.17",
-    "@docusaurus/preset-classic": "2.0.0-beta.3",
+    "@docusaurus/preset-classic": "2.0.0-beta.17",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.3",
+    "@svgr/webpack": "6.2.1",
-    "@kiwicopple/prism-react-renderer": "github:kiwicopple/prism-react-renderer",
-    "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "docusaurus2-dotenv": "^1.4.0",
     "file-loader": "^6.2.0",
     "lodash": "^4.17.21",
-    "prism-react-renderer": "^1.2.1",
+    "prism-react-renderer": "^1.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "url-loader": "^4.1.1"

www/docs/sidebars.js

@@ -283,6 +283,11 @@ module.exports = {
           id: "troubleshooting/signing-in-to-admin",
           label: "Signing in to Medusa Admin",
         },
+        {
+          type: "doc",
+          id: "troubleshooting/documentation-error",
+          label: "Documentation Error",
+        },
       ],
     },
   ],

www/docs/src/components/Banner/Banner.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from "react"
+
 import CloseIcon from "../close-icon"
-import styles from "./banner.module.css"
-import clsx from "clsx"
-import useThemeContext from "@theme/hooks/useThemeContext"
 import ConfLogo from "../../../static/img/logo.svg"
+import clsx from "clsx"
+import styles from "./banner.module.css"
+import {useColorMode} from '@docusaurus/theme-common';
 
 const Banner = (props) => {
   const [isBannerVisible, setIsBannerVisible] = useState(true)
-  const { isDarkTheme } = useThemeContext()
+  const { isDarkTheme } = useColorMode()
 
   const handleDismissBanner = () => {
     setIsBannerVisible(false)

www/docs/src/css/custom.css

@@ -62,12 +62,19 @@ p {
 
 /* DocSearch */
 
-html[data-theme="light"] .DocSearch-Button {
+/* html[data-theme="light"] .DocSearch-Button {
   --docsearch-searchbox-background: #fff;
 }
 
 html[data-theme="dark"] .DocSearch-Button {
   --docsearch-searchbox-background: #1f1f1f;
+} */
+
+.DocSearch-Button {
+  width: 100%;
+  max-width: 175px;
+  border-radius: 8px !important;
+  --docsearch-container-background: #f5f6f7;
 }
 
 span.DocSearch-Button-Key {
@@ -90,11 +97,6 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
   font-size: 14px;
 }
 
-/* Medusa logo */
-.navbar__brand {
-  width: 100px;
-}
-
 .navbar-github-link:before {
   content: "";
   width: 24px;
@@ -203,10 +205,6 @@ footer .footer__items svg {
   display: none;
 }
 
-footer .footer__item a:hover {
-  color: white;
-}
-
 @media screen and (min-width: 966px) {
   footer .footer__col {
     display: flex;

www/docs/src/theme/SearchBar/index.js

@@ -1,249 +1,10 @@
-/**
+import React from 'react';
- * Copyright (c) Facebook, Inc. and its affiliates.
+import SearchBar from '@theme-original/SearchBar';
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { DocSearchButton, useDocSearchKeyboardEvents } from "@docsearch/react"
-import Head from "@docusaurus/Head"
-import Link from "@docusaurus/Link"
-import { useHistory } from "@docusaurus/router"
-import { translate } from "@docusaurus/Translate"
-import { useBaseUrlUtils } from "@docusaurus/useBaseUrl"
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
-import useAlgoliaContextualFacetFilters from "@theme/hooks/useAlgoliaContextualFacetFilters"
-import useSearchQuery from "@theme/hooks/useSearchQuery"
-import React, { useCallback, useMemo, useRef, useState } from "react"
-import { createPortal } from "react-dom"
-import styles from "./styles.module.css"
-
-let DocSearchModal = null
-
-const convertToKebabCase = (string) => {
-  return string
-    .replace(/\s+/g, "-")
-    .replace("'", "")
-    .replace(".", "")
-    .replace('"', "")
-    .toLowerCase()
-}
-
-const replaceUrl = (item) => {
-  let { url, hierarchy } = item
-  if (url.includes("api/store") || url.includes("/api/admin")) {
-    url = url.replace("#", "")
-    if (hierarchy.lvl2) {
-      const index = url.lastIndexOf("/")
-      url =
-        url.substring(0, index) +
-        `/${convertToKebabCase(hierarchy.lvl1)}` +
-        url.substring(index)
-    }
-  }
-  return url
-}
-
-function Hit({ hit, children }) {
-  if (hit.url.includes("/api/store") || hit.url.includes("/api/admin")) {
-    const url = replaceUrl(hit)
-    return <a href={url}>{children}</a>
-  }
-
-  return <Link to={hit.url}>{children}</Link>
-}
-
-function ResultsFooter({ state, onClose }) {
-  const { generateSearchPageLink } = useSearchQuery()
-
-  return (
-    <Link to={generateSearchPageLink(state.query)} onClick={onClose}>
-      See all {state.context.nbHits} results
-    </Link>
-  )
-}
-
-function DocSearch({ contextualSearch, ...props }) {
-  const { siteMetadata } = useDocusaurusContext()
-
-  const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters()
-
-  const configFacetFilters = props.searchParameters?.facetFilters ?? []
-
-  const facetFilters = contextualSearch
-    ? // Merge contextual search filters with config filters
-      [...contextualSearchFacetFilters, ...configFacetFilters]
-    : // ... or use config facetFilters
-      configFacetFilters
-
-  // we let user override default searchParameters if he wants to
-  const searchParameters = {
-    ...props.searchParameters,
-    facetFilters,
-  }
-
-  const { withBaseUrl } = useBaseUrlUtils()
-  const history = useHistory()
-  const searchContainer = useRef(null)
-  const searchButtonRef = useRef(null)
-  const [isOpen, setIsOpen] = useState(false)
-  const [initialQuery, setInitialQuery] = useState(null)
-
-  const importDocSearchModalIfNeeded = useCallback(() => {
-    if (DocSearchModal) {
-      return Promise.resolve()
-    }
-
-    return Promise.all([
-      import("@docsearch/react/modal"),
-      import("@docsearch/react/style"),
-      import("./styles.css"),
-    ]).then(([{ DocSearchModal: Modal }]) => {
-      DocSearchModal = Modal
-    })
-  }, [])
-
-  const onOpen = useCallback(() => {
-    importDocSearchModalIfNeeded().then(() => {
-      searchContainer.current = document.createElement("div")
-      document.body.insertBefore(
-        searchContainer.current,
-        document.body.firstChild
-      )
-      setIsOpen(true)
-    })
-  }, [importDocSearchModalIfNeeded, setIsOpen])
-
-  const onClose = useCallback(() => {
-    setIsOpen(false)
-    searchContainer.current.remove()
-  }, [setIsOpen])
-
-  const onInput = useCallback(
-    (event) => {
-      importDocSearchModalIfNeeded().then(() => {
-        setIsOpen(true)
-        setInitialQuery(event.key)
-      })
-    },
-    [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery]
-  )
-
-  const navigator = useRef({
-    navigate({ item }) {
-      const url = replaceUrl(item)
-      // Need to type out the entire URL to prevent it from attempting to open the page
-      // as part of the docusaurus project. Which will fail.
-      window.location = `https://docs.medusajs.com${url}`
-    },
-    navigateNewTab({ item }) {
-      const url = replaceUrl(item)
-      const windowReference = window.open(url, "_blank", "noopener")
-
-      if (windowReference) {
-        windowReference.focus()
-      }
-    },
-    navigateNewWindow({ item }) {
-      const url = replaceUrl(item)
-
-      window.open(url, "_blank", "noopener")
-    },
-  }).current
-
-  const transformItems = useRef((items) => {
-    return items.map((item) => {
-      // We transform the absolute URL into a relative URL.
-      // Alternatively, we can use `new URL(item.url)` but it's not
-      // supported in IE.
-      const a = document.createElement("a")
-      a.href = item.url
-
-      return {
-        ...item,
-        url: withBaseUrl(`${a.pathname}${a.hash}`),
-      }
-    })
-  }).current
-
-  const resultsFooterComponent = useMemo(
-    () => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />,
-    [onClose]
-  )
-
-  const transformSearchClient = useCallback(
-    (searchClient) => {
-      searchClient.addAlgoliaAgent("docusaurus", siteMetadata.docusaurusVersion)
-
-      return searchClient
-    },
-    [siteMetadata.docusaurusVersion]
-  )
-
-  useDocSearchKeyboardEvents({
-    isOpen,
-    onOpen,
-    onClose,
-    onInput,
-    searchButtonRef,
-  })
-
-  const translatedSearchLabel = translate({
-    id: "theme.SearchBar.label",
-    message: "Search",
-    description: "The ARIA label and placeholder for search button",
-  })
 
+export default function SearchBarWrapper(props) {
   return (
     <>
-      <Head>
+      <SearchBar {...props} />
-        {/* This hints the browser that the website will load data from Algolia,
-        and allows it to preconnect to the DocSearch cluster. It makes the first
-        query faster, especially on mobile. */}
-        <link
-          rel="preconnect"
-          href={`https://${props.appId}-dsn.algolia.net`}
-          crossOrigin="anonymous"
-        />
-      </Head>
-
-      <div className={styles.searchBox}>
-        <DocSearchButton
-          onTouchStart={importDocSearchModalIfNeeded}
-          onFocus={importDocSearchModalIfNeeded}
-          onMouseOver={importDocSearchModalIfNeeded}
-          onClick={onOpen}
-          ref={searchButtonRef}
-          translations={{
-            buttonText: translatedSearchLabel,
-            buttonAriaLabel: translatedSearchLabel,
-          }}
-        />
-      </div>
-
-      {isOpen &&
-        createPortal(
-          <DocSearchModal
-            onClose={onClose}
-            initialScrollY={window.scrollY}
-            initialQuery={initialQuery}
-            navigator={navigator}
-            transformItems={transformItems}
-            hitComponent={Hit}
-            resultsFooterComponent={resultsFooterComponent}
-            transformSearchClient={transformSearchClient}
-            {...props}
-            searchParameters={searchParameters}
-          />,
-          searchContainer.current
-        )}
     </>
-  )
+  );
 }
-
-function SearchBar() {
-  const { siteConfig } = useDocusaurusContext()
-  return <DocSearch {...siteConfig.themeConfig.algolia} />
-}
-
-export default SearchBar