valaxy-theme-yun 0.21.1 → 0.22.0

package/App.vue

@@ -61,7 +61,7 @@ const isDev = import.meta.env.DEV
   <YunPageHeaderGradient />
   <YunNavMenu />
 
-  <YunFullscreenMenu v-if="yun.isNimbo && !yun.size.isSm" />
+  <YunFullscreenMenu v-if="yun.isNimbo && !yun.size.isLg" />
   <YunStratoSidebar v-if="yun.isStrato" />
 
   <YunFireworks v-if="themeConfig.fireworks.enable" />

package/components/YunBanner.vue

@@ -53,7 +53,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div id="yun-banner" :style="bannerStyles">
+  <div id="yun-banner" border="b-1px b-solid b-$banner-line-color" :style="bannerStyles">
     <div class="banner-line-container">
       <div
         class="banner-line vertical-line-top"

package/components/YunFullscreenMenu.vue

@@ -15,7 +15,7 @@ const app = useAppStore()
       v-if="yunApp.fullscreenMenu.isOpen"
       ref="fullscreenMenuRef"
       p="t-12 md:t-20"
-      class="yun-fullscreen-menu fixed left-0 right-0 bottom-0 top-0 bg-$va-c-bg-soft z-$yun-z-fullscreen-menu overflow-auto"
+      class="yun-fullscreen-menu fixed left-0 right-0 bottom-0 top-0 bg-$va-c-bg-soft z-$yun-z-fullscreen-menu overflow-auto max-w-md shadow-2xl"
     >
       <!-- <div v-if="app.isMobile" class="flex-center gap-2">
         <YunToggleDark transition />
@@ -49,7 +49,7 @@ const app = useAppStore()
 .slide-down-enter-active,
 .slide-down-leave-active {
   opacity: 1;
-  transition: transform 0.4s map.get($cubic-bezier, 'ease-in-out'),
+  transition: transform 0.3s map.get($cubic-bezier, 'ease-in-out'),
     opacity 0.2s map.get($cubic-bezier, 'ease-in-out');
   transform: translateY(0);
 }

package/components/YunMdTimeWarning.vue

@@ -1,27 +1,35 @@
 <script lang="ts" setup>
-import { differenceInMilliseconds, formatDistanceToNow } from 'date-fns'
+import dayjs from 'dayjs'
+
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { useFrontmatter } from 'valaxy'
 
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+dayjs.extend(relativeTime)
+
 const fm = useFrontmatter()
-const { t, locale } = useI18n()
+const { t } = useI18n()
 
-const updated = computed(() => fm.value.updated || fm.value.date || new Date())
-const ago = ref('')
+const updated = computed(() => {
+  return dayjs(fm.value.updated || fm.value.date)
+})
 
