valaxy-theme-yun 0.24.4 → 0.25.0

package/components/YunCategory.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CategoryList, Post } from 'valaxy'
-import { useInvisibleElement } from 'valaxy'
+import { useInvisibleElement, useValaxyI18n } from 'valaxy'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -25,6 +25,7 @@ const router = useRouter()
 
 const collapse = ref(props.collapsable)
 const { t } = useI18n()
+const { $t } = useValaxyI18n()
 
 const postCollapseElRef = ref<HTMLElement>()
 const { show } = useInvisibleElement(postCollapseElRef)
@@ -79,7 +80,7 @@ if (props.level === 1) {
       @click="jumpToDisplayCategory(parentKey)"
     >
       <span>
-        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }}
+        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : $t(category.name) }}
       </span>
       <span class="rounded-full px-1.5 bg-black/5 shadow-sm op-60" text="xs">
         {{ category.total }}

package/components/YunFooter.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSiteConfig, useValaxyConfig, useValaxyDark } from 'valaxy'
+import { useSiteConfig, useValaxyConfig, useValaxyDark, useValaxyI18n } from 'valaxy'
 import pkg from 'valaxy/package.json'
 import { capitalize, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -21,6 +21,7 @@ const gradientStyles = computed(() => {
 })
 
 const { t } = useI18n()
+const { $t } = useValaxyI18n()
 const config = useValaxyConfig()
 const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
@@ -72,7 +73,7 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
       >
         <div :class="footerIcon.name" />
       </a>
-      <span>{{ siteConfig.author.name }}</span>
+      <span>{{ $t(siteConfig.author.name) }}</span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">

package/components/YunLayoutPostTag.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useValaxyI18n } from 'valaxy'
 import { ref } from 'vue'
 import { useYunSpringAnimation } from '../composables/animation'
 
@@ -8,6 +9,8 @@ const props = defineProps<{
   count: number
 }>()
 
