feat: offline search

docs/.vitepress/config.ts

@@ -47,11 +47,13 @@ export default defineConfig({
       copyright: 'Copyright © 2019-present Evan You'
     },
 
-    algolia: {
-      appId: '8J64VVRP8K',
-      apiKey: 'a18e2f4cc5665f6602c5631fd868adfd',
-      indexName: 'vitepress'
-    },
+    // algolia: {
+    //   appId: '8J64VVRP8K',
+    //   apiKey: 'a18e2f4cc5665f6602c5631fd868adfd',
+    //   indexName: 'vitepress'
+    // },
+
+    offlineSearch: true,
 
     carbonAds: {
       code: 'CEBDT27Y',
@@ -209,7 +211,7 @@ function sidebarReference() {
               link: '/reference/default-theme-last-updated'
             },
             {
-              text: 'Algolia Search',
+              text: 'Search',
               link: '/reference/default-theme-search'
             },
             {

docs/reference/default-theme-search.md

@@ -1,5 +1,59 @@
 # Search
 
+## Offline Search
+
+VitePress supports fuzzy full-text search using a in-browser index thanks to [minisearch](https://github.com/lucaong/minisearch/). You can enable it in your `.vitepress/config.ts` with the `offlineSearch` theme config:
+
+```ts
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  themeConfig: {
+    offlineSearch: true
+  }
+})
+```
+
+Example result:
+
+![screenshot of the search modal](/search.png)
+
+Alternatively, you can use [Algolia DocSearch](#algolia-search) or some community plugins like <https://www.npmjs.com/package/vitepress-plugin-search> or <https://www.npmjs.com/package/vitepress-plugin-pagefind>.
+### i18n
+
+You can use a config like this to use multilingual search:
+
+```ts
+import { defineConfig } from 'vitepress'
+
+export default defineConfig({
+  themeConfig: {
+    offlineSearch: {
+      locales: {
+        zh: {
+          translations: {
+            button: {
+              buttonText: '搜索文档',
+              buttonAriaLabel: '搜索文档'
+            },
+            modal: {
+              noResultsText: '无法找到相关结果',
+              resetButtonTitle: '清除查询条件',
+              footer: {
+                selectText: '选择',
+                navigateText: '切换'
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+})
+```
+
+## Algolia Search
+
 VitePress supports searching your docs site using [Algolia DocSearch](https://docsearch.algolia.com/docs/what-is-docsearch). Refer their getting started guide. In your `.vitepress/config.ts` you'll need to provide at least the following to make it work:
 
 ```ts
@@ -16,9 +70,7 @@ export default defineConfig({
 })
 ```
 
-If you are not eligible for DocSearch, you might wanna use some community plugins like <https://github.com/emersonbottero/vitepress-plugin-search> or explore some custom solutions on [this GitHub thread](https://github.com/vuejs/vitepress/issues/670).
-
-## i18n
+### i18n
 
 You can use a config like this to use multilingual search:
 

package.json

@@ -93,6 +93,7 @@
     "@vue/devtools-api": "^6.5.0",
     "@vueuse/core": "^9.13.0",
     "body-scroll-lock": "4.0.0-beta.0",
+    "minisearch": "^6.0.1",
     "shiki": "^0.14.1",
     "vite": "^4.2.1",
     "vue": "^3.2.47"

src/client/shim.d.ts

@@ -20,3 +20,8 @@ declare module '@theme/index' {
   const theme: Theme
   export default theme
 }
+
+declare module '@offlineSearchIndex' {
+  const data: Record<string, () => Promise<{ default: string }>>
+  export default data
+}