feat: add search on the client side

solidsnakedev · solidsnakedev · commit f6191f127730 · 2025-08-25T14:39:20.000-06:00
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,5 +1,7 @@
 import "@/app/global.css"
-import { RootProvider } from "fumadocs-ui/provider"
+// import { RootProvider } from "fumadocs-ui/provider"
+import { Provider } from "./provider"
+
 import { Inter } from "next/font/google"
 
 const inter = Inter({
@@ -10,7 +12,7 @@ export default function Layout({ children }: LayoutProps<"/">) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
       <body className="flex flex-col min-h-screen">
-        <RootProvider>{children}</RootProvider>
+        <Provider>{children}</Provider>
       </body>
     </html>
   )
diff --git a/docs/app/provider.tsx b/docs/app/provider.tsx
@@ -0,0 +1,17 @@
+"use client"
+import { RootProvider } from "fumadocs-ui/provider"
+// your custom dialog
+import SearchDialog from "@/components/search"
+import type { ReactNode } from "react"
+
+export function Provider({ children }: { children: ReactNode }) {
+  return (
+    <RootProvider
+      search={{
+        SearchDialog
+      }}
+    >
+      {children}
+    </RootProvider>
+  )
+}
diff --git a/docs/components/search.tsx b/docs/components/search.tsx
@@ -0,0 +1,46 @@
+"use client"
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps
+} from "fumadocs-ui/components/dialog/search"
+import { useDocsSearch } from "fumadocs-core/search/client"
+import { create } from "@orama/orama"
+import { useI18n } from "fumadocs-ui/contexts/i18n"
+
+function initOrama() {
+  return create({
+    schema: { _: "string" },
+    // https://docs.orama.com/docs/orama-js/supported-languages
+    language: "english"
+  })
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n() // (optional) for i18n
+  const { search, setSearch, query } = useDocsSearch({
+    type: "static",
+    initOrama,
+    locale
+  })
+
+  return (
+    <SearchDialog search={search} onSearchChange={setSearch} isLoading={query.isLoading} {...props}>
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList items={query.data !== "empty" ? query.data : null} />
+      </SearchDialogContent>
+    </SearchDialog>
+  )
+}
diff --git a/docs/package.json b/docs/package.json
@@ -13,6 +13,7 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@orama/orama": "^3.1.11",
     "fumadocs-core": "15.7.2",
     "fumadocs-mdx": "11.8.0",
     "fumadocs-ui": "15.7.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
