Add Docusaurus search (#11135)

* Add Docusaurus search

* Add Algolia configuration information

* Trailing whitespace :(

Co-authored-by: Ryan Shea <rmshea@users.noreply.github.com>

docs/docusaurus.config.js

@@ -43,6 +43,10 @@ module.exports = {
         },
       ],
     },
+    algolia: {
+      apiKey: "d58e0d68c875346d52645d68b13f3ac0",
+      indexName: "solana",
+    },
     footer: {
       style: "dark",
       links: [

docs/src/theme/SearchBar/index.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useRef,
+  useCallback,
+} from "react";
+import classnames from "classnames";
+
+import DocusaurusContext from "@docusaurus/context";
+
+import "./styles.css";
+
+const Search = (props) => {
+  const [isEnabled, setIsEnabled] = useState(true);
+  const searchBarRef = useRef(null);
+  const context = useContext(DocusaurusContext);
+
+  useEffect(() => {
+    const { siteConfig = {} } = context;
+    const {
+      themeConfig: { algolia },
+    } = siteConfig;
+
+    // https://github.com/algolia/docsearch/issues/352
+    const isClient = typeof window !== "undefined";
+    if (isClient) {
+      import("docsearch.js").then(({ default: docsearch }) => {
+        docsearch({
+          appId: algolia.appId,
+          apiKey: algolia.apiKey,
+          indexName: algolia.indexName,
+          inputSelector: "#search_input_react",
+          algoliaOptions: algolia.algoliaOptions,
+        });
+      });
+    } else {
+      console.warn("Search has failed to load and now is being disabled");
+      setIsEnabled(false);
+    }
+  }, []);
+
+  const toggleSearchIconClick = useCallback(
+    (e) => {
+      if (!searchBarRef.current.contains(e.target)) {
+        searchBarRef.current.focus();
+      }
+
+      props.handleSearchBarToggle(!props.isSearchBarExpanded);
+    },
+    [props.isSearchBarExpanded]
+  );
+
+  return isEnabled ? (
+    <div className="navbar__search" key="search-box">
+      <span
+        role="button"
+        className={classnames("search-icon", {
+          "search-icon-hidden": props.isSearchBarExpanded,
+        })}
+        onClick={toggleSearchIconClick}
+        onKeyDown={toggleSearchIconClick}
+        tabIndex={0}
+      />
+      <input
+        id="search_input_react"
+        type="search"
+        placeholder="Search"
+        aria-label="Search"
+        className={classnames(
+          "navbar__search-input",
+          { "search-bar-expanded": props.isSearchBarExpanded },
+          { "search-bar": !props.isSearchBarExpanded }
+        )}
+        onFocus={toggleSearchIconClick}
+        onBlur={toggleSearchIconClick}
+        ref={searchBarRef}
+      />
+    </div>
+  ) : null;
+};
+
+export default Search;