@sugarat/theme 0.1.9 → 0.1.11

package/node.d.ts

@@ -139,7 +139,7 @@ declare namespace Theme {
         author?: string;
         hotArticle?: HotArticle;
         home?: HomeBlog;
-        search?: boolean;
+        search?: boolean | 'pagefind';
         /**
          * 配置评论
          * power by https://giscus.app/zh-CN
@@ -170,7 +170,7 @@ declare function getThemeConfig(cfg?: Partial<Theme.BlogConfig>): {
         author?: string | undefined;
         hotArticle?: Theme.HotArticle | undefined;
         home?: Theme.HomeBlog | undefined;
-        search?: boolean | undefined;
+        search?: boolean | "pagefind" | undefined;
         comment?: false | Theme.GiscusConfig | undefined;
         recommend?: Theme.RecommendArticle | undefined;
         article?: Theme.ArticleConfig | undefined;

package/node.js

@@ -183,6 +183,60 @@ function getTextSummary(text, count = 100) {
   return clearMatterContent(text).match(/^# ([\s\S]+)/m)?.[1]?.replace(/#/g, "")?.replace(/!\[.*?\]\(.*?\)/g, "")?.replace(/\[(.*?)\]\(.*?\)/g, "$1")?.replace(/\*\*(.*?)\*\*/g, "$1")?.split("\n")?.filter((v) => !!v)?.slice(1)?.join("\n")?.replace(/>(.*)/, "")?.slice(0, count);
 }
 function defineConfig(config) {
+  if (config?.themeConfig?.blog?.search === "pagefind") {
+    config.head = (config.head || []).concat([
+      [
+        "script",
+        {},
+        `import('/_pagefind/pagefind.js')
+      .then((module) => {
+        window.__pagefind__ = module
+      })
+      .catch(() => {
+        console.log('not load /_pagefind/pagefind.js')
+      })`
+      ]
+    ]);
+    let flag = true;
+    let originLog = null;
+    config.vite = {
+      ...config.vite,
+      plugins: [
+        ...config.vite?.plugins || [],
+        {
+          name: "@sugarar/theme-plugin-pagefind",
+          buildEnd() {
+            const { log } = console;
+            if (flag) {
+              flag = false;
+              originLog = log;
+              Object.defineProperty(console, "log", {
+                value() {
+                  if (`${arguments[0]}`.includes("build complete")) {
+                    console.log = originLog;
+                    setTimeout(() => {
+                      originLog();
+                      originLog("=== pagefind: https://pagefind.app/ ===");
+                      const command = `npx pagefind --source ${import_path.default.join(
+                        process.argv.slice(2)?.[1] || ".",
+                        ".vitepress/dist"
+                      )}`;
+                      originLog(command);
+                      originLog();
+                      (0, import_child_process.execSync)(command, {
+                        stdio: "inherit"
+                      });
+                    }, 100);
+                  }
+                  return log.apply(this, arguments);
+                }
+              });
+            }
+          }
+        }
+      ]
+    };
+  }
   return config;
 }
 // Annotate the CommonJS export names for ESM import in node:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -35,7 +35,9 @@
     "@vue/shared": "^3.2.45",
     "@vueuse/core": "^9.6.0",
     "fast-glob": "^3.2.12",
-    "gray-matter": "^4.0.3"
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.7.0",
+    "vue-command-palette": "^0.1.4"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.0.10",
@@ -52,6 +54,6 @@
     "build": "npm run build:node && npm run build:docs",
     "build:docs": "vitepress build demo",
     "build:node": "npx tsup src/node.ts --dts --out-dir=./",
-    "serve": "npm run build && vitepress serve demo"
+    "serve": "vitepress serve demo"
   }
 }

package/src/components/BlogAlert.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="global-alert" v-if="show">
+  <div class="global-alert" v-if="show" data-pagefind-ignore="all">
     <el-alert
       :title="alertProps?.title"
       :type="alertProps?.type"

package/src/components/BlogApp.vue

@@ -17,7 +17,7 @@ const { Layout } = Theme
 </script>
 
 <template>
-  <Layout>
+  <Layout data-pagefind-body>
     <template #layout-top>
       <BlogAlert />
       <BlogPopover />

package/src/components/BlogArticleAnalyze.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="doc-analyze" v-if="showAnalyze">
+  <div class="doc-analyze" v-if="showAnalyze" data-pagefind-ignore="all">
     <span>
       <el-icon><EditPen /></el-icon>
       字数：{{ wordCount }} 个字

package/src/components/BlogComment.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="comment" v-if="show" id="giscus-comment">
+  <div
+    class="comment"
+    v-if="show"
+    id="giscus-comment"
+    data-pagefind-ignore="all"
+  >
     <el-affix
       :class="{ hidden: !showCommnetAffix }"
       class="comment-btn"

package/src/components/BlogHomeInfo.vue

@@ -6,7 +6,7 @@ import BlogFriendLink from './BlogFriendLink.vue'
 </script>
 
 <template>
