Fce 3073/make doc search usable (#249)

Adds Algolia search + AI + AI sidepanel

<img width="1627" height="932" alt="image"
src="https://github.com/user-attachments/assets/9369a59d-1523-46c0-ae33-246ca5f289ad"
/>
<img width="1624" height="932" alt="image"
src="https://github.com/user-attachments/assets/bfd4d5a1-c34c-46e6-a3a5-260c325459a5"
/>
<img width="1687" height="1282" alt="image"
src="https://github.com/user-attachments/assets/844845bc-2c5c-4fbd-8e0a-59eb39c040c4"
/>

Author: PiotrWodecki

docusaurus.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
+import type { UserThemeConfig as DocSearchThemeConfig } from "@docsearch/docusaurus-adapter";
 import { BundledLanguage, bundledLanguages } from "shiki";
 import type { MDXPlugin } from "@docusaurus/mdx-loader";
 import rehypeShiki, { RehypeShikiOptions } from "@shikijs/rehype";
@@ -255,6 +256,18 @@ const config: Config = {
         },
       ],
     },
+    docsearch: {
+      appId: "IBX716Q0KT",
+      apiKey: "5dcaa347f57ca14f8cb59926164dd129",
+      indexName: "Fishjam",
+      contextualSearch: true,
+      searchPagePath: "search",
+      insights: false,
+      askAi: {
+        assistantId: "49fdf088-e614-4b89-86c2-da8c4b566260",
+        agentStudio: true,
+      },
+    },
     footer: {
       links: [
         {
@@ -295,23 +308,11 @@ const config: Config = {
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Software Mansion, Inc. All trademarks and copyrights belong to their respective owners.`,
     },
-  } satisfies Preset.ThemeConfig,
+  } satisfies Preset.ThemeConfig & DocSearchThemeConfig,
 
   plugins: [
     ["@docusaurus/plugin-client-redirects", { createRedirects }],
-    [
-      require.resolve("docusaurus-lunr-search"),
-      // exclude old versions and next from search
-      {
-        includeRoutes: [
-          "/docs/tutorials/*",
-          "/docs/how-to/*",
-          "/docs/explanation/*",
-          "/docs/integrations/*",
-          "/docs/api/*",
-        ],
-      },
-    ],
+    "@docsearch/docusaurus-adapter",
     [
       "docusaurus-plugin-typedoc",
       {

package.json

@@ -24,6 +24,7 @@
     "spellcheck:report": "yarn spellcheck --no-show-suggestions"
   },
   "dependencies": {
+    "@docsearch/docusaurus-adapter": "^4.0.0",
     "@docusaurus/core": "^3.10.0",
     "@docusaurus/faster": "^3.10.0",
     "@docusaurus/plugin-client-redirects": "^3.10.0",
@@ -42,7 +43,6 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "clsx": "^2.0.0",
-    "docusaurus-lunr-search": "3.6.0",
     "expo-camera": "^16.1.8",
     "fastify": "^5.4.0",
     "mock-import": "^4.2.1",

src/components/AskAiSidepanel.tsx

@@ -0,0 +1,22 @@
+import type { ReactElement } from "react";
+import { DocSearchSidepanel } from "@docsearch/react/sidepanel";
+import "@docsearch/css/dist/sidepanel.css";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+
+export default function AskAiSidepanel(): ReactElement {
+  const { siteConfig } = useDocusaurusContext();
+  const { appId, apiKey, indexName, askAi } = siteConfig.themeConfig
+    .docsearch as any;
+
+  return (
+    <DocSearchSidepanel
+      appId={appId}
+      apiKey={apiKey}
+      indexName={indexName}
+      assistantId={askAi.assistantId}
+      agentStudio={askAi.agentStudio}
+      button={{ variant: "floating" }}
+      panel={{ variant: "floating", side: "right" }}
+    />
+  );
+}

src/css/custom.css

@@ -91,4 +91,18 @@ h3 .badge {
   margin-left: 0.75rem;
 }
 
+/* Ask AI sidepanel — fix white color that Docusaurus overrides to transparent */
+.DocSearch-Sidepanel-Container {
+  --docsearch-sidepanel-primary: var(--ifm-color-primary);
+  --docsearch-sidepanel-primary-dark: var(--ifm-color-primary-dark);
+  --docsearch-sidepanel-primary-disabled: var(--ifm-color-primary-lightest);
+  --docsearch-sidepanel-white: #fff;
+}
+
+/* Floating trigger button — keep site branding */
+.DocSearch-SidepanelButton.floating {
+  color: white;
+  background: var(--ifm-color-primary);
+}
+
 @import url("./_shiki.css");

src/theme/Root.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function Root({ children }: { children: ReactNode }): ReactNode {
+  return (
+    <>
+      {children}
+      <BrowserOnly>
+        {() => {
+          const AskAiSidepanel =
+            require("../components/AskAiSidepanel").default;
+          return <AskAiSidepanel />;
+        }}
+      </BrowserOnly>
+    </>
+  );
+}