feat: Documentation and API reference (#348)

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

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

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

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

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

www/reference/src/components/layout.js

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

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

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

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

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

www/reference/src/components/topbar.js

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