feat: 文档搜索改用MiniSearch

Author: rennzhang

docs/.vitepress/config.mts

@@ -179,11 +179,34 @@ export default defineConfig({
       message: "Released under the MIT License.",
       copyright: "Copyright © 2021-present Renn Cheung"
     },
+    search: {
+      provider: 'local',
+      options: {
+        locales: {
+          "zh-CN": {
+            translations: {
+              button: {
+                buttonText: '搜索文档',
+                buttonAriaLabel: '搜索文档'
+              },
+              modal: {
+                noResultsText: '无法找到相关结果',
+                resetButtonTitle: '清除查询条件',
+                footer: {
+                  selectText: '选择',
+                  navigateText: '切换'
+                }
+              }
+            }
+          }
+        }
+      }
+    },
 
-    algolia: {
-      appId: "TIA2QKB31F",
-      apiKey: "57dd54cc00e988117cc8b741128f5089",
-      indexName: "codemirror-editor-vue3"
-    }
+    // algolia: {
+    //   appId: "TIA2QKB31F",
+    //   apiKey: "57dd54cc00e988117cc8b741128f5089",
+    //   indexName: "codemirror-editor-vue3"
+    // }
   }
 })

docs/demo/examples/Interactive/demo.vue

@@ -0,0 +1,72 @@
+<template>
+  <Codemirror
+    v-model:value="code"
+    :options="cmOptions"
+    :height="300"
+    width="80%"
+    class="cm-component"
+    :border="true"
+    @ready="onReady"
+  />
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch } from "vue";
+import { Editor, EditorConfiguration } from "codemirror";
+import Codemirror from "codemirror-editor-vue3";
+// language
+// import "codemirror/mode/javascript/javascript.js";
+// // import "codemirror/mode/clike/clike.js";
+// import "codemirror/addon/lint/javascript-lint";
+// import "codemirror/addon/lint/lint.css";
+// import "codemirror/addon/lint/lint.js";
+// import "codemirror/addon/lint/json-lint";
+
+const code = ref(`function findSequence(goal) {
+  function find(start, history) {
+    if (start == goal)
+      return history;
+    else if (start > goal)
+      return null;
+    else
+      return find(start + 5, "(" + history + " + 5)") ||
+             find(start * 3, "(" + history + " * 3)");
+  }
+  return find(1, "1");
+}`);
+
+const props = defineProps<{
+  lang: string;
+}>();
+
+watch(() => props.lang, (lang) => {
+  import("codemirror/mode/clike/clike.js");
+  console.log(lang);
+}, {
+  immediate: true,
+});
+const cmOptions:EditorConfiguration = reactive({
+  mode: props.lang,
+  // mode: "application/json",
+  lineNumbers: true,
+  lineWiseCopyCut: true,
+  // gutters: ["CodeMirror-lint-markers"],
+});
+console.log(" cmOptions", cmOptions);
+
+const cminstance = ref<Editor | null>(null);
+const onReady = (cm: Editor) => {
+  cminstance.value = cm;
+  console.log(cm.getValue());
+};
+
+defineExpose({
+  setTheme: (theme: string) => {
+    cminstance.value?.setOption("theme", theme);
+  },
+});
+</script>
+<style lang="less" scoped>
+  .cm-component {
+    font-family: monospace;
+  }
+</style>

docs/demo/examples/Interactive/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div> Basic Demo</div>
+  <Example
+    :schema="{
+      raw: jsDemoRaw,
+      comp: jsDemo,
+      describe: 'javascript 模式下可展示 json 数据',
+      lang: 'javascript',
+      props: {
+        lang: 'text/x-c',
+      }
+    }"
+  />
+</template>
+
+<script lang="ts" setup>
+import Example from "../components/Example.vue";
+import jsDemo from "./demo.vue";
+import jsDemoRaw from "./demo.vue?raw";
+
+</script>
+
+<style scoped lang="less"></style>

