Merge pull request graphql#939 from graphql/fix_search

Fix search for gatsby site

Author: orta

src/components/Footer/index.tsx

@@ -108,21 +108,6 @@ const Footer = ({sourcePath}: { sourcePath: string }) => {
         </section>
       </footer>
 
-      <script
-        type="text/javascript"
-        src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"
-      ></script>
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-        docsearch({
-          apiKey: 'd103541f3e6041148aade2e746ed4d61',
-          indexName: 'graphql',
-          inputSelector: '#algolia-search-input'
-        });
-      `,
-        }}
-      />
     </div>
   )
 }

src/components/Header/index.tsx

@@ -3,10 +3,7 @@ import { Link } from "gatsby"
 import HeaderLinks from "../HeaderLinks"
 import Search from "../Search"
 
-interface Props {
-  noSearch?: boolean
-}
-const Header = ({ noSearch }: Props) => {
+const Header = () => {
   return (
     <header>
       <section>
@@ -20,8 +17,8 @@ const Header = ({ noSearch }: Props) => {
           />
           GraphQL
         </Link>
-        <HeaderLinks section={"home"} />
-        {noSearch || <Search />}
+        <HeaderLinks/>
+        <Search />
       </section>
     </header>
   )

src/components/Link/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Link } from "gatsby"
 
 interface Props {
-  children: React.ReactNode
+  children?: React.ReactNode
   href: string,
   className?:string
 }

src/components/Search/index.tsx

@@ -1,10 +1,61 @@
-import React from "react"
+import React, {useEffect} from "react"
+
+// Added to the global runtime by the script tag further down the file.
+declare const docsearch: any | undefined
+
+
+
+// Runs the new docsearch function over possible search inputs
+const runDocsearchIfPossible = () => {
+    if (typeof docsearch !== 'undefined') {
+      const searches = ["algolia-search-input", "hero-search-input"]
+      for (const searchID of searches) {
+        if (!document.getElementById(searchID)) continue
+
+        docsearch({
+          apiKey: 'd103541f3e6041148aade2e746ed4d61',
+          indexName: 'graphql',
+          inputSelector: `#${searchID}`
+        });
+      }
+    }
+}
+
+const Search = ({searchID}: { searchID?: string}): JSX.Element => {
+  const searchInputID = searchID || "algolia-search-input"
+
+  // This extra bit of mis-direction ensures that non-essential code runs after
+  // the page is loaded
+  useEffect(() => {
+    runDocsearchIfPossible()
+
+    if (document.getElementById("algolia-search")) return
+
+    const searchScript = document.createElement('script');
+    searchScript.id = "algolia-search"
+    const searchCSS = document.createElement('link');
+
+    searchScript.src = "https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js";
+    searchScript.async = true;
+    searchScript.onload = () => {
+      if (typeof docsearch !== 'undefined') {
+        runDocsearchIfPossible()
+
+        searchCSS.rel = 'stylesheet';
+        searchCSS.href = 'https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css'
+        searchCSS.type = 'text/css';
+        document.body.appendChild(searchCSS);
+      }
+    }
+
+    document.body.appendChild(searchScript);
+  }, []);
+
 
-const Search = (): JSX.Element => {
   return (
     <div className="algolia-search-wrapper">
       <input
-        id="algolia-search-input"
+        id={searchInputID}
         type="text"
         placeholder="Search docs..."
         aria-label="Search docs"

src/pages/index.tsx

@@ -16,7 +16,7 @@ export default ({ pageContext }) => {
   return (
     <Layout className={"index"} title="GraphQL | A query language for your API" pageContext={pageContext}>
       <section className="fixedSearch">
-        <Search />
+        <Search searchID="hero-search-input" />
       </section>
       <Hero />
       <section className="lead">
@@ -39,4 +39,4 @@ export default ({ pageContext }) => {
       <WhosUsing />
     </Layout>
   )
-  }
+  }