valaxy-theme-yun 0.20.0-beta.10 → 0.20.0-beta.11

package/components/YunLayoutPostTag.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
 const tagRef = ref<HTMLElement>()
 useYunSpringAnimation(tagRef, {
   i: props.i || 0,
+  delay: 25,
 })
 </script>
 

package/components/YunNotice.vue

@@ -5,16 +5,17 @@ defineProps<{
 </script>
 
 <template>
-  <div class="yun-notice m-auto">
-    <span v-html="content" />
-    <slot />
+  <div class="w-full px-4 flex-center">
+    <div class="yun-notice w-full">
+      <span v-html="content" />
+      <slot />
+    </div>
   </div>
 </template>
 
 <style>
 .yun-notice {
   border: 1px solid var(--va-c-text);
-  width: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -23,6 +24,6 @@ defineProps<{
   font-weight: bold;
   padding: 1rem;
   max-width: var(--yun-post-card-max-width);
-  background-color: rgba(200, 200, 200, 0.1);
+  background-color: rgb(200 200 200 / 0.1);
 }
 </style>

package/components/YunPagination.vue

@@ -16,6 +16,10 @@ const { curPage, totalPages, showPage, getTo, surLen, prevTo, nextTo, showPrev,
   total: props.total,
   pageSize: props.pageSize,
 })
+
+defineExpose({
+  curPage,
+})
 </script>
 
 <template>

package/components/YunPostList.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useSiteConfig, useSiteStore } from 'valaxy'
 import type { Post } from 'valaxy/types'
 
 const props = withDefaults(defineProps<{
   type?: string
   posts?: Post[]
-  curPage?: number
-}>(), {
-  curPage: 1,
-})
+}>(), {})
+
+const paginationRef = ref()
+const curPage = computed(() => paginationRef.value?.curPage || 1)
 
 const site = useSiteStore()
 const siteConfig = useSiteConfig()
