valaxy-theme-yun 0.22.1 → 0.22.3

package/components/ValaxyMain.vue

@@ -67,14 +67,16 @@ onContentUpdated(() => {
           <slot name="main-header-after" />
 
           <div p="x-4 b-8" class="sm:px-6 lg:px-12 xl:px-16" w="full">
+            <slot name="main-content-before" />
+
             <slot name="main-content">
               <!-- <Transition appear> -->
               <ValaxyMd :frontmatter="frontmatter">
                 <YunAiExcerpt v-if="frontmatter.excerpt_type === 'ai' && frontmatter.excerpt" />
                 <YunMdTimeWarning />
 
-                <slot name="main-content-md" />
                 <slot />
+                <slot name="main-content-md" />
               </ValaxyMd>
               <!-- </Transition> -->
             </slot>

package/components/YunAlbum.vue

@@ -17,7 +17,7 @@ defineProps<{
         :alt="album.caption"
         :on-error="onImgError"
       >
-      <figcaption class="yun-album-caption yun-title-effects text-$va-c-text inline-flex">
+      <figcaption class="yun-album-caption yun-title-effects text-$va-c-text inline-flex-center">
         {{ album.caption }}
       </figcaption>
     </figure>

package/components/animation/YunAnimLineDraw.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const slideIn = ref(false)
+onMounted(() => {
+  slideIn.value = true
+})
+</script>
+
+<template>
+  <div
+    class="line" :class="{
+      enter: slideIn,
+    }"
+  />
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.line {
+  position: absolute;
+  height: 1px;
+  width: 0%;
+  left: 0;
+  background-color: var(--va-c-text);
+  transition: width 1s map.get($cubic-bezier, 'ease-in');
+  transition-delay: 1.2s;
+
+  &.enter {
+    width: 100%;
+  }
+}
+</style>

package/components/prologue/YunPrologueSquare.vue

@@ -56,17 +56,20 @@ const showContent = ref(false)
         <YunAuthorName class="mt-3" />
         <YunAuthorIntro />
 
+        <div class="py-4 md:py-5 lg:pt-6">
+          <YunAnimLineDraw />
+        </div>
         <div
           flex="~ col"
           class="gap-2 items-center justify-center"
-          my-4 md:my-5 lg:my-6
-          py-4 md:py-6
-          border="t-1px b-1px black/60 dark:white/60"
         >
           <YunSiteTitle />
           <YunSiteSubtitle />
           <YunSiteDescription />
         </div>
+        <div class="scale-x--100 py-4 md:py-5 lg:pb-6">
+          <YunAnimLineDraw />
+        </div>
 
         <YunSocialLinks />
 

package/layouts/gallery.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { defineWebPage, useSchemaOrg } from '@unhead/schema-org'
 import { useEncryptedPhotos, useFrontmatter, usePostTitle, useRuntimeConfig } from 'valaxy'
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const router = useRouter()
 
@@ -19,7 +19,8 @@ useSchemaOrg([
   }),
 ])
 
-const photos = computed(() => frontmatter.value.photos || [])
+const route = useRoute()
+const photos = computed(() => route.meta.frontmatter.photos || [])
 
 const runtimeConfig = useRuntimeConfig()
 
@@ -28,6 +29,12 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
   : () => null
 
 const encryptedPhotos = useEncryptedPhotos()
+
+const galleryRef = useTemplateRef<{
+  photos: string[]
+}>('galleryRef')
+
+const photosLength = computed(() => photos.value.length || galleryRef.value?.photos.length)
 </script>
 
 <template>
@@ -44,19 +51,17 @@ const encryptedPhotos = useEncryptedPhotos()
             :page-title-class="frontmatter.pageTitleClass"
           />
         </template>
-        <template #main-content>
-          <div text="center" class="yun-text-light" p="2">
-            {{ t('counter.photos', photos.length) }}
-          </div>
-          <div class="page-action" text="center">
-            <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
-              <div i-ri-arrow-go-back-line />
-            </a>
-          </div>
-          <ValaxyGalleryDecrypt v-if="encryptedPhotos" :encrypted-photos="encryptedPhotos" />
-          <YunGallery v-else :photos="photos" />
-          <RouterView />
-        </template>
+
+        <div text="center" class="yun-text-light" p="2">
+          {{ t('counter.photos', photosLength || 0) }}
+        </div>
+        <div class="page-action" text="center">
+          <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
+            <div i-ri-arrow-go-back-line />
+          </a>
+        </div>
+        <ValaxyGalleryDecrypt v-if="encryptedPhotos" ref="galleryRef" :encrypted-photos="encryptedPhotos" />
+        <YunGallery v-else :photos="photos" />
       </component>
     </RouterView>
   </YunLayoutWrapper>

package/package.json

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