valaxy-theme-yun 0.20.3 → 0.20.5

package/components/YunAdBoard.vue

@@ -1,4 +1,4 @@
 <template>
-  <!-- empty -->
-  <div />
+  <!-- eslint-disable-next-line vue/no-lone-template empty -->
+  <template />
 </template>

package/components/YunBanner.vue

@@ -67,7 +67,7 @@ onMounted(async () => {
         :title="themeConfig.banner.title"
         :chars="chars"
       />
-      <PrologueSquare v-else class="z-1" />
+      <YunPrologueSquare v-else class="z-1" />
     </template>
     <template v-if="yun.isStrato">
       <YunBannerCharContainer

package/components/YunFuseSearch.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useFuseSearch } from 'valaxy'
 
 import { isClient, onClickOutside, useScrollLock } from '@vueuse/core'
 
-defineProps<{
+const props = defineProps<{
   open: boolean
 }>()
 const emit = defineEmits(['close'])
@@ -14,7 +14,7 @@ const input = ref('')
 
 const isLocked = useScrollLock(isClient ? document.documentElement : null)
 const { t } = useI18n()
-const { results } = useFuseSearch(input)
+const { results, fetchFuseListData } = useFuseSearch(input)
 
 const searchInputRef = ref<HTMLInputElement>()
 const searchContainer = ref<HTMLElement>()
@@ -22,6 +22,11 @@ const searchContainer = ref<HTMLElement>()
 onClickOutside(searchInputRef, () => {
   // emit('close')
 })
+
+watch(() => props.open, () => {
+  if (props.open)
+    fetchFuseListData()
+})
 </script>
 
 <template>

package/components/YunLinkItem.vue

@@ -49,8 +49,7 @@ useMotion(itemRef, {
       <div class="yun-link-left">
         <div class="yun-link-avatar size-16 overflow-hidden flex-center">
           <img
-            class="size-16 object-center object-cover m-0!"
-            width="64" height="64"
+            class="size-full object-center object-cover m-0! max-w-unset!"
             loading="lazy"
             :src="link.avatar" :alt="link.name"
             @error="onError"

package/components/YunMdTimeWarning.vue

@@ -3,7 +3,8 @@ import { computed, ref, watch } from 'vue'
 import { useFrontmatter } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
-import { differenceInMilliseconds, formatDistanceToNow } from 'date-fns'
+import { differenceInMilliseconds } from 'date-fns/differenceInMilliseconds'
+import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'
 
 const fm = useFrontmatter()
 const { t, locale } = useI18n()

package/components/YunPostsInfo.vue

@@ -13,15 +13,24 @@ const tags = useTags()
 <template>
   <nav class="site-nav" text-xl mt-2>
     <YunPostClassifyNavItem
-      to="/archives/" icon="i-ri-archive-line" :title="t('menu.archives')"
+      to="/archives/"
+      icon="i-ri-archive-line"
+      active-icon="i-ri-archive-fill"
+      :title="t('menu.archives')"
       :total="site.postList.length"
     />
     <YunPostClassifyNavItem
-      to="/categories/" icon="i-ri-folder-2-line" :title="t('menu.categories')"
+      to="/categories/"
+      icon="i-ri-folder-2-line"
+      active-icon="i-ri-folder-2-fill"
+      :title="t('menu.categories')"
       :total="Array.from(categories.children).length"
     />
     <YunPostClassifyNavItem
-      to="/tags/" icon="i-ri-price-tag-3-line" :title="t('menu.tags')"
+      to="/tags/"
+      icon="i-ri-price-tag-3-line"
+      active-icon="i-ri-price-tag-3-fill"
+      :title="t('menu.tags')"
       :total="Array.from(tags).length"
     />
   </nav>

package/components/YunSidebarCard.vue

@@ -5,6 +5,7 @@
 <template>
   <YunCard class="p-4 min-h-sm" flex="~ col gap-1">
     <YunSiteInfo class="text-center" />
+    <YunGradientDivider class="my-2 op-20" />
     <YunPostsInfo />
     <YunGradientDivider class="my-2 op-20" />
     <YunSocialLinks />

package/components/YunSiteInfo.vue

@@ -9,12 +9,7 @@ const siteConfig = useSiteConfig()
     <RouterLink
       class="site-author-avatar inline-flex-center" to="/about"
     >
-      <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
-      <!-- <span
-        v-if="siteConfig.author.status.emoji"
-        class="site-author-status absolute"
-        :title="siteConfig.author.status.message || undefined"
-      >{{ siteConfig.author.status.emoji }}</span> -->
+      <YunAuthorAvatar />
     </RouterLink>
     <YunAuthorName />
     <YunSiteTitle />
@@ -32,38 +27,6 @@ const siteConfig = useSiteConfig()
 </template>
 
 <style lang="scss">
-.site-author-avatar {
-  position: relative;
-  line-height: 0;
-
-  img {
-    height: 96px;
-    width: 96px;
-    max-width: 100%;
-    margin: 0;
-    padding: 4px;
-    background-color: white;
-    box-shadow: 0 0 10px rgba(black, 0.2);
-    transition: 0.4s;
-
-    &:hover {
-      box-shadow: 0 0 30px rgba(var(--va-c-primary-rgb), 0.2);
-    }
-  }
-}
-
-.site-author-status {
-  height: 1.8rem;
-  width: 1.8rem;
-  bottom: 0;
-  right: 0;
-  line-height: 1.8rem;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
-  background-color: var(--va-c-bg-light);
-  border: 1px solid rgb(255 255 255 / 0.1);
-}
-
 .site-info {
   &.fix-top {
     margin-top: -1.5rem;

package/components/author/YunAuthorAvatar.vue

@@ -5,9 +5,46 @@ const siteConfig = useSiteConfig()
 </script>
 
 <template>
-  <img
-    class="rounded-full size-full"
-    :src="siteConfig.author.avatar"
-    alt="avatar"
-  >
+  <div class="relative yun-author-avatar">
+    <img
+      class="rounded-full size-full bg-white dark:bg-white/20 p-1 m-0"
+      :src="siteConfig.author.avatar"
+      alt="avatar"
+    >
+    <span
+      v-if="siteConfig.author.status.emoji"
+      class="site-author-status absolute"
+      :title="siteConfig.author.status.message || undefined"
+    >{{ siteConfig.author.status.emoji }}</span>
+  </div>
 </template>
+
+<style lang="scss">
+.yun-author-avatar {
+  width: var(--avatar-size, 96px);
+  height: var(--avatar-size, 96px);
+}
+
+.site-author-avatar {
+  img {
+    box-shadow: 0 0 10px rgba(black, 0.2);
+    transition: 0.4s;
+
+    &:hover {
+      box-shadow: 0 0 30px rgba(var(--va-c-primary-rgb), 0.2);
+    }
+  }
+}
+
+.site-author-status {
+  height: 1.8rem;
+  width: 1.8rem;
+  bottom: 0;
+  right: 0;
+  line-height: 1.8rem;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+  background-color: var(--va-c-bg-light);
+  border: 1px solid rgb(255 255 255 / 0.1);
+}
+</style>

package/components/menu/YunPostClassifyNavItem.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-defineProps<{
+import { computed } from 'vue'
+
+import { useRoute } from 'vue-router'
+
+const props = defineProps<{
+  activeIcon?: string
   icon: string
   title: string
   /**
@@ -8,23 +13,46 @@ defineProps<{
   total: number
   to: string
 }>()
+
+const route = useRoute()
+const active = computed(() => route.path === props.to)
+
+const icon = computed(() => {
+  if (active.value && props.activeIcon)
+    return props.activeIcon
+  return props.icon
+})
 </script>
 
 <template>
   <RouterLink
     flex="~ col center"
-    class="gap-1 w-20 p-2 rounded transition op-80"
-    :to="to" :title="title"
+    class="post-classify-nav-item gap-1 w-20 p-2 rounded transition op-80"
+    :to="to"
+    :title="title"
     hover="bg-$va-c-bg-soft op-100"
   >
     <div flex="~ col" class="text-$va-c-text inline-flex-center gap-1">
-      <div class="text-2xl" :class="icon" />
+      <div
+        class="text-2xl"
+        :class="icon"
+      />
       <span class="text-xs">
         {{ title }}
       </span>
     </div>
     <span
-      class="count text-base dark:text-white/80"
-    >{{ total }}</span>
+      class="count text-base text-black/80 dark:text-white/80"
+    >
+      {{ total }}
+    </span>
   </RouterLink>
 </template>
+
+<style lang="scss">
+.post-classify-nav-item {
+  &.router-link-active {
+    background-color: rgba(var(--va-c-primary-rgb), 0.08);
+  }
+}
+</style>

package/components/prologue/{PrologueSquare.vue → YunPrologueSquare.vue}

@@ -29,7 +29,7 @@ const showContent = ref(false)
       >
         <div
           flex="~ col"
-          class="absolute yun-square bg-$va-c-text square-rotate z-1"
+          class="absolute yun-square square-rotate z-1 bg-white/80"
         >
           <LineBurstEffects
             class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
@@ -91,7 +91,8 @@ const showContent = ref(false)
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
+// use scoped for css injection
 @use 'sass:map';
 @use 'valaxy-theme-yun/styles/vars.scss' as *;
 

package/layouts/post.vue

@@ -4,7 +4,7 @@ import { useFrontmatter, useFullUrl, useSiteConfig } from 'valaxy'
 
 import type { Article } from '@unhead/schema-org'
 import { defineArticle, useSchemaOrg } from '@unhead/schema-org'
-import { toDate } from 'date-fns'
+import { toDate } from 'date-fns/toDate'
 
 const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.20.3",
+  "version": "0.20.5",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,16 +24,16 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.1.0",
     "@iconify-json/ant-design": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.11",
+    "@iconify-json/simple-icons": "^1.2.13",
     "@vueuse/motion": "^2.2.6",
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
-    "primevue": "^4.2.1",
-    "radix-vue": "^1.9.9"
+    "primevue": "^4.2.3",
+    "radix-vue": "^1.9.10"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.20.3",
+    "valaxy": "0.20.5",
     "valaxy-addon-waline": "0.2.0"
   },
   "scripts": {