@sugarat/theme 0.1.13 → 0.1.15

package/node.d.ts

@@ -132,6 +132,17 @@ declare namespace Theme {
         url: string;
         avatar: string;
     }
+    type SearchConfig = boolean | 'pagefind' | {
+        btnPlaceholder?: string;
+        placeholder?: string;
+        emptyText?: string;
+        /**
+         * @example
+         * 'Total: {{searchResult}} search results.'
+         */
+        heading?: string;
+        mode?: boolean | 'pagefind';
+    };
     interface BlogConfig {
         blog?: false;
         pagesData: PageData[];
@@ -139,7 +150,7 @@ declare namespace Theme {
         author?: string;
         hotArticle?: HotArticle;
         home?: HomeBlog;
-        search?: boolean | 'pagefind';
+        search?: SearchConfig;
         /**
          * 配置评论
          * power by https://giscus.app/zh-CN
@@ -155,34 +166,14 @@ declare namespace Theme {
         friend?: FriendLink[];
     }
     interface Config extends DefaultTheme.Config {
-        blog: BlogConfig;
+        blog?: BlogConfig;
     }
     interface HomeConfig {
         handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>;
     }
 }
 
-declare function getThemeConfig(cfg?: Partial<Theme.BlogConfig>): {
-    blog: {
-        blog?: false | undefined;
-        pagesData: Theme.PageData[];
-        srcDir?: string | undefined;
-        author?: string | undefined;
-        hotArticle?: Theme.HotArticle | undefined;
-        home?: Theme.HomeBlog | undefined;
-        search?: boolean | "pagefind" | undefined;
-        comment?: false | Theme.GiscusConfig | undefined;
-        recommend?: Theme.RecommendArticle | undefined;
-        article?: Theme.ArticleConfig | undefined;
-        alert?: Theme.Alert | undefined;
-        popover?: Theme.Popover | undefined;
-        friend?: Theme.FriendLink[] | undefined;
-    };
-    sidebar: {
-        text: string;
-        items: never[];
-    }[];
-};
+declare function getThemeConfig(cfg?: Partial<Theme.BlogConfig>): any;
 declare function getDefaultTitle(content: string): string;
 declare function clearMatterContent(content: string): string;
 declare function getFileBirthTime(url: string): string;

package/node.js

@@ -71,6 +71,7 @@ function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
 }
 
 // src/node.ts
+var checkKeys = ["themeConfig"];
 function getThemeConfig(cfg) {
   const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || ".";
   const files = import_fast_glob.default.sync(`${srcDir}/**/*.md`, { ignore: ["node_modules"] });
@@ -116,17 +117,73 @@ function getThemeConfig(cfg) {
       meta
     };
   }).filter((v) => v.meta.layout !== "home");
+  const extraConfig = {};
+  if (cfg?.search === "pagefind" || cfg?.search instanceof Object && cfg.search.mode === "pagefind") {
+    checkKeys.push("vite");
+    let flag = true;
+    let originLog = null;
+    extraConfig.vite = {
+      plugins: [
+        {
+          name: "@sugarar/theme-plugin-pagefind",
+          enforce: "pre",
+          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);
+                }
+              });
+            }
+          },
+          transform(code, id) {
+            if (id.endsWith("theme-default/Layout.vue")) {
+              return code.replace(
+                "<VPContent>",
+                "<VPContent data-pagefind-body>"
+              );
+            }
+            return code;
+          }
+        }
+      ]
+    };
+  }
   return {
-    blog: {
-      pagesData: data,
-      ...cfg
+    themeConfig: {
+      blog: {
+        pagesData: data,
+        ...cfg
+      },
+      ...cfg?.blog !== false ? {
+        sidebar: [
+          {
+            text: "",
+            items: []
+          }
+        ]
+      } : void 0
     },
-    sidebar: [
-      {
-        text: "",
-        items: []
-      }
-    ]
+    ...extraConfig
   };
 }
 function getDefaultTitle(content) {
@@ -183,59 +240,16 @@ 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);
-                }
-              });
-            }
-          }
-        }
-      ]
-    };
+  if (config.themeConfig?.themeConfig) {
+    config.extends = checkKeys.reduce((pre, key) => {
+      pre[key] = config.themeConfig[key];
+      delete config.themeConfig[key];
+      return pre;
+    }, {});
+    setTimeout(() => {
+      console.warn("==\u2193 \u4E3B\u9898\u914D\u7F6E\u65B9\u5F0F\u8FC7\u671F\uFF0C\u8BF7\u5C3D\u5FEB\u53C2\u7167\u6587\u6863\u66F4\u65B0 \u2193==");
+      console.warn("https://theme.sugarat.top/config/global.html");
+    }, 1200);
   }
   return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {

package/src/components/BlogApp.vue

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

package/src/components/BlogArticleAnalyze.vue

@@ -104,7 +104,7 @@ const publishDate = computed(() => {
 })
 
 const { theme } = useData<Theme.Config>()
-const globalAuthor = computed(() => theme.value.blog.author || '')
+const globalAuthor = computed(() => theme.value.blog?.author || '')
 const author = computed(
   () => currentArticle.value?.meta.author || globalAuthor.value
 )

package/src/components/BlogSearch.vue

@@ -11,28 +11,27 @@
           stroke-linejoin="round"
         ></path>
       </svg>
-      <span class="search-tip">搜索</span>
-      <span class="metaKey"> ⌘ K </span>
+      <span v-if="!isMinimized" class="search-tip">{{
+        searchConfig?.btnPlaceholder || '搜索'
+      }}</span>
+      <span v-if="!isMinimized" class="metaKey"> {{ metaKey }} K </span>
     </div>
     <Command.Dialog :visible="searchModal" theme="algolia">
       <template #header>
         <Command.Input
           v-model:value="searchWords"
-          placeholder="请输入要搜索的内容"
+          :placeholder="searchConfig?.placeholder || '请输入要搜素的内容'"
         />
       </template>
       <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.Empty v-if="!searchResult.length">{{
+              searchConfig?.emptyText || 'No results found.'
+            }}</Command.Empty>
+            <Command.Group v-else :heading="headingText">
               <Command.Item
-                v-for="item in showSearchResult"
+                v-for="item in searchResult"
                 :data-value="withBase(item.route)"
                 :key="item.route"
                 @select="handleSelect"
@@ -128,27 +127,76 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue'
-// @ts-ignore
+// @ts-nocheck
+import { computed, nextTick, ref, watch, onBeforeMount, onMounted } from 'vue'
 import { Command } from 'vue-command-palette'
 import { useRoute, useRouter, withBase } from 'vitepress'
-import { useMagicKeys } from '@vueuse/core'
+import { useMagicKeys, useWindowSize } 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 windowSize = useWindowSize()
 
+const isMinimized = computed(() => windowSize.width.value < 760)
+const flexValue = computed(() => (isMinimized.value ? 0 : 1))
+const { search: searchConfig } = useBlogConfig()
+
+const headingText = computed(() => {
+  return searchConfig?.heading
+    ? searchConfig.heading.replace(
+        /\{\{searchResult\}\}/,
+        searchResult.value.length
+      )
+    : `共: ${searchResult.value.length} 个搜索结果`
+})
+const openSearch = computed(() =>
+  searchConfig instanceof Object
+    ? searchConfig.mode ?? true
+    : searchConfig || true
+)
+
+const addInlineScript = () => {
+  const scriptText = `import('/_pagefind/pagefind.js')
+        .then((module) => {
+          window.__pagefind__ = module
+        })
+        .catch(() => {
+          console.log('not load /_pagefind/pagefind.js')
+        })`
+  const inlineScript = document.createElement('script')
+  inlineScript.innerHTML = scriptText
+  document.head.appendChild(inlineScript)
+}
+
+onBeforeMount(() => {
+  if (openSearch.value === 'pagefind') {
+    addInlineScript()
+  }
+})
+
+const metaKey = ref('')
+onMounted(() => {
+  metaKey.value = /(Mac|iPhone|iPod|iPad)/i.test(navigator?.platform)
+    ? '⌘'
+    : 'Ctrl'
+})
 const searchModal = ref(false)
 const searchWords = ref('')
 const docs = useArticles()
 
 const keys = useMagicKeys()
 const CmdK = keys['Meta+K']
+const CtrlK = keys['Ctrl+K']
 // eslint-disable-next-line dot-notation, prefer-destructuring
 const Escape = keys['Escape']
 
+watch(CtrlK, (v) => {
+  if (v) {
+    searchModal.value = true
+  }
+})
 watch(CmdK, (v) => {
   if (v) {
     searchModal.value = true
@@ -191,7 +239,7 @@ const inlineSearch = () => {
 watch(
   () => searchWords.value,
   async () => {
-    if (openSearch === 'pagefind') {
+    if (openSearch.value === 'pagefind') {
       // dev-server兜底
       // @ts-ignore
       if (!window?.__pagefind__?.search) {
@@ -252,15 +300,17 @@ watch(
     }
   }
 )
-const pageSize = ref(6)
-const currentPage = ref(0)
-const showSearchResult = computed(() => {
-  // 合法性处理
-  const pageIdx =
-    currentPage.value % Math.ceil(searchResult.value.length / pageSize.value)
-  const startIdx = pageIdx * pageSize.value
-  return searchResult.value.slice(startIdx, startIdx + pageSize.value)
-})
+
+// 搜索结果分页？
+// const pageSize = ref(6)
+// const currentPage = ref(0)
+// const showSearchResult = computed(() => {
+//   // 合法性处理
+//   const pageIdx =
+//     currentPage.value % Math.ceil(searchResult.value.length / pageSize.value)
+//   const startIdx = pageIdx * pageSize.value
+//   return searchResult.value.slice(startIdx, startIdx + pageSize.value)
+// })
 
 const router = useRouter()
 const route = useRoute()
@@ -275,8 +325,9 @@ const handleSelect = (target: any) => {
 
 <style lang="scss" scoped>
 .blog-search {
-  flex: 1;
-  margin-left: 10px;
+  flex: v-bind(flexValue);
+  display: flex;
+  padding-left: 32px;
   .nav-search-btn-wait {
     cursor: pointer;
     display: flex;
@@ -284,7 +335,6 @@ const handleSelect = (target: any) => {
     justify-content: center;
     padding: 6px;
     box-sizing: border-box;
-    width: 120px;
 
     .metaKey {
       margin-left: 10px;
@@ -292,7 +342,7 @@ const handleSelect = (target: any) => {
     }
 
     &:hover {
-      border: 1px solid #409eff;
+      border: 1px solid var(--vp-c-brand);
       border-radius: 6px;
     }
 

package/src/composables/config/blog.ts

@@ -51,11 +51,11 @@ export function useConfig() {
 }
 
 export function useBlogConfig() {
-  return inject(configSymbol)!.value.blog
+  return inject(configSymbol)!.value.blog!
 }
 
 export function useBlogThemeMode() {
-  return inject(configSymbol)!.value.blog.blog ?? true
+  return inject(configSymbol)!.value?.blog?.blog ?? true
 }
 export function useHomeConfig() {
   return inject(homeConfigSymbol)!
@@ -63,7 +63,7 @@ export function useHomeConfig() {
 
 export function useGiscusConfig() {
   const blogConfig = useConfig()
-  return blogConfig.config.blog.comment
+  return blogConfig.config?.blog?.comment
 }
 
 export function useArticles() {
@@ -80,10 +80,14 @@ export function useCurrentArticle() {
   const blogConfig = useConfig()
   const route = useRoute()
 
-  const docs = computed(() => blogConfig.config.blog.pagesData)
-  const currentArticle = computed(() =>
-    docs.value.find((v) => v.route === route.path.replace(/.html$/, ''))
-  )
+  const docs = computed(() => blogConfig.config?.blog?.pagesData)
+  const currentArticle = computed(() => {
+    const currentPath = route.path.replace(/.html$/, '')
+    return docs.value?.find((v) =>
+      // 兼容中文路径
+      [currentPath, decodeURIComponent(currentPath)].includes(v.route)
+    )
+  })
 
   return currentArticle
 }

package/src/composables/config/index.ts

@@ -144,6 +144,21 @@ export namespace Theme {
     url: string
     avatar: string
   }
+  export type SearchConfig =
+    | boolean
+    | 'pagefind'
+    | {
+        btnPlaceholder?: string
+        placeholder?: string
+        emptyText?: string
+        /**
+         * @example
+         * 'Total: {{searchResult}} search results.'
+         */
+        heading?: string
+        mode?: boolean | 'pagefind'
+      }
+
   export interface BlogConfig {
     blog?: false
     pagesData: PageData[]
@@ -151,8 +166,8 @@ export namespace Theme {
     author?: string
     hotArticle?: HotArticle
     home?: HomeBlog
-    // TODO: 本地全文搜索定制 pagefind || minisearch
-    search?: boolean | 'pagefind'
+    // TODO: 本地全文搜索定制 pagefind || minisearch || flexsearch
+    search?: SearchConfig
     /**
      * 配置评论
      * power by https://giscus.app/zh-CN
@@ -169,7 +184,7 @@ export namespace Theme {
   }
 
   export interface Config extends DefaultTheme.Config {
-    blog: BlogConfig
+    blog?: BlogConfig
   }
   export interface HomeConfig {
     handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>

package/src/index.ts

@@ -17,6 +17,7 @@ export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),
   enhanceApp(ctx) {
+    // TODO: 优化到自定义组件中注册
     ctx.app.component('TimelinePage', TimelinePage)
   }
 }

package/src/node.ts

@@ -8,6 +8,8 @@ import type { UserConfig } from 'vitepress'
 import { formatDate } from './utils/index'
 import type { Theme } from './composables/config/index'
 
+const checkKeys = ['themeConfig']
+
 export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
   const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || '.'
   const files = glob.sync(`${srcDir}/**/*.md`, { ignore: ['node_modules'] })
@@ -82,17 +84,82 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
     })
     .filter((v) => v.meta.layout !== 'home')
 
+  const extraConfig: any = {}
+
+  if (
+    cfg?.search === 'pagefind' ||
+    (cfg?.search instanceof Object && cfg.search.mode === 'pagefind')
+  ) {
+    checkKeys.push('vite')
+    let flag = true
+    let originLog: any = null
+    extraConfig.vite = {
+      plugins: [
+        {
+          name: '@sugarar/theme-plugin-pagefind',
+          enforce: 'pre',
+          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)
+                }
+              })
+            }
+          },
+          // 添加检索的内容标识
+          transform(code: string, id: string) {
+            if (id.endsWith('theme-default/Layout.vue')) {
+              return code.replace(
+                '<VPContent>',
+                '<VPContent data-pagefind-body>'
+              )
+            }
+            return code
+          }
+        }
+      ]
+    }
+  }
   return {
-    blog: {
-      pagesData: data as Theme.PageData[],
-      ...cfg
+    themeConfig: {
+      blog: {
+        pagesData: data as Theme.PageData[],
+        ...cfg
+      },
+      ...(cfg?.blog !== false
+        ? {
+            sidebar: [
+              {
+                text: '',
+                items: []
+              }
+            ]
+          }
+        : undefined)
     },
-    sidebar: [
-      {
-        text: '',
-        items: []
-      }
-    ]
+    ...extraConfig
   }
 }
 
@@ -189,61 +256,22 @@ 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)
-                }
-              })
-            }
-          }
-        }
-      ]
-    }
+  // 兼容低版本主题配置
+  // @ts-ignore
+  if (config.themeConfig?.themeConfig) {
+    config.extends = checkKeys.reduce((pre, key) => {
+      // @ts-ignore
+      pre[key] = config.themeConfig[key]
+      // @ts-ignore
+      delete config.themeConfig[key]
+      return pre
+    }, {})
+
+    // 打印warn信息
+    setTimeout(() => {
+      console.warn('==↓ 主题配置方式过期，请尽快参照文档更新 ↓==')
+      console.warn('https://theme.sugarat.top/config/global.html')
+    }, 1200)
   }
   return config
 }

package/src/utils/index.ts

@@ -39,7 +39,7 @@ export function isCurrentWeek(date: Date, target?: Date) {
 }
 
 export function formatShowDate(date: Date | string) {
-  const source = +new Date(date)
+  const source = date ? +new Date(date) : +new Date()
   const now = +new Date()
   const diff = now - source
   const oneSeconds = 1000