docs/demo/examples/components/BashBlock.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="vp-code-group vp-adaptive-theme">
+    <div class="tabs">
+      <input
+        id="tab-JFiS9vo"
+        type="radio"
+        name="group-Qis5R"
+        checked="checked"
+      ><label
+        for="tab-JFiS9vo"
+        @click="type = 'npm'"
+      >npm</label><input
+        id="tab-NQHnuSp"
+        type="radio"
+        name="group-Qis5R"
+      ><label
+        for="tab-NQHnuSp"
+        @click="type = 'yarn'"
+      >yarn</label><input
+        id="tab-S4PgNg6"
+        type="radio"
+        name="group-Qis5R"
+      ><label
+        for="tab-S4PgNg6"
+        @click="type = 'pnpm'"
+      >pnpm</label>
+    </div>
+    <div class="blocks">
+      <div class="language-bash vp-adaptive-theme active">
+        <button
+          title="Copy Code"
+          class="copy"
+        />
+        <span class="lang">bash</span>
+        <div
+          class="shiki shiki-themes github-light github-dark vp-code py-5 px-20px text-14px"
+        >
+          <span class="line">
+            <span
+              style="--shiki-light: #6f42c1; --shiki-dark: #b392f0"
+              class="mr-8px"
+            >{{ type }}
+            </span>
+            <span
+              style="--shiki-light: #032f62; --shiki-dark: #9ecbff"
+              class="mr-8px"
+            >
+              {{ typeCommadnMap[type] }}
+            </span>
+            <span
+              v-for="(item,index) in props.deps"
+              :key="index"
+              class="mr-8px"
+              style="--shiki-light: #032f62; --shiki-dark: #9ecbff"
+            > {{ item }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from "vue";
+
+const props = defineProps<{
+  deps: string[];
+}>();
+
+const type = ref("npm");
+const typeCommadnMap = {
+  npm: "install",
+  yarn: "add",
+  pnpm: "add",
+};
+
+</script>
+
+<style scoped lang="less">
+.line span {
+  white-space: pre;
+  font-family: var(--vp-font-family-mono);
+}
+</style>

docs/demo/examples/components/Example.vue

@@ -1,4 +1,11 @@
 <template>
+  <div
+    v-if="props.schema?.deps?.length"
+    class="mt-5"
+  >
+    该功能必须安装以下依赖 / Please install the following dependencies:
+    <BashBlock :deps="props.schema.deps" />
+  </div>
   <div class="example">
     <div class="example-showcase">
       <div class="w-full mb-5">
@@ -17,6 +24,7 @@
       <component
         :is="props.schema.comp"
         ref="demoRef"
+        v-bind="props.schema.props"
       />
     </div>
     <div class="example-action">
@@ -47,14 +55,15 @@
 
 <script lang="ts" setup>
 import {
-  ref, defineProps, computed, watch,
+  ref, defineProps, computed, watch, nextTick,
 } from "vue";
 import { useClipboard } from "@vueuse/core";
 import VCodeBlock from "@wdns/vue-code-block";
 import { useData } from "vitepress";
 
 import IconCopy from "./IconCopy.vue";
 import IconCode from "./IconCode.vue";
+import BashBlock from "./BashBlock.vue";
 
 // theme
 import "codemirror/theme/dracula.css";
@@ -64,8 +73,10 @@ const props = defineProps<{
     describe?: string;
     lang: string;
     raw: string;
-    comp: any
-  },
+    comp: any,
+    deps?: string[];
+    props: any
+  }
 }>();
 
 const { isDark } = useData();
@@ -80,8 +91,10 @@ const demoRef = ref<any>(null);
 
 watch(() => [isDark, demoRef], ([val, cmRef]) => {
   if (!cmRef.value) return;
-  cmRef.value?.setTheme(val.value ? "dracula" : "default");
-  theme.value = val.value ? "github-dark" : "github";
+  nextTick(() => {
+    cmRef.value?.setTheme(val.value ? "dracula" : "default");
+    theme.value = val.value ? "github-dark" : "github";
+  });
 }, { immediate: true, deep: true });
 
 </script>

docs/demo/examples/lint/index.vue

@@ -26,12 +26,14 @@ const schemas = [
     comp: defineAsyncComponent(() => import("./jsLint.vue")),
     describe: "校验 js 代码, 在任意位置输入字符尝试校验功能",
     lang: "javascript",
+    deps: ["jslint"],
   },
   {
     raw: jsonLintRaw,
     comp: defineAsyncComponent(() => import("./jsonLint.vue")),
     describe: "校验 json 数据, 在任意位置输入字符尝试校验功能",
     lang: "application/json",
+    deps: ["jsonlint"],
   },
 ];
 

docs/demo/examples/lint/jsonLint.vue

@@ -79,6 +79,7 @@ const onReady = (cm: Editor) => {
 
 defineExpose({
   setTheme: (theme: string) => {
+    console.log(" theme", theme);
     cminstance.value?.setOption("theme", theme);
   },
 });

docs/example/index.md

@@ -6,6 +6,12 @@ aside: false
 
 More cases are being updated...
 
+# Interactive Example
+
+::: tip
+You can get rich examples through the following configurations.
+
+:::
 
 <component v-if="CaseContainer" :is="CaseContainer"></component>
 
@@ -20,7 +26,7 @@ export default {
   },
 
   mounted() {
-    import('../demo/examples/index.vue').then((module) => {
+    import('../demo/examples/Interactive/index.vue').then((module) => {
       this.CaseContainer = shallowRef(module.default)
     })
 

docs/zh-CN/example/index.md

@@ -2,6 +2,13 @@
 aside: false
 ---
 
+# 交互案例
+
+::: tip
+通过下面的各项配置，你可以得到丰富的案例
+
+:::
+
 <component v-if="CaseContainer" :is="CaseContainer"></component>
 
 <script>
@@ -15,7 +22,7 @@ export default {
   },
 
   mounted() {
-    import('../../demo/examples/index.vue').then((module) => {
+    import('../../demo/examples/Interactive/index.vue').then((module) => {
       this.CaseContainer = shallowRef(module.default)
     })