fix: only hot when router.isReady & add categories/tags for post meta

docs/pages/guide/third-party/index.md

@@ -118,12 +118,18 @@ export default defineAppSetup((ctx) => {
 - 新建 `setup/gtag.ts`:
 
 ```ts
-import VueGtag from 'vue-gtag-next'
+import VueGtag, { trackRouter } from 'vue-gtag-next'
 import type { UserModule } from 'valaxy'
 
-export const install: UserModule = ({ app }) => {
-  app.use(VueGtag, {
-    property: { id: 'G-XXXXXXXXXX' },
-  })
+export const install: UserModule = ({ isClient, app, router }) => {
+  if (isClient) {
+    app.use(VueGtag, {
+      property: { id: 'G-1LL0D86CY9' },
+    })
+
+    trackRouter(router)
+  }
 }
 ```
+
+More info see [vue-gtag-next](https://github.com/MatteoGabriele/vue-gtag-next).

packages/valaxy-theme-yun/components/YunPostCard.vue

@@ -57,24 +57,12 @@ const { icon, styles } = usePostProperty(props.post.type)
     <!-- always show -->
     <div w="full" class="yun-card-actions flex justify-between" border="t" text="sm">
       <div class="inline-flex">
-        <router-link
-          :to="{
-            path: '/categories/',
-            query: { category: Array.isArray(post.categories) ? post.categories[post.categories.length - 1] : post.categories },
-          }"
-          class="post-categories inline-flex justify-center items-center" m="l-2"
-        >
-          <div m="x-1" i-ri-folder-2-line />
-          {{ Array.isArray(post.categories) ? post.categories.join(' > ') : post.categories }}
-        </router-link>
+        <YunPostCategories :categories="post.categories" />
       </div>
 
       <div class="post-tags inline-flex" m="r-2">
         <template v-if="post.tags">
-          <router-link v-for="tag, i in post.tags" :key="i" :to="{ path: '/tags/', query: { tag } }" m="x-1" class="post-tag inline-flex justify-center items-center">
-            <div m="r-1" i-ri-price-tag-3-line />
-            {{ tag }}
-          </router-link>
+          <YunPostTags :tags="post.tags" />
         </template>
       </div>
     </div>

packages/valaxy-theme-yun/components/YunPostCategories.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+
+defineProps<{
+  categories: Post['categories']
+}>()
+</script>
+
+<template>
+  <router-link
+    :to="{
+      path: '/categories/',
+      query: { category: Array.isArray(categories) ? categories[categories.length - 1] : categories },
+    }"
+    class="post-categories inline-flex justify-center items-center" m="l-2"
+  >
+    <div m="x-1" i-ri-folder-2-line />
+    {{ Array.isArray(categories) ? categories.join(' > ') : categories }}
+  </router-link>
+</template>

packages/valaxy-theme-yun/components/YunPostCategoriesAndTags.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+}>()
+</script>
+
+<template>
+  <div class="inline-flex" text="sm" py="1">
+    <YunPostCategories :categories="frontmatter.categories" />
+    <span v-if="frontmatter.categories && frontmatter.tags" mx="2">-</span>
+    <template v-if="frontmatter.tags">
+      <YunPostTags :tags="frontmatter.tags" />
+    </template>
+  </div>
+</template>

packages/valaxy-theme-yun/components/YunPostTags.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+
+defineProps<{
+  tags: Post['tags']
+}>()
+</script>
+
+<template>
+  <router-link v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }" m="x-1" class="post-tag inline-flex justify-center items-center">
+    <div m="r-1" i-ri-price-tag-3-line />
+    {{ tag }}
+  </router-link>
+</template>

packages/valaxy-theme-yun/layouts/post.vue

@@ -18,8 +18,8 @@ const showSponsor = computed(() => {
   <Layout>
     <template #main-header-after>
       <YunPostMeta :frontmatter="frontmatter" />
-
       <YunWalineMeta />
+      <YunPostCategoriesAndTags :frontmatter="frontmatter" />
     </template>
 
     <template #main-content-after>

packages/valaxy/client/modules/valaxy.ts

@@ -71,22 +71,6 @@ function handleHMR(router: Router): void {
         // console.log(payload.pageData.headers)
         Object.assign(router.currentRoute.value.meta, payload.pageData)
       }
-      else {
-        // hot reload for global categories & tags
-        let path = payload.path
-        if (payload.path.endsWith('.md'))
-          path = payload.path.slice(0, -3)
-
-        const routeName = path.split('/').slice(1).join('-')
-
-        if (!router.hasRoute(routeName))
-          return
-
-        const route = router.getRoutes().find(r => r.name === routeName)!
-        router.removeRoute(routeName)
-        route.meta.frontmatter = payload.pageData.frontmatter
-        router.addRoute(route)
-      }
     })
   }
 }

packages/valaxy/client/stores/site.ts

@@ -1,6 +1,8 @@
 import { computed, ref } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
+import { useRouter } from 'vue-router'
 import { usePostList } from '..'
+import type { PageDataPayload } from '../../types'
 
 /**
  * cache site global store
@@ -17,9 +19,30 @@ export const useSiteStore = defineStore('site', () => {
       return usePostList().value
   })
 
-  // hot reload when save md
-  import.meta.hot!.on('valaxy:pageData', () => {
-    reload.value += 1
+  const router = useRouter()
+  router.isReady().then(() => {
+    // hot reload when save md
+    if (import.meta.hot) {
+      import.meta.hot!.on('valaxy:pageData', (payload: PageDataPayload) => {
+        // hot reload for global categories & tags
+        let path = payload.path
+        if (payload.path.endsWith('.md'))
+          path = payload.path.slice(0, -3)
+
+        const routeName = path.split('/').slice(1).join('-')
+
+        if (!router.hasRoute(routeName))
+          return
+
+        const route = router.getRoutes().find(r => r.name === routeName)!
+        router.removeRoute(routeName)
+        route.meta.frontmatter = payload.pageData.frontmatter
+        router.addRoute(route)
+
+        // trigger computed reload
+        reload.value += 1
+      })
+    }
   })
 
   return {