wrap existing search bar

This commit is contained in:
yujonglee 2024-07-26 21:46:36 +09:00
parent 3967007595
commit c54f23f936
4 changed files with 90 additions and 5 deletions

View file

@ -31,6 +31,7 @@ const config = {
[
require.resolve("@getcanary/docusaurus-pagefind"),
{
indexOnly: true,
styles: {
"--canary-color-primary-c": 0.1,
"--canary-color-primary-h": 270,

View file

@ -19,7 +19,7 @@
"@docusaurus/plugin-ideal-image": "^2.4.1",
"@docusaurus/preset-classic": "2.4.1",
"@getcanary/docusaurus-pagefind": "^0.0.11",
"@getcanary/web": "^0.0.53",
"@getcanary/web": "^0.0.54",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.2.1",
"docusaurus": "^1.14.7",

View file

@ -0,0 +1,84 @@
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-plugin-pagefind-canary");
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"),
import("@getcanary/web/components/canary-footer"),
import("@getcanary/web/components/canary-callout-calendly"),
import("@getcanary/web/components/canary-callout-discord"),
])
.then(() => setLoaded(true))
.catch(console.error);
}, []);
if (!loaded || !path) {
return null;
}
return (
<div
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "6px",
}}
>
<canary-root framework="docusaurus">
<canary-provider-pagefind
options={JSON.stringify({ ...options, path })}
>
<canary-modal>
<canary-trigger-logo slot="trigger"></canary-trigger-logo>
<canary-content slot="content">
<canary-search slot="search">
<canary-search-input slot="input"></canary-search-input>
<canary-search-results-group
slot="results"
groups="SDK:*;Proxy:/docs/(simple_proxy|proxy/.*)"
></canary-search-results-group>
<canary-callout-discord
slot="callout"
message="👋 Looking for help?"
url="https://discord.com/invite/wuPM9dRgDw"
keywords="discord,help,support,community"
></canary-callout-discord>
<canary-callout-calendly
slot="callout"
message="🚅 Interested in enterprise features?"
keywords="sso,enterprise,security,audit"
url="https://calendly.com/d/4mp-gd3-k5k/litellm-1-1-onboarding-chat"
></canary-callout-calendly>
</canary-search>
<canary-footer slot="footer"></canary-footer>
</canary-content>
</canary-modal>
</canary-provider-pagefind>
</canary-root>
<SearchBar {...props} />
</div>
);
}

View file

@ -1970,10 +1970,10 @@
micromatch "^4.0.7"
pagefind "^1.1.0"
"@getcanary/web@^0.0.53":
version "0.0.53"
resolved "https://registry.yarnpkg.com/@getcanary/web/-/web-0.0.53.tgz#f842b054465bca484e5f0df184e12248106a1234"
integrity sha512-/vlzQJlF5J6smAFnND+pu91IN26w3sbLh8IA0YaKC/MQJr8ubh74vEgLS5WrwwjBUCEXYweQdPIOz2cbA/64Zw==
"@getcanary/web@^0.0.54":
version "0.0.54"
resolved "https://registry.yarnpkg.com/@getcanary/web/-/web-0.0.54.tgz#a80d3a93b79beae3216e28391f35da32cac011c1"
integrity sha512-6ghmuusVq7pWNMj3SonRJ9Ncn0Yz2GxdT0pb7LLUJRdQWyxeP5UmnrhQ3jpq4NKzSqaIb8nK4M61Wikfbyr24Q==
dependencies:
"@floating-ui/dom" "^1.6.8"
"@lit-labs/observers" "^2.0.2"