From 5fbfa2a438b494539f28697f8ca2d51488268503 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 22 Apr 2022 13:06:15 +0300 Subject: [PATCH 01/15] docusaurus dark mode --- docs/content/homepage.mdx | 50 ++++++++++++------------ www/docs/docusaurus.config.js | 7 ++-- www/docs/src/css/custom.css | 65 ++++++++++++++++++++++--------- www/docs/static/img/logo-dark.svg | 15 +++++++ 4 files changed, 90 insertions(+), 47 deletions(-) create mode 100644 www/docs/static/img/logo-dark.svg diff --git a/docs/content/homepage.mdx b/docs/content/homepage.mdx index 65950a1444..63a7c8740d 100644 --- a/docs/content/homepage.mdx +++ b/docs/content/homepage.mdx @@ -23,35 +23,35 @@ You can learn more about Medusa's architecture in [our introduction](/introducti ![Medusa's Architecture](https://i.imgur.com/ZHvM2bu.png) -
-
-
- -
+
+
+
+ +

Tutorial

Set up your local development environment

-
- -
+
+ +

Make it your own

Create custom endpoints, services, or subscribers.

-
- -
+
+ +

Plugins

Add or build a plugin to make your engine more powerful.

-
- -
+
+ +

Deploy in seconds

Use one of our guides to deploy your Medusa project in seconds.

@@ -66,28 +66,28 @@ Visit our [Quickstart](https://github.com/medusajs/medusa#-quickstart) to get up ## What you'll find here -
-
-
- -
+
+
+
+ +

Quickstart

A short guide to get you quickly started.

-
- -
+
+ +

How-to and guides

Guides and walkthroughs of concepts, tools, deployment and APIs.

{/* Ref */} -
- -
+
+ +

Reference

Technical documentation of the Medusa API.

diff --git a/www/docs/docusaurus.config.js b/www/docs/docusaurus.config.js index af865e720b..8944b88e84 100644 --- a/www/docs/docusaurus.config.js +++ b/www/docs/docusaurus.config.js @@ -27,7 +27,8 @@ module.exports = { themeConfig: { colorMode: { defaultMode: 'light', - disableSwitch: true, + disableSwitch: false, + respectPrefersColorScheme: true, }, algolia: { apiKey: algoliaApiKey, @@ -45,9 +46,9 @@ module.exports = { navbar: { hideOnScroll: true, logo: { - alt: "Medusa Commerce", + alt: "Medusa", src: "img/logo.svg", - srcDark: "img/logo.svg", + srcDark: "img/logo-dark.svg", width: 100 }, items: [ diff --git a/www/docs/src/css/custom.css b/www/docs/src/css/custom.css index 35bdf55d98..15eaa5e548 100644 --- a/www/docs/src/css/custom.css +++ b/www/docs/src/css/custom.css @@ -10,13 +10,13 @@ :root { /* Colors */ - --ifm-color-primary: #0a3149; - --ifm-color-primary-dark: #0a3149; - --ifm-color-primary-darker: #0a3149; - --ifm-color-primary-darkest: #0a3149; - --ifm-color-primary-light: #0a3149; - --ifm-color-primary-lighter: #0a3149; - --ifm-color-primary-lightest: #0a3149; + --ifm-color-primary: #7C53FF; + --ifm-color-primary-dark: #6231ff; + --ifm-color-primary-darker: #5520ff; + --ifm-color-primary-darkest: #3800ed; + --ifm-color-primary-light: #9675ff; + --ifm-color-primary-lighter: #a386ff; + --ifm-color-primary-lightest: #c9b8ff; --ifm-medusa-gray: #f0f0f0; /* Fonts */ @@ -33,21 +33,39 @@ --ifm-toc-border-color: #f0f0f0; --ifm-toc-link-color: #a6acb5; --ifm-toc-padding-horizontal: 9px; +} +html:not([data-theme="dark"]) { /* Navbar */ --ifm-navbar-shadow: 0px 1px 0px 0px #a6acb5; } html[data-theme="dark"] { - --ifm-color-primary-dark: #ff4848; - --ifm-color-primary: #ff4242; - --ifm-background-color: #1f1f1f; - --ifm-background-surface-color: #1f1f1f; + --ifm-navbar-background-color: #242526; + /* --ifm-color-primary: #7C53FF; */ + --ifm-color-primary-dark: #6231ff; + --ifm-color-primary-darker: #5520ff; + --ifm-color-primary-darkest: #3800ed; + --ifm-color-primary: #9675ff; + --ifm-color-primary-lighter: #a386ff; + --ifm-color-primary-lightest: #c9b8ff; + --ifm-background-color: var(--ifm-color-gray-900); + --ifm-background-surface-color: var(--ifm-color-gray-900); --ifm-medusa-gray: #292929; --ifm-menu-color: #fff; --ifm-toc-border-color: #333; } +[data-theme="dark"] .breadcrumbs__item--active a { + background-color: var(--ifm-color-gray-800) !important; + color: var(--ifm-color-primary-lightest) !important; + font-weight: bold; +} + +[data-theme="dark"] pre code { + background-color: var(--ifm-code-background); +} + h1 { font-size: 2.5em; } @@ -92,6 +110,15 @@ html[data-theme="dark"] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } +html[data-theme="dark"] footer:not(.theme-doc-footer) { + background-color: var(--ifm-color-gray-800); +} + +html[data-theme="dark"] .card { + border: 1px solid #fff; + color: var(--ifm-color-primary); +} + .navbar { z-index: 1000; font-size: 14px; @@ -183,7 +210,6 @@ a.menu__link--sublist::after { .menu__list-item > a { font-weight: 450; - color: #1f1f1f; } /* Pagination */ @@ -221,7 +247,7 @@ footer .footer__title { width: 150px; } -footer { +html:not([data-theme="dark"]) footer { background-color: #ffffff !important; border-top: 1px solid var(--ifm-toc-border-color); } @@ -232,7 +258,7 @@ footer { /* Cards */ -.card { +html:not([data-theme=dark]) .card { border: 1px solid #1f1f1f; border-radius: 8px; } @@ -258,11 +284,12 @@ details summary { cursor: pointer; } -.theme-doc-markdown a { - color: #9461ff; +.theme-doc-markdown a:not(.box-link):hover { + color: var(--ifm-color-primary-darkest); + text-decoration: none; } -.theme-doc-markdown a:hover { - color: #6e3eff; - text-decoration: none; +.box-link, +.box-link:hover { + color: #0a3149; } \ No newline at end of file diff --git a/www/docs/static/img/logo-dark.svg b/www/docs/static/img/logo-dark.svg new file mode 100644 index 0000000000..d72daaf71b --- /dev/null +++ b/www/docs/static/img/logo-dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + From c1afef4641bf55d22a2261b2958d8f2a7d7fcd54 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 22 Apr 2022 15:33:49 +0300 Subject: [PATCH 02/15] added dark mode for reference --- www/reference/gatsby-config.js | 1 + www/reference/package.json | 5 ++-- www/reference/src/assets/clipboard.svg | 2 +- www/reference/src/assets/github-light.svg | 9 ++++++ www/reference/src/assets/logo-dark.svg | 15 ++++++++++ www/reference/src/assets/logo-muted.svg | 2 +- .../src/components/ColorModeToggler/index.css | 17 +++++++++++ .../src/components/ColorModeToggler/index.js | 26 +++++++++++++++++ .../src/components/content/code-box.js | 11 +++---- .../src/components/content/parameters.js | 9 +++--- .../src/components/icons/clipboard.js | 5 ++-- .../src/components/icons/dark-mode.js | 20 +++++++++++++ www/reference/src/components/icons/github.js | 12 ++++---- .../src/components/icons/light-mode.js | 20 +++++++++++++ www/reference/src/components/layout.js | 1 + .../src/components/side-bar/index.js | 12 +++++--- .../src/components/side-bar/sidebar-item.js | 16 ++++++---- .../components/side-bar/sidebar-selector.js | 7 +++-- www/reference/src/components/topbar.js | 2 ++ .../src/gatsby-plugin-theme-ui/colors.js | 2 +- .../src/gatsby-plugin-theme-ui/index.js | 29 ++++++++++++++++--- .../src/gatsby-plugin-theme-ui/labels.js | 6 ++-- .../src/gatsby-plugin-theme-ui/shadows.js | 2 +- .../medusa-plugin-themes/docsearch/theme.css | 18 +++++++----- .../src/medusa-plugin-themes/prism/theme.css | 24 ++++++++++++++- www/reference/yarn.lock | 18 +++++++++++- 26 files changed, 239 insertions(+), 52 deletions(-) create mode 100644 www/reference/src/assets/github-light.svg create mode 100644 www/reference/src/assets/logo-dark.svg create mode 100644 www/reference/src/components/ColorModeToggler/index.css create mode 100644 www/reference/src/components/ColorModeToggler/index.js create mode 100644 www/reference/src/components/icons/dark-mode.js create mode 100644 www/reference/src/components/icons/light-mode.js diff --git a/www/reference/gatsby-config.js b/www/reference/gatsby-config.js index 0d59ce5f30..90d5467b25 100644 --- a/www/reference/gatsby-config.js +++ b/www/reference/gatsby-config.js @@ -6,6 +6,7 @@ module.exports = { }, plugins: [ `gatsby-plugin-react-helmet`, + `gatsby-plugin-dark-mode`, { resolve: `gatsby-plugin-anchor-links`, options: { diff --git a/www/reference/package.json b/www/reference/package.json index e5c4b3c1f0..1f0b25af62 100644 --- a/www/reference/package.json +++ b/www/reference/package.json @@ -18,10 +18,12 @@ "@emotion/react": "^11.1.2", "@emotion/styled": "^11.0.0", "@rebass/forms": "^4.0.6", + "copy-to-clipboard": "^3.3.1", "emotion-theming": "^10.0.27", "gatsby": "^3.9.1", "gatsby-plugin-algolia-docsearch": "^1.0.5", "gatsby-plugin-anchor-links": "^1.1.1", + "gatsby-plugin-dark-mode": "^1.1.2", "gatsby-plugin-emotion": "^5.0.0", "gatsby-plugin-env-variables": "^2.1.0", "gatsby-plugin-preact": "^5.9.0", @@ -38,14 +40,13 @@ "preact-render-to-string": "^5.1.19", "prismjs": "^1.24.1", "react": "^16.12.0", - "copy-to-clipboard": "^3.3.1", "react-collapsible": "^2.8.1", "react-dom": "^16.12.0", "react-helmet": "^6.1.0", "react-highlight.js": "^1.0.7", - "react-tooltip": "^4.2.10", "react-intersection-observer": "^8.29.0", "react-markdown": "^5.0.3", + "react-tooltip": "^4.2.10", "react-virtualized": "^9.22.3", "theme-ui": "^0.10.0" }, diff --git a/www/reference/src/assets/clipboard.svg b/www/reference/src/assets/clipboard.svg index d370442575..bb1a42abbb 100644 --- a/www/reference/src/assets/clipboard.svg +++ b/www/reference/src/assets/clipboard.svg @@ -1,6 +1,6 @@ + viewBox="0 0 512 512" fill="#fff" style="enable-background:new 0 0 512 512;" xml:space="preserve"> Clipboard diff --git a/www/reference/src/assets/github-light.svg b/www/reference/src/assets/github-light.svg new file mode 100644 index 0000000000..4661bc49f3 --- /dev/null +++ b/www/reference/src/assets/github-light.svg @@ -0,0 +1,9 @@ + + + GitHub + + + + + + \ No newline at end of file diff --git a/www/reference/src/assets/logo-dark.svg b/www/reference/src/assets/logo-dark.svg new file mode 100644 index 0000000000..d72daaf71b --- /dev/null +++ b/www/reference/src/assets/logo-dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/www/reference/src/assets/logo-muted.svg b/www/reference/src/assets/logo-muted.svg index 0552508b25..fd15cfa5e2 100644 --- a/www/reference/src/assets/logo-muted.svg +++ b/www/reference/src/assets/logo-muted.svg @@ -1,5 +1,5 @@ - + diff --git a/www/reference/src/components/ColorModeToggler/index.css b/www/reference/src/components/ColorModeToggler/index.css new file mode 100644 index 0000000000..52df7352f9 --- /dev/null +++ b/www/reference/src/components/ColorModeToggler/index.css @@ -0,0 +1,17 @@ +.dark-mode-toggler { + background: transparent; + border: 0; + border-radius: 50%; + height: 32px; + width: 32px; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + margin-left: 5px; + color: var(--theme-ui-colors-text) +} + +.dark-mode-toggler:hover { + background-color: #00000010; +} \ No newline at end of file diff --git a/www/reference/src/components/ColorModeToggler/index.js b/www/reference/src/components/ColorModeToggler/index.js new file mode 100644 index 0000000000..63a2a74489 --- /dev/null +++ b/www/reference/src/components/ColorModeToggler/index.js @@ -0,0 +1,26 @@ +import "./index.css" + +import DarkMode from "../icons/dark-mode" +import LightMode from "../icons/light-mode" +import React from 'react' +import { ThemeToggler } from 'gatsby-plugin-dark-mode' +import { useColorMode } from 'theme-ui' + +export default function ColorModeToggler () { + const [colorMode, setColorMode] = useColorMode() + + return ( + + {({ theme, toggleTheme }) => ( + + )} + + ) +} \ No newline at end of file diff --git a/www/reference/src/components/content/code-box.js b/www/reference/src/components/content/code-box.js index 5647752f14..8622dcab76 100644 --- a/www/reference/src/components/content/code-box.js +++ b/www/reference/src/components/content/code-box.js @@ -1,6 +1,7 @@ -import React from "react" -import { Flex, Box, Text } from "theme-ui" +import { Box, Flex, Text } from "theme-ui" + import CopyToClipboard from "../CopyToClipboard" +import React from "react" const CodeBox = ({ header, children, shell, content, allowCopy }) => { return ( @@ -8,7 +9,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => { sx={{ background: "fadedContrast", borderRadius: "small", - boxShadow: "0 0 0 1px rgb(0 0 0 / 7%)", + boxShadow: "0 0 0 1px var(--theme-ui-colors-primaryLight)", alignSelf: "flex-start", marginLeft: "auto", marginRight: "auto", @@ -18,7 +19,7 @@ const CodeBox = ({ header, children, shell, content, allowCopy }) => { > { alignItems: "baseline", }} > - + {header.toUpperCase()} {allowCopy ? ( diff --git a/www/reference/src/components/content/parameters.js b/www/reference/src/components/content/parameters.js index 207e4dd855..38287a96d6 100644 --- a/www/reference/src/components/content/parameters.js +++ b/www/reference/src/components/content/parameters.js @@ -1,8 +1,9 @@ -import React from "react" -import { Flex, Text, Box } from "theme-ui" +import { Box, Flex, Text } from "theme-ui" + +import Description from "./description" import Markdown from "react-markdown" import NestedCollapsible from "./collapsible" -import Description from "./description" +import React from "react" const Parameters = ({ params, type }) => { const getDescriptions = (title, items) => { @@ -33,7 +34,7 @@ const Parameters = ({ params, type }) => { > {prop.property || prop.name} - + {prop.type || prop.schema?.type || nested?.title} {prop.required ? ( diff --git a/www/reference/src/components/icons/clipboard.js b/www/reference/src/components/icons/clipboard.js index 0f58f29119..5f36b9d2a4 100644 --- a/www/reference/src/components/icons/clipboard.js +++ b/www/reference/src/components/icons/clipboard.js @@ -1,7 +1,6 @@ import { Image } from "@theme-ui/components" -import React from "react" - import Logo from "../../assets/clipboard.svg" +import React from "react" const Clipboard = () => { return ( @@ -9,7 +8,7 @@ const Clipboard = () => { src={Logo} sx={{ height: "100%", - fill: "#000", + fill: "light", cursor: 'pointer' }} /> diff --git a/www/reference/src/components/icons/dark-mode.js b/www/reference/src/components/icons/dark-mode.js new file mode 100644 index 0000000000..8921db9dcd --- /dev/null +++ b/www/reference/src/components/icons/dark-mode.js @@ -0,0 +1,20 @@ +/** + * 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 React from 'react'; + +export default function DarkMode(props) { + return ( + + + + ); + } + \ No newline at end of file diff --git a/www/reference/src/components/icons/github.js b/www/reference/src/components/icons/github.js index 5e6b01aa1e..34bb41fc3c 100644 --- a/www/reference/src/components/icons/github.js +++ b/www/reference/src/components/icons/github.js @@ -1,15 +1,17 @@ import { Image } from "@theme-ui/components" -import React from "react" - import Logo from "../../assets/github.svg" +import LogoLight from "../../assets/github-light.svg" +import React from "react" +import { useColorMode } from 'theme-ui' const GitHub = () => { + const [colorMode, setColorMode] = useColorMode() + return ( ) diff --git a/www/reference/src/components/icons/light-mode.js b/www/reference/src/components/icons/light-mode.js new file mode 100644 index 0000000000..65b91f333b --- /dev/null +++ b/www/reference/src/components/icons/light-mode.js @@ -0,0 +1,20 @@ +/** + * 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 React from 'react'; + +export default function LightMode(props) { + return ( + + + + ); + } + \ No newline at end of file diff --git a/www/reference/src/components/layout.js b/www/reference/src/components/layout.js index 2088349453..8c2ef9464c 100644 --- a/www/reference/src/components/layout.js +++ b/www/reference/src/components/layout.js @@ -35,6 +35,7 @@ const Layout = ({ data, api, children }) => { fontFamily: "body", flexGrow: "1", }} + className="layout-container" > {children} diff --git a/www/reference/src/components/side-bar/index.js b/www/reference/src/components/side-bar/index.js index 24f332736c..3d9c11fbf6 100644 --- a/www/reference/src/components/side-bar/index.js +++ b/www/reference/src/components/side-bar/index.js @@ -2,11 +2,13 @@ import { Box, Flex, Image } from "theme-ui" import React, { useEffect, useState } from "react" import Logo from "../../assets/logo.svg" +import LogoDark from "../../assets/logo-dark.svg" import LogoMuted from "../../assets/logo-muted.svg" import SideBarItem from "./sidebar-item" import SideBarSelector from "./sidebar-selector" import { navigate } from "gatsby" import styled from "@emotion/styled" +import { useColorMode } from 'theme-ui' const SideBarContainer = styled(Flex)` @media screen and (max-width: 848px) { @@ -26,6 +28,7 @@ const SideBarFade = styled(Box)` const Sidebar = ({ data, api }) => { const [scrollPos, setScrollPos] = useState(0) + const [colorMode, setColorMode] = useColorMode() useEffect(() => { const nav = document.querySelector("#nav") @@ -47,24 +50,25 @@ const Sidebar = ({ data, api }) => { top: "0", bottom: "0", height: "100vh", - backgroundColor: "light", + backgroundColor: "var(--theme-ui-colors-background)", boxShadow: "sidebarShadow", minWidth: "var(--side-bar-width)", flexDirection: "column", }} + className="sidebar-container" > navigate("/")} sx={{ @@ -96,7 +100,7 @@ const Sidebar = ({ data, api }) => { return })} - + diff --git a/www/reference/src/components/side-bar/sidebar-item.js b/www/reference/src/components/side-bar/sidebar-item.js index 4726c354da..8140997416 100644 --- a/www/reference/src/components/side-bar/sidebar-item.js +++ b/www/reference/src/components/side-bar/sidebar-item.js @@ -81,8 +81,12 @@ const SideBarItem = ({ item }) => { height: "25px", justifyContent: "space-between", "&:hover, &.active": { - backgroundColor: "faded", + backgroundColor: "primary", + color: "light" }, + "&:hover svg, &.active svg": { + color: "light" + } }} className={ currentSection === convertToKebabCase(section.section_name) @@ -90,7 +94,7 @@ const SideBarItem = ({ item }) => { : null } > - {section.section_name} + {section.section_name} } open={isOpen} @@ -114,13 +118,15 @@ const SideBarItem = ({ item }) => { cursor: "pointer", mb: "8px", textDecoration: "none", - color: "black", + color: "text", height: "25px", "&:hover": { - backgroundColor: "faded", + backgroundColor: "primary", + color: "light" }, "&.active": { - backgroundColor: "faded", + backgroundColor: "primary", + color: "light" }, }} > diff --git a/www/reference/src/components/side-bar/sidebar-selector.js b/www/reference/src/components/side-bar/sidebar-selector.js index f63595c368..d1c70e6b98 100644 --- a/www/reference/src/components/side-bar/sidebar-selector.js +++ b/www/reference/src/components/side-bar/sidebar-selector.js @@ -1,8 +1,9 @@ -import React, { useContext } from "react" import { Flex, Select } from "theme-ui" -import { navigate } from "gatsby-link" -import NavigationContext from "../../context/navigation-context" +import React, { useContext } from "react" + import ChevronDown from "../icons/chevron-down" +import NavigationContext from "../../context/navigation-context" +import { navigate } from "gatsby-link" const SideBarSelector = ({ api }) => { const { reset } = useContext(NavigationContext) diff --git a/www/reference/src/components/topbar.js b/www/reference/src/components/topbar.js index f533cbeadb..0a25a40e86 100644 --- a/www/reference/src/components/topbar.js +++ b/www/reference/src/components/topbar.js @@ -2,6 +2,7 @@ import { Box, Flex, Link, Select } from "@theme-ui/components" import React, { useContext } from "react" import ChevronDown from "./icons/chevron-down" +import ColorModeToggler from "./ColorModeToggler" import GitHub from "../components/icons/github" import NavigationContext from "../context/navigation-context" import Search from "./search" @@ -116,6 +117,7 @@ const Topbar = ({ data, api }) => { + ) diff --git a/www/reference/src/gatsby-plugin-theme-ui/colors.js b/www/reference/src/gatsby-plugin-theme-ui/colors.js index 724ca1a247..3cec866772 100644 --- a/www/reference/src/gatsby-plugin-theme-ui/colors.js +++ b/www/reference/src/gatsby-plugin-theme-ui/colors.js @@ -1,5 +1,5 @@ export default { - primary: "#B27979", + primary: "#7C53FF", secondary: "#79B28A", medusaGreen: "#3ecf8e", lightest: "#fefefe", diff --git a/www/reference/src/gatsby-plugin-theme-ui/index.js b/www/reference/src/gatsby-plugin-theme-ui/index.js index 7f0d4b2fac..098249c3bf 100644 --- a/www/reference/src/gatsby-plugin-theme-ui/index.js +++ b/www/reference/src/gatsby-plugin-theme-ui/index.js @@ -2,13 +2,16 @@ import "../fonts/index.css" import breakpoints from "./breakpoints" import buttons from "./buttons" -import spacing from "./spacing" -import shadows from "./shadows" import forms from "./forms" import labels from "./labels" +import shadows from "./shadows" +import spacing from "./spacing" // eslint-disable-next-line import/no-anonymous-default-export export default { + config: { + initialColorModeName: 'light', + }, sizes: { headerHeight: "50px", }, @@ -59,7 +62,8 @@ export default { }, }, colors: { - primary: "#53725D", + primary: "#7C53FF", + primaryLight: "#7c53ff4a", secondary: "#79B28A", danger: "#FF7675", placeholder: "#a3acb9", @@ -68,9 +72,26 @@ export default { light: "#ffffff", faded: "#eef0f5", fadedContrast: "#eef0f540", + text: '#000', + background: '#fff', + inverseText: '#000', + separator: "#eef0f5", + codeBoxShadow: "rgb(0 0 0 / 7%)", + sectionSeparator: "#E3E8EE", + modes: { + dark: { + text: '#fff', + background: "#242526", + inverseText: '#000', + dark: "#eef0f5", + separator: "#eef0f540", + codeBoxShadow: "#d2d2d22b", + sectionSeparator: "#404244", + } + } }, borders: { - hairline: "1px solid #E3E8EE", + hairline: "1px solid var(--theme-ui-colors-sectionSeparator)", }, fontSizes: [12, 14, 16, 18, 22], fonts: { diff --git a/www/reference/src/gatsby-plugin-theme-ui/labels.js b/www/reference/src/gatsby-plugin-theme-ui/labels.js index 2331fc32d1..b6f0966bd9 100644 --- a/www/reference/src/gatsby-plugin-theme-ui/labels.js +++ b/www/reference/src/gatsby-plugin-theme-ui/labels.js @@ -4,13 +4,13 @@ export const labels = { fontSize: 0, }, GET: { - color: "#4159de", + color: "#1b7cb8", }, POST: { - color: "#09825d", + color: "#0e8761", }, DELETE: { - color: "#b50a0a", + color: "#bf3030", }, } diff --git a/www/reference/src/gatsby-plugin-theme-ui/shadows.js b/www/reference/src/gatsby-plugin-theme-ui/shadows.js index 21abe78cb3..dda734f7a5 100644 --- a/www/reference/src/gatsby-plugin-theme-ui/shadows.js +++ b/www/reference/src/gatsby-plugin-theme-ui/shadows.js @@ -111,7 +111,7 @@ export default { `, sidebarShadow: ` - inset -1px 0 0 0 #eef0f5 + inset -1px 0 0 0 var(--theme-ui-colors-separator) `, topbarShadow: ` 0 2px 5px 0 rgb(59 65 94 / 10%), 0 1px 1px 0 rgb(0 0 0 / 7%) diff --git a/www/reference/src/medusa-plugin-themes/docsearch/theme.css b/www/reference/src/medusa-plugin-themes/docsearch/theme.css index e3b07294a0..ba535f2cec 100644 --- a/www/reference/src/medusa-plugin-themes/docsearch/theme.css +++ b/www/reference/src/medusa-plugin-themes/docsearch/theme.css @@ -1,5 +1,5 @@ :root { - --docsearch-primary-color: #0a3149; + --docsearch-primary-color: #7C53FF; /*dark*/ --docsearch-secondary-color: #eef0f5; /*faded*/ @@ -38,13 +38,14 @@ /* Darkmode */ -html[data-theme='dark'] { +.dark { + --docsearch-secondary-color: rgb(127, 132, 151); --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-searchbox-focus-background: var(--docsearch-modal-background); --docsearch-hit-color: rgb(190, 195, 201); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(9, 10, 17); @@ -53,7 +54,7 @@ html[data-theme='dark'] { --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); + --docsearch-muted-color: #d7d7d7; } /* Body modifier */ @@ -650,25 +651,26 @@ svg.DocSearch-Hit-Select-Icon { .DocSearch-Button { display: flex; align-items: center; - background: white; + background: var(--docsearch-container-background); border: 0; border-radius: 36px; color: var(--docsearch-muted-color); cursor: pointer; display: flex; font-weight: 500; - height: 36px; + height: 38px; 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; + border: 2px solid transparent; + transition: all .1s; } .DocSearch-Button:hover, .DocSearch-Button:active, .DocSearch-Button:focus { - color: var(--docsearch-primary-color); + border-color: var(--docsearch-primary-color); outline: none; } diff --git a/www/reference/src/medusa-plugin-themes/prism/theme.css b/www/reference/src/medusa-plugin-themes/prism/theme.css index 4c023afd84..3675a951c3 100644 --- a/www/reference/src/medusa-plugin-themes/prism/theme.css +++ b/www/reference/src/medusa-plugin-themes/prism/theme.css @@ -18,6 +18,10 @@ code[class*="language-"], pre[class*="language-"] { hyphens: none; } +.dark code[class*="language-"], .dark pre[class*="language-"] { + color: #249feb; +} + /* Code blocks */ pre[class*="language-"] { @@ -39,6 +43,10 @@ pre[class*="language-"] { white-space: normal; } +.dark :not(pre)>code { + background-color: #515151; +} + .token.comment, .token.prolog, .token.doctype, .token.cdata { color: blue; } @@ -55,6 +63,11 @@ pre[class*="language-"] { color: #0a3149; } +.dark .token.property, .dark .token.tag, .dark .token.constant, .dark .token.symbol, .dark .token.deleted, +.dark .token.punctuation { + color: #249feb; +} + .token.number { color: #e56f4a; } @@ -64,13 +77,18 @@ pre[class*="language-"] { } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { - color: #09825d; + color: #10c38d; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { color: #0a3149; } +.dark .token.operator, .dark .token.entity, .dark .token.url, .dark .language-css .token.string, .dark .style .token.string, +.dark .token.variable { + color: #249feb; +} + .token.atrule, .token.attr-value, .token.function, .token.class-name { color: #e6db74; } @@ -83,6 +101,10 @@ pre[class*="language-"] { color: grey; } +.dark .token.keyword.null { + color: rgb(184, 184, 184); +} + .token.regex, .token.important { color: #fd971f; } diff --git a/www/reference/yarn.lock b/www/reference/yarn.lock index 530a30c3a4..3bf9eec530 100644 --- a/www/reference/yarn.lock +++ b/www/reference/yarn.lock @@ -5371,6 +5371,13 @@ gatsby-plugin-anchor-links@^1.1.1: dependencies: scroll-to-element "^2.0.3" +gatsby-plugin-dark-mode@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/gatsby-plugin-dark-mode/-/gatsby-plugin-dark-mode-1.1.2.tgz#9bab271da9f913cd64687a2b2d85b1d62a3605d8" + integrity sha512-kq/7/KSIgyYxolSqLxXfmcC/iBU98XpRGcIOaa3bjjl8Tb0WDYwfa45zABx1XNjB0YecWdgniss+kqmeAu04GA== + dependencies: + prop-types "^15.5.7" + gatsby-plugin-emotion@^5.0.0: version "5.4.0" resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-5.4.0.tgz#042ab3d09c1c55092ae0c57f93e9152bae405081" @@ -9345,6 +9352,15 @@ prompts@^2.3.2: kleur "^3.0.3" sisteransi "^1.0.5" +prop-types@^15.5.7: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" @@ -9585,7 +9601,7 @@ react-intersection-observer@^8.29.0: resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.5.tgz#92e8d8888b0b43a5c10c398e0d483d574bce7f3e" integrity sha512-4xKdUWRNdPueXXxTyMOV41w6qIa4tsV7BbWOW+IYsvGPP7wxOj9V6o3cKywie+/VDr5Qs7pCzi5Wom78dUxj1w== -react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: +react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== From 97fb5ed1716ee3008576242d2e9b1d5aa69349f4 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 22 Apr 2022 15:44:54 +0300 Subject: [PATCH 03/15] added styling for mobile elements --- www/reference/src/components/topbar.js | 2 -- www/reference/src/gatsby-plugin-theme-ui/index.js | 2 ++ www/reference/src/medusa-plugin-themes/docsearch/theme.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/www/reference/src/components/topbar.js b/www/reference/src/components/topbar.js index 0a25a40e86..049516eb62 100644 --- a/www/reference/src/components/topbar.js +++ b/www/reference/src/components/topbar.js @@ -41,7 +41,6 @@ const Topbar = ({ data, api }) => { left: "0", right: "0", zIndex: "100", - backgroundColor: "light", }, }} > @@ -65,7 +64,6 @@ const Topbar = ({ data, api }) => { fontWeight: "500", flexGrow: "1", px: "0", - backgroundColor: "light", transition: "all .1s ease-in-out", "&:focus": { outline: "none !important", diff --git a/www/reference/src/gatsby-plugin-theme-ui/index.js b/www/reference/src/gatsby-plugin-theme-ui/index.js index 098249c3bf..aee4241473 100644 --- a/www/reference/src/gatsby-plugin-theme-ui/index.js +++ b/www/reference/src/gatsby-plugin-theme-ui/index.js @@ -69,6 +69,7 @@ export default { placeholder: "#a3acb9", dark: "#0a3149", darkContrast: "#0a314940", + selectBg: "rgba(9, 10, 17, 0.8)", light: "#ffffff", faded: "#eef0f5", fadedContrast: "#eef0f540", @@ -87,6 +88,7 @@ export default { separator: "#eef0f540", codeBoxShadow: "#d2d2d22b", sectionSeparator: "#404244", + selectBg: "rgba(9, 10, 17, 0.8)" } } }, diff --git a/www/reference/src/medusa-plugin-themes/docsearch/theme.css b/www/reference/src/medusa-plugin-themes/docsearch/theme.css index ba535f2cec..1735820719 100644 --- a/www/reference/src/medusa-plugin-themes/docsearch/theme.css +++ b/www/reference/src/medusa-plugin-themes/docsearch/theme.css @@ -733,7 +733,7 @@ svg.DocSearch-Hit-Select-Icon { display: flex; justify-content: center; padding: 0; - background-color: var(--docsearch-secondary-color); + background-color: var(--docsearch-container-background); border: none; } .DocSearch-Button .DocSearch-Search-Icon { From 01114b42a433f1b41ff436c4eed3dd32d71a8217 Mon Sep 17 00:00:00 2001 From: Shreedhar Hegde Date: Fri, 22 Apr 2022 20:01:57 +0530 Subject: [PATCH 04/15] added docusaurus admonitions to docs --- docs/content/add-plugins/minio.md | 6 +++- docs/content/add-plugins/s3.md | 6 +++- docs/content/add-plugins/segment.md | 6 +++- docs/content/add-plugins/spaces.md | 6 +++- docs/content/add-plugins/strapi.md | 26 ++++++++++++---- .../frontend-payment-flow-in-checkout.md | 14 +++++++-- .../backend/subscribers/create-subscriber.md | 6 +++- docs/content/guides/plugins.md | 18 +++++++++-- .../how-to/deploying-admin-on-netlify.md | 12 ++++++-- .../how-to/deploying-on-digital-ocean.md | 18 +++++++++-- docs/content/how-to/deploying-on-heroku.md | 29 ++++++++++++++---- docs/content/how-to/deploying-on-qovery.md | 30 ++++++++++++++----- ...rce-store-with-gatsby-contentful-medusa.md | 12 ++++++-- ...our-store-more-powerful-with-contentful.md | 18 +++++++---- docs/content/how-to/notification-api.md | 7 +++-- ...xtjs-storefront-for-your-medusa-project.md | 8 +++-- .../how-to/uploading-images-to-minio.md | 6 +++- docs/content/how-to/uploading-images-to-s3.md | 6 +++- .../how-to/uploading-images-to-spaces.md | 6 +++- docs/content/quickstart/quick-start.md | 6 +++- .../transaction-error-in-checkout.md | 6 +++- .../tutorial/1-creating-your-medusa-server.md | 6 +++- .../tutorial/2-adding-custom-functionality.md | 19 ++++++++++-- ...ng-your-local-project-with-medusa-cloud.md | 12 ++++++-- docs/services/CartService.md | 13 ++++---- 25 files changed, 242 insertions(+), 60 deletions(-) diff --git a/docs/content/add-plugins/minio.md b/docs/content/add-plugins/minio.md index 551149ae6d..f5ef62d4fe 100644 --- a/docs/content/add-plugins/minio.md +++ b/docs/content/add-plugins/minio.md @@ -46,7 +46,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi The two access keys in the options are the ones created in the previous section. -> Make sure to use an environment variable for the secret key in a live environment. +:::note + +Make sure to use an environment variable for the secret key in a live environment. + +::: ### Try it out diff --git a/docs/content/add-plugins/s3.md b/docs/content/add-plugins/s3.md index d3059732c0..a7891fdeee 100644 --- a/docs/content/add-plugins/s3.md +++ b/docs/content/add-plugins/s3.md @@ -78,7 +78,11 @@ https://[bucket].s3.[region].amazonaws.com The two access keys in the options are the ones created in the previous section. -> Make sure to use an environment variable for the secret key in a live environment. +:::note + + Make sure to use an environment variable for the secret key in a live environment. + +::: ### Try it out diff --git a/docs/content/add-plugins/segment.md b/docs/content/add-plugins/segment.md index eccf0c414f..ebf1fbb72a 100644 --- a/docs/content/add-plugins/segment.md +++ b/docs/content/add-plugins/segment.md @@ -21,7 +21,11 @@ Common integration use cases that can be implemented with Segment include: ## Adding Segment to your Medusa store -> Note: you should create a [Node.js source in Segment](https://segment.com/docs/connections/sources/catalog/libraries/server/node/quickstart/) in order to obtain the write key that will be provided in the plugin options. +:::note + +You should create a [Node.js source in Segment](https://segment.com/docs/connections/sources/catalog/libraries/server/node/quickstart/) in order to obtain the write key that will be provided in the plugin options. + +::: Plugins in Medusa's ecosystem come as separate npm packages, that can be installed from the npm registry. diff --git a/docs/content/add-plugins/spaces.md b/docs/content/add-plugins/spaces.md index 27d856e030..cabe719814 100644 --- a/docs/content/add-plugins/spaces.md +++ b/docs/content/add-plugins/spaces.md @@ -47,7 +47,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi In the above options, a `spaces_url` is included. This can be found in your Space overview. The `bucket` should point to the name you gave your Space. The `endpoint` identifies the region in which you created the Space. And finally the two keys are the ones created in the previous section. -> Make sure to use an environment variable for the secret key in a live environment. +:::note + +Make sure to use an environment variable for the secret key in a live environment. + +::: ### Try it out! diff --git a/docs/content/add-plugins/strapi.md b/docs/content/add-plugins/strapi.md index a9d34cd002..0071a859fa 100644 --- a/docs/content/add-plugins/strapi.md +++ b/docs/content/add-plugins/strapi.md @@ -37,7 +37,11 @@ Alternatively, using Yarn: yarn create medusa-app ``` -> When choosing `npx` you are shown different store engine options as part of the setup. For this Strapi tutorial, you should choose `medusa-starter-default`. Optionally, pick a storefront. +:::note + +When choosing `npx` you are shown different store engine options as part of the setup. For this Strapi tutorial, you should choose `medusa-starter-default`. Optionally, pick a storefront. + +::: **Use `medusa-cli`** `@medusajs/medusa-cli` is our Command Line Tool for creating the Medusa store engine (alongside many other powerful commands). First, install it: @@ -116,13 +120,19 @@ Alternatively, using Yarn: yarn global add create-strapi-app@3.6.8 create-strapi-app strapi-medusa --template https://github.com/Deathwish98/strapi-medusa-template.git ``` +:::note -> Note: The plugin expects node version to be '>= 10.16.0 and <=14.x.x', otherwise it will throw an error. +The plugin expects node version to be '>= 10.16.0 and <=14.x.x', otherwise it will throw an error. +::: After running the command, you have a full Strapi project configured to synchronize with Medusa. Upon the initial start of the Strapi server, all the required models will be created. They will correlate with models from Medusa to allow for two-way synchronization. -> Note: The Strapi template starter uses SQLite as the default database. There is a known bug related to `knex.js` that comes from multiple write connections. Restarting the Strapi server should make the error disappear. +:::note + +The Strapi template starter uses SQLite as the default database. There is a known bug related to `knex.js` that comes from multiple write connections. Restarting the Strapi server should make the error disappear. + +::: **Synchronization** @@ -134,7 +144,11 @@ When products are created in Medusa, the two-way communication ensures that data **Variants**: title **Region**: name -> Further down the road, the support for synchronizing more entities is expected to be introduced +:::note + +Further down the road, the support for synchronizing more entities is expected to be introduced + +::: **Using Postgres in Medusa (optional)** @@ -158,7 +172,9 @@ projectConfig: { }, ``` -> Note: the `DATABASE_URL` variable should use the Postgres database created in the previous step +:::note + +The `DATABASE_URL` variable should use the Postgres database created in the previous step ## Summary and next steps diff --git a/docs/content/advanced/backend/payment/frontend-payment-flow-in-checkout.md b/docs/content/advanced/backend/payment/frontend-payment-flow-in-checkout.md index f18c3746aa..9ffb6751ea 100644 --- a/docs/content/advanced/backend/payment/frontend-payment-flow-in-checkout.md +++ b/docs/content/advanced/backend/payment/frontend-payment-flow-in-checkout.md @@ -2,7 +2,12 @@ ## Introduction The purpose of this guide is to describe a checkout flow in Medusa. It is assumed that you've completed our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or [Tutorial](https://docs.medusajs.com/tutorial/set-up-your-development-environment) and are familiar with the technologies we use in our stack. Additionally, having an understanding of the [core API](https://docs.medusajs.com/api/store/auth) would serve as a great foundation for this walkthrough. -> All code snippets in the following guide, use the JS SDK distributed through **npm**. To install it, run: + +:::note + +All code snippets in the following guide, use the JS SDK distributed through **npm**. To install it, run: + +::: ```bash npm2yarn npm install @medusajs/medusa-js @@ -17,7 +22,12 @@ npm install @medusajs/medusa-js ## Checkout flow To create an order from a cart, we go through the following flow. -> At this point, it assumed that the customer has created a cart, added items and is now at the initial step of the checkout flow. + +:::note + +At this point, it assumed that the customer has created a cart, added items and is now at the initial step of the checkout flow. + +::: ### Initializing the checkout The first step in the flow is to _initialize_ the configured Payment Sessions for the Cart. If you are using the `medusa-starter-default` starter, this call will result in the `cart.payment_sessions` array being filled with one Payment Session for the manual payment provider. diff --git a/docs/content/advanced/backend/subscribers/create-subscriber.md b/docs/content/advanced/backend/subscribers/create-subscriber.md index c902ca7d0a..f8e711419d 100644 --- a/docs/content/advanced/backend/subscribers/create-subscriber.md +++ b/docs/content/advanced/backend/subscribers/create-subscriber.md @@ -69,7 +69,11 @@ export default OrderNotifierSubscriber; This subscriber will register the method `handleOrder` as one of the handlers of the `order.placed` event. The method `handleOrder` will be executed every time an order is placed, and it will receive the order ID in the `data` parameter. You can then use the order’s details to perform any kind of task you need. -> The `data` object will not contain other order data. Only the ID of the order. You can retrieve the order information using the `orderService`. +:::note + +The `data` object will not contain other order data. Only the ID of the order. You can retrieve the order information using the `orderService`. + +::: ## Using Services in Subscribers diff --git a/docs/content/guides/plugins.md b/docs/content/guides/plugins.md index 2516702c5c..07fcf5e36d 100644 --- a/docs/content/guides/plugins.md +++ b/docs/content/guides/plugins.md @@ -12,7 +12,11 @@ Plugins offer a way to extend and integrate the core functionality of Medusa. In most commerce solutions, you can extend the basic features but it often comes with the expense of having to build standalone web applications. Our architecture is built such that plugins run within the same process as the core eliminating the need for extra server capacity, infrastructure and maintenance. As a result, the plugins can use all other services as dependencies and access the database. -> You will notice that plugins vary in naming. The name should signal what functionality they provide. +:::note + +You will notice that plugins vary in naming. The name should signal what functionality they provide. + +::: In the following sections, we will go through the basics of implementing a generic plugin. And finally, how to use it as part of your commerce setup. @@ -34,7 +38,11 @@ We've already gone through the process of building custom services, endpoints, a To quickly get started with the implementation, we advise you to copy `/services/welcome.js`, `/api/index.js`, `/subscribers/welcome.js` and the config files from the tutorial and add them in `/src`. As a result, you should have the following folder structure: -> Please note: since the container resolution paths are automatically generated from the used directories and filenames you should avoid pre- or suffixing your file (e.g. `services/welcomeService.js` would result in the service being registered as `WelcomeServiceService`). +:::note + +Since the container resolution paths are automatically generated from the used directories and filenames you should avoid pre- or suffixing your file (e.g. `services/welcomeService.js` would result in the service being registered as `WelcomeServiceService`). + +::: ```js . @@ -55,7 +63,11 @@ Please note that you will need some build step before being able to properly loa It is worth mentioning the difference between building a generic and a non-generic plugin. A non-generic plugin has a specific purpose such as processing payments or creating fulfillments. Medusa core depends on a specific implementation from such plugins, which is why we've created interfaces that enforce this. These can be found in `medusa-interfaces`. -> Note: Non-generic plugins are required to extend the correct interface, otherwise they will not be loaded correctly as part of your Medusa setup. +:::note + +Non-generic plugins are required to extend the correct interface, otherwise they will not be loaded correctly as part of your Medusa setup. + +::: For a more comprehensive walkthrough of the implementation of such plugins, see our guides: diff --git a/docs/content/how-to/deploying-admin-on-netlify.md b/docs/content/how-to/deploying-admin-on-netlify.md index 018b99422b..92dc026869 100644 --- a/docs/content/how-to/deploying-admin-on-netlify.md +++ b/docs/content/how-to/deploying-admin-on-netlify.md @@ -6,7 +6,11 @@ title: "Deploying Admin on Netlify" This is a guide for deploying Medusa Admin on Netlify. Netlify is a platform that offers hosting and backend services for applications and static websites. -> At this point, you should have a running instance of Medusa Admin. If not, check out [these steps](https://github.com/medusajs/admin#-setting-up-admin) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. +:::note + +At this point, you should have a running instance of Medusa Admin. If not, check out [these steps](https://github.com/medusajs/admin#-setting-up-admin) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. + +::: ### 1. Install the Netlify CLI @@ -62,7 +66,11 @@ git push origin main Within a couple of minutes, your Medusa Admin is live and running on Netlify. -> If you experience CORS issues in your new setup, you might need to add your admin url as part of the ADMIN_CORS environment variable in your server setup. +:::note + +If you experience CORS issues in your new setup, you might need to add your admin url as part of the ADMIN_CORS environment variable in your server setup. + +::: ### What's next? diff --git a/docs/content/how-to/deploying-on-digital-ocean.md b/docs/content/how-to/deploying-on-digital-ocean.md index 3b6f8bded5..5cb96ac5d8 100644 --- a/docs/content/how-to/deploying-on-digital-ocean.md +++ b/docs/content/how-to/deploying-on-digital-ocean.md @@ -2,7 +2,11 @@ This is a guide for deploying a Medusa project on DigitalOcean App Platform. -> It is assumed, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. +:::note + +It is assumed, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. + +::: ### 1. Configure Medusa @@ -83,7 +87,11 @@ Navigate to the top-right dropdown **Create** and select **Apps**. Choose **GitHub** or **GitLab** and select the repository that holds your Medusa project. Check **Autodeploy code changes**, if you want DigitalOcean to deploy on every push to your repository. -> It's important, that DigitalOcean is pointing to the directory holding the Medusa store engine as it is only this which that will be deployed (If you followed the quickstart guide this will simply be the created project, and if you used the npx command this will be the backend folder inside of the newly created project). +:::note + +It's important, that DigitalOcean is pointing to the directory holding the Medusa store engine as it is only this which that will be deployed (If you followed the quickstart guide this will simply be the created project, and if you used the npx command this will be the backend folder inside of the newly created project). + +::: ### 5. Configure environment variables @@ -100,7 +108,11 @@ JWT_SECRET=your-jwt-secret COOKIE_SECRET=your-cookie-secret ``` -> Make sure to use actual secrets in a production environment +:::note + +Make sure to use actual secrets in a production environment + +::: ### 6. Set up a Database diff --git a/docs/content/how-to/deploying-on-heroku.md b/docs/content/how-to/deploying-on-heroku.md index 2d9013ae1d..778f8c2cc5 100644 --- a/docs/content/how-to/deploying-on-heroku.md +++ b/docs/content/how-to/deploying-on-heroku.md @@ -12,7 +12,11 @@ This is a guide for deploying a Medusa project on Heroku. Heroku is at PaaS that
-> We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. +:::note + +We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. + +::: ### 1. Install the Heroku CLI @@ -45,7 +49,11 @@ Connect to your Heroku account from your terminal: heroku login ``` -> Follow the instructions on your terminal +:::note + +Follow the instructions on your terminal + +::: ### 3. Create an app on Heroku @@ -60,7 +68,11 @@ heroku git:remote -a medusa-test-app Medusa requires a Postgres database and a Redis instance to work. These are added through the Heroku CLI using the following commands. -> In this below example, we initialize the resources on free plans. This is not a valid configuration for a production environment. +:::note + +In this below example, we initialize the resources on free plans. This is not a valid configuration for a production environment. + +::: #### Postgresql @@ -76,7 +88,11 @@ You can find more informations, plans and pricing about Heroku Postgres [here](h Add a Redis instance to your Heroku app -> The addon `redistogo:nano` is free, but Heroku requires you to add a payment method to proceed. +:::note + +The addon `redistogo:nano` is free, but Heroku requires you to add a payment method to proceed. + +::: ```bash heroku addons:create redistogo:nano @@ -94,8 +110,11 @@ heroku config:set JWT_SECRET=your-super-secret heroku config:set COOKIE_SECRET=your-super-secret-pt2 heroku config:set NPM_CONFIG_PRODUCTION=false ``` +:::note -> Make sure to use actual secrets in a production environment. +Make sure to use actual secrets in a production environment. + +::: Additionally, we need to set the buildpack to Node.js diff --git a/docs/content/how-to/deploying-on-qovery.md b/docs/content/how-to/deploying-on-qovery.md index 23c221384d..a13cdd5cbc 100644 --- a/docs/content/how-to/deploying-on-qovery.md +++ b/docs/content/how-to/deploying-on-qovery.md @@ -2,7 +2,11 @@ This is a guide for deploying a Medusa project to Qovery. Qovery is a Continuous Deployment Platform, that provides you with the developer experience of Heroku on top of your cloud provider (e.g. AWS, DigitalOcean). -> We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. +:::note + +We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](https://docs.medusajs.com/how-to/create-medusa-app) for a small walkthrough. + +::: ### 1. Qovery Console @@ -16,7 +20,11 @@ Create a project and an environment. Add a new app to your Qovery environment and connect the Git repository that holds your Medusa project. In your application settings, set the port to 9000 unless something else is specified in your setup. -> If you used our `npx` starter, your repository will most likely hold all components; storefront, admin and backend. Ensure that **Root application path** in Qovery is pointing to your Medusa project (`/backend`). +:::note + +If you used our `npx` starter, your repository will most likely hold all components; storefront, admin and backend. Ensure that **Root application path** in Qovery is pointing to your Medusa project (`/backend`). + +::: ### 4. Add a database @@ -61,10 +69,14 @@ module.exports = { }; ``` -> **IMPORTANT**: We are using the Qovery community plan, that does not allow SSL connections for the database, so this is disabled. -> -> In a production environment, you would need the following in the config: -> `database_extra: { ssl: { rejectUnauthorized: false } }` +:::caution IMPORTANT + +We are using the Qovery community plan, that does not allow SSL connections for the database, so this is disabled. + +In a production environment, you would need the following in the config: + `database_extra: { ssl: { rejectUnauthorized: false } }` + +::: #### Add some extra variables @@ -75,7 +87,11 @@ JTW_SECRET=something_secret_jwt COOKIE_SECRET=something_secret_cookie ``` -> Make sure to use actual secrets in a production environment. +:::note + +Make sure to use actual secrets in a production environment. + +::: #### Update `package.json` diff --git a/docs/content/how-to/headless-ecommerce-store-with-gatsby-contentful-medusa.md b/docs/content/how-to/headless-ecommerce-store-with-gatsby-contentful-medusa.md index adfddc1311..8a0aa4ff72 100644 --- a/docs/content/how-to/headless-ecommerce-store-with-gatsby-contentful-medusa.md +++ b/docs/content/how-to/headless-ecommerce-store-with-gatsby-contentful-medusa.md @@ -4,7 +4,11 @@ title: Create a headless ecommerce store with Gatsby, Contentful & Medusa # Creating a headless ecommerce store with Gatsby, Contentful and Medusa -> Medusa is an open source headless commerce engine that allow you to create amazing digital commerce experiences. Medusa is highly customizable, allowing you to extend the core to fit your needs. +:::note + +Medusa is an open source headless commerce engine that allow you to create amazing digital commerce experiences. Medusa is highly customizable, allowing you to extend the core to fit your needs. + +::: ## Introduction @@ -33,7 +37,11 @@ If you want to jump straight to the code for this series you can checkout: ## Prerequisites -> For a full guide to how to set up your development environment for Medusa please see [the tutorial](https://docs.medusajs.com/tutorials/set-up-your-development-environment) +:::note + +For a full guide to how to set up your development environment for Medusa please see [the tutorial](https://docs.medusajs.com/tutorials/set-up-your-development-environment) + +::: In order to get you started with your Gatsby, Contentful, Medusa store you must complete a couple of installations: diff --git a/docs/content/how-to/making-your-store-more-powerful-with-contentful.md b/docs/content/how-to/making-your-store-more-powerful-with-contentful.md index dbe0f65eb9..3a84340544 100644 --- a/docs/content/how-to/making-your-store-more-powerful-with-contentful.md +++ b/docs/content/how-to/making-your-store-more-powerful-with-contentful.md @@ -76,11 +76,13 @@ npm run migrate:contentful --file contentful-migrations/update-page-module-valid To use your new Rich Text module **Content > Page > About**, and click **Add Content > Page**. You will now make use of the new Rich Text module to add some more details about your store. You can write your own text or use the text provided below if you just want to copy/paste. -> ### About Medusa -> -> Medusa is an open-source headless commerce engine for fast-growing businesses. Getting started with Medusa is very easy and you will be able to start selling online with a basic setup in no time, however, the real power of Medusa starts showing up when you add custom functionality and extend your core to fit your needs. -> -> The core Medusa package and all the official Medusa plugins ship as individual NPM packages that you install into a Node project. You store and plugins are configured in your medusa-config.js file making it very easy to manage your store as your business grows. Custom functionality doesn't have to come from plugins, you can also add project-level functionality by simply adding files in your `src/` folder. Medusa will automatically register your custom functionalities in the bootstrap phase. +:::note About Medusa + + Medusa is an open-source headless commerce engine for fast-growing businesses. Getting started with Medusa is very easy and you will be able to start selling online with a basic setup in no time, however, the real power of Medusa starts showing up when you add custom functionality and extend your core to fit your needs. + + The core Medusa package and all the official Medusa plugins ship as individual NPM packages that you install into a Node project. You store and plugins are configured in your medusa-config.js file making it very easy to manage your store as your business grows. Custom functionality doesn't have to come from plugins, you can also add project-level functionality by simply adding files in your `src/` folder. Medusa will automatically register your custom functionalities in the bootstrap phase. + +::: ![](https://i.imgur.com/hqiaoFq.png) @@ -88,7 +90,11 @@ When you have added your text you can click **Publish changes** (make sure the A ## Updating the storefront to support the Rich Text module -> If you want to jump straight to the final frontend code visit [medusajs/medusa-contentful-storefront@part-2](https://github.com/medusajs/medusa-contentful-storefront/tree/part-2). +:::note + + If you want to jump straight to the final frontend code visit [medusajs/medusa-contentful-storefront@part-2](https://github.com/medusajs/medusa-contentful-storefront/tree/part-2). + +::: To display your newly created Rich Text module open up the storefront code and create a new file at `src/components/rich-text/rich-text.jsx`. diff --git a/docs/content/how-to/notification-api.md b/docs/content/how-to/notification-api.md index c00f1508b4..97ed5c5f8b 100644 --- a/docs/content/how-to/notification-api.md +++ b/docs/content/how-to/notification-api.md @@ -77,9 +77,12 @@ class MyService extends NotificationService { export default MyService; ``` +:::note Note -> **Note:** a notification service must have a static property called `identifier` this is used to determine which classes are called when subscribing to different events. In this case the service identifier is `my-service` so to subscribe to notifications you must use: -> `notificationService.subscribe([eventname], "my-service")` + A notification service must have a static property called `identifier` this is used to determine which classes are called when subscribing to different events. In this case the service identifier is `my-service` so to subscribe to notifications you must use: + `notificationService.subscribe([eventname], "my-service")` + +::: The above class is an example implementation of a NotificationService. It uses a fictional email service called `CoolEmailSender` to send emails to a customer whenever an order is placed. The `sendNotification` implementation gets the event name and fetches relevant data based on what event is being processed; in this case it retrieves an order, which is later used when requesting `CoolEmailSender` to dispatch an email. The address to send the email to is likewise fetched from the order. diff --git a/docs/content/how-to/setting-up-a-nextjs-storefront-for-your-medusa-project.md b/docs/content/how-to/setting-up-a-nextjs-storefront-for-your-medusa-project.md index 7b04466b0f..b9015c23c5 100644 --- a/docs/content/how-to/setting-up-a-nextjs-storefront-for-your-medusa-project.md +++ b/docs/content/how-to/setting-up-a-nextjs-storefront-for-your-medusa-project.md @@ -4,8 +4,12 @@ title: Setting up a Next.js storefront for your Medusa project # Setting up a Next.js storefront for your Medusa project -> Medusa is a headless open source commerce platform giving engineers the foundation for building unique and scalable digital commerce projects through our API-first engine. -> Being headless, our starters serve as a good foundation for you to get coupled with a frontend in a matter of minutes. +:::note + +Medusa is a headless open source commerce platform giving engineers the foundation for building unique and scalable digital commerce projects through our API-first engine. +Being headless, our starters serve as a good foundation for you to get coupled with a frontend in a matter of minutes. + +::: This article assumes you already have the Medusa project created and ready to be linked to your Next.js starter. diff --git a/docs/content/how-to/uploading-images-to-minio.md b/docs/content/how-to/uploading-images-to-minio.md index df96e1b730..99afd814f1 100644 --- a/docs/content/how-to/uploading-images-to-minio.md +++ b/docs/content/how-to/uploading-images-to-minio.md @@ -46,7 +46,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi The two access keys in the options are the ones created in the previous section. -> Make sure to use an environment variable for the secret key in a live environment. +:::note + +Make sure to use an environment variable for the secret key in a live environment. + +::: ### Try it out diff --git a/docs/content/how-to/uploading-images-to-s3.md b/docs/content/how-to/uploading-images-to-s3.md index 12c8a36ff5..45163a0c83 100644 --- a/docs/content/how-to/uploading-images-to-s3.md +++ b/docs/content/how-to/uploading-images-to-s3.md @@ -78,7 +78,11 @@ https://[bucket].s3.[region].amazonaws.com The two access keys in the options are the ones created in the previous section. -> Make sure to use an environment variable for the secret key in a live environment. +:::note + +Make sure to use an environment variable for the secret key in a live environment. + +::: ### Try it out diff --git a/docs/content/how-to/uploading-images-to-spaces.md b/docs/content/how-to/uploading-images-to-spaces.md index 4ad47a48d6..a8416a0b57 100644 --- a/docs/content/how-to/uploading-images-to-spaces.md +++ b/docs/content/how-to/uploading-images-to-spaces.md @@ -41,7 +41,11 @@ Then configure your `medusa-config.js` to include the plugin alongside the requi In the above options, a `spaces_url` is included. This can be found in your Space overview. The `bucket` should point to the name you gave your Space. The `endpoint` identifies the region in which you created the Space. And finally the two keys are the ones created in the previous section. -> Make sure to use an environment variable for the secret key in a live environment. +:::note + +Make sure to use an environment variable for the secret key in a live environment. + +::: ### Try it out! diff --git a/docs/content/quickstart/quick-start.md b/docs/content/quickstart/quick-start.md index c41b518a41..494b36331c 100644 --- a/docs/content/quickstart/quick-start.md +++ b/docs/content/quickstart/quick-start.md @@ -50,7 +50,11 @@ We have created two starters for you that can help you lay a foundation for your - [Nextjs Starter](https://github.com/medusajs/nextjs-starter-medusa) - [Gatsby Starter](https://github.com/medusajs/gatsby-starter-medusa) -> Note: Medusa runs on port 9000 by default and the storefront starters are both configured to run on port 8000. If you wish to run your storefront starter on another port you should update your CORS settings in your project's `medusa-config.js`. +:::note + +Medusa runs on port 9000 by default and the storefront starters are both configured to run on port 8000. If you wish to run your storefront starter on another port you should update your CORS settings in your project's `medusa-config.js`. + +::: - -## Background Knowledge and Prerequisites - -This tutorial aims to be as inclusive as possible so that most people with a bit of web development exeperience will be able to follow along and understand what is going on. In case you are completely new to programming and are just setting out to start working on your first project it will be helpful to familiarize yourself with a couple of the technologies that Medusa is build on - -- **JavaScript**: The programming language that Medusa is written in. It is the language that runs in your browser to create dynamic web applications and has over the past decade gained a lot of traction as a backend language. If you wish to customize or extend Medusa it is highly recommended that you learn how JavaScript works. You can learn more about JavaScript with the [Basic JavaScript course from freeCodeCamp.](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript) -- **SQL & Postgresql**: Medusa uses the relational database PostgreSQL as the database layer where data is persisted. To understand how different entities relate to each other in Medusa it is helpful to have a good understanding of SQL. You can learn more about SQL and relational databases with the [SQL and Databases course from freeCodeCamp.](https://www.freecodecamp.org/news/sql-and-databases-full-course/) -- The **command line**: The command line is a text interface for your computer. It is used to run commands such as starting a program, performing a task or interfacing with the files on your computer. If you have never used the command line before you can check out [this tutorial](https://www.learnenough.com/command-line-tutorial) to get the basics in place. - -To get a further understanding of what powers Medusa you can lookup these concepts: - -- [**REST APIs**](https://en.wikipedia.org/wiki/Representational_state_transfer) -- [**Dependency Injection**](https://en.wikipedia.org/wiki/Dependency_injection) -- [**Idempotency Keys**](https://brandur.org/idempotency-keys) - -## Installations - -To get your development environment ready you need to install the following tools: - -- Node.js -- Git -- Postgresql -- Redis -- Medusa CLI - -### Node.js - -Node.js is an environment that can execute JavaScript code on outside of the browser making it possible to run on a server. Node.js is the environment that makes it possible for Medusa to run so you must install Node.js on your computer to start Medusa development. - -Node.js has a bundled package manager called npm. npm helps you install "packages" which are small pieces of code that you can leverage in your Node.js applications. Medusa's core is itself a package distributed via npm and so are all of the plugins that exist around the core. [You can install Node.js from here.](https://nodejs.org/en/) - -:::caution - -Medusa supports Node versions 14 and 16. You can check which Node version you have using the following command: - -```bash -node -v -``` - -::: - -If you prefer using something like homebrew you can also run: - -``` -brew install node -``` - -:::tip - -**Mac users**: Make sure that you have Xcode command line tools installed; if not run `xcode-select --install` - -::: - -### Git - -Git is a version control system that keeps track on files within a project and makes it possible to do things like going back in history if you have made mistakes or collaborate with teammates without overriding each other's work. Almost all developers use Git for version control. Medusa uses git behind the scenes when you create a new project so you'll have to install it on your computer to get started. - -If you are a Mac user you will already have Git installed as part of the Xcode command line tools, but for good measure check out installation of Git on different systems below: - -- [Install Git on macOS](https://www.atlassian.com/git/tutorials/install-git) -- [Install Git on Windows](https://www.atlassian.com/git/tutorials/install-git#windows) -- [Install Git on Linux](https://www.atlassian.com/git/tutorials/install-git#linux) - -### PostgreSQL - -PostgreSQL is an open-source relational database system with more than 30 years of active development. It is robust, reliable and ensures data integrity so there's no need to worry about those when you scale your project. Medusa uses PostgreSQL as its database and you will need to install it on your computer to get going. [Install PostgreSQL from here.](https://www.postgresql.org/download/). - -If you prefer to use homebrew you may install PostgreSQL by running: - -``` -brew install postgresql -brew services start postgresql -createdb -``` - -### Redis - -Redis is an open-source in memory data structure store which is used in Medusa to emit messages in the system and cache data. [Install Redis from here.](https://redis.io/download) - -If you prefer to use homebrew you may install Redis by running: - -``` -brew install redis -brew services start redis -``` - -### Medusa CLI - -The final installation to do to get started with Medusa is the Medusa CLI, which is an npm package you can install globally on your computer to get instant access to commands that help you manage and run your Medusa project. As the Medusa CLI is distributed as an npm package it is very easily installed by running: - -```bash npm2yarn -npm install @medusajs/medusa-cli -g -``` - -### Text editor - -If you don't already have a text editor of choice you should find one you like - here is a couple of candidates: - -- [Neovim](https://neovim.io/) (if you are super oldschool there's also plain [Vim](https://www.vim.org/)) -- [VS Code](https://code.visualstudio.com/) -- [Atom](https://atom.io/) - -It is not important which editor you use as long as you feel comfortable working with it. - - - -## Summary - -You now have all required software installed on your computer and have been introduced to a bit of our tech stack. In the next part of this tutorial we will be setting up a Medusa project for the first time and start making API requests. diff --git a/docs/content/tutorial/0-set-up-your-development-environment.mdx b/docs/content/tutorial/0-set-up-your-development-environment.mdx new file mode 100644 index 0000000000..6f67bf99a2 --- /dev/null +++ b/docs/content/tutorial/0-set-up-your-development-environment.mdx @@ -0,0 +1,364 @@ +import styles from './development.module.css'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Set up your development environment + +This document will guide you to set up your development environment to efficiently and properly use Medusa. + +## Prerequisite Background Knowledge + +### JavaScript + +Medusa is built with JavaScript. If you’re not familiar with JavaScript, it is the language that runs in your browser to create dynamic web applications and has over the past decade gained a lot of traction as a backend language. If you wish to customize or extend Medusa, it is highly recommended that you learn how JavaScript works. + +You can learn more about JavaScript with the [Basic JavaScript course from freeCodeCamp.](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript) + +### Express + +Medusa uses [Express](https://expressjs.com), a Node.js web application framework, to create your ecommerce server. It facilitates creating REST APIs in Node.js. If you’re interested in customizing Medusa or understanding more about how it works, you should learn more about Express. + +You can learn more about Node.js and Express with the [Free 8-hour-long Node.js + Express course from freeCodeCamp](https://www.freecodecamp.org/news/free-8-hour-node-express-course/). + +### SQL + +SQL is a programming language used to interact with relational databases and store data in your ecommerce server. To understand how different entities relate to each other in Medusa it is helpful to have a good understanding of SQL. + +You can learn more about SQL and relational databases with the [SQL and Databases course from freeCodeCamp.](https://www.freecodecamp.org/news/sql-and-databases-full-course/) + +### Command Line Interface (CLI) + +To install and use Medusa, you’ll need to be familiar with CLI tools. If you’re not familiar with the command line, it is a text interface for your computer. It is used to run commands such as starting a program, performing a task, or interfacing with the files on your computer. + +If you have never used the command line before you can check out [this tutorial](https://www.learnenough.com/command-line-tutorial) to get the basics in place. + +### Additional Information + +To get a further understanding of what powers Medusa you can lookup these concepts: + +- [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer) +- [Dependency Injection](https://en.wikipedia.org/wiki/Dependency_injection) +- [Idempotency Keys](https://brandur.org/idempotency-keys) + +## Installations[](https://docs.medusajs.com/tutorial/set-up-your-development-environment#installations) + +To get your development environment ready you need to install the following tools: + +- [Node.js](#nodejs) +- [Git](#git) +- [Postgresql](#postgresql) +- [Redis](#redis) +- [Medusa CLI](#medusa-cli) +- [Code Editor](#code-editor) + +### Node.js + +:::info + +Node.js is an environment that can execute JavaScript code outside of the browser, making it possible to run on a server. + +Node.js has a bundled package manager called NPM. NPM helps you install "packages" which are small pieces of code that you can leverage in your Node.js applications. Medusa's core is itself a package distributed via NPM and so are all of the plugins that exist around the core. + +::: + +Node.js is the environment that makes it possible for Medusa to run, so you must install Node.js on your computer to start Medusa development. + +:::caution + +Medusa supports versions 14 and 16 of Node.js. You can check your Node.js version using the following command: + +```bash +node -v +``` + +::: + + + + +You can install the executable directly from [the Node.js website](https://nodejs.org/en/#home-downloadhead). + +For other approaches, you can check out [Node.js’s guide](https://nodejs.org/en/download/package-manager/#windows-1). + + + + +You can use the following commands to install Node.js on Ubuntu: + +```bash +#Ubuntu +sudo apt update +sudo apt install nodejs +``` + +For other Linux distributions, you can check out [Node.js’s guide](https://nodejs.org/en/download/package-manager/). + + + + +You can use the following commands to install Node.js on macOS: + + + + +```bash +brew install node +``` + + + + +```bash +curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/" +``` + + + + +For other approaches, you can check out [Node.js’s guide](https://nodejs.org/en/download/package-manager/#macos). + +:::tip + +Make sure that you have Xcode command line tools installed; if not, run the following command to install it: `xcode-select --install` + +::: + + + +### Git + +:::info + +Git is a version control system that keeps track of files within a project and makes it possible to do things like going back in history if you have made mistakes or collaborate with teammates without overriding each other's work. + +::: + +Medusa uses Git behind the scenes when you create a new project so you'll have to install it on your computer to get started. + + + + +To install Git on Windows, you need to [download the installable package](https://git-scm.com/download/win). + + + + +For Debian/Ubuntu, you can use the following command: + +```bash +apt-get install git +``` + +As for other Linux distributions, please check [git’s guide](https://git-scm.com/download/linux). + + + + +You should already have Git installed as part of the Xcode command-line tools. + +However, if for any reason you need to install it manually, you can install it with Homebrew: + +```bash +brew install git +``` + +You can also check out [git’s guide](https://git-scm.com/download/mac) for more installation options. + + + + +### PostgreSQL + +:::info + +PostgreSQL is an open-source relational database system with more than 30 years of active development. It is robust, reliable, and ensures data integrity so there's no need to worry about those when you scale your project. + +::: + +Although you can use an SQLite database with Medusa which would require no necessary database installations, it is recommended to use a PostgreSQL database for your server. + + + + +You can [download the PostgreSQL Windows installer](https://www.postgresql.org/download/windows/) from their website. + + + + +If you’re using Ubuntu, you can use the following commands to download and install PostgreSQL: + +```bash +sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list' +wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - +sudo apt-get update +sudo apt-get -y install postgresql +``` + +For other distributions, you can check out [PostgreSQL’s website for more guides](https://www.postgresql.org/download/linux/). + + + + +You can download PostgreSQL on your macOS using [the installer on their website](https://www.postgresql.org/download/macosx/). + + + + +### Redis + +:::info + +Redis is an open-source in-memory data structure store. It can be used for distributing and emitting messages and caching, among other purposes. + +::: + +Medusa uses Redis as the event queue in the server. If you want to use subscribers to handle events such as when an order is placed and perform actions based on the events, then you need to install and configure Redis. + +If you don’t install and configure Redis with your Medusa server, then it will work without any events-related features. + + + + +To use Redis on Windows, you must have [Windows Subsystem for Linux (WSL2) enabled](https://docs.microsoft.com/en-us/windows/wsl/install). This lets you run Linux binaries on Windows. + +After installing and enabling WSL2, if you use an Ubuntu distribution you can run the following commands to install Redis: + +```bash +sudo apt-add-repository ppa:redislabs/redis +sudo apt-get update +sudo apt-get upgrade +sudo apt-get install redis-server + +## Start Redis server +sudo service redis-server start +``` + + + + +If you use Ubuntu you can use the following commands to install Redis: + +```bash +curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg + +echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list + +sudo apt-get update +sudo apt-get install redis + +## Start Redis server +sudo service redis-server start +``` + +For other distributions, you can check out [Redis’ guide on this](https://redis.io/docs/getting-started/installation/install-redis-on-linux/). + + + + +You can install Redis on macOS using Homebrew with the following command: + +```bash +brew install redis + +## Start Redis server +brew services start redis +``` + +To install Redis without Homebrew you can check out [Redis’s guide on installing it from source](https://redis.io/docs/getting-started/installation/install-redis-from-source/). + + + + +### Medusa CLI + +The final installation required to get started with Medusa is the Medusa CLI. It is an NPM package you can install globally on your machine to get instant access to commands that help you manage and run your Medusa project. + +You can install Medusa’s CLI with the following command: + +```bash npm2yarn +npm install @medusajs/medusa-cli -g +``` + +### Code editor + +If you don't already have a code editor of choice, we recommend using [VSCode](https://code.visualstudio.com/) as it is a widely used IDE (Integrated Development Environment) by developers. + +Here are some other options: + +- [Atom](https://atom.io/) +- [Neovim](https://neovim.io/) (if you are super old school there's also plain [Vim](https://www.vim.org/)) + +It is not important which editor you use as long as you feel comfortable working with it. + +## Configuring Your Server + +After installing all the requirements mentioned above and following along with our [quickstart guide](../quickstart/quick-start.md), you need to configure some information on your server to connect it to some of the requirements you installed. + +### PostgreSQL + +After creating a new database schema in PostgreSQL, you need to add the URL to connect to it on your Medusa server. + +To do that, add the following environment variable to the `.env` file on the root of your Medusa server: + +```bash +DATABASE_URL=postgres://:@:/ +``` + +Notice that there are some details in the URL above you need to fill in yourself: + +- ``: the username of the user that has access to the database schema you created. +- ``: the password of the user that has access to the database schema you created. +- ``: the hostname where the PostgreSQL database is hosted. In local development, you can use `localhost`. +- ``: the port where the PostgreSQL database can be contacted on the host. By default, it’s 5432**.** +- ``: the name of the database schema you created. + +Then, in `medusa-config.js`, change the following properties in the object `projecConfig`: + +```jsx +module.exports = { + projectConfig: { + ..., + database_url: DATABASE_URL, + database_type: "postgres", + // comment out or remove these lines: + // database_database: "./medusa-db.sql", + // database_type: "sqlite", + }, + plugins, +}; +``` + +The last recommended step is running the following command to migrate Medusa’s database schema into your database and seed the database with dummy data: + +```bash npm2yarn +npm run seed +``` + +### Redis + +After installing Redis and running the Redis server, you must configure Medusa to use it. + +In `.env` add a new environment variable: + +```bash +REDIS_URL=redis://localhost:6379 +``` + +This is the default Redis URL to connect to, especially in development. However, if you’re deploying your server, have configured your Redis installation differently, or just need to check the format of the connection URL, you can check [this guide](https://github.com/lettuce-io/lettuce-core/wiki/Redis-URI-and-connection-details) for more details. + +:::tip + +If you use the default connection string mentioned here then you can skip over adding the environment variable. + +::: + +Then, in `medusa-config.js`, comment out the following line in the object `projectConfig`: + +```jsx +redis_url: REDIS_URL, +``` + +## What’s Next 🚀 + +- Learn how to install a storefront with [Next.js](../starters/nextjs-medusa-starter.md) or [Gatsby](./../starters/gatsby-medusa-starter.md). +- Learn how to install the [Medusa Admin](../admin/quickstart.md). diff --git a/docs/content/tutorial/development.module.css b/docs/content/tutorial/development.module.css new file mode 100644 index 0000000000..00ab3eff6b --- /dev/null +++ b/docs/content/tutorial/development.module.css @@ -0,0 +1,5 @@ +.osTabs { + background-color: #f4f4f4; + padding: 10px; + border-radius: 6.4px; +} \ No newline at end of file diff --git a/www/docs/src/theme/Tabs/index.js b/www/docs/src/theme/Tabs/index.js index 9365cb00e9..4201a3fa19 100644 --- a/www/docs/src/theme/Tabs/index.js +++ b/www/docs/src/theme/Tabs/index.js @@ -12,8 +12,8 @@ export default function TabsWrapper(props) { }, []) return ( - <> +
- +
); } From 6f4d1d8f34bffcc2e9a2e9060543e8e17941eda2 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Fri, 29 Apr 2022 15:57:43 +0300 Subject: [PATCH 13/15] Revert "updated development guide" This reverts commit def2fb854370205a5ae9f4178257c6867d6428dd. --- .../0-set-up-your-development-environment.md | 126 ++++++ .../0-set-up-your-development-environment.mdx | 364 ------------------ docs/content/tutorial/development.module.css | 5 - www/docs/src/theme/Tabs/index.js | 4 +- 4 files changed, 128 insertions(+), 371 deletions(-) create mode 100644 docs/content/tutorial/0-set-up-your-development-environment.md delete mode 100644 docs/content/tutorial/0-set-up-your-development-environment.mdx delete mode 100644 docs/content/tutorial/development.module.css diff --git a/docs/content/tutorial/0-set-up-your-development-environment.md b/docs/content/tutorial/0-set-up-your-development-environment.md new file mode 100644 index 0000000000..9c692f23fe --- /dev/null +++ b/docs/content/tutorial/0-set-up-your-development-environment.md @@ -0,0 +1,126 @@ +--- +title: Set up your development environment +--- + +# Set up your development environment + +## Introduction + +Welcome to Medusa - we are so excited to get you on board! + +This tutorial will walk you through the steps to take to set up your local development environment. You will familiarize yourself with some of the core parts that make Medusa work and learn how to configure your development environment. Furthermore you will be introduced to how the plugin architecture works and how to customize your commerce functionalities with custom logic and endpoints. + + + +## Background Knowledge and Prerequisites + +This tutorial aims to be as inclusive as possible so that most people with a bit of web development exeperience will be able to follow along and understand what is going on. In case you are completely new to programming and are just setting out to start working on your first project it will be helpful to familiarize yourself with a couple of the technologies that Medusa is build on + +- **JavaScript**: The programming language that Medusa is written in. It is the language that runs in your browser to create dynamic web applications and has over the past decade gained a lot of traction as a backend language. If you wish to customize or extend Medusa it is highly recommended that you learn how JavaScript works. You can learn more about JavaScript with the [Basic JavaScript course from freeCodeCamp.](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript) +- **SQL & Postgresql**: Medusa uses the relational database PostgreSQL as the database layer where data is persisted. To understand how different entities relate to each other in Medusa it is helpful to have a good understanding of SQL. You can learn more about SQL and relational databases with the [SQL and Databases course from freeCodeCamp.](https://www.freecodecamp.org/news/sql-and-databases-full-course/) +- The **command line**: The command line is a text interface for your computer. It is used to run commands such as starting a program, performing a task or interfacing with the files on your computer. If you have never used the command line before you can check out [this tutorial](https://www.learnenough.com/command-line-tutorial) to get the basics in place. + +To get a further understanding of what powers Medusa you can lookup these concepts: + +- [**REST APIs**](https://en.wikipedia.org/wiki/Representational_state_transfer) +- [**Dependency Injection**](https://en.wikipedia.org/wiki/Dependency_injection) +- [**Idempotency Keys**](https://brandur.org/idempotency-keys) + +## Installations + +To get your development environment ready you need to install the following tools: + +- Node.js +- Git +- Postgresql +- Redis +- Medusa CLI + +### Node.js + +Node.js is an environment that can execute JavaScript code on outside of the browser making it possible to run on a server. Node.js is the environment that makes it possible for Medusa to run so you must install Node.js on your computer to start Medusa development. + +Node.js has a bundled package manager called npm. npm helps you install "packages" which are small pieces of code that you can leverage in your Node.js applications. Medusa's core is itself a package distributed via npm and so are all of the plugins that exist around the core. [You can install Node.js from here.](https://nodejs.org/en/) + +:::caution + +Medusa supports Node versions 14 and 16. You can check which Node version you have using the following command: + +```bash +node -v +``` + +::: + +If you prefer using something like homebrew you can also run: + +``` +brew install node +``` + +:::tip + +**Mac users**: Make sure that you have Xcode command line tools installed; if not run `xcode-select --install` + +::: + +### Git + +Git is a version control system that keeps track on files within a project and makes it possible to do things like going back in history if you have made mistakes or collaborate with teammates without overriding each other's work. Almost all developers use Git for version control. Medusa uses git behind the scenes when you create a new project so you'll have to install it on your computer to get started. + +If you are a Mac user you will already have Git installed as part of the Xcode command line tools, but for good measure check out installation of Git on different systems below: + +- [Install Git on macOS](https://www.atlassian.com/git/tutorials/install-git) +- [Install Git on Windows](https://www.atlassian.com/git/tutorials/install-git#windows) +- [Install Git on Linux](https://www.atlassian.com/git/tutorials/install-git#linux) + +### PostgreSQL + +PostgreSQL is an open-source relational database system with more than 30 years of active development. It is robust, reliable and ensures data integrity so there's no need to worry about those when you scale your project. Medusa uses PostgreSQL as its database and you will need to install it on your computer to get going. [Install PostgreSQL from here.](https://www.postgresql.org/download/). + +If you prefer to use homebrew you may install PostgreSQL by running: + +``` +brew install postgresql +brew services start postgresql +createdb +``` + +### Redis + +Redis is an open-source in memory data structure store which is used in Medusa to emit messages in the system and cache data. [Install Redis from here.](https://redis.io/download) + +If you prefer to use homebrew you may install Redis by running: + +``` +brew install redis +brew services start redis +``` + +### Medusa CLI + +The final installation to do to get started with Medusa is the Medusa CLI, which is an npm package you can install globally on your computer to get instant access to commands that help you manage and run your Medusa project. As the Medusa CLI is distributed as an npm package it is very easily installed by running: + +```bash npm2yarn +npm install @medusajs/medusa-cli -g +``` + +### Text editor + +If you don't already have a text editor of choice you should find one you like - here is a couple of candidates: + +- [Neovim](https://neovim.io/) (if you are super oldschool there's also plain [Vim](https://www.vim.org/)) +- [VS Code](https://code.visualstudio.com/) +- [Atom](https://atom.io/) + +It is not important which editor you use as long as you feel comfortable working with it. + + + +## Summary + +You now have all required software installed on your computer and have been introduced to a bit of our tech stack. In the next part of this tutorial we will be setting up a Medusa project for the first time and start making API requests. diff --git a/docs/content/tutorial/0-set-up-your-development-environment.mdx b/docs/content/tutorial/0-set-up-your-development-environment.mdx deleted file mode 100644 index 6f67bf99a2..0000000000 --- a/docs/content/tutorial/0-set-up-your-development-environment.mdx +++ /dev/null @@ -1,364 +0,0 @@ -import styles from './development.module.css'; -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - -# Set up your development environment - -This document will guide you to set up your development environment to efficiently and properly use Medusa. - -## Prerequisite Background Knowledge - -### JavaScript - -Medusa is built with JavaScript. If you’re not familiar with JavaScript, it is the language that runs in your browser to create dynamic web applications and has over the past decade gained a lot of traction as a backend language. If you wish to customize or extend Medusa, it is highly recommended that you learn how JavaScript works. - -You can learn more about JavaScript with the [Basic JavaScript course from freeCodeCamp.](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/#basic-javascript) - -### Express - -Medusa uses [Express](https://expressjs.com), a Node.js web application framework, to create your ecommerce server. It facilitates creating REST APIs in Node.js. If you’re interested in customizing Medusa or understanding more about how it works, you should learn more about Express. - -You can learn more about Node.js and Express with the [Free 8-hour-long Node.js + Express course from freeCodeCamp](https://www.freecodecamp.org/news/free-8-hour-node-express-course/). - -### SQL - -SQL is a programming language used to interact with relational databases and store data in your ecommerce server. To understand how different entities relate to each other in Medusa it is helpful to have a good understanding of SQL. - -You can learn more about SQL and relational databases with the [SQL and Databases course from freeCodeCamp.](https://www.freecodecamp.org/news/sql-and-databases-full-course/) - -### Command Line Interface (CLI) - -To install and use Medusa, you’ll need to be familiar with CLI tools. If you’re not familiar with the command line, it is a text interface for your computer. It is used to run commands such as starting a program, performing a task, or interfacing with the files on your computer. - -If you have never used the command line before you can check out [this tutorial](https://www.learnenough.com/command-line-tutorial) to get the basics in place. - -### Additional Information - -To get a further understanding of what powers Medusa you can lookup these concepts: - -- [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer) -- [Dependency Injection](https://en.wikipedia.org/wiki/Dependency_injection) -- [Idempotency Keys](https://brandur.org/idempotency-keys) - -## Installations[](https://docs.medusajs.com/tutorial/set-up-your-development-environment#installations) - -To get your development environment ready you need to install the following tools: - -- [Node.js](#nodejs) -- [Git](#git) -- [Postgresql](#postgresql) -- [Redis](#redis) -- [Medusa CLI](#medusa-cli) -- [Code Editor](#code-editor) - -### Node.js - -:::info - -Node.js is an environment that can execute JavaScript code outside of the browser, making it possible to run on a server. - -Node.js has a bundled package manager called NPM. NPM helps you install "packages" which are small pieces of code that you can leverage in your Node.js applications. Medusa's core is itself a package distributed via NPM and so are all of the plugins that exist around the core. - -::: - -Node.js is the environment that makes it possible for Medusa to run, so you must install Node.js on your computer to start Medusa development. - -:::caution - -Medusa supports versions 14 and 16 of Node.js. You can check your Node.js version using the following command: - -```bash -node -v -``` - -::: - - - - -You can install the executable directly from [the Node.js website](https://nodejs.org/en/#home-downloadhead). - -For other approaches, you can check out [Node.js’s guide](https://nodejs.org/en/download/package-manager/#windows-1). - - - - -You can use the following commands to install Node.js on Ubuntu: - -```bash -#Ubuntu -sudo apt update -sudo apt install nodejs -``` - -For other Linux distributions, you can check out [Node.js’s guide](https://nodejs.org/en/download/package-manager/). - - - - -You can use the following commands to install Node.js on macOS: - - - - -```bash -brew install node -``` - - - - -```bash -curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/" -``` - - - - -For other approaches, you can check out [Node.js’s guide](https://nodejs.org/en/download/package-manager/#macos). - -:::tip - -Make sure that you have Xcode command line tools installed; if not, run the following command to install it: `xcode-select --install` - -::: - - - -### Git - -:::info - -Git is a version control system that keeps track of files within a project and makes it possible to do things like going back in history if you have made mistakes or collaborate with teammates without overriding each other's work. - -::: - -Medusa uses Git behind the scenes when you create a new project so you'll have to install it on your computer to get started. - - - - -To install Git on Windows, you need to [download the installable package](https://git-scm.com/download/win). - - - - -For Debian/Ubuntu, you can use the following command: - -```bash -apt-get install git -``` - -As for other Linux distributions, please check [git’s guide](https://git-scm.com/download/linux). - - - - -You should already have Git installed as part of the Xcode command-line tools. - -However, if for any reason you need to install it manually, you can install it with Homebrew: - -```bash -brew install git -``` - -You can also check out [git’s guide](https://git-scm.com/download/mac) for more installation options. - - - - -### PostgreSQL - -:::info - -PostgreSQL is an open-source relational database system with more than 30 years of active development. It is robust, reliable, and ensures data integrity so there's no need to worry about those when you scale your project. - -::: - -Although you can use an SQLite database with Medusa which would require no necessary database installations, it is recommended to use a PostgreSQL database for your server. - - - - -You can [download the PostgreSQL Windows installer](https://www.postgresql.org/download/windows/) from their website. - - - - -If you’re using Ubuntu, you can use the following commands to download and install PostgreSQL: - -```bash -sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list' -wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - -sudo apt-get update -sudo apt-get -y install postgresql -``` - -For other distributions, you can check out [PostgreSQL’s website for more guides](https://www.postgresql.org/download/linux/). - - - - -You can download PostgreSQL on your macOS using [the installer on their website](https://www.postgresql.org/download/macosx/). - - - - -### Redis - -:::info - -Redis is an open-source in-memory data structure store. It can be used for distributing and emitting messages and caching, among other purposes. - -::: - -Medusa uses Redis as the event queue in the server. If you want to use subscribers to handle events such as when an order is placed and perform actions based on the events, then you need to install and configure Redis. - -If you don’t install and configure Redis with your Medusa server, then it will work without any events-related features. - - - - -To use Redis on Windows, you must have [Windows Subsystem for Linux (WSL2) enabled](https://docs.microsoft.com/en-us/windows/wsl/install). This lets you run Linux binaries on Windows. - -After installing and enabling WSL2, if you use an Ubuntu distribution you can run the following commands to install Redis: - -```bash -sudo apt-add-repository ppa:redislabs/redis -sudo apt-get update -sudo apt-get upgrade -sudo apt-get install redis-server - -## Start Redis server -sudo service redis-server start -``` - - - - -If you use Ubuntu you can use the following commands to install Redis: - -```bash -curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg - -echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list - -sudo apt-get update -sudo apt-get install redis - -## Start Redis server -sudo service redis-server start -``` - -For other distributions, you can check out [Redis’ guide on this](https://redis.io/docs/getting-started/installation/install-redis-on-linux/). - - - - -You can install Redis on macOS using Homebrew with the following command: - -```bash -brew install redis - -## Start Redis server -brew services start redis -``` - -To install Redis without Homebrew you can check out [Redis’s guide on installing it from source](https://redis.io/docs/getting-started/installation/install-redis-from-source/). - - - - -### Medusa CLI - -The final installation required to get started with Medusa is the Medusa CLI. It is an NPM package you can install globally on your machine to get instant access to commands that help you manage and run your Medusa project. - -You can install Medusa’s CLI with the following command: - -```bash npm2yarn -npm install @medusajs/medusa-cli -g -``` - -### Code editor - -If you don't already have a code editor of choice, we recommend using [VSCode](https://code.visualstudio.com/) as it is a widely used IDE (Integrated Development Environment) by developers. - -Here are some other options: - -- [Atom](https://atom.io/) -- [Neovim](https://neovim.io/) (if you are super old school there's also plain [Vim](https://www.vim.org/)) - -It is not important which editor you use as long as you feel comfortable working with it. - -## Configuring Your Server - -After installing all the requirements mentioned above and following along with our [quickstart guide](../quickstart/quick-start.md), you need to configure some information on your server to connect it to some of the requirements you installed. - -### PostgreSQL - -After creating a new database schema in PostgreSQL, you need to add the URL to connect to it on your Medusa server. - -To do that, add the following environment variable to the `.env` file on the root of your Medusa server: - -```bash -DATABASE_URL=postgres://:@:/ -``` - -Notice that there are some details in the URL above you need to fill in yourself: - -- ``: the username of the user that has access to the database schema you created. -- ``: the password of the user that has access to the database schema you created. -- ``: the hostname where the PostgreSQL database is hosted. In local development, you can use `localhost`. -- ``: the port where the PostgreSQL database can be contacted on the host. By default, it’s 5432**.** -- ``: the name of the database schema you created. - -Then, in `medusa-config.js`, change the following properties in the object `projecConfig`: - -```jsx -module.exports = { - projectConfig: { - ..., - database_url: DATABASE_URL, - database_type: "postgres", - // comment out or remove these lines: - // database_database: "./medusa-db.sql", - // database_type: "sqlite", - }, - plugins, -}; -``` - -The last recommended step is running the following command to migrate Medusa’s database schema into your database and seed the database with dummy data: - -```bash npm2yarn -npm run seed -``` - -### Redis - -After installing Redis and running the Redis server, you must configure Medusa to use it. - -In `.env` add a new environment variable: - -```bash -REDIS_URL=redis://localhost:6379 -``` - -This is the default Redis URL to connect to, especially in development. However, if you’re deploying your server, have configured your Redis installation differently, or just need to check the format of the connection URL, you can check [this guide](https://github.com/lettuce-io/lettuce-core/wiki/Redis-URI-and-connection-details) for more details. - -:::tip - -If you use the default connection string mentioned here then you can skip over adding the environment variable. - -::: - -Then, in `medusa-config.js`, comment out the following line in the object `projectConfig`: - -```jsx -redis_url: REDIS_URL, -``` - -## What’s Next 🚀 - -- Learn how to install a storefront with [Next.js](../starters/nextjs-medusa-starter.md) or [Gatsby](./../starters/gatsby-medusa-starter.md). -- Learn how to install the [Medusa Admin](../admin/quickstart.md). diff --git a/docs/content/tutorial/development.module.css b/docs/content/tutorial/development.module.css deleted file mode 100644 index 00ab3eff6b..0000000000 --- a/docs/content/tutorial/development.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.osTabs { - background-color: #f4f4f4; - padding: 10px; - border-radius: 6.4px; -} \ No newline at end of file diff --git a/www/docs/src/theme/Tabs/index.js b/www/docs/src/theme/Tabs/index.js index 4201a3fa19..9365cb00e9 100644 --- a/www/docs/src/theme/Tabs/index.js +++ b/www/docs/src/theme/Tabs/index.js @@ -12,8 +12,8 @@ export default function TabsWrapper(props) { }, []) return ( -
+ <> -
+ ); } From a4bb92305bf935dcd80ee6f180d7f6c9845c9f3c Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Sun, 1 May 2022 12:55:50 +0300 Subject: [PATCH 14/15] fix: removed unnecessary links from sidebar (#1456) --- www/docs/sidebars.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index e6e8c9c229..2178db48cb 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -192,19 +192,10 @@ module.exports = { }, ] }, - { - type: "doc", - id: "tutorial/adding-custom-functionality", - label: "Add Custom Functionality" - }, { type: "doc", id: "how-to/notification-api", }, - { - type: "doc", - id: "guides/fulfillment-api", - }, { type: "doc", id: "guides/plugins", From 56e79d334ecd2a67cad43c8ebd58e364f9e9fb59 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Sun, 1 May 2022 12:56:41 +0300 Subject: [PATCH 15/15] fix(medusa-plugin-twilio-sms): fix name in README (#1457) --- packages/medusa-plugin-twilio-sms/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/medusa-plugin-twilio-sms/README.md b/packages/medusa-plugin-twilio-sms/README.md index 2da57a2320..6fbdab56f4 100644 --- a/packages/medusa-plugin-twilio-sms/README.md +++ b/packages/medusa-plugin-twilio-sms/README.md @@ -1,4 +1,4 @@ -# medusa-plugin-sendgrid +# medusa-plugin-twilio-sms Twilio SMS / Messaging plugin.