fix: improvements to Algolia DocSearch (#357)

What

Changes selectors of API references to improve DocSearch results
Implements custom navigation for DocSearch in both API ref and docs. (Uses goTo method for in page navigation, Gatsby navigate for navigation within Gatsby site, changes URL's to API reference to make use of methods implemented to provide better metadata etc.)
Implements a new way to make all HTML available in API reference without need the crawler to have Javascript enabled which should allow Algolia to crawl our site faster.
Why

To provide users with a good search experience within our docs and API reference
Testing

Tested using a local setup of the Algolia crawler

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

@@ -20,9 +20,11 @@ const Content = ({ data, api }) => {
           },
         }}
       >
-        {data.sections.map((s, i) => {
-          return <Section key={i} data={s} />
-        })}
+        <main className="DocSearch-content">
+          {data.sections.map((s, i) => {
+            return <Section key={i} data={s} />
+          })}
+        </main>
       </Box>
     </Flex>
   )

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(true)
+  const [isExpanded, setIsExpanded] = useState(false)
   const { openSections, updateSection, updateMetadata } = useContext(
     NavigationContext
   )
@@ -51,10 +51,6 @@ const Section = ({ data }) => {
     scrollIntoView()
   }
 
-  useEffect(() => {
-    setIsExpanded(false)
-  }, [])
-
   useEffect(() => {
     const shouldOpen = openSections.includes(
       convertToKebabCase(section.section_name)
@@ -82,11 +78,7 @@ const Section = ({ data }) => {
   }, [isInView])
 
   return (
-    <main
-      ref={sectionRef}
-      id={convertToKebabCase(section.section_name)}
-      className="DocSearch-content"
-    >
+    <section ref={sectionRef} id={convertToKebabCase(section.section_name)}>
       <Box
         sx={{
           borderBottom: "hairline",
@@ -151,7 +143,7 @@ const Section = ({ data }) => {
               ) : null}
             </Flex>
           </ResponsiveContainer>
-          {!isExpanded ? (
+          {!isExpanded && (
             <Flex
               sx={{
                 justifyContent: "center",
@@ -173,34 +165,39 @@ const Section = ({ data }) => {
                 SHOW <ChevronDown fill={"dark"} styles={{ mr: "-10px" }} />
               </Button>
             </Flex>
-          ) : (
-            <Box mt={4}>
-              {section.paths.map((p, i) => {
-                return (
-                  <Flex
-                    key={i}
-                    sx={{
-                      flexDirection: "column",
-                    }}
-                  >
-                    {p.methods.map((m, i) => {
-                      return (
-                        <Method
-                          key={i}
-                          data={m}
-                          section={convertToKebabCase(section.section_name)}
-                          pathname={p.name}
-                        />
-                      )
-                    })}
-                  </Flex>
-                )
-              })}
-            </Box>
           )}
+          <Box
+            id="method-container"
+            mt={4}
+            sx={{
+              display: isExpanded ? "block" : "none",
+            }}
+          >
+            {section.paths.map((p, i) => {
+              return (
+                <Flex
+                  key={i}
+                  sx={{
+                    flexDirection: "column",
+                  }}
+                >
+                  {p.methods.map((m, i) => {
+                    return (
+                      <Method
+                        key={i}
+                        data={m}
+                        section={convertToKebabCase(section.section_name)}
+                        pathname={p.name}
+                      />
+                    )
+                  })}
+                </Flex>
+              )
+            })}
+          </Box>
         </Flex>
       </Box>
-    </main>
+    </section>
   )
 }