valaxy-theme-yun 0.28.0-beta.6 → 0.28.0

package/App.vue

@@ -55,14 +55,12 @@ onMounted(() => {
   document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
   app.showLoading = false
 })
-
-const isDev = import.meta.env.DEV
 </script>
 
 <template>
   <TooltipProvider>
     <YunStratoApp v-if="yun.isStrato" />
-    <YunDebug v-if="isDev" />
+    <ValaxyDebug />
 
     <YunPageHeaderGradient />
     <YunNavMenu />

package/components/YunCategory.vue

@@ -25,7 +25,7 @@ const router = useRouter()
 
 const collapse = ref(props.collapsable)
 const { t } = useI18n()
-const { $t } = useValaxyI18n()
+const { $tCategory } = useValaxyI18n()
 
 const postCollapseElRef = ref<HTMLElement>()
 const { show } = useInvisibleElement(postCollapseElRef)
@@ -75,7 +75,7 @@ const motionVariants = props.level === 1
       @click="jumpToDisplayCategory(parentKey)"
     >
       <span>
-        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : $t(category.name) }}
+        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : $tCategory(category.name) }}
       </span>
       <span class="rounded-full px-1.5 bg-black/5 shadow-sm op-60" text="xs">
         {{ category.total }}

package/components/YunLayoutPostTag.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
   count: number
 }>()
 
-const { $t } = useValaxyI18n()
+const { $tTag } = useValaxyI18n()
 
 const motionVariants = yunSpringVariants({ i: props.i || 0, delay: 25 })
 </script>
@@ -19,7 +19,7 @@ const motionVariants = yunSpringVariants({ i: props.i || 0, delay: 25 })
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >
-    <span inline-flex>#{{ $t(title) }}</span>
+    <span inline-flex>#{{ $tTag(title) }}</span>
     <span inline-flex text="xs">[{{ count }}]</span>
   </span>
 </template>

package/components/YunPostCategories.vue

@@ -6,7 +6,7 @@ defineProps<{
   categories: Post['categories']
 }>()
 
-const { $t } = useValaxyI18n()
+const { $tCategory } = useValaxyI18n()
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const { $t } = useValaxyI18n()
   >
     <div m="x-1" inline-flex i-ri-folder-2-line />
     <span>
-      {{ Array.isArray(categories) ? categories.map($t).join(' / ') : $t(categories || '') }}
+      {{ Array.isArray(categories) ? categories.map($tCategory).join(' / ') : $tCategory(categories || '') }}
     </span>
   </RouterLink>
 </template>

package/components/YunPostMeta.vue