+const { $t } = useValaxyI18n()
+
 const tagRef = ref<HTMLElement>()
 useYunSpringAnimation(tagRef, {
   i: props.i || 0,
@@ -21,7 +24,7 @@ useYunSpringAnimation(tagRef, {
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >
-    <span inline-flex>#{{ title }}</span>
+    <span inline-flex>#{{ $t(title) }}</span>
     <span inline-flex text="xs">[{{ count }}]</span>
   </span>
 </template>

package/components/YunPostCategories.vue

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

package/components/YunPostMeta.vue

@@ -38,6 +38,7 @@ const siteConfig = useSiteConfig()
     }"
   >
     <YunPostDateMeta :frontmatter="frontmatter" />
+    <slot />
 
     <div class="inline-flex-center gap-4">
       <div

package/components/YunPostTags.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { useValaxyI18n } from 'valaxy'
 
 defineProps<{
   tags: Post['tags']
 }>()
+
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -19,7 +22,7 @@ defineProps<{
       border
       hover="bg-blue-500 text-white"
     >
-      <span>{{ tag }}</span>
+      <span>{{ $t(tag) }}</span>
     </RouterLink>
   </div>
 </template>

package/components/YunSearchTrigger.vue

@@ -16,7 +16,7 @@ function togglePopup() {
 
 const algoliaRef = ref()
 onMounted(() => {
-  // algolia has its own hotkey
+  // algolia has its own hotkey handling in YunAlgoliaSearch component
   if (isFuse.value)
     useHotKey('k', togglePopup)
 })

package/components/YunSiteInfo.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
-const { t } = useI18n()
+const { $t } = useValaxyI18n()
 const siteConfig = useSiteConfig()
 </script>
 
@@ -16,14 +15,14 @@ const siteConfig = useSiteConfig()
     <YunAuthorName />
     <YunSiteTitle />
     <h4
-      v-if="siteConfig.subtitle"
+      v-if="$t(siteConfig.subtitle)"
       class="site-subtitle block"
       text="xs"
     >
-      {{ t(siteConfig.subtitle) }}
+      {{ $t(siteConfig.subtitle) }}
     </h4>
     <div v-if="siteConfig.description" class="site-description">
-      {{ t(siteConfig.description) }}
+      {{ $t(siteConfig.description) }}
     </div>
   </div>
 </template>

package/components/YunSocialLinkItem.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { SocialLink } from 'valaxy/types'
-import { useAppStore } from 'valaxy'
+import { useAppStore, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 
 const props = defineProps<{
   social: SocialLink
 }>()
 
+const { $t } = useValaxyI18n()
+
 const appStore = useAppStore()
 const color = computed(() => {
   return (appStore.isDark && props.social.color === 'black') ? 'white' : props.social.color
@@ -16,7 +18,7 @@ const color = computed(() => {
 <template>
   <a
     class="links-of-author-item yun-icon-btn"
-    rel="noopener" :href="social.link" :title="social.name"
+    rel="noopener" :href="social.link" :title="$t(social.name)"
     target="_blank"
     :style="`color:${color}`"
   >

package/components/YunSponsor.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
+const { $t } = useValaxyI18n()
 
 const siteConfig = useSiteConfig()
 const showQr = ref(false)
@@ -35,7 +36,7 @@ const sponsorBtnTitle = computed(() => {
           :href="method.url" target="_blank"
           :style="`color:${method.color}`"
         >
-          <img class="sponsor-method-img" border="~ rounded" p="1" loading="lazy" :src="method.url" :title="method.name">
+          <img class="sponsor-method-img" border="~ rounded" p="1" loading="lazy" :src="method.url" :title="$t(method.name)">
           <div text="xl" m="2" :class="method.icon" />
         </a>
       </div>

package/components/author/YunAuthorIntro.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
-const { t } = useI18n()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
   <div v-if="siteConfig.author.intro" class="site-author-intro" m="t-0 b-4">
-    {{ t(siteConfig.author.intro) }}
+    {{ $t(siteConfig.author.intro) }}
   </div>
 </template>

package/components/author/YunAuthorName.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -9,6 +10,6 @@ const siteConfig = useSiteConfig()
     class="site-author-name font-black font-serif text-$va-c-text op-80 hover:op-100 flex-center"
     to="/about"
   >
-    {{ siteConfig.author.name }}
+    {{ $t(siteConfig.author.name) }}
   </RouterLink>
 </template>

package/components/menu/YunNavMenuTitle.vue

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

package/components/prologue/PrologueSocialIcon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useMotion } from '@vueuse/motion'
-import { ref } from 'vue'
+import { useValaxyI18n } from 'valaxy/client'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   social: {
@@ -12,7 +13,7 @@ const props = defineProps<{
   // animation
   delay: number
 }>()
-
+const { $t } = useValaxyI18n()
 const iconRef = ref<HTMLElement>()
 useMotion(iconRef, {
   initial: {
@@ -34,18 +35,20 @@ useMotion(iconRef, {
     },
   },
 })
+
+const socialName = computed(() => $t(props.social.name))
 </script>
 
 <template>
   <div
-    v-tooltip="social.name"
+    v-tooltip="socialName"
     class="size-10 inline-flex-center"
   >
     <a
       ref="iconRef"
       class="prologue-social-icon inline-flex-center w-full h-full text-white bg-$c-brand hover:bg-white hover:text-$c-brand"
       rel="noopener"
-      :href="social.link" :title="social.name"
+      :href="social.link" :title="socialName"
       target="_blank"
       :style="`--c-brand:${social.color}`"
     >

package/components/site/YunSiteDescription.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
-const { t } = useI18n()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
   <div v-if="siteConfig.description" class="site-description text-$va-c-text text-sm">
-    {{ t(siteConfig.description) }}
+    {{ $t(siteConfig.description) }}
   </div>
 </template>

package/components/site/YunSiteTitle.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 import { useRouter } from 'vue-router'
 import { useThemeConfig } from '../../composables'
 
@@ -8,8 +7,7 @@ const router = useRouter()
 const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
 
-const { t } = useI18n()
-
+const { $t } = useValaxyI18n()
 // bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)
 </script>
 
@@ -19,14 +17,14 @@ const { t } = useI18n()
     class="site-name text-lg leading-loose"
     :class="themeConfig.banner.siteNameClass"
   >
-    {{ t(siteConfig.title) }}
+    {{ $t(siteConfig.title) }}
   </RouterLink>
   <span
     v-else
     class="site-name text-lg leading-loose"
     :class="themeConfig.banner.siteNameClass"
   >
-    {{ t(siteConfig.title) }}
+    {{ $t(siteConfig.title) }}
   </span>
 </template>
 

package/components/third/YunAlgoliaSearch.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { isEmptyAddon } from 'valaxy'
 import * as addonAlgolia from 'valaxy-addon-algolia'
+import { onMounted, onUnmounted } from 'vue'
 
 defineProps<{
   open: boolean
@@ -16,6 +17,40 @@ defineExpose({
   load,
   dispatchEvent,
 })
+
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return (
+    element.isContentEditable
+    || tagName === 'INPUT'
+    || tagName === 'SELECT'
+    || tagName === 'TEXTAREA'
+  )
+}
+
+onMounted(() => {
+  const handleSearchHotKey = (event: KeyboardEvent) => {
+    if (
+      (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))
+      || (!isEditingContent(event) && event.key === '/')
+    ) {
+      event.preventDefault()
+      load()
+      // eslint-disable-next-line ts/no-use-before-define
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
 </script>
 
 <template>

package/layouts/post.vue

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

package/package.json

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