Add @docsearch/react package and integrate AlgoliaSearch component in…

…to header.astro

package.json

@@ -17,6 +17,7 @@
     "@astrojs/tailwind": "^5.0.4",
     "@docsearch/css": "^3.6.0",
     "@docsearch/js": "^3.6.0",
+    "@docsearch/react": "^3.6.0",
     "@fontsource-variable/jetbrains-mono": "^5.0.18",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",

src/components/docs/algolia-search.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { DocSearch } from "@docsearch/react";
+import "@docsearch/css";
+import "../../styles/globals.css";
+const AlgoliaSearch = () => {
+  return (
+    <DocSearch
+      appId="GIAYK50IZ2"
+      apiKey="ab27356463ffa13e3d75727cd71bfc69"
+      indexName="akash"
+    />
+  );
+};
+
+export default AlgoliaSearch;

src/components/docs/header.astro

@@ -7,6 +7,7 @@ import AkashDocsLogo from "./akash-docs-logo.astro";
 import ToggleNav from "./toggle-nav.astro";
 import DarkModeToggle from "../dark-mode-toggle.astro";
 import ButtonLink from "../ui/button-link.astro";
+import AlgoliaSearch from "./algolia-search.jsx";
 import Logo from "@/components/ui/logo.astro";
 import { DiscordIcon, GithubIcon, TwitterIcon } from "../header/icons";
 const { nav } = Astro.props;
@@ -23,7 +24,8 @@ const pathname = new URL(Astro.request.url).pathname;
         </a>
       </div>
       <div>
-        <div id="docsearch"></div>
+        <!-- <div id="docsearch"></div> -->
+        <AlgoliaSearch client:only />
       </div>
     </div>
     <div class="hidden flex-shrink-0 md:flex md:gap-x-[14px]">
@@ -67,7 +69,7 @@ const pathname = new URL(Astro.request.url).pathname;
   <!-- <ToggleNav nav={nav} /> -->
 </nav>
 
-<script>
+<!-- <script >
   import docsearch from "@docsearch/js";
 
   import "@docsearch/css";
@@ -78,4 +80,4 @@ const pathname = new URL(Astro.request.url).pathname;
     apiKey: "ab27356463ffa13e3d75727cd71bfc69",
     indexName: "akash",
   });
-</script>
+</script> -->

src/styles/globals.css

@@ -50,9 +50,9 @@
     /* .ec-theme-dark-plus {
       display: none !important;
     } */
-    --docsearch-primary-color: #ff414c;
-    --docsearch-searchbox-focus-background: hsl(0 0% 100%);
-    --docsearch-modal-background: hsl(0 0% 100%);
+    --docsearch-primary-color: #ff414c !important;
+    --docsearch-searchbox-focus-background: hsl(0 0% 100%) !important;
+    --docsearch-modal-background: hsl(0 0% 100%) !important;
   }
 
   .dark {
@@ -76,8 +76,20 @@
     --three-dots-bg: #515151;
     --default-border: 0 0% 18%;
 
-    --docsearch-searchbox-focus-background: hsl(0 0% 14%);
-    --docsearch-modal-background: hsl(0 0% 14%);
+    --docsearch-searchbox-focus-background: hsl(0 0% 14%) !important;
+    --docsearch-modal-background: hsl(0 0% 14%) !important;
+    --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 26%, 0.5),
+      0 3px 8px 0 #555a64 !important;
+    --docsearch-key-gradient: linear-gradient(
+      -225deg,
+      #252525,
+      #202020
+    ) !important;
+    --docsearch-key-shadow: inset 0 -2px 0 0 #383838, inset 0 0 1px 1px #4d4d4d,
+      0 1px 2px 1px rgba(30, 35, 90, 0.4) !important;
+    --docsearch-footer-background: hsl(0 0% 11%) !important;
+    --docsearch-footer-shadow: 0 -1px 0 0 #181818 0 -3px 6px 0
+      rgba(69, 98, 155, 0.12) !important;
   }
 }
 
@@ -222,8 +234,8 @@
 /* doc-search */
 
 .DocSearch-Button {
-  border: 1px solid hsl(var(--default-border));
-  border-radius: 4px;
+  border: 1px solid hsl(var(--default-border)) !important;
+  border-radius: 4px !important;
   height: 38px;
   /* background-color: hsl(var(--background2)); */
   width: 22rem;
@@ -241,5 +253,5 @@
 }
 
 .DocSearch-Button-Placeholder {
-  color: hsl(var(--para));
+  color: hsl(var(--para)) !important;
 }