feat: adds new searchbox to Vitepress

packages/plugin-vitepress/package.json

@@ -2,7 +2,12 @@
   "name": "@orama/plugin-vitepress",
   "version": "3.0.1",
   "description": "Vitepress plugin for local search powered by orama",
-  "keywords": ["orama", "vite", "vitepress", "vue"],
+  "keywords": [
+    "orama",
+    "vite",
+    "vitepress",
+    "vue"
+  ],
   "license": "Apache-2.0",
   "main": "./dist/index.js",
   "type": "module",
@@ -16,7 +21,9 @@
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "swc --delete-dir-on-start --extensions .ts -d dist src",
     "postbuild": "tsc -p . --emitDeclarationOnly && cp ./src/Search.vue ./dist/Search.vue",
@@ -25,7 +32,10 @@
   "dependencies": {
     "@orama/orama": "workspace:*",
     "@orama/plugin-data-persistence": "workspace:*",
+    "@orama/plugin-pt15": "workspace:*",
+    "@orama/plugin-qps": "workspace:*",
     "@orama/searchbox": "1.0.0-beta.13",
+    "@orama/vue-components": "^0.1.5",
     "@vitejs/plugin-vue": "^4.5.1",
     "jsdom": "^23.0.1",
     "markdown-it": "^13.0.2",
@@ -39,9 +49,9 @@
     "*.{ts, tsx}": "eslint ./src --cache --fix"
   },
   "devDependencies": {
+    "@preact/signals-core": "^1.5.0",
     "@swc/cli": "^0.1.59",
     "@swc/core": "^1.3.27",
-    "@preact/signals-core": "^1.5.0",
     "@types/jsdom": "^21.1.6",
     "@types/markdown-it": "^13.0.7",
     "typescript": "^5.0.0",

packages/plugin-vitepress/src/Search.vue

@@ -1,58 +1,35 @@
 <script lang='ts' setup>
 import { onMounted } from 'vue'
 import { useData } from 'vitepress'
-import { RegisterSearchBox, presets, signals as $ } from '@orama/searchbox'
 
 const VPData = useData()
 
-$.colorScheme.value = VPData.isDark.value ? 'dark' : 'light'
+// $.colorScheme.value = VPData.isDark.value ? 'dark' : 'light'
 
 onMounted(async () => {
+  (async () => {
+    await import('https://cdn.jsdelivr.net/npm/@orama/wc-components@latest/dist/orama-ui/orama-ui.esm.js')
+    await import('https://cdn.jsdelivr.net/npm/@orama/wc-components@latest/dist/orama-ui/orama-ui.css')
+  })()
+
   // @ts-expect-error - virtual:search-data is not globally defined
   const oramaPluginData = await import('virtual:search-data')
   const oramaInstance = oramaPluginData.default.data
   const oramaAnalytics = oramaPluginData.default.analytics
-
-  RegisterSearchBox({
-    oramaInstance: oramaInstance,
-    preset: presets.docs.name,
-    show: false,
-    analytics: oramaAnalytics
-  })
 })
 </script>
 
 <template>
   <ClientOnly>
-    <orama-searchbox />
+    <!-- should implement the searchbox here -->
+    <orama-chat-box
+      :client-instance="oramaInstance"
+    />
 
     <div class="VPNavBarSearch search">
       <div id="docsearch">
-        <button type="button" class="DocSearch DocSearch-Button" aria-label="Search" v-on:click="$.show.value = true">
-          <span class="DocSearch-Button-Container">
-            <svg
-              class="DocSearch-Search-Icon"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              aria-label="search icon"
-            >
-              <path
-                d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-                stroke="currentColor"
-                fill="none"
-                fill-rule="evenodd"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <span class="DocSearch-Button-Placeholder">Search</span>
-          </span>
-          <span class="DocSearch-Button-Keys">
-            <kbd class="DocSearch-Button-Key"></kbd>
-            <kbd class="DocSearch-Button-Key">K</kbd>
-          </span>
-      </button>
+        <!-- should implement search button here -->
+        <orama-search-button />
       </div>
     </div>
   </ClientOnly>

packages/plugin-vitepress/src/index.ts

@@ -3,12 +3,18 @@ import type { SiteConfig } from 'vitepress'
 import MarkdownIt from 'markdown-it'
 import { JSDOM } from 'jsdom'
 import { presets } from '@orama/searchbox'
-import { AnySchema, create, insertMultiple } from '@orama/orama'
+import { AnySchema, create, insertMultiple, OramaPlugin } from '@orama/orama'
 import { persist } from '@orama/plugin-data-persistence'
+import { pluginPT15 } from '@orama/plugin-pt15'
+import { pluginQPS } from '@orama/plugin-qps'
+import { ComponentLibrary } from '@orama/vue-components'
 import slugify from 'slugify'
 import { readFileSync } from 'fs'
 
+type ScoringAlgorithm = 'bm25' | 'qps' | 'pt15'
+
 type OramaPluginOptions = {
+  scoringAlgorithm?: ScoringAlgorithm
   analytics?: {
     enabled: boolean
     apiKey: string
@@ -35,7 +41,21 @@ const md = new MarkdownIt({
   html: true
 })
 
-async function createOramaContentLoader(paths: string[], root: string, base: string) {
+function createOramaContentLoader(paths: string[], root: string, base: string, scoringAlgorithm: ScoringAlgorithm) {
+  if (!['bm25', 'qps', 'pt15'].includes(scoringAlgorithm)) {
+    throw new Error('Invalid scoring algorithm. Expected one of: bm25, qps, pt15. Got: ' + scoringAlgorithm)
+  }
+
+  const plugins: OramaPlugin[] = []
+
+  if (scoringAlgorithm === 'pt15') {
+    plugins.push(pluginPT15())
+  }
+
+  if (scoringAlgorithm === 'qps') {
+    plugins.push(pluginQPS())
+  }
+
   const contents = paths
     .map((file) => ({
       path: file.replace(root, '').replace('.md', ''),
@@ -44,11 +64,12 @@ async function createOramaContentLoader(paths: string[], root: string, base: str
     .map(parseHTMLContent)
     .flatMap((data) => formatForOrama(data, base))
 
-  const db = await create({
-    schema: presets.docs.schema as AnySchema
+  const db = create({
+    schema: presets.docs.schema as AnySchema,
+    plugins,
   })
 
-  await insertMultiple(db, contents)
+  insertMultiple(db, contents)
 
   return persist(db, 'json', 'browser')
 }
@@ -103,7 +124,7 @@ function removeTrailingSlash(value: string) {
   return value.endsWith('/') ? value.slice(0, -1) : value
 }
 
-export function OramaPlugin(pluginOptions: OramaPluginOptions = {}): Plugin {
+export function OramaPlugin(pluginOptions: OramaPluginOptions = { scoringAlgorithm: 'pt15' }): Plugin {
   let resolveConfig: any
   const virtualModuleId = 'virtual:search-data'
   const resolvedVirtualModuleId = `\0${virtualModuleId}`
@@ -139,6 +160,7 @@ export function OramaPlugin(pluginOptions: OramaPluginOptions = {}): Plugin {
         return selfHead.concat(pluginHead)
       }
     },
+
     config: () => ({
       resolve: {
         alias: {
@@ -161,8 +183,9 @@ export function OramaPlugin(pluginOptions: OramaPluginOptions = {}): Plugin {
       const pages = resolveConfig.vitepress.pages.map((page: string) => `${root}/${page}`)
 
       return `
-        const data = ${JSON.stringify(await createOramaContentLoader(pages, root, base))};
+        const data = ${JSON.stringify(await createOramaContentLoader(pages, root, base, pluginOptions.scoringAlgorithm!))};
         const analytics = ${JSON.stringify(pluginOptions.analytics)};
+        const scoringAlgorithm = '${pluginOptions.scoringAlgorithm}';
         export default { data, analytics };
       `
     }

sandboxes/vitepress-1.4.1/.vitepress/.gitignore

@@ -0,0 +1 @@
+cache

sandboxes/vitepress-1.4.1/.vitepress/config.mts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vitepress'
+import { OramaPlugin } from '@orama/plugin-vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Vitepress Sandbox",
+  description: "A VitePress Site",
+  extends: {
+    vite: {
+      plugins: [OramaPlugin()]
+    }
+  },
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Examples', link: '/markdown-examples' }
+    ],
+
+    sidebar: [
+      {
+        text: 'Examples',
+        items: [
+          { text: 'Markdown Examples', link: '/markdown-examples' },
+          { text: 'Runtime API Examples', link: '/api-examples' }
+        ]
+      }
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+    ]
+  }
+})