valaxy-theme-yun 0.20.0-beta.8 → 0.20.0

package/components/YunAside.vue

@@ -38,7 +38,7 @@ watch(() => [yun.rightSidebar.isOpen, yun.size.isXl], async () => {
     overflow="auto"
   >
     <Transition name="fade" :delay="100">
-      <div v-show="show" class="w-full" flex="~ col">
+      <div v-show="show" class="w-full" flex="~ col" pb-2>
         <template v-if="showToc">
           <h2
             m="t-6 b-2"

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/YunOverview.vue

@@ -25,9 +25,4 @@
   font-family: get-css-var('font-serif');
   font-weight: 900;
 }
-
-.site-description {
-  color: var(--va-c-text);
-  font-size: 0.8rem;
-}
 </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>
@@ -48,7 +52,7 @@ const { curPage, totalPages, showPage, getTo, surLen, prevTo, nextTo, showPrev,
 
 <style lang="scss">
 :root {
-  --page-btn-bg-color: rgba(255, 255, 255, 0.5);
+  --page-btn-bg-color: rgb(255 255 255 / 0.5);
   --page-btn-hover-bg-color: var(--va-c-primary-lighter);
   --page-btn-active-bg-color: var(--va-c-primary-light);
 }
@@ -69,10 +73,10 @@ const { curPage, totalPages, showPage, getTo, surLen, prevTo, nextTo, showPrev,
     width: 2rem;
     height: 2rem;
     margin: 0;
-    transition: background-color var(--va-transition-duration) ease;
 
     // disabled attr
     &[disabled] {
+      color: var(--va-c-text-light);
       background-color: var(--va-c-bg-mute);
     }
   }
@@ -84,19 +88,22 @@ const { curPage, totalPages, showPage, getTo, surLen, prevTo, nextTo, showPrev,
     background-color: var(--page-btn-bg-color);
 
     &:hover {
-      color: var(--va-c-bg);
+      // color: var(--va-c-bg);
+      color: white;
       background: var(--page-btn-hover-bg-color);
     }
 
     &:active {
-      color: var(--va-c-bg);
+      // color: var(--va-c-bg);
+      color: white;
       background: var(--page-btn-active-bg-color);
     }
 
     &.active {
+      // color: var(--va-c-bg);
+      color: white;
       font-weight: normal;
       background: var(--page-btn-active-bg-color);
-      color: var(--va-c-bg);
       cursor: default;
     }
 

package/components/YunPostCard.vue

@@ -52,12 +52,12 @@ const { icon, styles } = usePostProperty(props.post.type)
         </div>
         <!-- <div m="b-5" /> -->
 
-        <div v-if="post.excerpt" w="full" h="10" class="absolute bottom-0 bg-gradient-to-t from-$va-c-bg-light to-transparent z-1" />
+        <YunExcerptBottomGradient v-if="post.excerpt" />
 
         <a
           v-if="post.url"
           :href="post.url"
-          class="post-link-btn shadow hover:shadow-md"
+          class="post-link-btn shadow hover:shadow-md z-2"
           rounded
           target="_blank"
           m="b-4"

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,122 +1,73 @@
 <script setup lang="ts">
-import { useMotion } from '@vueuse/motion'
 import { ref } from 'vue'
-import { useSiteConfig } from 'valaxy'
-import { cubicBezier } from '../../client/constants'
 import { useThemeConfig } from '../../composables'
 
-const siteConfig = useSiteConfig()
 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>
   <div
     flex="~ col"
-    class="yun-square-container items-center justify-center text-center"
-    :class="{
-      'size-$total-char-height': !showContent,
-    }"
+    class="yun-square-container items-center justify-center text-center size-$total-char-height"
   >
     <slot />
 
     <div
-      ref="introRef"
       flex="~ col center"
-      class="info relative"
+      class="info-with-avatar relative duration-800 transition-cubic-bezier-ease-in"
+      :class="{
+        show: 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 z-1"
+        >
+          <LineBurstEffects
+            class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
+            :delay="200"
+            :duration="400"
+          />
+          <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,
-          },
+        class="info"
+        :class="{
+          show: showContent,
         }"
       >
         <YunAuthorName class="mt-3" />
         <YunAuthorIntro />
