valaxy-theme-yun 0.21.0 → 0.22.0

package/App.vue

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

package/components/ValaxyMain.vue

@@ -5,11 +5,15 @@ import { onClickHref, onContentUpdated, scrollTo, usePostTitle, useSiteConfig }
 import { computed, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { usePostProperty } from '../composables'
+import { useYunAppStore } from '../stores'
 
 const props = defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
+
+const yun = useYunAppStore()
+
 const siteConfig = useSiteConfig()
 
 const { styles, icon, color } = usePostProperty(props.frontmatter.type)
@@ -91,6 +95,8 @@ onContentUpdated(() => {
           <YunComment :class="frontmatter.nav === false ? 'mt-4' : 0" />
         </slot>
 
+        <YunAdBoard v-if="!yun.size.isLg" class="mt-4" />
+
         <slot name="main-footer-before" />
         <slot name="main-footer-after" />
       </div>

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

@@ -14,27 +14,26 @@ const app = useAppStore()
     <div
       v-if="yunApp.fullscreenMenu.isOpen"
       ref="fullscreenMenuRef"
-      p="t-20 md:t-26"
-      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"
+      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 max-w-md shadow-2xl"
     >
       <!-- <div v-if="app.isMobile" class="flex-center gap-2">
         <YunToggleDark transition />
         <YunToggleLocale v-if="app.showToggleLocale" />
       </div> -->
 
-      <div v-if="!yunApp.size.isLg" class="my-4">
-        <YunSiteInfo class="text-center" />
+      <!-- <YunFullscreenMenuList /> -->
+      <YunSiteInfo class="text-center" />
+      <YunGradientDivider class="my-2 op-20" />
+      <YunPostsInfo />
+      <YunGradientDivider class="my-2 op-20" />
+      <YunSocialLinks />
+      <YunGradientDivider class="my-2 op-20" />
+      <YunSidebarLinks />
 
-        <YunGradientDivider class="my-2 op-20" />
-
-        <YunPostsInfo />
-      </div>
       <YunGradientDivider v-if="!yunApp.size.isLg" class="my-2 op-20" />
 
-      <YunFullscreenMenuList />
-
-      <YunGradientDivider v-if="!yunApp.size.isLg" class="my-2 op-20" />
-      <div v-if="!yunApp.size.isLg" class="flex-center">
+      <div class="flex-center">
         <YunConfig />
       </div>
     </div>
@@ -50,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/YunPostCard.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePostProperty } from '../composables'
 
@@ -9,7 +10,15 @@ const props = defineProps<{
 
 const { t } = useI18n()
 
-const { icon, styles } = usePostProperty(props.post.type)
+const { icon, styles, color } = usePostProperty(props.post.type)
+
+const gradientClasses = ref('bg-gradient-to-r gradient-text from-$va-c-primary to-$va-c-primary-lighter')
+const postTitleClass = computed(() => {
+  if (color) {
+    return ''
+  }
+  return props.post.postTitleClass || gradientClasses.value
+})
 </script>
 
 <template>
@@ -35,9 +44,12 @@ const { icon, styles } = usePostProperty(props.post.type)
           class="post-title-link cursor-pointer"
           :to="post.path || ''"
           m="t-3"
-          :class="post.postTitleClass"
+          :class="postTitleClass"
         >
-          <div class="flex-center title text-2xl" text="center" font="serif black">
+          <div
+            class="flex-center title text-2xl"
+            text="center" font="serif black"
+          >
             <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
             <span>{{ post.title }}</span>
           </div>

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/menu/YunNavMenuItem.vue

@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
-
 defineProps<{
   icon: string
   to?: string
 }>()
-
-const router = useRouter()
 </script>
 
 <template>
-  <div
-    class="size-12 inline-flex-center cursor-pointer z-$yun-z-nav-menu"
-    text="$va-c-text"
+  <AppLink
+    class="size-12 inline-flex-center cursor-pointer z-$yun-z-nav-menu text-$va-c-text"
     hover="bg-white/80 dark:bg-black/80 op-100"
     op-80
-    @click="to && router.push(to)"
+    :to="to"
   >
     <div class="size-6" :class="icon" />
-  </div>
+  </AppLink>
 </template>

package/components/site/YunSiteTitle.vue

@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const siteConfig = useSiteConfig()
 
-const classes = ref('site-name clip text-lg leading-loose bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)')
+const classes = ref('site-name text-lg leading-loose bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)')
 </script>
 
 <template>

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.isMd"
+          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.isMd">
+        <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.0",
+  "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.0"
+    "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',
+  })
 }