-  <div class="blog-info">
+  <div class="blog-info" data-pagefind-ignore="all">
     <!-- 统计数据，日后支持，点击筛选出左侧的数据 -->
     <BlogHomeOverview />
 

package/src/components/BlogHomeTags.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card tags" v-if="tags.length">
+  <div class="card tags" v-if="tags.length" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
       <span class="title">🏷 标签</span>

package/src/components/BlogHotArticle.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="card recommend" v-if="recommendList.length || empty">
+  <div
+    class="card recommend"
+    v-if="recommendList.length || empty"
+    data-pagefind-ignore="all"
+  >
     <!-- 头部 -->
     <div class="card-header">
       <span class="title">{{ title }}</span>

package/src/components/BlogList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul>
+  <ul data-pagefind-ignore="all">
     <li v-for="v in currentWikiData" :key="v.route">
       <blog-item
         :route="v.route"
@@ -44,8 +44,8 @@ const activeTag = useActiveTag()
 const activeTagLabel = computed(() => activeTag.value.label)
 
 const wikiList = computed(() => {
-  const topList = docs.value.filter((v) => v.meta.top)
-  topList.sort((a, b) => a.meta.top - b.meta.top)
+  const topList = docs.value.filter((v) => !!v.meta.top)
+  topList.sort((a, b) => a.meta!.top - b.meta!.top)
   const data = docs.value.filter(
     (v) => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
   )

package/src/components/BlogPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="theme-blog-popover" v-show="show">
+  <div class="theme-blog-popover" v-show="show" data-pagefind-ignore="all">
     <div class="header">
       <div class="title-wrapper">
         <el-icon size="20px"><Flag /></el-icon>

package/src/components/BlogRecommendArticle.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="card recommend" v-if="recommendList.length || emptyText">
+  <div
+    class="card recommend"
+    v-if="recommendList.length || emptyText"
+    data-pagefind-ignore="all"
+  >
     <!-- 头部 -->
     <div class="card-header">
       <span class="title">{{ title }}</span>

package/src/components/BlogSearch.vue

@@ -1,111 +1,257 @@
 <template>
-  <div class="blog-search" v-if="openSearch">
+  <div class="blog-search" v-if="openSearch" data-pagefind-ignore="all">
     <div class="nav-search-btn-wait" @click="searchModal = true">
-      <el-icon size="22px">
-        <Search />
-      </el-icon>
+      <svg width="14" height="14" viewBox="0 0 20 20">
+        <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"
+        ></path>
+      </svg>
       <span class="search-tip">搜索</span>
+      <span class="metaKey"> ⌘ K </span>
     </div>
-    <el-dialog
-      class="search-dialog"
-      :fullscreen="isFullScreen"
-      append-to-body
-      modal
-      v-model="searchModal"
-      width="500px"
-      align-center
-    >
+    <Command.Dialog :visible="searchModal" theme="algolia">
       <template #header>
-        <el-input
-          ref="searchInput"
-          autofocus
-          size="large"
-          v-model="searchWords"
-          class="w-50 m-2"
-          placeholder="Search Docs"
-          :prefix-icon="Search"
+        <Command.Input
+          v-model:value="searchWords"
+          placeholder="请输入要搜索的内容"
         />
       </template>
-      <el-empty v-if="!searchResult.length" description="No Result" />
-      <ul v-else>
-        <span>共：{{ searchResult.length }}个搜索结果</span>
-        <el-button
-          v-if="showNextResult"
-          type="primary"
-          size="small"
-          class="nextPage"
-          @click="handleNext"
-        >
-          换一组</el-button
-        >
-        <li v-for="item in showSearchResult" :key="item.route">
-          <el-card body-style="padding:10px;" shadow="hover">
-            <a :href="item.route" @click="searchModal = false">
-              <div class="title">
-                <span>{{ item.meta.title }}</span>
-                <span class="date">
-                  {{ formatDate(item.meta.date, 'yyyy-MM-dd') }}</span
+      <template #body>
+        <div class="search-dialog">
+          <Command.List>
+            <Command.Empty v-if="!searchResult.length"
+              >No results found.</Command.Empty
+            >
+            <Command.Group
+              v-else
+              :heading="`共：${searchResult.length} 个搜索结果`"
+            >
+              <Command.Item
+                v-for="item in showSearchResult"
+                :data-value="item.route"
+                :key="item.route"
+                @select="handleSelect"
+              >
+                <div class="link">
+                  <div class="title">
+                    <span>{{ item.meta.title }}</span>
+                    <span class="date">
+                      {{ formatDate(item.meta.date, 'yyyy-MM-dd') }}</span
+                    >
+                  </div>
+                  <div class="des" v-html="item.meta.description"></div>
+                </div>
+              </Command.Item>
+            </Command.Group>
+          </Command.List>
+        </div>
+      </template>
+      <template #footer v-if="searchResult.length">
+        <div class="command-palette-logo">
+          <a
+            v-if="openSearch === 'pagefind'"
+            href="https://github.com/cloudcannon/pagefind"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="command-palette-Label">Search by</span>
+            <logo-pagefind style="width: 77px" />
+          </a>
+        </div>
+        <ul class="command-palette-commands">
+          <li>
+            <kbd class="command-palette-commands-key"
+              ><svg width="15" height="15" aria-label="Enter key" role="img">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.2"
+                >
+                  <path
+                    d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"
+                  ></path>
+                </g></svg></kbd
+            ><span class="command-palette-Label">to select</span>
+          </li>
+          <li>
+            <kbd class="command-palette-commands-key"
+              ><svg width="15" height="15" aria-label="Arrow down" role="img">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.2"
+                >
+                  <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path>
+                </g></svg></kbd
+            ><kbd class="command-palette-commands-key"
+              ><svg width="15" height="15" aria-label="Arrow up" role="img">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.2"
                 >
-              </div>
-              <div class="des">
-                {{ item.meta.description }}
-              </div>
-            </a>
-          </el-card>
-        </li>
-      </ul>
-    </el-dialog>
+                  <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path>
+                </g></svg></kbd
+            ><span class="command-palette-Label">to navigate</span>
+          </li>
+          <li>
+            <kbd class="command-palette-commands-key"
+              ><svg width="15" height="15" aria-label="Escape key" role="img">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="1.2"
+                >
+                  <path
+                    d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"
+                  ></path>
+                </g></svg></kbd
+            ><span class="command-palette-Label">to close</span>
+          </li>
+        </ul>
+      </template>
+    </Command.Dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-import {
-  ElInput,
-  ElEmpty,
-  ElIcon,
-  ElDialog,
-  InputInstance,
-  ElCard,
-  ElButton
-} from 'element-plus'
-import { useWindowSize } from '@vueuse/core'
+import { computed, nextTick, ref, watch } from 'vue'
+// @ts-ignore
+import { Command } from 'vue-command-palette'
+import { useRoute, useRouter } from 'vitepress'
+import { useMagicKeys } from '@vueuse/core'
 import { formatDate } from '../utils'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
+import { Theme } from '../composables/config'
+import LogoPagefind from './LogoPagefind.vue'
 
 const { search: openSearch = true } = useBlogConfig()
 
 const searchModal = ref(false)
+const searchWords = ref('')
+const docs = useArticles()
 
-const { width } = useWindowSize()
-const isFullScreen = computed(() => width.value < 500)
+const keys = useMagicKeys()
+const CmdK = keys['Meta+K']
+// eslint-disable-next-line dot-notation, prefer-destructuring
+const Escape = keys['Escape']
+
+watch(CmdK, (v) => {
+  if (v) {
+    searchModal.value = true
+  }
+})
+watch(Escape, (v) => {
+  if (v) {
+    searchModal.value = false
+  }
+})
+
+const searchResult = ref<Theme.PageData[]>([])
+const inlineSearch = () => {
+  if (!searchWords.value) {
+    searchResult.value = []
+    return
+  }
+  searchResult.value = docs.value
+    .filter((v) =>
+      `${v.meta.description}${v.meta.title}`.includes(searchWords.value)
+    )
+    .map((v) => {
+      return {
+        ...v,
+        meta: {
+          ...v.meta,
+          description:
+            v.meta?.description?.replace(
+              new RegExp(`(${searchWords.value})`, 'g'),
+              '<mark>$1</mark>'
+            ) || ''
+        }
+      }
+    })
+  searchResult.value.sort((a, b) => {
+    return +new Date(b.meta.date) - +new Date(a.meta.date)
+  })
+}
 
-const searchWords = ref('')
-const searchInput = ref<InputInstance>()
+watch(
+  () => searchWords.value,
+  async () => {
+    if (openSearch === 'pagefind') {
+      // dev-server兜底
+      // @ts-ignore
+      if (!window?.__pagefind__?.search) {
+        inlineSearch()
+      } else {
+        // @ts-ignore
+        await window?.__pagefind__
+          ?.search?.(searchWords.value)
+          .then(async (search: any) => {
+            const result = await Promise.all(
+              search.results.map((v: any) => v.data())
+            )
+            searchResult.value = []
+            docs.value.forEach((v) => {
+              const match = result.find((r) => r.url.startsWith(v.route))
+              if (match) {
+                searchResult.value.push({
+                  ...v,
+                  meta: {
+                    ...v.meta,
+                    description: match.excerpt
+                  }
+                })
+              }
+            })
+          })
+      }
+    } else {
+      inlineSearch()
+    }
+    nextTick(() => {
+      // hack 原组件实现
+      document.querySelectorAll('div[aria-disabled="true"]').forEach((v) => {
+        v.setAttribute('aria-disabled', 'false')
+      })
+    })
+  }
+)
+
+const handleClickMask = (e: any) => {
+  if (e.target === e.currentTarget) {
+    searchModal.value = false
+  }
+}
 watch(
   () => searchModal.value,
-  () => {
-    if (searchModal.value) {
-      setTimeout(() => {
-        searchInput.value?.focus()
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => {
+        document
+          .querySelector('div[command-dialog-mask]')
+          ?.addEventListener('click', handleClickMask)
       })
+    } else {
+      document
+        .querySelector('div[command-dialog-mask]')
+        ?.removeEventListener('click', handleClickMask)
     }
   }
 )
-
-const docs = useArticles()
-
-const searchResult = computed(() => {
-  if (!searchWords.value) return []
-  const result = docs.value.filter((v) =>
-    `${v.meta.description}${v.meta.title}`.includes(searchWords.value)
-  )
-  result.sort((a, b) => {
-    return +new Date(b.meta.date) - +new Date(a.meta.date)
-  })
-  return result
-})
 const pageSize = ref(6)
 const currentPage = ref(0)
 const showSearchResult = computed(() => {
@@ -115,13 +261,15 @@ const showSearchResult = computed(() => {
   const startIdx = pageIdx * pageSize.value
   return searchResult.value.slice(startIdx, startIdx + pageSize.value)
 })
-const showNextResult = computed(
-  () => searchResult.value.length > pageSize.value
-)
-const handleNext = () => {
-  currentPage.value =
-    (currentPage.value + 1) %
-    Math.ceil(searchResult.value.length / pageSize.value)
+
+const router = useRouter()
+const route = useRoute()
+const handleSelect = (target: any) => {
+  searchModal.value = false
+  if (!route.path.startsWith(target.value)) {
+    // searchWords.value = ''
+    router.go(target.value)
+  }
 }
 </script>
 
@@ -129,7 +277,6 @@ const handleNext = () => {
 .blog-search {
   flex: 1;
   margin-left: 10px;
-
   .nav-search-btn-wait {
     cursor: pointer;
     display: flex;
@@ -137,16 +284,21 @@ const handleNext = () => {
     justify-content: center;
     padding: 6px;
     box-sizing: border-box;
-    width: 100px;
+    width: 120px;
+
+    .metaKey {
+      margin-left: 10px;
+      font-size: 12px;
+    }
 
     &:hover {
-      border: 2px solid #409eff;
-      border-radius: 20px;
+      border: 1px solid #409eff;
+      border-radius: 6px;
     }
 
     .search-tip {
       color: #909399;
-      font-size: 14px;
+      font-size: 12px;
       padding-left: 10px;
     }
   }
@@ -154,45 +306,43 @@ const handleNext = () => {
 </style>
 
 <style lang="scss">
-.search-dialog {
-  .el-empty {
-    padding: 0;
-  }
+@import '../styles/scss/global.scss';
+@import '../styles/scss/algolia.scss';
 
-  .el-empty__image {
-    width: 100px;
-  }
-  ul {
-    position: relative;
-  }
-  li {
-    margin-bottom: 10px;
-    font-size: 12px;
+div[command-group] {
+  display: block !important;
+}
+div[command-item] {
+  display: flex !important;
+}
+.search-dialog {
+  div[command-item] > div.link {
+    width: 100%;
   }
-
-  li .title {
+  div[command-item] .title {
     display: flex;
     justify-content: space-between;
   }
 
-  li .des {
+  div[command-item] .des {
     text-overflow: ellipsis;
     overflow: hidden;
     word-break: keep-all;
     white-space: nowrap;
-    color: var(--el-color-info-dark-2);
   }
 
-  li .date {
-    color: var(--el-color-info-light-3);
+  div[command-item] .date {
     min-width: 80px;
   }
+  div[command-item] mark {
+    background: none;
+    color: var(--vp-c-brand);
+  }
 
-  .nextPage {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: -30px;
+  div[command-item][aria-selected='true'] mark,
+  div[command-item]:hover mark {
+    color: inherit;
+    text-decoration: underline;
   }
 }
 </style>

package/src/components/BlogSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar"><BlogRecommendArticle /></div>
+  <div class="sidebar" data-pagefind-ignore="all"><BlogRecommendArticle /></div>
 </template>
 
 <script lang="ts" setup>

package/src/components/LogoPagefind.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    width="594"
+    height="112"
+    viewBox="0 0 594 112"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M147.8 111.2H164V77.5998H164.6C164.6 77.5998 170.6 87.1998 183.2 87.1998C197 87.1998 209.6 74.5998 209.6 56.5998C209.6 38.5998 197 25.9998 183.2 25.9998C170.6 25.9998 164.6 35.5998 164.6 35.5998H164V27.1998H147.8V111.2ZM178.4 72.1998C170 72.1998 163.4 65.5998 163.4 56.5998C163.4 47.5998 170 40.9998 178.4 40.9998C186.8 40.9998 193.4 47.5998 193.4 56.5998C193.4 65.5998 186.8 72.1998 178.4 72.1998Z"
+      fill="black"
+    />
+    <path
+      d="M230.628 87.1998C242.028 87.1998 248.028 78.7998 248.028 78.7998H248.628V85.9998C252.228 85.9998 264.828 85.9998 264.828 85.9998V49.3998C264.828 36.1998 254.628 25.9998 239.628 25.9998C224.028 25.9998 215.628 37.3998 215.628 37.3998L225.228 46.9998C225.228 46.9998 230.028 40.3998 238.428 40.3998C244.428 40.3998 248.028 43.9998 248.628 48.1998L230.028 51.5598C219.228 53.4798 212.628 60.7998 212.628 70.3998C212.628 79.9998 219.828 87.1998 230.628 87.1998ZM236.028 73.9998C231.228 73.9998 228.828 71.5998 228.828 67.9998C228.828 64.9998 231.228 62.7198 235.428 61.9998L248.628 59.5998V60.7998C248.628 68.5998 243.228 73.9998 236.028 73.9998Z"
+      fill="black"
+    />
+    <path
+      d="M299.033 111.2C317.633 111.2 330.833 97.9998 330.833 79.9998V27.1998H314.633V35.5998H314.033C314.033 35.5998 308.633 25.9998 296.033 25.9998C282.833 25.9998 270.833 37.9998 270.833 55.3998C270.833 72.7998 282.833 84.7998 296.033 84.7998C308.633 84.7998 314.033 75.1998 314.033 75.1998H314.633V79.9998C314.633 89.5998 308.033 96.1998 299.033 96.1998C289.433 96.1998 283.433 88.9998 283.433 88.9998L273.233 99.1998C273.233 99.1998 281.633 111.2 299.033 111.2ZM300.833 69.7998C293.033 69.7998 287.033 63.7998 287.033 55.3998C287.033 46.9998 293.033 40.9998 300.833 40.9998C308.633 40.9998 314.633 46.9998 314.633 55.3998C314.633 63.7998 308.633 69.7998 300.833 69.7998Z"
+      fill="black"
+    />
+    <path
+      d="M367.986 87.1998C384.186 87.1998 393.186 77.5998 393.186 77.5998L384.786 66.1998C384.786 66.1998 379.386 72.7998 369.186 72.7998C360.186 72.7998 355.386 67.9998 353.586 62.5998H396.186C396.186 62.5998 396.786 59.5998 396.786 55.3998C396.786 39.1998 383.586 25.9998 367.386 25.9998C350.586 25.9998 336.786 39.7998 336.786 56.5998C336.786 73.3998 350.586 87.1998 367.986 87.1998ZM353.586 50.5998C355.386 45.1998 360.186 40.3998 366.786 40.3998C373.386 40.3998 378.186 45.1998 379.986 50.5998H353.586Z"
+      fill="black"
+    />
+    <path
+      d="M406.423 85.9998H422.624V43.3998H444.224V85.9998H460.423V28.3998H422.624V24.7998C422.624 19.3998 425.624 16.3998 430.423 16.3998C433.423 16.3998 435.823 17.5998 435.823 17.5998V2.5998C435.823 2.5998 431.624 0.799805 426.224 0.799805C414.224 0.799805 406.423 8.59981 406.423 22.3998V28.3998H397.423V43.3998H406.423V85.9998ZM452.263 19.3998C457.423 19.3998 461.624 15.1998 461.624 10.3998C461.624 5.59981 457.424 1.3998 452.384 1.3998C447.224 1.3998 443.023 5.59981 443.023 10.3998C443.023 15.1998 447.223 19.3998 452.263 19.3998Z"
+      fill="black"
+    />
+    <path
+      d="M470.652 85.9998H486.852V54.7998C486.852 46.9998 492.252 41.5998 499.452 41.5998C506.052 41.5998 510.252 45.7998 510.252 52.9998V85.9998H526.452V50.5998C526.452 35.5998 516.852 25.9998 504.852 25.9998C493.452 25.9998 487.452 35.5998 487.452 35.5998H486.852V27.1998H470.652V85.9998Z"
+      fill="black"
+    />
+    <path
+      d="M557.819 87.1998C570.419 87.1998 576.419 77.5998 576.419 77.5998H577.019V85.9998H593.219V1.9998H577.019V35.5998H576.419C576.419 35.5998 570.419 25.9998 557.819 25.9998C544.019 25.9998 531.419 38.5998 531.419 56.5998C531.419 74.5998 544.019 87.1998 557.819 87.1998ZM562.619 72.1998C554.219 72.1998 547.619 65.5998 547.619 56.5998C547.619 47.5998 554.219 40.9998 562.619 40.9998C571.019 40.9998 577.619 47.5998 577.619 56.5998C577.619 65.5998 571.019 72.1998 562.619 72.1998Z"
+      fill="black"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M60 96.9999C93.1371 96.9999 120 81.8416 120 63.1428V50.8311H115.91C107.182 38.2198 85.4398 29.2856 60 29.2856C34.5602 29.2856 12.8183 38.2198 4.09026 50.8311H0V63.1428C0 81.8416 26.8629 96.9999 60 96.9999Z"
+      fill="black"
+    />
+    <path
+      d="M116 52C116 59.317 110.727 66.7404 100.454 72.5615C90.3014 78.3149 76.0069 82 60 82C43.9931 82 29.6986 78.3149 19.5456 72.5615C9.2731 66.7404 4 59.317 4 52C4 44.6831 9.2731 37.2596 19.5456 31.4385C29.6986 25.6851 43.9931 22 60 22C76.0069 22 90.3014 25.6851 100.454 31.4385C110.727 37.2596 116 44.6831 116 52Z"
+      fill="white"
+      stroke="black"
+      stroke-width="8"
+    />
+    <path
+      d="M57.8864 72.0605L87.2817 41.837C88.6253 40.4556 87.43 38.1599 85.5278 38.4684L26.0819 48.1083C23.9864 48.4481 23.794 51.3882 25.8273 51.9982L46.7151 58.2645C47.2181 58.4154 47.6415 58.7581 47.894 59.2185L54.6991 71.6277C55.3457 72.8069 56.9487 73.0246 57.8864 72.0605Z"
+      fill="black"
+    />
+    <ellipse cx="58" cy="53.5" rx="7" ry="4.5" fill="white" />
+  </svg>
+</template>

package/src/composables/config/index.ts

@@ -152,7 +152,7 @@ export namespace Theme {
     hotArticle?: HotArticle
     home?: HomeBlog
     // TODO: 本地全文搜索定制 pagefind || minisearch
-    search?: boolean
+    search?: boolean | 'pagefind'
     /**
      * 配置评论
      * power by https://giscus.app/zh-CN

package/src/node.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-rest-params */
 import glob from 'fast-glob'
 import matter from 'gray-matter'
 import fs from 'fs'
@@ -188,5 +189,61 @@ function getTextSummary(text: string, count = 100) {
 }
 
 export function defineConfig(config: UserConfig<Theme.Config>) {
+  if (config?.themeConfig?.blog?.search === 'pagefind') {
+    config.head = (config.head || []).concat([
+      [
+        'script',
+        {},
+        `import('/_pagefind/pagefind.js')
+      .then((module) => {
+        window.__pagefind__ = module
+      })
+      .catch(() => {
+        console.log('not load /_pagefind/pagefind.js')
+      })`
+      ]
+    ])
+    let flag = true
+    let originLog: any = null
+    config.vite = {
+      ...config.vite,
+      plugins: [
+        ...(config.vite?.plugins || []),
+        {
+          name: '@sugarar/theme-plugin-pagefind',
+          buildEnd() {
+            const { log } = console
+            // TODO: hack
+            if (flag) {
+              flag = false
+              originLog = log
+              Object.defineProperty(console, 'log', {
+                value() {
+                  if (`${arguments[0]}`.includes('build complete')) {
+                    console.log = originLog
+                    setTimeout(() => {
+                      originLog()
+                      originLog('=== pagefind: https://pagefind.app/ ===')
+                      const command = `npx pagefind --source ${path.join(
+                        process.argv.slice(2)?.[1] || '.',
+                        '.vitepress/dist'
+                      )}`
+                      originLog(command)
+                      originLog()
+                      execSync(command, {
+                        stdio: 'inherit'
+                      })
+                    }, 100)
+                  }
+                  // @ts-ignore
+                  return log.apply(this, arguments)
+                }
+              })
+            }
+          }
+        }
+      ]
+    }
+  }
   return config
 }

package/src/styles/scss/algolia.scss

@@ -0,0 +1,231 @@
+.algolia {
+  [command-root] {
+    padding: 8px;
+  }
+
+  [command-input] {
+    font-family: var(--font-sans);
+    width: 100%;
+    font-size: 18px;
+    padding: 12px;
+    outline: none;
+    background: var(--bg);
+    color: var(--gray12);
+    border-bottom: 1px solid var(--gray6);
+    border-radius: 4px;
+    caret-color: var(--vcp-c-brand);
+    margin: 0;
+    border: 1px solid var(--vcp-c-brand);
+
+    &::placeholder {
+      color: var(--gray9);
+    }
+  }
+
+  [command-list] {
+    height: var(--command-list-height);
+    max-height: 360px;
+    overflow: auto;
+    overscroll-behavior: contain;
+    transition: 100ms ease;
+    transition-property: height;
+  }
+
+  [command-item] {
+    position: relative;
+    content-visibility: auto;
+    cursor: pointer;
+    height: 56px;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0px 16px;
+    color: var(--gray12);
+    user-select: none;
+    will-change: background, color;
+    transition: all 150ms ease;
+    transition-property: none;
+    border-radius: 4px;
+    margin-top: 4px;
+    background-color: var(--lowContrast);
+
+    &:first-child {
+      margin-top: 0px;
+    }
+
+    &[aria-selected='true'],
+    &:hover {
+      background: var(--vcp-c-brand);
+      color: #fff;
+
+      svg {
+        color: #fff;
+      }
+
+      [command-linear-shortcuts] {
+        display: flex;
+        margin-left: auto;
+        gap: 8px;
+
+        kbd {
+          font-family: var(--font-sans);
+          font-size: 13px;
+          color: var(--gray11);
+        }
+      }
+    }
+
+    // &[aria-disabled='true'] {
+    //   color: var(--gray8);
+    //   cursor: not-allowed;
+    // }
+
+    &:active {
+      transition-property: background;
+      background: var(--gray4);
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: var(--gray10);
+    }
+  }
+
+  [command-empty=''] {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 64px;
+    white-space: pre-wrap;
+    color: var(--gray11);
+  }
+
+  [command-dialog-mask] {
+    background-color: rgba(75, 75, 75, 0.8);
+  }
+
+  [command-dialog-header] {
+    padding: 12px;
+  }
+
+  [command-dialog-body] {
+    padding: 0 12px 12px;
+  }
+
+  [command-dialog-footer] {
+    align-items: center;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+    display: flex;
+    flex-direction: row-reverse;
+    flex-shrink: 0;
+    height: 44px;
+    justify-content: space-between;
+    padding: 0 12px;
+    position: relative;
+    user-select: none;
+    width: 100%;
+    z-index: 300;
+  }
+
+  [command-group-heading] {
+    color: var(--vcp-c-brand);
+    font-size: 0.85em;
+    font-weight: 600;
+    line-height: 32px;
+    margin: 0 -4px;
+    padding: 8px 4px 0;
+    top: 0;
+    z-index: 10;
+    width: 100%;
+  }
+
+  .command-palette-commands {
+    color: var(--docsearch-muted-color);
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+    }
+    li:not(:last-of-type) {
+      margin-right: 0.8em;
+    }
+  }
+
+  .command-palette-logo {
+    a {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  .command-palette-commands-key {
+    align-items: center;
+    background: var(--gray3);
+    border-radius: 2px;
+    display: flex;
+    height: 18px;
+    justify-content: center;
+    margin-right: 0.4em;
+    padding: 0 0 1px;
+    color: var(--gray11);
+    border: 0;
+    width: 20px;
+  }
+}
+
+.dark .algolia [command-dialog-footer] {
+  box-shadow: none;
+}
+
+// transition for command-dialog
+// .command-dialog-enter-active,
+// .command-dialog-leave-active {
+//   transition: opacity 0.2s ease-in-out;
+// }
+
+// .command-dialog-enter-from,
+// .command-dialog-leave-to {
+//   opacity: 0;
+// }
+
+// .command-dialog-enter-active {
+//   transition-duration: 0.5s;
+// }
+
+// // transition for command-dialog-wrapper
+// .command-dialog-enter-active [command-dialog-wrapper] {
+//   // transition-delay: 0.2s;
+// }
+
+// .command-dialog-enter-from [command-dialog-wrapper],
+// .command-dialog-leave-to [command-dialog-wrapper] {
+//   // opacity: 0;
+//   transform: translateY(10px) scale(0.95);
+// }
+
+// .command-dialog-enter-active [command-dialog-wrapper] {
+//   transition: transform ease-out 0.3s;
+// }
+
+// .command-dialog-enter-to [command-dialog-wrapper],
+// .command-dialog-leave-from [command-dialog-wrapper] {
+//   opacity: 1;
+//   transform: translateY(0) scale(1);
+// }
+
+// .command-dialog-leave-active [command-dialog-wrapper] {
+//   transition: transfrom ease-in 0.2s;
+// }

package/src/styles/scss/global.scss

@@ -0,0 +1,161 @@
+@import 'highlight.scss';
+
+html,
+body,
+#app {
+  height: 100%;
+}
+body {
+  margin: 0;
+  padding: 0;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --font-sans: 'Inter', --apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --app-bg: var(--gray1);
+  --app-text: #000000;
+  --command-shadow: 0 16px 70px rgb(0 0 0 / 20%);
+
+  --lowContrast: #ffffff;
+  --highContrast: #000000;
+  --vcp-c-brand: #44bd87;
+  --vcp-c-accent: #35495e;
+
+  --gray1: hsl(0, 0%, 98%);
+  --gray2: hsl(0, 0%, 97.3%);
+  --gray3: hsl(0, 0%, 95.1%);
+  --gray4: hsl(0, 0%, 93%);
+  --gray5: hsl(0, 0%, 90.9%);
+  --gray6: hsl(0, 0%, 88.7%);
+  --gray7: hsl(0, 0%, 85.8%);
+  --gray8: hsl(0, 0%, 78%);
+  --gray9: hsl(0, 0%, 56.1%);
+  --gray10: hsl(0, 0%, 52.3%);
+  --gray11: hsl(0, 0%, 43.5%);
+  --gray12: hsl(0, 0%, 9%);
+
+  --grayA1: hsla(0, 0%, 0%, 0.012);
+  --grayA2: hsla(0, 0%, 0%, 0.027);
+  --grayA3: hsla(0, 0%, 0%, 0.047);
+  --grayA4: hsla(0, 0%, 0%, 0.071);
+  --grayA5: hsla(0, 0%, 0%, 0.09);
+  --grayA6: hsla(0, 0%, 0%, 0.114);
+  --grayA7: hsla(0, 0%, 0%, 0.141);
+  --grayA8: hsla(0, 0%, 0%, 0.22);
+  --grayA9: hsla(0, 0%, 0%, 0.439);
+  --grayA10: hsla(0, 0%, 0%, 0.478);
+  --grayA11: hsla(0, 0%, 0%, 0.565);
+  --grayA12: hsla(0, 0%, 0%, 0.91);
+
+  --blue1: hsl(206, 100%, 99.2%);
+  --blue2: hsl(210, 100%, 98%);
+  --blue3: hsl(209, 100%, 96.5%);
+  --blue4: hsl(210, 98.8%, 94%);
+  --blue5: hsl(209, 95%, 90.1%);
+  --blue6: hsl(209, 81.2%, 84.5%);
+  --blue7: hsl(208, 77.5%, 76.9%);
+  --blue8: hsl(206, 81.9%, 65.3%);
+  --blue9: hsl(206, 100%, 50%);
+  --blue10: hsl(208, 100%, 47.3%);
+  --blue11: hsl(211, 100%, 43.2%);
+  --blue12: hsl(211, 100%, 15%);
+}
+
+.dark {
+  --app-bg: var(--gray1);
+  --app-text: #ffffff;
+
+  --lowContrast: #000000;
+  --highContrast: #ffffff;
+
+  --gray1: hsl(0, 0%, 8.5%);
+  --gray2: hsl(0, 0%, 11%);
+  --gray3: hsl(0, 0%, 13.6%);
+  --gray4: hsl(0, 0%, 15.8%);
+  --gray5: hsl(0, 0%, 17.9%);
+  --gray6: hsl(0, 0%, 20.5%);
+  --gray7: hsl(0, 0%, 24.3%);
+  --gray8: hsl(0, 0%, 31.2%);
+  --gray9: hsl(0, 0%, 43.9%);
+  --gray10: hsl(0, 0%, 49.4%);
+  --gray11: hsl(0, 0%, 62.8%);
+  --gray12: hsl(0, 0%, 93%);
+
+  --grayA1: hsla(0, 0%, 100%, 0);
+  --grayA2: hsla(0, 0%, 100%, 0.026);
+  --grayA3: hsla(0, 0%, 100%, 0.056);
+  --grayA4: hsla(0, 0%, 100%, 0.077);
+  --grayA5: hsla(0, 0%, 100%, 0.103);
+  --grayA6: hsla(0, 0%, 100%, 0.129);
+  --grayA7: hsla(0, 0%, 100%, 0.172);
+  --grayA8: hsla(0, 0%, 100%, 0.249);
+  --grayA9: hsla(0, 0%, 100%, 0.386);
+  --grayA10: hsla(0, 0%, 100%, 0.446);
+  --grayA11: hsla(0, 0%, 100%, 0.592);
+  --grayA12: hsla(0, 0%, 100%, 0.923);
+
+  --blue1: hsl(212, 35%, 9.2%);
+  --blue2: hsl(216, 50%, 11.8%);
+  --blue3: hsl(214, 59.4%, 15.3%);
+  --blue4: hsl(214, 65.8%, 17.9%);
+  --blue5: hsl(213, 71.2%, 20.2%);
+  --blue6: hsl(212, 77.4%, 23.1%);
+  --blue7: hsl(211, 85.1%, 27.4%);
+  --blue8: hsl(211, 89.7%, 34.1%);
+  --blue9: hsl(206, 100%, 50%);
+  --blue10: hsl(209, 100%, 60.6%);
+  --blue11: hsl(210, 100%, 66.1%);
+  --blue12: hsl(206, 98%, 95.8%);
+}
+
+body {
+  background: var(--app-bg);
+}
+
+div [command-dialog-mask] {
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 200;
+  // animation: 333ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running shown;
+}
+
+div [command-dialog-wrapper] {
+  position: relative;
+  background: var(--gray2);
+  border-radius: 6px;
+  box-shadow: none;
+  flex-direction: column;
+  margin: 20vh auto auto;
+  max-width: 560px;
+  // animation: 333ms cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running shown;
+}
+
+div [command-dialog-footer] {
+  border-top: 1px solid var(--gray6);
+  align-items: center;
+  background: var(--gray4);
+  color: var(--gray11);
+  border-radius: 0 0 8px 8px;
+  box-shadow: none;
+  display: flex;
+  flex-direction: row-reverse;
+  flex-shrink: 0;
+  height: 44px;
+  justify-content: space-between;
+  padding: 0 12px;
+  position: relative;
+  user-select: none;
+  width: 100%;
+  z-index: 300;
+  font-size: 12px;
+}

package/src/styles/scss/highlight.scss

@@ -0,0 +1,12 @@
+@use 'sass:meta';
+
+html {
+  @include meta.load-css('highlight.js/styles/github');
+}
+html.dark {
+  @include meta.load-css('highlight.js/styles/github-dark');
+}
+
+code.hljs {
+  border-radius: 16px;
+}