Update docusaurus plugins (v2 & v3) with new React searchbox (0.0.26)

packages/plugin-docusaurus-v3/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@orama/plugin-docusaurus-v3",
   "version": "2.1.1",
-  "description": "Docusaurus plugin for local search powered by orama",
+  "description": "Docusaurus plugin for local search powered by Orama",
   "keywords": ["orama", "docusaurus"],
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/orama/orama/issues"
+    "url": "https://github.com/askorama/orama/issues"
   },
-  "homepage": "https://docs.oramasearch.com/open-source/plugins/plugin-docusaurus.html",
+  "homepage": "https://docs.orama.com/cloud/data-sources/native-integrations/docusaurus",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/orama/orama.git"
+    "url": "git+https://github.com/askorama/orama.git"
   },
   "sideEffects": false,
   "main": "dist/index.js",
@@ -23,10 +23,11 @@
   "dependencies": {
     "@orama/highlight": "^0.1.5",
     "@orama/orama": "workspace:*",
+    "@orama/react-components": "^0.0.26",
     "@orama/plugin-analytics": "workspace:*",
     "@orama/plugin-parsedoc": "workspace:*",
-    "@orama/searchbox": "^1.0.0-rc53",
-    "@oramacloud/client": "^1.0.14",
+    "@orama/switch": "workspace:*",
+    "@oramacloud/client": "^1.3.16",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
     "jsdom": "^23.2.0",

packages/plugin-docusaurus-v3/src/index.ts

@@ -4,12 +4,11 @@ import { cp } from 'node:fs/promises'
 import { gzip } from 'pako'
 import { resolve } from 'node:path'
 // @ts-ignore
-import { presets } from '@orama/searchbox'
 import { create, insertMultiple, save } from '@orama/orama'
 import { JSDOM } from 'jsdom'
 import MarkdownIt from 'markdown-it'
 import matter from 'gray-matter'
-import { createSnapshot, deployIndex, fetchEndpointConfig } from './utils'
+import { createSnapshot, deployIndex, DOCS_PRESET_SCHEMA, fetchEndpointConfig } from "./utils"
 import { parseMarkdownHeadingId, writeMarkdownHeadingId } from '@docusaurus/utils'
 
 enum DeployType {
@@ -31,7 +30,8 @@ type PluginOptions = {
     apiKey: string
     indexId: string
   }
-  cloud?: CloudConfig
+  cloud?: CloudConfig,
+  searchbox?: { [key:string]: any }
 }
 
 export default function OramaPluginDocusaurus(
@@ -60,7 +60,7 @@ export default function OramaPluginDocusaurus(
 
     async allContentLoaded({ actions, allContent }) {
       const isDevelopment =
-        process.env.NODE_ENV === 'development' || (options.cloud && !options.cloud?.oramaCloudAPIKey)
+        process.env.NODE_ENV === 'development' || !options.cloud?.oramaCloudAPIKey || !options.cloud?.deploy
       const docsInstances: string[] = []
       const oramaCloudAPIKey = options.cloud?.oramaCloudAPIKey
       const searchDataConfig = [
@@ -161,7 +161,8 @@ export default function OramaPluginDocusaurus(
         actions.setGlobalData({
           searchData: Object.fromEntries([['current', readFileSync(indexPath(ctx.generatedFilesDir, 'current'))]]),
           docsInstances,
-          availableVersions: versions
+          availableVersions: versions,
+          searchBoxCustomConfig: options.searchbox ?? {}
         })
       } else {
         const deployConfig = options.cloud && {
@@ -181,6 +182,7 @@ export default function OramaPluginDocusaurus(
           docsInstances,
           availableVersions: versions,
           analytics: options.analytics,
+          searchBoxCustomConfig: options.searchbox ?? {},
           endpoint: {
             url: endpointConfig?.endpoint,
             key: endpointConfig?.public_api_key
@@ -328,7 +330,7 @@ async function deployData({
     }
   } else {
     const db = await create({
-      schema: { ...presets.docs.schema, version: 'enum' }
+      schema: { ...DOCS_PRESET_SCHEMA, version: 'enum' }
     })
 
     await insertMultiple(db, oramaDocs as any)

packages/plugin-docusaurus-v3/src/theme/SearchBar/index.tsx

@@ -1,73 +1,74 @@
 // @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[]
-}
+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 { OramaSearchBox, OramaSearchButton } from "@orama/react-components"
+import { useOrama, PluginData } from "./useOrama"
 
 export function OramaSearchNoDocs() {
-  const { searchBoxConfig, colorMode } = useOrama()
+	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>
-  )
+	return (
+		<div>
+			<OramaSearchButton colorScheme={colorMode} className="DocSearch-Button" />
+			{searchBoxConfig.basic && (
+				<OramaSearchBox
+					{...searchBoxConfig.basic}
+					{...searchBoxConfig.custom}
+					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 }
-      }
-    })
-  }
+	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>
-  )
+	return (
+		<div>
+			<OramaSearchButton colorScheme={colorMode} className="DocSearch-Button" />
+			{searchBoxConfig.basic && (
+				<OramaSearchBox
+					{...searchBoxConfig.basic}
+					{...searchBoxConfig.custom}
+					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} />
+	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} />
 }

packages/plugin-docusaurus-v3/src/theme/SearchBar/useOrama.ts

@@ -1,31 +1,45 @@
-// @ts-nocheck
+//@ts-nocheck
 import { useEffect, useState } from 'react'
+import { Switch } from '@orama/switch'
 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'
+import { DOCS_PRESET_SCHEMA } from '../../utils'
+
+export interface PluginData {
+  searchData: {
+    current: { data: ArrayBuffer } | null
+  },
+  searchBoxCustomConfig?: { [key:string]: any }
+  endpoint: { url: string; key: string } | null
+  analytics: { apiKey: string; indexId: string; enabled: boolean } | null
+  docsInstances: string[]
+}
 
 export const useOrama = () => {
-  const [searchBoxConfig, setSearchBoxConfig] = useState(null)
+  const [searchBoxConfig, setSearchBoxConfig] = useState({
+    basic: null,
+    custom: null
+  })
   const { colorMode } = useColorMode()
-  const { searchData, endpoint, analytics }: PluginData = usePluginData('@orama/plugin-docusaurus-v3') as PluginData
+  const { searchData, endpoint, analytics, searchBoxCustomConfig }: PluginData = usePluginData('@orama/plugin-docusaurus-v3') as PluginData
 
   const baseURL = useBaseUrl('orama-search-index-current.json.gz')
   const isBrowser = useIsBrowser()
+
   useEffect(() => {
     async function loadOrama() {
+      let oramaInstance = null
+
       if (endpoint?.url) {
-        setSearchBoxConfig({
-          oramaInstance: new OramaClient({
-            endpoint: endpoint.url,
-            api_key: endpoint.key
-          })
+        oramaInstance = new OramaClient({
+          endpoint: endpoint.url,
+          api_key: endpoint.key
         })
       } else {
         let buffer
@@ -48,26 +62,32 @@ export const useOrama = () => {
         const parsedDeflated = JSON.parse(deflated)
 
         const db = await create({
-          schema: { ...presets.docs.schema, version: 'enum' },
+          schema: { ...DOCS_PRESET_SCHEMA, version: 'enum' },
           plugins: [
             ...(analytics
               ? [
-                  pluginAnalytics({
-                    apiKey: analytics.apiKey,
-                    indexId: analytics.indexId,
-                    enabled: analytics.enabled
-                  })
-                ]
+                pluginAnalytics({
+                  apiKey: analytics.apiKey,
+                  indexId: analytics.indexId,
+                  enabled: analytics.enabled
+                })
+              ]
               : [])
           ]
         })
 
         await insertMultiple(db, Object.values(parsedDeflated.docs.docs))
 
-        setSearchBoxConfig({
-          oramaInstance: db
-        })
+        oramaInstance = new Switch(db)
       }
+
+      setSearchBoxConfig({
+        basic: {
+          clientInstance: oramaInstance,
+          disableChat: !endpoint?.url
+        },
+        custom: searchBoxCustomConfig
+      })
     }
 
     if (!isBrowser) {
@@ -79,5 +99,5 @@ export const useOrama = () => {
     })
   }, [isBrowser])
 
-  return { searchBoxConfig, colorMode }
+  return { searchBoxConfig, colorMode, clientMode: endpoint?.url ? 'cloud' : 'oss' }
 }

packages/plugin-docusaurus-v3/src/utils.ts

@@ -82,3 +82,12 @@ export async function deployIndex(baseUrl: string, APIKey: string, indexId: stri
     'End: Deploy index (success)'
   )
 }
+
+export const DOCS_PRESET_SCHEMA = {
+  title: 'string',
+  content: 'string',
+  path: 'string',
+  section: 'string',
+  category: 'enum',
+  version: 'enum'
+}