-        <YunSiteTitle />
-        <h4 v-if="siteConfig.subtitle" class="site-subtitle block text-$va-c-text op-80" text="sm">
-          {{ siteConfig.subtitle }}
-        </h4>
-        <div v-if="siteConfig.description" class="site-description my-1">
-          {{ siteConfig.description }}
+
+        <YunDivider />
+
+        <div flex="~ col" class="gap-2 items-center justify-center">
+          <YunSiteTitle />
+          <YunSiteSubtitle />
+          <YunSiteDescription />
         </div>
 
+        <YunDivider />
+
         <div
-          class="mt-4 flex-center w-50 md:w-100 m-auto gap-2"
+          class="mt-4 flex-center w-64 md:w-100 m-auto gap-2"
           flex="~ wrap"
           p="x-$rect-margin"
         >
@@ -141,4 +92,45 @@ 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: var(--avatar-size);
+  height: var(--avatar-size);
+  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;
+  }
+}
+
+.yun-square-container {
+  --avatar-size: 100px;
+
+  .info-with-avatar {
+    position: relative;
+
+    &.show {
+      transform: translateY(-50%);
+    }
+  }
+
+  .info {
+    position: relative;
+    opacity: 0;
+    transform: translateY(0);
+    transition: all 0.8s map.get($cubic-bezier, 'ease-in');
+
+    &.show {
+      opacity: 1;
+      transform: translateY(calc(50% + var(--avatar-size) / 2));
+    }
+  }
+}
 </style>

package/components/prologue/YunAEFrame.vue

@@ -1,100 +1,44 @@
 <script setup lang="ts">
-import type { PopmotionTransitionProps } from '@vueuse/motion'
-import { useMotion } from '@vueuse/motion'
-import { useAppStore } from 'valaxy'
-import { computed, ref } from 'vue'
-
-const tlRef = ref<HTMLElement>()
-const trRef = ref<HTMLElement>()
-const blRef = ref<HTMLElement>()
-const brRef = ref<HTMLElement>()
-
-const app = useAppStore()
-const cornerSize = computed(() => {
-  return app.isMobile ? 40 : 50
-})
-const cornerMargin = computed(() => {
-  return app.isMobile ? 10 : 30
-})
-const cornerBorderSize = computed(() => {
-  return app.isMobile ? 3 : 5
-})
-
-const cornerTransitionProps: PopmotionTransitionProps = {
-  type: 'spring',
-  duration: 600,
-}
+import { onMounted, ref } from 'vue'
 
