feat: add search

package.json

@@ -88,6 +88,9 @@
     "@nuxtjs/eslint-config-typescript": "latest",
     "@types/mdurl": "^1.0.2",
     "@types/ws": "^8.5.5",
+    "@vueuse/core": "^10.2.1",
+    "@vueuse/integrations": "^10.2.1",
+    "@vueuse/nuxt": "^10.2.1",
     "c8": "^8.0.0",
     "csvtojson": "^2.0.10",
     "eslint": "^8.43.0",
@@ -102,6 +105,9 @@
     "vitest": "^0.32.2",
     "vue-docgen-web-types": "^0.1.8"
   },
+  "peerDependencies": {
+    "fuse.js": "^6.6.2"
+  },
   "packageManager": "pnpm@8.6.5",
   "pnpm": {
     "peerDependencyRules": {

playground/search/content/javascript.md

@@ -0,0 +1,9 @@
+---
+description: JavaScript, a programming language!
+---
+
+# JavaScript
+
+JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
+
+For more information, see [Wikipedia](https://en.wikipedia.org/wiki/JavaScript).

playground/search/content/php.md

@@ -0,0 +1,9 @@
+---
+description: PHP, a programming language!
+---
+
+# PHP
+
+PHP is a general-purpose scripting language geared towards web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1993 and released in 1995. The PHP reference implementation is now produced by the PHP Group. PHP was originally an abbreviation of Personal Home Page, but it now stands for the recursive initialism PHP: Hypertext Preprocessor.
+
+For more information, see [Wikipedia](https://en.wikipedia.org/wiki/PHP).

playground/search/nuxt.config.ts

@@ -0,0 +1,13 @@
+export default defineNuxtConfig({
+  extends: ['../shared'],
+
+  content: {
+    search: {
+      mode: 'full-text'
+    }
+  },
+
+  typescript: {
+    includeWorkspace: true
+  }
+})

playground/search/pages/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const search = ref('')
+const result = await useSearch(search)
+</script>
+
+<template>
+  <div>
+    <h1>Search</h1>
+    <p>Search page</p>
+
+    <input v-model="search">
+
+    <pre>{{ result }} </pre>
+  </div>
+</template>

src/module.ts

@@ -190,6 +190,17 @@ export interface ModuleOptions {
   navigation: false | {
     fields: Array<string>
   }
+  /**
+   * Search mode.
+   *
+   * @default false
+   */
+  search: false | {
+    /**
+     * Used to determine how to search content.
+     */
+    mode: 'full-text' | 'meta'
+  }
   /**
    * List of locale codes.
    * This codes will be used to detect contents locale.
@@ -280,6 +291,7 @@ export default defineNuxtModule<ModuleOptions>({
     navigation: {
       fields: []
     },
+    search: false,
     documentDriven: false,
     experimental: {
       clientDB: false,
@@ -347,6 +359,14 @@ export default defineNuxtModule<ModuleOptions>({
         }
       )
 
+      if (options.search) {
+        nitroConfig.handlers.push({
+          method: 'get',
+          route: `${options.api.baseURL}/search`,
+          handler: resolveRuntimeModule('./server/api/search')
+        })
+      }
+
       if (!nuxt.options.dev) {
         nitroConfig.prerender.routes.unshift(`${options.api.baseURL}/cache.${buildIntegrity}.json`)
       }
@@ -410,6 +430,18 @@ export default defineNuxtModule<ModuleOptions>({
       { name: 'useUnwrap', as: 'useUnwrap', from: resolveRuntimeModule('./composables/utils') }
     ])
 
+    if (options.search) {
+      nuxt.options.modules.push('@vueuse/nuxt')
+
+      addImports([
+        {
+          name: 'useSearch',
+          as: 'useSearch',
+          from: resolveRuntimeModule('./composables/search')
+        }
+      ])
+    }
+
     // Register components
     await addComponentsDir({
       path: resolve('./runtime/components'),
@@ -617,6 +649,7 @@ export default defineNuxtModule<ModuleOptions>({
       documentDriven: options.documentDriven as any,
       host: typeof options.documentDriven !== 'boolean' ? options.documentDriven?.host ?? '' : '',
       trailingSlash: typeof options.documentDriven !== 'boolean' ? options.documentDriven?.trailingSlash ?? false : false,
+      search: options.search,
       // Anchor link generation config
       anchorLinks: options.markdown.anchorLinks as { depth?: number, exclude?: number[] }
     })
@@ -746,6 +779,8 @@ interface ModulePublicRuntimeConfig {
 
   navigation: ModuleOptions['navigation']
 
+  search: ModuleOptions['search']
+
   documentDriven: ModuleOptions['documentDriven']
 }
 

src/runtime/composables/search.ts

@@ -0,0 +1,31 @@
+import { useFuse } from '@vueuse/integrations/useFuse'
+import { useRuntimeConfig, useLazyFetch } from '#imports'
+
+export const useSearch = async (query: string) => {
+  const baseAPI = useRuntimeConfig().public.content.api.baseURL
+
+  // TODO: find a way to avoid fetching every time all the content
+  const { data } = await useLazyFetch(`${baseAPI}/search`)
+
+  // TODO: add a way to configure the search (using options from search?)
+  const { results } = useFuse(query,
+    data,
+    {
+      fuseOptions: {
+        keys: [
+          'title',
+          'description',
+          'keywords',
+          'body'
+        ],
+        ignoreLocation: true,
+        threshold: 0,
+        includeMatches: true,
+        includeScore: true
+      },
+      matchAllWhenSearchEmpty: true
+    }
+  )
+
+  return results
+}

src/runtime/server/api/search.ts

@@ -0,0 +1,47 @@
+import { defineEventHandler } from 'h3'
+import { serverQueryContent } from '../storage'
+import { useRuntimeConfig } from '#imports'
+
+export default defineEventHandler(async (event) => {
+  const { search } = useRuntimeConfig().public.content
+  const isFullTextMode = search?.mode === 'full-text'
+
+  const files = await serverQueryContent(event).find()
+
+  const docs = await Promise.all(
+    files
+      .filter((file) => {
+        return file?._extension === 'md' &&
+      file?._draft === false && file?._empty === false
+      })
+      .map(
+        async ({ _id: id, _path: path, _dir: dir, title = '', description = '', body = undefined, ...rest }) => {
+          // TODO: add configuration to choose which fields to index
+          return {
+            id,
+            path,
+            dir,
+            title,
+            description,
+            keywords: body?.toc?.links.map(link => link?.text),
+            body: isFullTextMode ? extractTextFromAst(body) : ''
+          }
+        }
+      )
+  )
+
+  return docs
+})
+
+function extractTextFromAst (node) {
+  let text = ''
+  if (node.type === 'text') {
+    text += node.value
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      text += ' ' + extractTextFromAst(child)
+    }
+  }
+  return text
+}