fixes search

Author: avb-is-me

docusaurus.config.js

@@ -51,7 +51,7 @@ const config = {
   projectName: 'docusaurus', // Usually your repo name.
   plugins: [
     'docusaurus-plugin-sass',
-    // "@orama/plugin-docusaurus",
+    '@orama/plugin-docusaurus-v3',
     // '@docusaurus/plugin-content-docs',
     [
       'docusaurus-plugin-openapi-docs',

package.json

@@ -27,8 +27,8 @@
     "@lyrasearch/plugin-docusaurus": "^0.1.0",
     "@mdx-js/react": "^3.0.1",
     "@monaco-editor/react": "^4.6.0",
-    "@orama/orama": "^2.1.0",
-    "@orama/plugin-docusaurus": "^2.1.0",
+    "@orama/plugin-docusaurus-v3": "^2.0.19",
+    "@orama/searchbox": "1.0.0-rc33",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.0.3",

src/theme/SearchBar/index.css

@@ -0,0 +1,11 @@
+.DocSearch-Button {
+  -webkit-user-select: none;
+  user-select: none
+}
+
+.DocSearch-Button kbd {
+  border: 0;
+  box-shadow: none;
+  font-size: .8rem !important;
+  padding: 0 !important;
+}

src/theme/SearchBar/index.tsx

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import React from 'react'
+import { useLocation } from '@docusaurus/router'
+import { useActiveVersion, useVersions } from '@docusaurus/plugin-content-docs/client'
+import { useDocsPreferredVersion } from '@docusaurus/theme-common'
+import { usePluginData } from '@docusaurus/useGlobalData'
+import { SearchBox, SearchButton } from '@orama/searchbox'
+import { useOrama } from './useOrama'
+
+interface PluginData {
+  searchData: {
+    current: { data: ArrayBuffer } | null
+  }
+  endpoint: { url: string; key: string } | null
+  analytics: { apiKey: string; indexId: string; enabled: boolean } | null
+  docsInstances: string[]
+}
+
+export function OramaSearchNoDocs() {
+  const { searchBoxConfig, colorMode } = useOrama()
+
+  return (
+    <div>
+      <SearchButton colorScheme={colorMode} className="DocSearch-Button" />
+      {searchBoxConfig && (
+        <SearchBox
+          {...searchBoxConfig}
+          colorScheme={colorMode}
+          searchParams={{
+            where: {
+              version: { eq: 'current' }
+            }
+          }}
+          facetProperty="category"
+        />
+      )}
+    </div>
+  )
+}
+
+export function OramaSearchWithDocs({ pluginId }: { pluginId: string }) {
+  const versions = useVersions(pluginId)
+  const activeVersion = useActiveVersion(pluginId)
+  const { preferredVersion } = useDocsPreferredVersion(pluginId)
+  const currentVersion = activeVersion || preferredVersion || versions[0]
+  const { searchBoxConfig, colorMode } = useOrama()
+  const searchParams = {
+    ...(currentVersion && {
+      where: {
+        version: { eq: currentVersion.name }
+      }
+    })
+  }
+
+  return (
+    <div>
+      <SearchButton colorScheme={colorMode} className="DocSearch-Button" />
+      {searchBoxConfig && (
+        <SearchBox {...searchBoxConfig} colorScheme={colorMode} searchParams={searchParams} facetProperty="category" />
+      )}
+    </div>
+  )
+}
+
+export default function OramaSearchWrapper() {
+  const { pathname } = useLocation()
+  const { docsInstances }: PluginData = usePluginData('@orama/plugin-docusaurus-v3') as PluginData
+  const pluginId = docsInstances.filter((id: string) => pathname.includes(id))[0] || docsInstances[0]
+  if (!pluginId) {
+    return <OramaSearchNoDocs />
+  }
+  return <OramaSearchWithDocs pluginId={pluginId} />
+}

src/theme/SearchBar/useOrama.ts

@@ -0,0 +1,83 @@
+// @ts-nocheck
+import { useEffect, useState } from 'react'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import useIsBrowser from '@docusaurus/useIsBrowser'
+import { useColorMode } from '@docusaurus/theme-common'
+import { usePluginData } from '@docusaurus/useGlobalData'
+import { ungzip } from 'pako'
+import { presets } from '@orama/searchbox'
+import { OramaClient } from '@oramacloud/client'
+import { create, insertMultiple } from '@orama/orama'
+import { pluginAnalytics } from '@orama/plugin-analytics'
+import '@orama/searchbox/dist/index.css'
+
+export const useOrama = () => {
+  const [searchBoxConfig, setSearchBoxConfig] = useState(null)
+  const { colorMode } = useColorMode()
+  const { searchData, endpoint, analytics }: PluginData = usePluginData('@orama/plugin-docusaurus-v3') as PluginData
+
+  const baseURL = useBaseUrl('orama-search-index-current.json.gz')
+  const isBrowser = useIsBrowser()
+  useEffect(() => {
+    async function loadOrama() {
+      if (endpoint?.url) {
+        setSearchBoxConfig({
+          oramaInstance: new OramaClient({
+            endpoint: endpoint.url,
+            api_key: endpoint.key
+          })
+        })
+      } else {
+        let buffer
+
+        if (searchData?.current) {
+          buffer = searchData.current.data
+        } else {
+          const searchResponse = await fetch(baseURL)
+
+          if (searchResponse.status === 0) {
+            throw new Error(`Network error: ${await searchResponse.text()}`)
+          } else if (searchResponse.status !== 200) {
+            throw new Error(`HTTP error ${searchResponse.status}: ${await searchResponse.text()}`)
+          }
+
+          buffer = await searchResponse.arrayBuffer()
+        }
+
+        const deflated = ungzip(buffer, { to: 'string' })
+        const parsedDeflated = JSON.parse(deflated)
+
+        const db = await create({
+          schema: { ...presets.docs.schema, version: 'enum' },
+          plugins: [
+            ...(analytics
+              ? [
+                  pluginAnalytics({
+                    apiKey: analytics.apiKey,
+                    indexId: analytics.indexId,
+                    enabled: analytics.enabled
+                  })
+                ]
+              : [])
+          ]
+        })
+
+        await insertMultiple(db, Object.values(parsedDeflated.docs.docs))
+
+        setSearchBoxConfig({
+          oramaInstance: db
+        })
+      }
+    }
+
+    if (!isBrowser) {
+      return
+    }
+
+    loadOrama().catch((error) => {
+      console.error('Cannot load search index.', error)
+    })
+  }, [isBrowser])
+
+  return { searchBoxConfig, colorMode }
+}