Add Docusaurus search (#11135)
* Add Docusaurus search * Add Algolia configuration information * Trailing whitespace :( Co-authored-by: Ryan Shea <rmshea@users.noreply.github.com>
This commit is contained in:
parent
30b7b3d963
commit
cbf0b779d7
|
@ -43,6 +43,10 @@ module.exports = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
algolia: {
|
||||||
|
apiKey: "d58e0d68c875346d52645d68b13f3ac0",
|
||||||
|
indexName: "solana",
|
||||||
|
},
|
||||||
footer: {
|
footer: {
|
||||||
style: "dark",
|
style: "dark",
|
||||||
links: [
|
links: [
|
||||||
|
|
|
@ -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;
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue