feat: integrate docsearch v4 beta with ask ai

docs/concepts/05-merkle-airdrops.mdx

@@ -103,7 +103,6 @@ date fund it with the airdropped tokens.
    gas fees.
 2. **You keep full control over unclaimed Tokens**. If a recipient doesn't claim their airdrop, it's not created, and
    you remain in full control over their allocation.
-
    - This applies only if the campaign has an expiration date. If there is no expiration date, you can only clawback
      during the grace period, and the recipients can claim their airdrop at any time in the future.
 

docusaurus.config.ts

@@ -4,6 +4,7 @@ import { themes as prismThemes } from "prism-react-renderer";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
+import { Algolia } from "./src/constants";
 
 const config: Config = {
   baseUrl: "/",
@@ -19,6 +20,23 @@ const config: Config = {
   tagline: "Documentation and guides for Sablier",
   title: "Sablier Docs",
   url: "https://docs.sablier.com",
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "stylesheet",
+        href: "https://cdn.jsdelivr.net/npm/@docsearch/css@beta",
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "preconnect",
+        href: `https://${Algolia.APP_ID}-dsn.algolia.net`,
+        crossorigin: "true",
+      },
+    },
+  ],
   presets: [
     [
       "classic",
@@ -243,11 +261,6 @@ const config: Config = {
   staticDirectories: ["static"],
   themes: ["@docusaurus/theme-mermaid", "docusaurus-theme-github-codeblock"],
   themeConfig: {
-    algolia: {
-      appId: "9L7N2RKHWE",
-      apiKey: "4fc960889335dad720b725a02667d46a",
-      indexName: "sablierdocs",
-    },
     codeblock: {
       showGithubLink: false,
     },

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.24",
-    "@cookbookdev/docsbot": "^4.25",
+    "@docsearch/react": "^4.0.0-beta.5",
     "@docusaurus/core": "^3.8",
     "@docusaurus/plugin-client-redirects": "^3.8",
     "@docusaurus/plugin-vercel-analytics": "^3.8",

src/constants.ts

@@ -1,3 +1,11 @@
+/** @see  https://dashboard.algolia.com/apps/9L7N2RKHWE */
+export const Algolia = {
+  APP_ID: "9L7N2RKHWE",
+  ASSISTANT_ID: "vZ3Iz7SRYcv1",
+  INDEX_NAME: "sablierdocs",
+  SEARCH_API_KEY: "4fc960889335dad720b725a02667d46a",
+};
+
 export const Links = {
   Forms: {
     CALL: "https://forms.gle/6z3XyfSLXDoRghG99",

src/css/custom.css

@@ -4,6 +4,8 @@
  * work well for content-centric websites.
  */
 
+@import "@docsearch/css";
+
 /* You can override the default Infima variables here. */
 :root {
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -20,8 +22,9 @@
 
   --ifm-container-width: var(--sablier-size-content);
   --ifm-footer-background-color: var(--sablier-color-dark100);
-  --ifm-font-family-base: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
-    sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  --ifm-font-family-base:
+    "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
+    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
   --ifm-navbar-background-color: var(--sablier-color-background);
 }
@@ -93,6 +96,25 @@ html[data-theme="dark"] .alert--info {
   );
 }
 
+.DocSearch-Button {
+  width: 200px !important;
+  max-width: 200px !important;
+}
+
+@media (max-width: 768px) {
+  .DocSearch-Button {
+    width: 150px !important;
+    max-width: 150px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .DocSearch-Button {
+    width: 120px !important;
+    max-width: 120px !important;
+  }
+}
+
 .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.1);
   display: block;

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import Layout from "@theme/Layout";
-import { AskCookbook } from "../components/organisms/AskCookbook";
 import Header from "../components/organisms/Header";
 import Socials from "../components/organisms/Socials";
 
@@ -39,7 +38,6 @@ export default function Home() {
         <Divider />
         <Socials />
       </Wrapper>
-      <AskCookbook />
     </Layout>
   );
 }

src/theme/SearchBar.js

@@ -0,0 +1,14 @@
+import { Algolia } from "../constants";
+import "@docsearch/css";
+import { DocSearch } from "@docsearch/react";
+
+export default function SearchBarWrapper() {
+	return (
+		<DocSearch
+			appId={Algolia.APP_ID}
+			apiKey={Algolia.SEARCH_API_KEY}
+			askAi={Algolia.ASSISTANT_ID}
+			indexName={Algolia.INDEX_NAME}
+		/>
+	);
+}