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: {
|
||||
style: "dark",
|
||||
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