feat: add docsearch

components/NavBar.vue

@@ -10,9 +10,7 @@
         </div>
       </li>
       <li>
-        <div class="place-content-center" @click="openSearchDialog">
-          <Icon name="uil:search" />
-        </div>
+        <Search class="place-content-center" />
       </li>
       <!-- 动态菜单 -->
       <li v-if="!isHome">
@@ -59,23 +57,14 @@ import { useSideCtx } from "./Side.vue";
 import Toc from "~/components/Toc.vue";
 import Tags from "~/components/Tags.vue";
 import { resolveComponent, defineComponent } from "vue";
+import Search from "~/components/Search/Search.vue";
 
 const Icon = resolveComponent("Icon");
 
 const router = useRouter();
 const { path, name } = router.currentRoute.value;
 const isPostPage = /\/posts\/.+/.test(path);
 
-// #region 搜索功能
-const openSearchDialog = async () => {
-  // const { dialog } = useDialogCtx();
-  // const searchDialog = dialog.value?.from(SearchDialog);
-  // searchDialog?.open();
-  const results = await searchContent("rust");
-  console.log(results);
-};
-// #endregion
-
 // 置顶
 const scrollToTop = (): void => window.scrollTo({ top: 0, behavior: "smooth" });
 
@@ -120,17 +109,4 @@ const TocBtn = defineComponent(() => {
   );
 });
 // #endregion
-
-// import docsearch from "@docsearch/js";
-// import "@docsearch/css";
-
-// const docsearchRef = ref();
-// onMounted(() => {
-//   docsearch({
-//     container: docsearchRef.value,
-//     appId: "YOUR_APP_ID",
-//     indexName: "YOUR_INDEX_NAME",
-//     apiKey: "YOUR_SEARCH_API_KEY",
-//   });
-// });
 </script>

components/Search/Search.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="place-content-center" @click="showSearchDialog">
+    <Icon name="uil:search" />
+    <div ref="docsearchRef" v-show="false"></div>
+  </div>
+</template>
+
+<script lang="tsx">
+import { defineComponent } from "vue";
+import docsearch from "@docsearch/js";
+import "@docsearch/css";
+
+export default defineComponent({
+  setup() {
+    useHead({
+      link: [
+        {
+          rel: "preconnect",
+          href: "https://F9HLDQ3K76-dsn.algolia.net",
+          crossorigin: "anonymous",
+        },
+      ],
+    });
+
+    const docsearchRef = ref<HTMLElement>();
+
+    const showSearchDialog = () => {
+      docsearchRef.value?.firstElementChild?.dispatchEvent(new Event("click"));
+    };
+
+    const router = useRouter();
+    onMounted(() => {
+      if (import.meta.browser) {
+        docsearch({
+          container: docsearchRef.value!,
+          appId: "F9HLDQ3K76",
+          indexName: "laoergege-pages",
+          apiKey: "0a2dda2da8594d4d2e2ab6e7fff6dcff",
+          hitComponent: ({ hit, children }) => {
+            return {
+              ...children,
+              type: "a",
+              props: {
+                href: hit.url,
+                onClick: (e: Event) => {
+                  e.preventDefault();
+                  router.push(new URL(hit.url).pathname);
+                },
+                children,
+              },
+            };
+          },
+        });
+      }
+    });
+
+    return { docsearchRef, showSearchDialog };
+  },
+});
+</script>
+
+<style lang="css">
+:root {
+  --docsearch-primary-color: oklch(var(--p));
+  --docsearch-text-color: oklch(var(--pc));
+}
+</style>

package.json

@@ -61,8 +61,8 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@docsearch/css": "^3.3.3",
-    "@docsearch/js": "^3.3.3",
+    "@docsearch/css": "^3.6.1",
+    "@docsearch/js": "^3.6.1",
     "@giscus/vue": "^2.2.8",
     "@pinia/nuxt": "^0.5.4",
     "@unhead/vue": "^1.1.25",