valaxy-theme-yun 0.25.0 → 0.25.2

package/components/YunBanner.vue

@@ -17,7 +17,7 @@ const themeConfig = useThemeConfig()
 
 // height of top/bottom line
 
-const { totalCharHeight, chars } = useYunBanner(themeConfig.value.banner)
+const { totalCharHeight, chars, bannerTitle } = useYunBanner(themeConfig.value.banner)
 
 const bannerStyles = computed<CSSProperties>(() => {
   const styles: CSSProperties = {
@@ -64,13 +64,13 @@ onMounted(async () => {
     <template v-if="yun.isNimbo">
       <YunBannerCharContainer
         v-if="animationStatus === 'banner'"
-        :title="themeConfig.banner.title"
+        :title="bannerTitle"
         :chars="chars"
       />
     </template>
     <template v-if="yun.isStrato">
       <YunBannerCharContainer
-        :title="themeConfig.banner.title"
+        :title="bannerTitle"
         :chars="chars"
       />
     </template>

package/components/YunCategoryChildItem.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import type { Post } from 'valaxy'
-import { isCategoryList, tObject } from 'valaxy'
+import { isCategoryList, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 defineProps<{
@@ -14,10 +12,8 @@ defineProps<{
 /**
  * i18n
  */
-const { locale } = useI18n()
-function getTitle(post: Post | any) {
-  return tObject(post.title || '', locale.value)
-}
+const { $tO } = useValaxyI18n()
+
 const route = useRoute()
 const categoryList = computed(() => {
   const c = (route.query.category as string) || ''
@@ -42,7 +38,7 @@ const categoryList = computed(() => {
       hover="bg-black/5"
     >
       <div i-ri-file-text-line />
-      <span font="serif black">{{ getTitle(categoryItem) }}</span>
+      <span class="st-text">{{ $tO(categoryItem.title) }}</span>
     </RouterLink>
   </template>
 </template>

package/components/YunPostCard.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { tObject } from 'valaxy'
+import { useValaxyI18n } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePostProperty } from '../composables'
@@ -9,7 +9,8 @@ const props = defineProps<{
   post: Post
 }>()
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
+const { $tO } = useValaxyI18n()
 
 const { icon, styles, color } = usePostProperty(props.post.type)
 
@@ -20,10 +21,6 @@ const postTitleClass = computed(() => {
   }
   return props.post.postTitleClass || gradientClasses.value
 })
-
-const postTitle = computed(() => {
-  return tObject(props.post.title || '', locale.value)
-})
 </script>
 
 <template>
@@ -44,7 +41,7 @@ const postTitle = computed(() => {
         loading="lazy"
       >
 
-      <div class="flex flex-col items-center relative" :class="post.cover && 'h-54'" w="full">
+      <div class="flex flex-col items-center relative px-6" :class="post.cover && 'h-54'" w="full">
         <AppLink
           class="post-title-link cursor-pointer"
           :to="post.path || ''"
@@ -56,7 +53,7 @@ const postTitle = computed(() => {
             text="center" font="serif black"
           >
             <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
-            <span>{{ postTitle }}</span>
+            <span>{{ $tO(post.title) }}</span>
           </div>
         </AppLink>
 
@@ -86,7 +83,7 @@ const postTitle = computed(() => {
 
     <!-- always show -->
     <div
-      w="full" class="yun-card-actions flex justify-between"
+      w="full" class="yun-card-actions flex justify-between px-6"
       min-h="10"
       text="sm"
     >

package/components/YunPostCollapseItem.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import type { Post } from 'valaxy'
 import { useMotion } from '@vueuse/motion'
-import { formatDate, tObject } from 'valaxy'
-import { computed, ref } from 'vue'
-
-import { useI18n } from 'vue-i18n'
+import { formatDate, useValaxyI18n } from 'valaxy'
+import { ref } from 'vue'
 
 const props = defineProps<{
   i: number
@@ -29,10 +27,7 @@ useMotion(itemRef, {
   },
 })
 
-const { locale } = useI18n()
-const postTitle = computed(() => {
-  return tObject(props.post.title || '', locale.value)
-})
+const { $tO } = useValaxyI18n()
 </script>
 
 <template>
@@ -55,7 +50,7 @@ const postTitle = computed(() => {
       </div>
       <h2 class="post-title w-full" inline-flex items-center font="serif black">
         <RouterLink :to="post.path || ''" class="post-title-link">
-          {{ postTitle }}
+          {{ $tO(post.title) }}
         </RouterLink>
       </h2>
     </header>

package/components/YunSidebarLinks.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useValaxyI18n } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -9,7 +11,8 @@ const themeConfig = useThemeConfig()
     <AppLink
       v-for="item, i in themeConfig.pages" :key="i"
       class="link-item yun-icon-btn" inline-flex
-      :to="item.url" :title="item.name"
+      :to="item.url"
+      :title="$t(item.name)"
       :style="`color:${item.color}`"
     >
       <div :class="item.icon" class="icon size-6" />

package/components/menu/YunNavMenuTitle.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { tObject, useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
+import { useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useYunAppStore } from '../../stores'
 
-const { $t, locale } = useValaxyI18n()
+const { $t, $tO } = useValaxyI18n()
 
 const yunApp = useYunAppStore()
 const fm = useFrontmatter()
@@ -63,10 +63,10 @@ function goToLink() {
           class="size-4"
           :class="fm.icon || 'i-ri-article-line'"
         />
-        <span class="truncate"> {{ tObject(fm.title || '', locale) }}</span>
+        <span class="truncate"> {{ $tO(fm.title || '') }}</span>
       </div>
       <span v-if="fm.subtitle" class="font-light op-80">
-        {{ tObject(fm.subtitle || '', locale) }}
+        {{ $tO(fm.subtitle || '') }}
       </span>
     </div>
     <span v-if="showSiteTitle" class="font-light truncate">

package/components/prologue/YunPrologueSquare.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { useThemeConfig } from '../../composables'
 
 const themeConfig = useThemeConfig()
+const { t } = useI18n()
 
 const showContent = ref(false)
 </script>
@@ -79,7 +82,7 @@ const showContent = ref(false)
         >
           <YunSiteLinkItem
             :page="{
-              name: '博客文章',
+              name: t('menu.posts'),
               icon: 'i-ri-article-line',
               url: '/posts/',
             }"

package/components/site/YunSiteLinkItem.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type { PageProps } from '../../types'
+import { useValaxyI18n } from 'valaxy'
 import { useYunAppStore } from '../../stores'
 
 defineProps<{
   page: PageProps
 }>()
 
+const { $t } = useValaxyI18n()
+
 const yunApp = useYunAppStore()
 </script>
 
@@ -14,14 +17,15 @@ const yunApp = useYunAppStore()
     class="link-item inline-flex-center gap-2 transition rounded-lg text-xl p-2 md:(text-lg p-2) lg:(text-xl p-3) text-$va-c-text"
     bg="white/5 dark:black/5"
     inline-flex
-    :to="page.url" :title="page.name"
+    :to="page.url"
+    :title="$t(page.name)"
     :style="`color:${page.color}`"
     hover="bg-white/80 dark:bg-black/80"
     @click="yunApp.fullscreenMenu.isOpen = false"
   >
     <div :class="page.icon" class="icon" />
     <span>
-      {{ page.name }}
+      {{ $t(page.name) }}
     </span>
   </AppLink>
 </template>

package/components/site/YunSiteSubtitle.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
+const { $t } = useValaxyI18n()
 const siteConfig = useSiteConfig()
 </script>
 
@@ -9,6 +10,6 @@ const siteConfig = useSiteConfig()
     v-if="siteConfig.subtitle"
     class="site-subtitle block text-$va-c-text op-80 font-medium" text="sm"
   >
-    {{ siteConfig.subtitle }}
+    {{ $t(siteConfig.subtitle) }}
   </h4>
 </template>

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { useAppStore, useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from '../../../composables'
 import { useYunAppStore } from '../../../stores'
 
+const { t } = useI18n()
+const { $t } = useValaxyI18n()
+
 // const app = useAppStore()
 const yunApp = useYunAppStore()
 const siteConfig = useSiteConfig()
@@ -60,7 +64,7 @@ const app = useAppStore()
         <template v-if="yunApp.size.isLg">
           <YunNavMenuItem
             icon="i-ri-article-line" to="/posts/"
-            title="博客文章"
+            :title="t('menu.posts')"
           />
 
           <YunNavMenuItem
@@ -68,7 +72,7 @@ const app = useAppStore()
             :key="i"
             :icon="item.icon"
             :to="item.link"
-            :title="item.text"
+            :title="$t(item.text)"
           />
         </template>
       </div>

package/composables/useYunBanner.ts

@@ -1,11 +1,19 @@
 import type { YunTheme } from '../types'
-import { random } from 'valaxy'
+import { random, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 
 export function useYunBanner(options: YunTheme.Banner) {
+  const { $tO } = useValaxyI18n()
+
+  const bannerTitle = computed(() => {
+    if (Array.isArray(options.title)) {
+      return options.title
+    }
+    return $tO<string | string[]>(options.title)
+  })
   const chars = computed(() => {
     const arr = []
-    for (let i = 0; i < options.title.length; i++) {
+    for (let i = 0; i < bannerTitle.value.length; i++) {
       const rn = random(1.5, 3.5)
       arr.push(rn)
     }
@@ -15,6 +23,7 @@ export function useYunBanner(options: YunTheme.Banner) {
   const totalCharHeight = computed(() => chars.value.reduce((a, b) => a + b, 0))
 
   return {
+    bannerTitle,
     chars,
     totalCharHeight,
   }

package/layouts/post.vue

@@ -2,18 +2,16 @@
 import { defineArticle, useSchemaOrg } from '@unhead/schema-org/vue'
 
 import dayjs from 'dayjs'
-import { tObject, useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
 
-const { locale } = useI18n()
-const { $t } = useValaxyI18n()
+const { $t, $tO } = useValaxyI18n()
 const article: Parameters<typeof defineArticle>[0] = {
   '@type': 'BlogPosting',
-  'headline': tObject(frontmatter.value.title || '', locale.value),
-  'description': tObject(frontmatter.value.description || '', locale.value),
+  'headline': $tO(frontmatter.value.title),
+  'description': $tO(frontmatter.value.description),
   'author': [
     {
       name: $t(siteConfig.value.author.name),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.25.0",
+  "version": "0.25.2",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
-    "valaxy": "0.25.0",
+    "valaxy": "0.25.2",
     "valaxy-addon-waline": "0.2.1"
   },
   "scripts": {

package/styles/main.scss

@@ -8,9 +8,10 @@ $c-primary: #0078e7 !default;
 );
 
 // override the default style of star-markdown-css
+@use "./animations/index.scss" as *;
 @use "./common/button.scss" as *;
 @use "./common/markdown.scss" as *;
+// valaxy client styles
 @use 'valaxy/client/styles/components/code.scss' as *;
 @use 'valaxy/client/styles/components/code-group.scss' as *;
 @use 'valaxy/client/styles/components/custom-block.scss' as *;
-@use "./animations/index.scss" as *;

package/types/index.d.ts

@@ -12,8 +12,11 @@ export namespace YunTheme {
     /**
      * @en Banner title
      * @zh 标题，默认每个字分割，你也可以通过数组的方式来自定义分割，如 ['Hello', 'World']
+     *
+     * i18n: { 'en': 'Title', 'zh-CN': '标题' }
+     * { en: ['Hello', 'World'], 'zh-CN': ['你好', '世界'] }
      */
-    title: string | string[]
+    title: string | string[] | Record<string, string | string[]>
 
     /**
      * 首页下方的动态云