@sugarat/theme 0.1.14 → 0.1.16

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

package/node.js

@@ -118,27 +118,15 @@ function getThemeConfig(cfg) {
     };
   }).filter((v) => v.meta.layout !== "home");
   const extraConfig = {};
-  if (cfg?.search === "pagefind") {
-    checkKeys.push("head", "vite");
-    extraConfig.head = [
-      [
-        "script",
-        {},
-        `import('/_pagefind/pagefind.js')
-        .then((module) => {
-          window.__pagefind__ = module
-        })
-        .catch(() => {
-          console.log('not load /_pagefind/pagefind.js')
-        })`
-      ]
-    ];
+  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) {
@@ -166,6 +154,15 @@ function getThemeConfig(cfg) {
                 }
               });
             }
+          },
+          transform(code, id) {
+            if (id.endsWith("theme-default/Layout.vue")) {
+              return code.replace(
+                "<VPContent>",
+                "<VPContent data-pagefind-body>"
+              );
+            }
+            return code;
           }
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -45,7 +45,7 @@
     "sass": "^1.56.1",
     "tsup": " ^6.5.0",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-alpha.46",
+    "vitepress": "1.0.0-alpha.62",
     "vue": "^3.2.45"
   },
   "scripts": {

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,7 +51,7 @@ export function useConfig() {
 }
 
 export function useBlogConfig() {
-  return inject(configSymbol)!.value.blog
+  return inject(configSymbol)!.value.blog!
 }
 
 export function useBlogThemeMode() {
@@ -81,9 +81,13 @@ export function useCurrentArticle() {
   const route = useRoute()
 
   const docs = computed(() => blogConfig.config?.blog?.pagesData)
-  const currentArticle = computed(() =>
-    docs.value?.find((v) => v.route === route.path.replace(/.html$/, ''))
-  )
+  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

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

@@ -86,27 +86,18 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
 
   const extraConfig: any = {}
 
-  if (cfg?.search === 'pagefind') {
-    checkKeys.push('head', 'vite')
-    extraConfig.head = [
-      [
-        'script',
-        {},
-        `import('/_pagefind/pagefind.js')
-        .then((module) => {
-          window.__pagefind__ = module
-        })
-        .catch(() => {
-          console.log('not load /_pagefind/pagefind.js')
-        })`
-      ]
-    ]
+  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
@@ -136,6 +127,16 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
                 }
               })
             }
+          },
+          // 添加检索的内容标识
+          transform(code: string, id: string) {
+            if (id.endsWith('theme-default/Layout.vue')) {
+              return code.replace(
+                '<VPContent>',
+                '<VPContent data-pagefind-body>'
+              )
+            }
+            return code
           }
         }
       ]

package/src/styles/scss/global.scss

@@ -115,7 +115,7 @@ ul {
 }
 
 body {
-  background: var(--app-bg);
+  // background: var(--app-bg);
 }
 
 div [command-dialog-mask] {

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