feat: Enable API search (#353)

* enabled search in ref and changed from section -> main so Algolia will index ref content

* fix: algolia apu key

www/reference/gatsby-config.js

@@ -59,13 +59,9 @@ module.exports = {
     },
     `gatsby-plugin-theme-ui`,
     {
-      resolve: `gatsby-plugin-algolia-docsearch`,
+      resolve: `gatsby-plugin-env-variables`,
       options: {
-        appId: process.env.ALGOLIA_APP_ID || "temp",
-        apiKey: process.env.ALGOLIA_API_KEY || "temp", // required
-        indexName: "medusa-commerce", // required
-        inputSelector: "#algolia-doc-search", // required
-        debug: false, // (bool) Optional. Default `false`
+        allowList: ["ALGOLIA_API_KEY"],
       },
     },
     // `gatsby-plugin-preact`,

www/reference/package.json

@@ -23,6 +23,7 @@
     "gatsby-plugin-algolia-docsearch": "^1.0.5",
     "gatsby-plugin-anchor-links": "^1.1.1",
     "gatsby-plugin-emotion": "^5.0.0",
+    "gatsby-plugin-env-variables": "^2.1.0",
     "gatsby-plugin-preact": "^5.9.0",
     "gatsby-plugin-react-helmet": "^3.3.12",
     "gatsby-plugin-theme-ui": "^0.10.1",

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

@@ -82,7 +82,7 @@ const Section = ({ data }) => {
   }, [isInView])
 
   return (
-    <section
+    <main
       ref={sectionRef}
       id={convertToKebabCase(section.section_name)}
       className="DocSearch-content"
@@ -200,7 +200,7 @@ const Section = ({ data }) => {
           )}
         </Flex>
       </Box>
-    </section>
+    </main>
   )
 }
 

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

@@ -2,12 +2,10 @@ 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 algoliaApiKey = process.env.ALGOLIA_API_KEY || "temp"
 
 const Search = () => {
-  return <DocSearch apiKey={algoliaApiKey} indexName={algoliaIndexName} />
+  return <DocSearch apiKey={algoliaApiKey} indexName="medusa-commerce" />
 }
 
 export default Search

www/reference/src/components/topbar.js

@@ -95,6 +95,9 @@ const Topbar = ({ data, api }) => {
       <Flex
         sx={{
           alignItems: "center",
+          maxWidth: "400px",
+          flexGrow: "1",
+          justifyContent: "flex-end",
         }}
       >
         <Link variant="topbar" mr={3} href="https://docs.medusa-commerce.com">
@@ -109,8 +112,7 @@ const Topbar = ({ data, api }) => {
         >
           <GitHub />
         </Link>
-        {/* Re-add once indexing has been fine tuned */}
-        {/* <Search /> */}
+        <Search />
       </Flex>
     </Flex>
   )

www/reference/yarn.lock

@@ -5446,6 +5446,11 @@ gatsby-plugin-emotion@^5.0.0:
     "@babel/runtime" "^7.11.2"
     "@emotion/babel-preset-css-prop" "^11.0.0"
 
+gatsby-plugin-env-variables@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-env-variables/-/gatsby-plugin-env-variables-2.1.0.tgz#6204113d214e8854cbc9f6e90c6650c7035e277c"
+  integrity sha512-TNApeosvOcDxOoxZuzJ3rK4rbR2Fvzvweszn22U+z7bVtZ09G8/MtZg14l3HPXQBwqWjsWJH+PrRP+Z+7W7N/A==
+
 gatsby-plugin-page-creator@^3.12.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-3.12.0.tgz#79a74354e1e5a1400d7721aba5f6127d2de187b2"