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

This commit is contained in:
Shahed Nasser
2022-04-08 12:16:22 +03:00
committed by GitHub
parent 6fbb18e3a7
commit 4321af8db6
11 changed files with 1161 additions and 3060 deletions

View File

@@ -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 its 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 its running, and when you run `npm run build`.
:::
## Accessing Endpoints from Admin

View File

@@ -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 its 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 its running, and when you run `npm run build`.
:::
## Multiple Endpoints

View File

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

View File

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

View File

@@ -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: {
disableSwitch: true,
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"),
darkTheme: require("@kiwicopple/prism-react-renderer/themes/vsDark"),
theme: require("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",
href: "https://medusa-commere.com",
label: "Medusa Home",
href: "https://medusajs.com",
},
{
label: "Privacy & Terms",
href: "https://medusa-commere.com",
label: "Contact",
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: [

View File

@@ -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/preset-classic": "2.0.0-beta.3",
"@docusaurus/theme-search-algolia": "^2.0.0-beta.3",
"@kiwicopple/prism-react-renderer": "github:kiwicopple/prism-react-renderer",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"@docusaurus/core": "2.0.0-beta.17",
"@docusaurus/preset-classic": "2.0.0-beta.17",
"@svgr/webpack": "6.2.1",
"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"
@@ -44,4 +44,4 @@
"devDependencies": {
"prettier": "^2.3.2"
}
}
}

View File

@@ -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",
},
],
},
],

View File

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

View File

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

View File

@@ -1,249 +1,10 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* 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",
})
import React from 'react';
import SearchBar from '@theme-original/SearchBar';
export default function SearchBarWrapper(props) {
return (
<>
<Head>
{/* 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
)}
<SearchBar {...props} />
</>
)
);
}
function SearchBar() {
const { siteConfig } = useDocusaurusContext()
return <DocSearch {...siteConfig.themeConfig.algolia} />
}
export default SearchBar

File diff suppressed because it is too large Load Diff