docs: Adds new index page and design tweaks (#833)

www/docs/src/css/custom.css

@@ -20,14 +20,14 @@
   --ifm-medusa-gray: #f0f0f0;
 
   /* Fonts */
-  --ifm-code-font-size: 90%;
-  --ifm-font-family-base: "Open Sans";
+  --ifm-code-font-size: 80%;
+  --ifm-font-family-base: "custom-font",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
 
   /* Sidebar */
   --doc-sidebar-width: 350px !important;
 
   /* Docs Page */
-  --ifm-docs-page-max-width: 700px;
+  --ifm-docs-page-max-width: 850px;
 
   /* Toc */
   --ifm-toc-border-color: #f0f0f0;
@@ -48,6 +48,18 @@ html[data-theme="dark"] {
   --ifm-toc-border-color: #333;
 }
 
+h1 {
+  font-size: 2.5em;
+}
+
+h1, h2, h3 {
+  font-weight: normal;
+}
+
+p {
+  font-weight: 450;
+}
+
 /* DocSearch */
 
 html[data-theme="light"] .DocSearch-Button {
@@ -73,6 +85,16 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+.navbar {
+  z-index: 1000;
+  font-size: 14px;
+}
+
+/* Medusa logo */
+.navbar__brand {
+  width: 100px;
+}
+
 .navbar-github-link:before {
   content: "";
   width: 24px;
@@ -90,8 +112,14 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
 
 article {
   max-width: var(--ifm-docs-page-max-width);
-  margin-left: auto;
-  margin-right: auto;
+}
+
+@media screen and (min-width: 966px) {
+  article {
+    margin-left: 50px;
+    margin-right: 50px;
+    max-width: none
+  }
 }
 
 .docusaurus-highlight-code-line {
@@ -129,8 +157,14 @@ article {
 }
 
 .sidebar-bg {
-  background: var(--ifm-medusa-gray);
   height: 100%;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+/* Medusa logo */
+.sidebar-bg img {
+ width: 100px;   
 }
 
 .padding-top--md {
@@ -138,8 +172,16 @@ article {
 }
 
 a.menu__link.menu__link--active.active {
-  border-left: 4px solid var(--ifm-color-primary);
-  padding-left: 12px;
+  padding-left: 16px;
+}
+
+a.menu__link--sublist::after {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 1rem 2rem;
+}
+
+.menu__list-item > a {
+  font-weight: 450;
+  color: #1f1f1f;
 }
 
 /* Pagination */
@@ -181,10 +223,35 @@ footer .footer__title {
   width: 150px;
 }
 
-.footer--dark {
-  --ifm-footer-background-color: #333;
+footer {
+  background-color: #ffffff !important;
+  border-top: 1px solid var(--ifm-toc-border-color);
 }
 
 .react-toggle {
   display: none;
 }
+
+/* Cards */
+
+.card {
+  border: 1px solid #1f1f1f;
+  border-radius: 8px;
+}
+
+.col {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+
+.prism-code {
+  background-color: none;
+  word-break: break-word;
+  font-size: 0.8rem;
+  outline: none !important;
+}
+.prism-code div,
+.prism-code div:focus,
+.prism-code div:active {
+  outline: none !important;
+}

www/docs/src/pages/index.js

@@ -1,20 +0,0 @@
-import React from "react"
-import { Banner } from "../components/Banner/"
-import { Intro } from "../components/Intro/"
-import { Layout } from "../components/Layout/"
-import styles from "./index.module.css"
-
-export default function Home() {
-  return (
-    <Layout title={`Docs`} description="some description...">
-      <div className={styles.container}>
-        <Banner />
-        <Intro
-          title="Explore and learn how to use Medusa."
-          desc="Get up and running within 5 minutes."
-        />
-        {/* <TabsPanel items={CARDS_DATA} /> */}
-      </div>
-    </Layout>
-  )
-}

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

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useRef, useCallback, useMemo } from "react"
-import { createPortal } from "react-dom"
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
-import { useHistory } from "@docusaurus/router"
-import { useBaseUrlUtils } from "@docusaurus/useBaseUrl"
-import Link from "@docusaurus/Link"
-import Head from "@docusaurus/Head"
-import useSearchQuery from "@theme/hooks/useSearchQuery"
 import { DocSearchButton, useDocSearchKeyboardEvents } from "@docsearch/react"
-import useAlgoliaContextualFacetFilters from "@theme/hooks/useAlgoliaContextualFacetFilters"
+import Head from "@docusaurus/Head"
+import Link from "@docusaurus/Link"
+import { useHistory } from "@docusaurus/router"
 import { translate } from "@docusaurus/Translate"
+import { useBaseUrlUtils } from "@docusaurus/useBaseUrl"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+import useAlgoliaContextualFacetFilters from "@theme/hooks/useAlgoliaContextualFacetFilters"
+import useSearchQuery from "@theme/hooks/useSearchQuery"
+import React, { useCallback, useMemo, useRef, useState } from "react"
+import { createPortal } from "react-dom"
 import styles from "./styles.module.css"
 
 let DocSearchModal = null
@@ -46,7 +46,7 @@ const replaceUrl = (item) => {
 
 function Hit({ hit, children }) {
   if (hit.url.includes("/api/store") || hit.url.includes("/api/admin")) {
-    let url = replaceUrl(hit)
+    const url = replaceUrl(hit)
     return <a href={url}>{children}</a>
   }
 
@@ -131,13 +131,13 @@ function DocSearch({ contextualSearch, ...props }) {
 
   const navigator = useRef({
     navigate({ item }) {
-      let url = replaceUrl(item)
-      //Need to type out the entire URL to prevent it from attempting to open the page
-      //as part of the docusaurus project. Which will fail.
+      const url = replaceUrl(item)
+      // Need to type out the entire URL to prevent it from attempting to open the page
+      // as part of the docusaurus project. Which will fail.
       window.location = `https://docs.medusa-commerce.com${url}`
     },
     navigateNewTab({ item }) {
-      let url = replaceUrl(item)
+      const url = replaceUrl(item)
       const windowReference = window.open(url, "_blank", "noopener")
 
       if (windowReference) {

www/docs/src/theme/SearchBar/styles.css

@@ -15,6 +15,9 @@
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
   width: 100%;
+  max-width: 175px;
+  border-radius: 8px;
+  background-color: #f5f6f7;
 }
 
 .DocSearch-Container {

www/docs/src/theme/SearchBar/styles.module.css

@@ -17,8 +17,6 @@
     padding: var(--ifm-navbar-item-padding-vertical)
       var(--ifm-navbar-item-padding-horizontal);
     flex: 1;
-    margin-left: 200px;
-    padding-right: 100px;
   }
 
   .searchBox button {