From c54f23f936e45da59c20bf61f20e2f9a89c31f9f Mon Sep 17 00:00:00 2001
From: yujonglee <yujonglee.dev@gmail.com>
Date: Fri, 26 Jul 2024 21:46:36 +0900
Subject: [PATCH] wrap existing search bar

---
 docs/my-website/docusaurus.config.js   |  1 +
 docs/my-website/package.json           |  2 +-
 docs/my-website/src/theme/SearchBar.js | 84 ++++++++++++++++++++++++++
 docs/my-website/yarn.lock              |  8 +--
 4 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 docs/my-website/src/theme/SearchBar.js

diff --git a/docs/my-website/docusaurus.config.js b/docs/my-website/docusaurus.config.js
index 7974f613c..0ae35686c 100644
--- a/docs/my-website/docusaurus.config.js
+++ b/docs/my-website/docusaurus.config.js
@@ -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,
diff --git a/docs/my-website/package.json b/docs/my-website/package.json
index 7628a862f..6fc4ea23c 100644
--- a/docs/my-website/package.json
+++ b/docs/my-website/package.json
@@ -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",
diff --git a/docs/my-website/src/theme/SearchBar.js b/docs/my-website/src/theme/SearchBar.js
new file mode 100644
index 000000000..09ae04630
--- /dev/null
+++ b/docs/my-website/src/theme/SearchBar.js
@@ -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>
+  );
+}
diff --git a/docs/my-website/yarn.lock b/docs/my-website/yarn.lock
index c00d4c511..7e0b432a5 100644
--- a/docs/my-website/yarn.lock
+++ b/docs/my-website/yarn.lock
@@ -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"