@@ -21,8 +21,8 @@ const posts = computed(() => (
 
 const displayedPosts = computed(() =>
   posts.value.slice(
-    (props.curPage - 1) * pageSize.value,
-    props.curPage * pageSize.value,
+    (curPage.value - 1) * pageSize.value,
+    curPage.value * pageSize.value,
   ),
 )
 </script>
@@ -39,6 +39,7 @@ const displayedPosts = computed(() =>
   </div>
 
   <YunPagination
+    ref="paginationRef"
     class="mt-5"
     :total="posts.length" :page-size="pageSize"
   />

package/components/YunPrologue.vue

@@ -5,7 +5,7 @@
 
     <div
       flex="~ col"
-      class="justify-center items-center absolute bottom-5 md:bottom-12 left-0 right-0"
+      class="justify-center items-center absolute bottom-$rect-margin left-0 right-0"
     >
       <PrologueSocialLinks />
     </div>

package/components/animation/LineBurstEffects.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 // 播放完销毁 css 动画
+import { sleep } from 'valaxy'
 import { onMounted, ref } from 'vue'
 
 const props = defineProps<{
+  delay: number
   duration: number
 }>()
 
-const destroy = ref(false)
-onMounted(() => {
-  setTimeout(() => {
-    destroy.value = true
-  }, props.duration)
+const destroy = ref(true)
+onMounted(async () => {
+  await sleep(props.delay)
+  destroy.value = false
+  await sleep(props.duration)
+  destroy.value = true
 })
 </script>
 

package/components/author/YunAuthorAvatar.vue

@@ -7,6 +7,7 @@ const siteConfig = useSiteConfig()
 <template>
   <img
     class="rounded-full size-full"
-    :src="siteConfig.author.avatar" alt="avatar"
+    :src="siteConfig.author.avatar"
+    alt="avatar"
   >
 </template>

package/components/prologue/PrologueSquare.vue

@@ -1,64 +1,10 @@
 <script setup lang="ts">
-import { useMotion } from '@vueuse/motion'
 import { ref } from 'vue'
-import { cubicBezier } from '../../client/constants'
 import { useThemeConfig } from '../../composables'
 
 const themeConfig = useThemeConfig()
 
 const showContent = ref(false)
-const avatarRef = ref<HTMLElement>()
-const motionInstance = useMotion(avatarRef, {
-  initial: {
-    borderRadius: '0%',
-    width: 'var(--total-char-height)',
-    height: 'var(--total-char-height)',
-    rotate: 135,
-    y: '0%',
-  },
-  enter: {
-    borderRadius: '50%',
-    rotate: 0,
-    y: '0%',
-    width: '120px',
-    height: '120px',
-    boxShadow: 'none',
-    transition: {
-      type: 'keyframes',
-      ease: cubicBezier.easeIn,
-      duration: 800,
-      onComplete: () => {
-        motionInstance.variant.value = 'leave'
-        showContent.value = true
-      },
-    },
-  },
-  leave: {
-    // y: '-50%',
-    boxShadow: '0 5px 100px rgba(0, 0, 0, 0.15)',
-    transition: {
-      type: 'keyframes',
-      ease: cubicBezier.easeInOut,
-      duration: 500,
-    },
-  },
-})
-
-const introRef = ref<HTMLElement>()
-useMotion(introRef, {
-  initial: {
-    y: '0%',
-  },
-  enter: {
-    y: 'calc(-50%)',
-    transition: {
-      delay: 800,
-      type: 'keyframes',
-      ease: cubicBezier.easeInOut,
-      duration: 400,
-    },
-  },
-})
 </script>
 
 <template>
@@ -72,69 +18,77 @@ useMotion(introRef, {
     <slot />
 
     <div
-      ref="introRef"
       flex="~ col center"
-      class="info relative"
+      class="info relative duration-800 transition-cubic-bezier-ease-in"
+      :class="{
+        'translate-y--1/2': showContent,
+      }"
     >
-      <div
-        ref="avatarRef" flex="~ col" class="absolute yun-square bg-$va-c-text square-rotate w-full"
+      <Transition
+        enter-from-class="enter-from"
+        enter-to-class="enter-to"
+        appear
+        @after-appear="showContent = true"
       >
-        <LineBurstEffects
-          class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
-          :duration="800"
-        />
-        <YunAuthorAvatar />
-      </div>
+        <div
+          flex="~ col"
+          class="absolute yun-square bg-$va-c-text square-rotate w-full z-1"
+        >
+          <LineBurstEffects
+            class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
+            :delay="1000"
+            :duration="600"
+          />
+          <Transition
+            enter-from-class="op-0"
+            enter-to-class="op-100"
+            enter-active-class="transition-400 delay-400"
+            appear
+          >
+            <YunAuthorAvatar />
+          </Transition>
+        </div>
+      </Transition>
 
-      <div
-        v-if="showContent"
-        v-motion
-        :initial="{
-          opacity: 0,
-          y: '0',
-        }"
-        :enter="{
-          opacity: 1,
-          y: 'calc(50% + 60px)',
-          transition: {
-            type: 'keyframes',
-            ease: cubicBezier.easeInOut,
-            duration: 400,
-          },
-        }"
+      <Transition
+        enter-from-class="translate-y-0"
+        enter-active-class="duration-800 transition-cubic-bezier-ease-in"
+        appear
       >
-        <YunAuthorName class="mt-3" />
-        <YunAuthorIntro />
+        <div v-if="showContent" class="translate-y-[calc(50%+50px)] animate-fade-in">
+          <YunAuthorName class="mt-3" />
+          <YunAuthorIntro />
 
-        <YunDivider />
+          <YunDivider />
 
-        <div flex="~ col" class="gap-2 items-center justify-center">
-          <YunSiteTitle />
-          <YunSiteSubtitle />
-          <YunSiteDescription />
-        </div>
+          <div flex="~ col" class="gap-2 items-center justify-center">
+            <YunSiteTitle />
+            <YunSiteSubtitle />
+            <YunSiteDescription />
+          </div>
 
-        <YunDivider />
+          <YunDivider />
 
-        <div
-          class="mt-4 flex-center w-50 md:w-100 m-auto gap-2"
-          flex="~ wrap"
-          p="x-$rect-margin"
-        >
-          <YunSiteLinkItem
-            :page="{
-              name: '博客文章',
-              icon: 'i-ri-article-line',
-              url: '/posts/',
-            }"
-          />
-          <slot />
-          <YunSiteLinkItem
-            v-for="item, i in themeConfig.pages"
-            :key="i" :page="item"
-          />
+          <div
+            class="mt-4 flex-center w-64 md:w-100 m-auto gap-2"
+            flex="~ wrap"
+            p="x-$rect-margin"
+          >
+            <YunSiteLinkItem
+              :page="{
+                name: '博客文章',
+                icon: 'i-ri-article-line',
+                url: '/posts/',
+              }"
+            />
+            <slot />
+            <YunSiteLinkItem
+              v-for="item, i in themeConfig.pages"
+              :key="i" :page="item"
+            />
+          </div>
         </div>
-      </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -142,4 +96,21 @@ useMotion(introRef, {
 <style lang="scss">
 @use 'sass:map';
 @use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.yun-square {
+  transition: all 0.8s map.get($cubic-bezier, 'ease-in');
+  border-radius: 50%;
+  transform: rotate(0deg) translateY(0%);
+  width: 100px;
+  height: 100px;
+  box-shadow: 0 5px 100px rgb(0 0 0 / 0.15);
+
+  &.enter-from {
+    border-radius: 0%;
+    width: var(--total-char-height);
+    height: var(--total-char-height);
+    transform: rotate(135deg) translateY(0%);
+    box-shadow: none;
+  }
+}
 </style>

package/components/prologue/YunAEFrame.vue

@@ -36,7 +36,7 @@ onMounted(() => {
 
 .yun-ae-frame {
   --corner-size: 40px;
-  --corner-margin: 10px;
+  --corner-margin: 8px;
   --corner-border-size: 3px;
 
   div {

package/composables/animation.ts

@@ -12,6 +12,10 @@ export function useYunSpringAnimation(target: MaybeRef<HTMLElement | undefined>,
   i: number
   y?: number
   duration?: number
+  /**
+   * delay in ms
+   */
+  delay?: number
 }) {
   useMotion(target, {
     initial: {
@@ -22,7 +26,7 @@ export function useYunSpringAnimation(target: MaybeRef<HTMLElement | undefined>,
       opacity: 1,
       y: 0,
       transition: {
-        delay: options.i * 50,
+        delay: options.i * (options.delay || 50),
         type: 'spring',
         ease: cubicBezier.easeIn,
         damping: 8,

package/layouts/home.vue

@@ -16,7 +16,7 @@ const showNotice = computed(() => {
 
 <template>
   <YunLayoutWrapper
-    class="items-center  flex-col"
+    class="items-center flex-col"
     :class="{
       'mt-0!': !isPage,
     }"
@@ -29,7 +29,7 @@ const showNotice = computed(() => {
 
     <YunNotice
       v-if="showNotice"
-      class="mb-10"
+      class="mb-2 md:mb-6"
       :class="{
         'mt-4': !isPage,
       }"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.20.0-beta.10",
+  "version": "0.20.0-beta.11",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",

package/styles/animations/index.scss

@@ -4,6 +4,14 @@
 @use 'sass:map';
 @use '../vars.scss' as *;
 
+.transition-cubic-bezier-ease-in {
+  transition-timing-function: map.get($cubic-bezier, 'ease-in');
+}
+
+.transition-cubic-bezier-ease-in-out {
+  transition-timing-function: map.get($cubic-bezier, 'ease-in-out');
+}
+
 .v-enter-active,
 .v-leave-active {
   transition: opacity .2s map.get($cubic-bezier, 'ease-in');

package/styles/css-vars.scss

@@ -26,7 +26,7 @@ html.dark {
 // animation
 @media screen and (width <= 768px) {
   :root {
-    --rect-margin: 20px;
+    --rect-margin: 16px;
   }
 }