@sugarat/theme 0.1.9 → 0.1.10

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.10",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -52,6 +52,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,5 +1,5 @@
 <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 />
@@ -47,9 +47,7 @@
                   {{ formatDate(item.meta.date, 'yyyy-MM-dd') }}</span
                 >
               </div>
-              <div class="des">
-                {{ item.meta.description }}
-              </div>
+              <div class="des" v-html="item.meta.description"></div>
             </a>
           </el-card>
         </li>
@@ -73,6 +71,7 @@ import {
 import { useWindowSize } from '@vueuse/core'
 import { formatDate } from '../utils'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
+import { Theme } from '../composables/config'
 
 const { search: openSearch = true } = useBlogConfig()
 
@@ -96,16 +95,56 @@ watch(
 
 const docs = useArticles()
 
-const searchResult = computed(() => {
-  if (!searchWords.value) return []
-  const result = docs.value.filter((v) =>
+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)
   )
-  result.sort((a, b) => {
+  searchResult.value.sort((a, b) => {
     return +new Date(b.meta.date) - +new Date(a.meta.date)
   })
-  return result
-})
+}
+watch(
+  () => searchWords.value,
+  () => {
+    if (openSearch === 'pagefind') {
+      // dev-server兜底
+      // @ts-ignore
+      if (!window?.__pagefind__?.search) {
+        inlineSearch()
+        return
+      }
+      // @ts-ignore
+      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()
+    }
+  }
+)
+
 const pageSize = ref(6)
 const currentPage = ref(0)
 const showSearchResult = computed(() => {

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/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
 }