bump to vitepress@1.0.0-rc.22

.vitepress/config.ts

@@ -21,7 +21,17 @@ export default defineConfig({
     nav: themeConfig.nav,
     logo: themeConfig.logo,
     socialLinks: themeConfig.socialLinks,
-    search: { provider: 'local' },
+    search: {
+      provider: 'local',
+      options: {
+        detailedView: true,
+        _render: (src, env, md) => {
+          const html = md.render(src, env)
+          if (env.frontmatter?.search === false) return ''
+          return env.frontmatter?.title ? md.render('# ' + env.frontmatter?.title) + html : html
+        },
+      },
+    },
     footer: themeConfig.footer
   },
   srcExclude: ['README.md', 'README_CH.md', 'CHANGELOG.md'],

.vitepress/theme/components/Archives.vue

@@ -1,9 +1,8 @@
 <script setup lang='ts'>
+import { withBase } from 'vitepress'
 import { initArchives } from '../utils'
 import { data as posts } from '../posts.data'
-import themeConfig from '../config'
 
-const root = themeConfig.base ? themeConfig.base.slice(0, -1) : ''
 const archives = initArchives(posts)
 const years = Object.keys(archives).sort().reverse()
 </script>
@@ -16,7 +15,7 @@ const years = Object.keys(archives).sort().reverse()
     <dl v-for='year in years'>
       <h3 class='pb-2 text-xl font-extrabold'>{{ year }}</h3>
       <a v-for='post in archives[year]' target="_blank" 
-        class='decoration-2 hover:underline' :href='root + post.url'>
+        class='decoration-2 hover:underline' :href='withBase(post.url)'>
         <dd class='flex justify-between my-3 text-base leading-6 font-medium 
           text-gray-500 dark:text-gray-300'>
           <div class='truncate w-64 sm:w-fit'>{{ post.title }}</div>

.vitepress/theme/components/Category.vue

@@ -1,10 +1,9 @@
 <script setup lang='ts'>
+import { withBase } from 'vitepress';
 import blogStore from '../store'
 import { initCategory } from '../utils'
 import { data as posts } from '../posts.data'
-import themeConfig from '../config'
 
-const root = themeConfig.base ? themeConfig.base.slice(0, -1) : ''
 const category = initCategory(posts)
 
 function catSwitcher(cat: string) {  // 🐈🕹️
@@ -25,7 +24,7 @@ function catSwitcher(cat: string) {  // 🐈🕹️
     <h3 id='catName' class='pb-2' v-show='blogStore.selectedCat'>📁 {{ blogStore.selectedCat }}</h3>
     <dl v-show='blogStore.selectedCat'>
       <a v-for='post in category[blogStore.selectedCat]' target="_blank" 
-        class='decoration-2 hover:underline' :href='root + post.url'>
+        class='decoration-2 hover:underline' :href='withBase(post.url)'>
         <dd class='flex justify-between my-3 text-base leading-6 font-medium 
           text-gray-500 dark:text-gray-300'>
           <div class='truncate w-64 sm:w-fit'>{{ post.title }}</div>

.vitepress/theme/components/Home.vue

@@ -1,10 +1,10 @@
 <script setup lang='ts'>
+import { withBase } from 'vitepress'
 import Pagination from './Pagination.vue'
 import themeConfig from '../config'
 import blogStore from '../store'
 import { data as posts } from '../posts.data'
 
-const root = themeConfig.base ? themeConfig.base.slice(0, -1) : ''
 const postsPerPage = themeConfig.postsPerPage
 
 function showPosts() {
@@ -23,14 +23,14 @@ function showPosts() {
           <PostInfo :date='post.date.string' :category='post.category' />
           <h2 class='pb-2 text-2xl leading-8 font-bold tracking-tight' 
             aria-label='post title'>
-            <a class='text-gray-900 dark:text-white' :href='root + post.url'>
+            <a class='text-gray-900 dark:text-white' :href='withBase(post.url)'>
               {{post.title}} 
             </a>
           </h2>
           <div v-if='post.excerpt' class='theme-excerpt'
             v-html='post.excerpt'></div>
           <div class='grid text-base leading-6 font-medium'>
-            <a class='theme-readmore' aria-label='read more' :href='root + post.url'>
+            <a class='theme-readmore' aria-label='read more' :href='withBase(post.url)'>
               Read more
             </a>
           </div>

.vitepress/theme/components/Pagination.vue

@@ -73,23 +73,23 @@ function showPages(action: string) {
   <nav class='flex justify-center pt-6' v-show='totalPages > 1' aria-label='page navigation'>
     <ul class='flex'>
       <li>
-        <a class='theme-pagination rounded-l-lg' @click.prevent="showPages('prev')" href="#!">
+        <span class='theme-pagination rounded-l-lg' @click.prevent="showPages('prev')">
           <span class='sr-only'>Previous</span>
           <ChevronLeftIcon class='h-5 w-5' aria-hidden='true' />
-        </a>
+        </span>
       </li>
       <li v-for='page in genPages()'>
-        <a @click.prevent='goPage(page)' 
+        <span @click.prevent='goPage(page)' 
           :class="blogStore.currentPage === (page + 1) 
           ? 'theme-pagination-clicked theme-pagination' : 'theme-pagination'">
           {{ page + 1 }}
-        </a>
+        </span>
       </li>
       <li>
-        <a class='theme-pagination rounded-r-lg' @click.prevent="showPages('next')" href='#!'>
+        <span class='theme-pagination rounded-r-lg' @click.prevent="showPages('next')">
           <span class='sr-only'>Next</span>
           <ChevronRightIcon class='h-5 w-5' aria-hidden='true' />
-        </a>
+        </span>
       </li>
     </ul>
   </nav>

.vitepress/theme/components/PostFooter.vue

@@ -1,12 +1,10 @@
 <script setup lang='ts'>
 import { watchEffect } from 'vue'
-import { useData } from 'vitepress'
+import { useData, withBase } from 'vitepress'
 import blogStore from '../store'
 import { data as posts } from '../posts.data'
-import themeConfig from '../config'
 
-const root = themeConfig.base ? themeConfig.base.slice(0, -1) : ''
-const tagsURL = `${root}/tags#tagName`
+const tagsURL = withBase('/tags#tagName')
 const { frontmatter } = useData()
 let postIndex: number,
   prevIndex: number,
@@ -19,10 +17,10 @@ let postIndex: number,
 watchEffect(() => {
   postIndex = posts.findIndex(post => post.title === frontmatter.value.title)
   prevIndex = postIndex > 0 ? postIndex - 1 : -1
-  prevUrl = prevIndex < 0 ? '' : root + posts[prevIndex].url
+  prevUrl = prevIndex < 0 ? '' : withBase(posts[prevIndex].url)
   prevTitle = prevIndex < 0 ? '' : posts[prevIndex].title
   nextIndex = postIndex < (posts.length - 1) ? postIndex + 1 : -1
-  nextUrl = nextIndex < 0 ? '' : root + posts[nextIndex].url
+  nextUrl = nextIndex < 0 ? '' : withBase(posts[nextIndex].url)
   nextTitle = nextIndex < 0 ? '' : posts[nextIndex].title
 })
 

.vitepress/theme/components/Tags.vue

@@ -1,10 +1,9 @@
 <script setup lang='ts'>
+import { withBase } from 'vitepress';
 import blogStore from '../store'
 import { initTags } from '../utils'
 import { data as posts } from '../posts.data'
-import themeConfig from '../config'
 
-const root = themeConfig.base ? themeConfig.base.slice(0, -1) : ''
 const tags = initTags(posts)
 
 function tagSwitcher(tag: string) {
@@ -24,7 +23,7 @@ function tagSwitcher(tag: string) {
     <h3 id='tagName' class='pb-2' v-show='blogStore.selectedTag'>🔖 {{ blogStore.selectedTag }}</h3>
     <dl class='' v-show='blogStore.selectedTag'>
       <a v-for='post in tags[blogStore.selectedTag]' target='_blank' 
-        class='decoration-2 hover:underline' :href='root + post.url'>
+        class='decoration-2 hover:underline' :href='withBase(post.url)'>
         <dd class='flex justify-between my-3 text-base leading-6 font-medium 
           text-gray-500 dark:text-gray-300'>
           <div class='truncate w-64 sm:w-fit'>{{ post.title }}</div>

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2023-10-19
+
+### Bug Fixes
+
+- wrong base url with History API call
 # 2023-10-17
 
 ### Bug Fixes
@@ -20,7 +25,9 @@
 
 ### Features
 
-- add workflow for deploy to GitHub pages
+- bump to vitepress@1.0.0-rc.22
+- [local search optimization](https://github.com/vuejs/vitepress/pull/2770#issuecomment-1685380396)
+- using <span> as pagination buttons instead of <a>
 
 # 2023-10-04
 

package.json

@@ -21,10 +21,10 @@
     "@heroicons/vue": "^2.0.18",
     "autoprefixer": "^10.4.15",
     "markdown-it-mathjax3": "^4.3.2",
-    "postcss": "^8.4.29",
+    "postcss": "8.4.31",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
-    "vitepress": "1.0.0-rc.14",
+    "vitepress": "1.0.0-rc.22",
     "vue": "^3.3.4"
   }
 }