-useMotion(tlRef, {
-  initial: {
-    x: -cornerMargin.value,
-    y: -cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-useMotion(trRef, {
-  initial: {
-    x: cornerMargin.value,
-    y: -cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-useMotion(blRef, {
-  initial: {
-    x: -cornerMargin.value,
-    y: cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-useMotion(brRef, {
-  initial: {
-    x: cornerMargin.value,
-    y: cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-const cssVarStyles = computed(() => {
-  return {
-    '--corner-size': `${cornerSize.value}px`,
-    '--corner-margin': `${cornerMargin.value}px`,
-    '--corner-border-size': `${cornerBorderSize.value}px`,
-  }
+const playAnim = ref(false)
+onMounted(() => {
+  playAnim.value = true
 })
 </script>
 
 <template>
   <div
-    class="ae-frame" :style="cssVarStyles"
+    class="yun-ae-frame"
+    :class="{
+      play: playAnim,
+    }"
   >
-    <div ref="tlRef" class="absolute" />
-    <div ref="trRef" class="absolute" />
-    <div ref="blRef" class="absolute" />
-    <div ref="brRef" class="absolute" />
+    <div class="tl absolute" />
+    <div class="tr absolute" />
+    <div class="bl absolute" />
+    <div class="br absolute" />
   </div>
 </template>
 
 <style lang="scss">
-.ae-frame {
+@use 'sass:map';
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+@include screen('md') {
+  .yun-ae-frame {
+    --corner-size: 50px;
+    --corner-margin: 30px;
+    --corner-border-size: 5px;
+  }
+}
+
+.yun-ae-frame {
+  --corner-size: 40px;
+  --corner-margin: 8px;
+  --corner-border-size: 3px;
+
   div {
     width: var(--corner-size);
     height: var(--corner-size);
@@ -151,5 +95,44 @@ const cssVarStyles = computed(() => {
       }
     }
   }
+
+  .tl, .tr, .bl, .br {
+    position: absolute;
+    transition: transform 0.6s map.get($cubic-bezier, 'ease-in');
+  }
+
+  .tl {
+    transform: translate(calc(var(--corner-margin) * -1), calc(var(--corner-margin) * -1));
+  }
+
+  .tr {
+    transform: translate(calc(var(--corner-margin)), calc(var(--corner-margin) * -1));
+  }
+
+  .bl {
+    transform: translate(calc(var(--corner-margin) * -1), calc(var(--corner-margin)));
+  }
+
+  .br {
+    transform: translate(calc(var(--corner-margin)), calc(var(--corner-margin)));
+  }
+
+  &.play {
+    .tl {
+      transform: translate(0, 0);
+    }
+
+    .tr {
+      transform: translate(0, 0);
+    }
+
+    .bl {
+      transform: translate(0, 0);
+    }
+
+    .br {
+      transform: translate(0, 0);
+    }
+  }
 }
 </style>

package/components/site/YunSiteDescription.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div v-if="siteConfig.description" class="site-description text-$va-c-text text-sm">
+    {{ siteConfig.description }}
+  </div>
+</template>

package/components/site/YunSiteLinkItem.vue

@@ -15,7 +15,7 @@ const yunApp = useYunAppStore()
     inline-flex
     :to="page.url" :title="page.name"
     :style="`color:${page.color}`"
-    hover="bg-gray-100/50 dark:bg-gray-800/50"
+    hover="bg-white/80 dark:bg-black/80"
     @click="yunApp.fullscreenMenu.isOpen = false"
   >
     <div :class="page.icon" class="icon" />

package/components/site/YunSiteSubtitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <h4
+    v-if="siteConfig.subtitle"
+    class="site-subtitle block text-$va-c-text op-80" text="sm"
+  >
+    {{ siteConfig.subtitle }}
+  </h4>
+</template>

package/components/ui/YunDivider.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="h-1px bg-black/50 dark:bg-white/80 my-4 md:my-6" />
+</template>

package/components/ui/YunExcerptBottomGradient.vue

@@ -0,0 +1,6 @@
+<template>
+  <div
+    w="full" h="10"
+    class="absolute bottom-0 bg-gradient-to-t from-$va-c-bg-light to-transparent z-1"
+  />
+</template>

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,6 +1,7 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.20.0-beta.8",
+  "type": "module",
+  "version": "0.20.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,23 +20,23 @@
   },
   "main": "index.ts",
   "module": "index.ts",
-  "scripts": {
-    "release": "bumpp && npm publish"
-  },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.1.0",
-    "@iconify-json/ant-design": "^1.2.1",
-    "@iconify-json/simple-icons": "^1.2.5",
+    "@iconify-json/ant-design": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.7",
     "@vueuse/motion": "^2.2.5",
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
-    "primevue": "^4.0.7",
-    "radix-vue": "^1.9.6"
+    "primevue": "^4.1.0",
+    "radix-vue": "^1.9.7"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "workspace:*",
-    "valaxy-addon-waline": "workspace:*"
+    "valaxy-addon-waline": "0.2.0",
+    "valaxy": "0.20.0"
+  },
+  "scripts": {
+    "release": "bumpp && npm publish"
   }
-}
+}

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;
   }
 }
 

package/utils/animation.ts

@@ -1,6 +1,7 @@
 import { gsap } from 'gsap'
-// use it for esm
-import ScrollToPlugin from 'gsap/ScrollToPlugin'
+// gsap/ScrollToPlugin is ESM, but gsap not include 'type:module' in package.json
+// use cjs for vite-ssg, optimizeDeps for ESM
+import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
 
 gsap.registerPlugin(ScrollToPlugin)
 

package/valaxy.config.ts

@@ -20,6 +20,7 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
         },
 
         optimizeDeps: {
+          include: ['gsap/dist/ScrollToPlugin'],
           exclude: ['@docsearch/js'],
         },
       }