-watch(locale, () => {
-  const fromNow = formatDistanceToNow(updated.value, { addSuffix: true })
-  ago.value = /^\d/.test(fromNow) ? ` ${fromNow}` : fromNow
-}, { immediate: true })
+const ago = computed(() => {
+  const fromNow = updated.value.fromNow()
+  if (/^\d/.test(fromNow))
+    return ` ${fromNow}`
+  else
+    return fromNow
+})
 
 /**
  * when the post is updated more than 180 days ago, show a warning
  * default 180 days, you can set `time_warning` in frontmatter to change it
  */
 const time_warning = computed(() => {
-  const diff = differenceInMilliseconds(new Date(), updated.value)
+  const diff = dayjs().valueOf() - updated.value.valueOf()
   /**
    * if `time_warning` is a number, compare the time difference
    * if `time_warning` is a boolean, show warning by flag

package/components/YunPostCollapse.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { formatDate, sortByDate, useSiteConfig } from 'valaxy'
+import { formatDate, sortByDate } from 'valaxy'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -13,8 +13,6 @@ const { t } = useI18n()
 const years = ref<number[]>([])
 const postListByYear = ref<Record<string, Post[]>>({})
 
-const siteConfig = useSiteConfig()
-
 watch(() => props.posts, () => {
   postListByYear.value = {}
   years.value = []
@@ -22,7 +20,9 @@ watch(() => props.posts, () => {
     if (post.hide && post.hide !== 'index')
       return
     if (post.date) {
-      const year = Number.parseInt(formatDate(post.date, 'yyyy', siteConfig.value.timezone))
+      const year = Number.parseInt(formatDate(post.date, {
+        template: 'YYYY',
+      }))
       if (postListByYear.value[year]) {
         postListByYear.value[year].push(post)
       }

package/components/YunPostCollapseItem.vue

@@ -41,7 +41,9 @@ useMotion(itemRef, {
     >
       <div class="post-meta">
         <time v-if="post.date" class="post-time" font="mono" opacity="80">{{
-          formatDate(post.date, 'MM-dd') }}
+          formatDate(post.date, {
+            template: 'MM-DD',
+          }) }}
         </time>
       </div>
       <h2 class="post-title w-full" inline-flex items-center font="serif black">

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -48,7 +48,7 @@ const app = useAppStore()
       <!--  -->
       <div class="inline-flex justify-start items-center flex-1">
         <ValaxyHamburger
-          v-if="!yunApp.size.isSm"
+          v-if="!yunApp.size.isLg"
           :active="yunApp.fullscreenMenu.isOpen"
           class="menu-btn sidebar-toggle leading-4 size-12"
           inline-flex cursor="pointer"
@@ -57,7 +57,7 @@ const app = useAppStore()
           @click="yunApp.fullscreenMenu.toggle()"
         />
         <YunNavMenuItem icon="i-ri-home-4-line" to="/" />
-        <template v-if="yunApp.size.isSm">
+        <template v-if="yunApp.size.isLg">
           <YunNavMenuItem
             icon="i-ri-article-line" to="/posts/"
             title="博客文章"

package/layouts/gallery.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { defineWebPage, useSchemaOrg } from '@unhead/schema-org'
-import { useFrontmatter, usePostTitle, useRuntimeConfig } from 'valaxy'
+import { useEncryptedPhotos, useFrontmatter, usePostTitle, useRuntimeConfig } from 'valaxy'
 import { computed, defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -26,6 +26,8 @@ const runtimeConfig = useRuntimeConfig()
 const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
   ? defineAsyncComponent(() => import('../components/YunGallery.vue'))
   : () => null
+
+const encryptedPhotos = useEncryptedPhotos()
 </script>
 
 <template>
@@ -51,7 +53,7 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
               <div i-ri-arrow-go-back-line />
             </a>
           </div>
-          <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
+          <ValaxyGalleryDecrypt v-if="encryptedPhotos" :encrypted-photos="encryptedPhotos" />
           <YunGallery v-else :photos="photos" />
           <RouterView />
         </template>

package/layouts/post.vue

@@ -2,7 +2,7 @@
 import type { Article } from '@unhead/schema-org'
 import { defineArticle, useSchemaOrg } from '@unhead/schema-org'
 
-import { toDate } from 'date-fns'
+import dayjs from 'dayjs'
 import { useFrontmatter, useFullUrl, useSiteConfig } from 'valaxy'
 import { computed } from 'vue'
 
@@ -27,8 +27,8 @@ const article: Article = {
       url: siteConfig.value.author.link,
     },
   ],
-  'datePublished': toDate(frontmatter.value.date || ''),
-  'dateModified': toDate(frontmatter.value.updated || ''),
+  'datePublished': dayjs(frontmatter.value.date || '').toDate(),
+  'dateModified': dayjs(frontmatter.value.updated || '').toDate(),
 }
 
 const image = frontmatter.value.image || frontmatter.value.cover

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.21.1",
+  "version": "0.22.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.1.0",
-    "@iconify-json/ant-design": "^1.2.3",
-    "@iconify-json/simple-icons": "^1.2.15",
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/simple-icons": "^1.2.16",
     "@vueuse/motion": "^2.2.6",
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy-addon-waline": "0.2.0",
-    "valaxy": "0.21.1"
+    "valaxy": "0.22.0",
+    "valaxy-addon-waline": "0.2.0"
   },
   "scripts": {
     "release": "bumpp && pnpm publish"

package/utils/index.ts

@@ -14,9 +14,11 @@ export function onImgError(e: Event, defaultImg = noneImg) {
 }
 
 /**
- * date-fns format date with 'yyyy-MM-dd HH:mm:ss'
+ * date-fns format date with 'YYYY-MM-DD HH:mm:ss'
  * @param date
  */
 export function formatTimestamp(date: string | number | Date): string {
-  return formatDate(date, 'yyyy-MM-dd HH:mm:ss')
+  return formatDate(date, {
+    template: 'YYYY-MM-DD HH:mm:ss',
+  })
 }