@@ -3,8 +3,6 @@ import type { Post } from 'valaxy'
 import { useSiteConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
-// @TODO: add edit by vscode directly when dev
-
 defineProps<{
   // FrontMatter
   frontmatter: Post
@@ -54,6 +52,8 @@ const siteConfig = useSiteConfig()
       </div>
 
       <YunWalineMeta />
+
+      <ValaxyOpenInEditor />
     </div>
   </div>
 </template>

package/components/YunPostTags.vue

@@ -6,7 +6,7 @@ defineProps<{
   tags: Post['tags']
 }>()
 
-const { $t } = useValaxyI18n()
+const { $tTag } = useValaxyI18n()
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const { $t } = useValaxyI18n()
       border
       hover="bg-blue-500 text-white"
     >
-      <span>{{ $t(tag) }}</span>
+      <span>{{ $tTag(tag) }}</span>
     </RouterLink>
   </div>
 </template>

package/composables/helper.ts

@@ -1,5 +1,5 @@
 import { isClient, useEventListener } from '@vueuse/core'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 
 /**
  * fetch data from source, and random
@@ -9,27 +9,49 @@ import { onMounted, ref, watch } from 'vue'
 export function useRandomData<T>(source: string | T[], random = false) {
   const data = ref<T[]>()
 
-  watch(() => source, async () => {
-    let rawData: T[]
-    if (typeof source === 'string') {
-      if (!isClient)
+  async function fetchData(url: string) {
+    if (!isClient)
+      return
+
+    try {
+      const res = await fetch(url)
+      if (!res.ok)
         return
-      rawData = (await fetch(source).then(res => res.json()) as T[]) || []
+      const rawData = (await res.json() as T[]) || []
+      data.value = random ? rawData.toSorted(() => Math.random() - 0.5) : rawData
+    }
+    catch {
+      // Network or JSON parse failure — leave data unchanged
+    }
+  }
+
+  if (typeof source === 'string') {
+    // Defer URL fetching to onMounted to prevent hydration mismatch.
+    // During SSG, the fetch is skipped (data stays undefined → empty list).
+    // If the fetch runs during hydration via an immediate watcher, data would
+    // update before hydration completes, causing a DOM mismatch error.
+    //
+    // Note: `source` is a plain parameter (not reactive), so no watch is needed.
+    // Callers pass `props.links` / `props.girls` which are stable for the
+    // component's lifetime.
+    if (isClient) {
+      onMounted(() => fetchData(source))
+    }
+  }
+  else {
+    // For static array data, set the initial value directly so SSR and client
+    // render the same content (original order, no random).
+    // Random sorting is deferred to onMounted below.
+    data.value = source as T[]
+
+    // Apply random sorting only after hydration is complete
+    if (random && isClient) {
+      onMounted(() => {
+        if (data.value) {
+          data.value = data.value.toSorted(() => Math.random() - 0.5)
+        }
+      })
     }
-    else { rawData = source }
-
-    // Always use original order during initial render to avoid hydration mismatch.
-    // Random sorting is deferred to onMounted (see below).
-    data.value = rawData
-  }, { immediate: true })
-
-  // Apply random sorting only after hydration is complete
-  if (random && isClient) {
-    onMounted(() => {
-      if (data.value) {
-        data.value = data.value.toSorted(() => Math.random() - 0.5)
-      }
-    })
   }
 
   return {

package/layouts/categories.vue

@@ -36,7 +36,7 @@ const posts = computed(() => {
   return list
 })
 
-const { $tO } = useValaxyI18n()
+const { $tO, $tCategory } = useValaxyI18n()
 
 useSchemaOrg([
   defineWebPage({
@@ -76,7 +76,7 @@ useSchemaOrg([
           <YunCard v-if="curCategory" class="post-collapse-container" m="t-4" w="full">
             <YunPageHeader
               m="t-10"
-              :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory.split('/').join(' / ')"
+              :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory.split('/').map($tCategory).join(' / ')"
               icon="i-ri-folder-open-line"
             />
             <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />

package/layouts/tags.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineWebPage, useSchemaOrg } from '@unhead/schema-org/vue'
-import { useFrontmatter, useInvisibleElement, usePostTitle, useSiteStore } from 'valaxy'
+import { useFrontmatter, useInvisibleElement, usePostTitle, useSiteStore, useValaxyI18n } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -18,6 +18,7 @@ const router = useRouter()
 const themeConfig = useThemeConfig()
 
 const { t } = useI18n()
+const { $tTag } = useValaxyI18n()
 const frontmatter = useFrontmatter()
 const { tags, getTagStyle } = useYunTags({
   primary: themeConfig.value.colors.primary,
@@ -100,7 +101,7 @@ const tagArr = computed(() => [...tags.value].sort())
 
         <template #main-nav-before>
           <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
-            <YunPageHeader :title="curTag" icon="i-ri-hashtag" />
+            <YunPageHeader :title="$tTag(curTag)" icon="i-ri-hashtag" />
             <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
           </YunCard>
         </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.28.0-beta.6",
+  "version": "0.28.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -25,7 +25,7 @@
     "@ctrl/tinycolor": "^4.2.0",
     "@explosions/fireworks": "^0.2.0",
     "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/simple-icons": "^1.2.74",
+    "@iconify-json/simple-icons": "^1.2.75",
     "@vueuse/motion": "^3.0.3",
     "animejs": "^4.3.6",
     "gsap": "^3.14.2",
@@ -33,8 +33,8 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
-    "valaxy-addon-waline": "0.2.1",
-    "valaxy": "0.28.0-beta.6"
+    "valaxy": "0.28.0",
+    "valaxy-addon-waline": "0.2.1"
   },
   "scripts": {
     "release": "bumpp && pnpm publish"

package/pages/posts/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO
 </script>
 
 <template>

package/components/YunDebug.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useYunAppStore } from '../stores'
-
-const yun = useYunAppStore()
-
-const infoList = computed(() => {
-  return [
-    {
-      label: 'xs',
-      value: yun.size.isXs,
-    },
-    {
-      label: 'sm',
-      value: yun.size.isSm,
-    },
-    {
-      label: 'md',
-      value: yun.size.isMd,
-    },
-    {
-      label: 'lg',
-      value: yun.size.isLg,
-    },
-    {
-      label: 'xl',
-      value: yun.size.isXl,
-    },
-    {
-      label: '2xl',
-      value: yun.size.is2xl,
-    },
-  ]
-})
-
-const show = ref(true)
-</script>
-
-<template>
-  <div
-    v-if="show"
-    class="bg-black/50 fixed bottom-20 left-2 p-2 gap-1 rounded z-9999"
-    text="xs white" flex="~ col"
-    @click="show = false"
-  >
-    <div v-for="item in infoList" :key="item.label" class="gap-2 inline-flex">
-      <span class="w-6" font="bold">{{ item.label }}: </span>
-      <span>{{ item.value ? '✅' : '❌' }}</span>
-    </div>
-  </div>
-</template>