forget to keep existing search - bring it back

This commit is contained in:
yujonglee 2024-08-30 21:25:38 -04:00
parent d87e2f92e9
commit 2c10f62763
4 changed files with 79 additions and 78 deletions

View file

@ -48,6 +48,7 @@ const config = {
{ name: "Providers", pattern: "/docs/providers/**" },
{ name: "Proxy", pattern: "/docs/proxy/**" }
],
indexOnly: true,
},
],
],

View file

@ -0,0 +1,78 @@
import React from "react";
import SearchBar from "@theme-original/SearchBar";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { usePluginData } from "@docusaurus/useGlobalData";
export default function SearchBarWrapper(props) {
const { siteConfig } = useDocusaurusContext();
const { options } = usePluginData("docusaurus-theme-search-pagefind");
const [path, setPath] = React.useState("");
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
setPath(`${siteConfig.baseUrl}pagefind/pagefind.js`);
}, [siteConfig]);
React.useEffect(() => {
Promise.all([
import("@getcanary/web/components/canary-root"),
import("@getcanary/web/components/canary-provider-pagefind"),
import("@getcanary/web/components/canary-modal"),
import("@getcanary/web/components/canary-trigger-logo"),
import("@getcanary/web/components/canary-content"),
import("@getcanary/web/components/canary-search"),
import("@getcanary/web/components/canary-search-input"),
import("@getcanary/web/components/canary-search-results-tabs"),
])
.then(() => setLoaded(true))
.catch(console.error);
}, []);
return (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "6px",
}}
>
{!loaded || !path ? (
<button
style={{
fontSize: "2rem",
backgroundColor: "transparent",
border: "none",
outline: "none",
padding: "0",
marginRight: "6px",
}}
>
🐤
</button>
) : (
<canary-root framework="docusaurus">
<canary-provider-pagefind options={JSON.stringify(options)}>
<canary-modal>
<canary-trigger-logo slot="trigger"></canary-trigger-logo>
<canary-content slot="content">
<canary-search slot="mode">
<canary-search-input slot="input"></canary-search-input>
<canary-search-results-tabs
slot="body"
tabs={JSON.stringify(options.tabs)}
group
></canary-search-results-tabs>
</canary-search>
</canary-content>
</canary-modal>
</canary-provider-pagefind>
</canary-root>
)}
<SearchBar {...props} />
</div>
);
}

View file

@ -1,46 +0,0 @@
import React from "react";
export default function Canary({ options }) {
const [loaded, setLoaded] = React.useState(false);
React.useEffect(() => {
Promise.all([
import("@getcanary/web/components/canary-root"),
import("@getcanary/web/components/canary-provider-pagefind"),
import("@getcanary/web/components/canary-modal"),
import("@getcanary/web/components/canary-trigger-logo"),
import("@getcanary/web/components/canary-content"),
import("@getcanary/web/components/canary-search"),
import("@getcanary/web/components/canary-search-input"),
import("@getcanary/web/components/canary-search-results-tabs"),
])
.then(() => setLoaded(true))
.catch((e) =>
console.error("Maybe you forgot to install '@getcanary/web'?", e),
);
}, []);
if (!loaded) {
return null;
}
return (
<canary-root framework="docusaurus">
<canary-provider-pagefind options={JSON.stringify(options)}>
<canary-modal>
<canary-trigger-logo slot="trigger"></canary-trigger-logo>
<canary-content slot="content">
<canary-search slot="mode">
<canary-search-input slot="input"></canary-search-input>
<canary-search-results-tabs
slot="body"
tabs={JSON.stringify(options.tabs)}
group
></canary-search-results-tabs>
</canary-search>
</canary-content>
</canary-modal>
</canary-provider-pagefind>
</canary-root>
);
}

View file

@ -1,32 +0,0 @@
import React from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { usePluginData } from "@docusaurus/useGlobalData";
import Canary from "./Canary";
export default function Index() {
const { siteConfig } = useDocusaurusContext();
const [path, setPath] = React.useState("");
React.useEffect(() => {
setPath(`${siteConfig.baseUrl}pagefind/pagefind.js`);
}, [siteConfig]);
const { options } = usePluginData("docusaurus-theme-search-pagefind");
const { styles, ...rest } = options;
React.useEffect(() => {
if (options.styles) {
Object.entries(options.styles).forEach(([key, value]) => {
document.body.style.setProperty(key, value);
});
}
}, [options]);
if (!path) {
return null;
}
return <Canary options={{ ...rest, path: path }} />;
}