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

package/bump.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'bumpp'
+
+export default defineConfig({
+  commit: false,
+  tag: false,
+  push: false,
+})

package/components/ValaxyMain.vue

@@ -46,16 +46,17 @@ onContentUpdated(() => {
         p="lt-md:0"
       >
         <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">
-          <slot name="main-header">
-            <YunPageHeader
-              class="mb-2 mt-8"
-              :title="title"
-              :icon="frontmatter.icon || icon"
-              :color="frontmatter.color || color"
-              :cover="frontmatter.cover"
-              :page-title-class="frontmatter.pageTitleClass"
-            />
-          </slot>
+          <div class="mt-8 mb-4">
+            <slot name="main-header">
+              <YunPageHeader
+                :title="title"
+                :icon="frontmatter.icon || icon"
+                :color="frontmatter.color || color"
+                :cover="frontmatter.cover"
+                :page-title-class="frontmatter.pageTitleClass"
+              />
+            </slot>
+          </div>
           <slot name="main-header-after" />
 
           <div p="x-4 b-8" class="sm:px-6 lg:px-12 xl:px-16" w="full">
@@ -97,14 +98,6 @@ onContentUpdated(() => {
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
-@include screen('md') {
-  .yun-main {
-    &.has-sidebar {
-      padding-left: var(--va-sidebar-width);
-    }
-  }
-}
-
 @include screen('xl') {
   .content{
     // 8px scrollbar width

package/components/YunAdBoard.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- empty -->
+  <div />
+</template>

package/components/YunAlbum.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <AppLink class="yun-album-list-item" :to="album.url">
-    <figure :title="album.desc">
+    <figure class="m-10" flex="~ col" :title="album.desc">
       <img
         loading="lazy"
         class="yun-album-list-cover"
@@ -17,9 +17,19 @@ defineProps<{
         :alt="album.caption"
         :on-error="onImgError"
       >
-      <figcaption>
-        「{{ album.caption }}」
+      <figcaption class="yun-album-caption yun-title-effects text-$va-c-text inline-flex">
+        {{ album.caption }}
       </figcaption>
     </figure>
   </AppLink>
 </template>
+
+<style lang="scss">
+.yun-album-caption {
+  position: absolute;
+  bottom: -3rem;
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+</style>

package/components/YunAlbumList.vue

@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="yun-album-list">
-    <YunAlbum v-for="album in albums" :key="album.url" :album="album" />
+  <div class="yun-album-list mb-4">
+    <YunAlbum
+      v-for="album in albums" :key="album.url"
+      :album="album"
+    />
   </div>
 </template>
 
@@ -26,7 +29,6 @@ defineProps<{
     figure {
       position: relative;
       width: 15rem;
-      margin: 2rem;
 
       &::before {
         content: '';
@@ -53,14 +55,6 @@ defineProps<{
         object-fit: cover;
         background-color: #eee;
       }
-
-      figcaption {
-        position: absolute;
-        bottom: -2.5rem;
-        display: block;
-        text-align: center;
-        width: 100%;
-      }
     }
   }
 }

package/components/YunCategories.vue

@@ -26,11 +26,12 @@ const categoryList = computed(() => {
 <template>
   <div flex="~ col">
     <ul
-      v-for="category in categories.values()"
+      v-for="(category, i) in categories.values()"
       :key="category.name"
       class="category-list"
     >
       <YunCategory
+        :i="i"
         :parent-key="category.name"
         :category="category"
         :level="level + 1"

package/components/YunCategory.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { CategoryList, Post } from 'valaxy'
-import { isCategoryList, useInvisibleElement } from 'valaxy'
+import { useInvisibleElement } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+import { useYunSpringAnimation } from '../composables/animation'
 
 const props = withDefaults(defineProps<{
+  i?: number
   parentKey: string
   // to eliminate the warning
   category: Post | CategoryList
@@ -20,24 +22,10 @@ const props = withDefaults(defineProps<{
 })
 
 const router = useRouter()
-const route = useRoute()
-const categoryList = computed(() => {
-  const c = (route.query.category as string) || ''
-  return Array.isArray(c) ? [c] : c.split('/')
-})
 
 const collapse = ref(props.collapsable)
 const { t } = useI18n()
 
-/**
- * i18n
- */
-const { locale } = useI18n()
-function getTitle(post: Post | any) {
-  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
-  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
-}
-
 const postCollapseElRef = ref<HTMLElement>()
 const { show } = useInvisibleElement(postCollapseElRef)
 /**
@@ -61,11 +49,21 @@ onMounted(() => {
   if (postCollapseEl)
     postCollapseElRef.value = postCollapseEl
 })
+
+const categoryRef = ref<HTMLElement>()
+if (props.level === 1) {
+  useYunSpringAnimation(categoryRef, {
+    i: props.i || 0,
+    y: 20,
+    duration: 200,
+  })
+}
 </script>
 
 <template>
   <li
-    class="category-list-item inline-flex items-center cursor-pointer w-full gap-2 transition px-3 py-2 rounded"
+    ref="categoryRef"
+    class="category-list-item inline-flex items-center cursor-pointer w-full gap-2 px-3 py-2 rounded"
     hover="bg-black/5"
   >
     <span
@@ -98,28 +96,16 @@ onMounted(() => {
   >
     <ul v-if="!collapse">
       <li
-        v-for="categoryItem, i in category.children.values()" :key="i"
+        v-for="categoryItem, cI in category.children.values()"
+        :key="cI"
         class="post-list-item text-$va-c-text" m="l-4"
         hover="text-$va-c-primary-lighter"
       >
-        <template v-if="isCategoryList(categoryItem)">
-          <YunCategory
-            :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
-            :category="categoryItem"
-            :collapsable="!categoryList.includes(categoryItem.name)"
-          />
-        </template>
-
-        <template v-else>
-          <RouterLink
-            v-if="categoryItem.title" :to="categoryItem.path || ''"
-            class="inline-flex items-center gap-2 px-3 py-2 w-full rounded transition"
-            hover="bg-black/5"
-          >
-            <div i-ri-file-text-line />
-            <span font="serif black">{{ getTitle(categoryItem) }}</span>
-          </RouterLink>
-        </template>
+        <YunCategoryChildItem
+          :i="cI"
+          :category-item="categoryItem"
+          :parent-key="parentKey"
+        />
       </li>
     </ul>
   </Transition>

package/components/YunCategoryChildItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Post } from 'valaxy'
+import { isCategoryList } from 'valaxy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  i?: number
+  categoryItem: any
+  parentKey?: string
+}>()
+
+/**
+ * i18n
+ */
+const { locale } = useI18n()
+function getTitle(post: Post | any) {
+  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
+}
+const route = useRoute()
+const categoryList = computed(() => {
+  const c = (route.query.category as string) || ''
+  return Array.isArray(c) ? [c] : c.split('/')
+})
+</script>
+
+<template>
+  <template v-if="isCategoryList(categoryItem)">
+    <YunCategory
+      :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
+      :category="categoryItem"
+      :collapsable="!categoryList.includes(categoryItem.name)"
+    />
+  </template>
+
+  <template v-else>
+    <RouterLink
+      v-if="categoryItem.title"
+      :to="categoryItem.path || ''"
+      class="inline-flex items-center gap-2 px-3 py-2 w-full rounded"
+      hover="bg-black/5"
+    >
+      <div i-ri-file-text-line />
+      <span font="serif black">{{ getTitle(categoryItem) }}</span>
+    </RouterLink>
+  </template>
+</template>

package/components/YunLayoutPostTag.vue

@@ -1,12 +1,22 @@
 <script lang="ts" setup>
-defineProps<{
+import { ref } from 'vue'
+import { useYunSpringAnimation } from '../composables/animation'
+
+const props = defineProps<{
+  i?: number
   title: string
   count: number
 }>()
+
+const tagRef = ref<HTMLElement>()
+useYunSpringAnimation(tagRef, {
+  i: props.i || 0,
+})
 </script>
 
 <template>
   <span
+    ref="tagRef"
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >

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

@@ -48,7 +48,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 +69,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 +84,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/YunPostCollapse.vue

@@ -45,9 +45,11 @@ const sortedYears = computed(() => {
 
 <template>
   <div class="post-collapse px-10 lt-sm:px-5 max-w-3xl" relative>
-    <div w="full" text="center" class="yun-text-light" p="2">
-      {{ t('counter.archives', posts.length) }}
-    </div>
+    <Transition appear enter-active-class="animate-fade-in animate-duration-400">
+      <div w="full" text="center" class="yun-text-light" p="2">
+        {{ t('counter.archives', posts.length) }}
+      </div>
+    </Transition>
 
     <div class="post-collapse-action" text="center">
       <button class="yun-icon-btn shadow hover:shadow-md" @click="isDesc = !isDesc">

package/components/layout/YunLayoutWrapper.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { useYunAppStore } from '../../stores'
-
-const yun = useYunAppStore()
+// common layout
 </script>
 
 <template>
   <div
     flex="~"
-    class="mt-24 md:mt-36 w-full max-w-screen-2xl m-auto justify-center items-start gap-4"
-    :class="{
-      'flex-col': yun.size.isXs,
-    }"
+    m="t-24 md:t-36"
+    class="w-full max-w-screen-2xl m-auto justify-center items-start gap-4"
   >
     <slot />
   </div>

package/components/project/YunProjectCard.vue

@@ -1,9 +1,34 @@
 <script setup lang="ts">
-import { type CSSProperties, computed } from 'vue'
+import { type CSSProperties, computed, ref } from 'vue'
 import { TinyColor } from '@ctrl/tinycolor'
+import { useMotion } from '@vueuse/motion'
 import type { ProjectItem } from '../../types'
+import { cubicBezier } from '../../client/constants'
+
+const props = defineProps<{
+  i: number
+  project: ProjectItem
+}>()
+
+const cardRef = ref<HTMLElement>()
+useMotion(cardRef, {
+  initial: {
+    opacity: 0,
+    y: 50,
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: props.i * 50,
+      type: 'spring',
+      ease: cubicBezier.easeIn,
+      damping: 8,
+      duration: 400,
+    },
+  },
+})
 
-const props = defineProps<{ project: ProjectItem }>()
 const cardStyle = computed(() => {
   const styles: CSSProperties = {
     color: props.project.textColor,
@@ -63,8 +88,9 @@ const links = computed(() => [
 
 <template>
   <div
+    ref="cardRef"
     flex="~ col center"
-    class="m-2 w-90 transform rounded shadow-md grayscale-30 transition duration-400"
+    class="m-2 w-90 transform rounded shadow-md grayscale-30"
     bg="opacity-80 gradient-to-br"
     p="x-2 b-12"
     hover="shadow-lg grayscale-0"

package/components/project/YunProjectCollection.vue

@@ -11,5 +11,5 @@ defineProps<{
   <div class="w-full flex justify-center" text="xl" font="black" m="b-2 t-4">
     {{ title }}
   </div>
-  <YunProjectCard v-for="project, i in projects" :key="i" :project="project" />
+  <YunProjectCard v-for="project, i in projects" :key="i" :project="project" :i="i" />
 </template>

package/components/project/YunProjectToggleButton.vue

@@ -9,6 +9,7 @@ defineProps<{
     class="bg-white-90 m-2 inline-flex items-center justify-center rounded px-2 gap-2 h-8"
     :class="{
       'bg-blue-500 text-white': active,
+      'hover:bg-$va-c-bg-soft': !active,
     }"
   >
     <slot />

package/components/prologue/PrologueSquare.vue

@@ -1,11 +1,9 @@
 <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)
@@ -107,14 +105,17 @@ useMotion(introRef, {
       >
         <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"
           flex="~ wrap"

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: 10px;
+  --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/composables/animation.ts

@@ -0,0 +1,33 @@
+import { useMotion } from '@vueuse/motion'
+import type { MaybeRef } from 'vue'
+import { cubicBezier } from '../client/constants'
+
+/**
+ * 统一的弹跳出现动画
+ */
+export function useYunSpringAnimation(target: MaybeRef<HTMLElement | undefined>, options: {
+  /**
+   * index order
+   */
+  i: number
+  y?: number
+  duration?: number
+}) {
+  useMotion(target, {
+    initial: {
+      opacity: 0,
+      y: options.y || 40,
+    },
+    enter: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: options.i * 50,
+        type: 'spring',
+        ease: cubicBezier.easeIn,
+        damping: 8,
+        duration: options.duration || 400,
+      },
+    },
+  })
+}

package/layouts/404.vue

@@ -7,8 +7,6 @@ const { back } = useBack()
 </script>
 
 <template>
-  <YunSidebar :show-hamburger="true" />
-
   <main class="va-main w-full h-screen" text="center" flex="~ col" justify="center" items="center">
     <div class="not-found" title="404" font="mono">
       404
@@ -27,6 +25,6 @@ const { back } = useBack()
 <style lang="scss" scoped>
 .not-found {
   font-size: 10rem;
-  text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+  text-shadow: 0 5px 10px rgb(0 0 0 / .25), 0 20px 20px rgb(0 0 0 / .15);
 }
 </style>

package/layouts/albums.vue

@@ -20,28 +20,29 @@ const albums = computed(() => frontmatter.value.albums || [])
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <template #main-header>
-        <YunPageHeader
-          :title="title || t('title.album')"
-          :icon="frontmatter.icon || 'i-ri-gallery-line'"
-          :color="frontmatter.color"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </template>
-      <template #main-content>
-        <div text="center" class="yun-text-light" p="2">
-          {{ t('counter.albums', albums.length) }}
-        </div>
-        <YunAlbumList :albums="albums" />
-        <RouterView />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('title.album')"
+            :icon="frontmatter.icon || 'i-ri-gallery-line'"
+            :color="frontmatter.color"
+            :page-title-class="frontmatter.pageTitleClass"
+          />
+        </template>
+        <template #main-content>
+          <div text="center" class="yun-text-light" p="2">
+            {{ t('counter.albums', albums.length) }}
+          </div>
+          <YunAlbumList :albums="albums" />
+          <RouterView />
+        </template>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/archives.vue

@@ -33,7 +33,6 @@ const pageIcon = computed(() => {
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.archives')"
             :icon="pageIcon"
             :color="frontmatter.color"

package/layouts/categories.vue

@@ -53,7 +53,6 @@ useSchemaOrg([
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.categories')"
             :icon="pageIcon"
             :color="frontmatter.color"
@@ -61,9 +60,14 @@ useSchemaOrg([
           />
         </template>
         <template #main-content>
-          <div text="center" class="yun-text-light" p="2">
-            {{ t('counter.categories', Array.from(categories.children).length) }}
-          </div>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div text="center" class="yun-text-light" p="2">
+              {{ t('counter.categories', Array.from(categories.children).length) }}
+            </div>
+          </Transition>
           <YunCategories :categories="categories.children" />
           <RouterView />
         </template>

package/layouts/gallery.vue

@@ -29,34 +29,35 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <template #main-header>
-        <YunPageHeader
-          :title="title || t('title.gallery')"
-          :icon="frontmatter.icon || 'i-ri-gallery-line'"
-          :color="frontmatter.color"
-          :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="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
-        <YunGallery v-else :photos="photos" />
-        <RouterView />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('title.gallery')"
+            :icon="frontmatter.icon || 'i-ri-gallery-line'"
+            :color="frontmatter.color"
+            :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="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
+          <YunGallery v-else :photos="photos" />
+          <RouterView />
+        </template>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/home.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useYunAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 
-const yunStore = useYunAppStore()
 const route = useRoute()
 const themeConfig = useThemeConfig()
 
@@ -17,16 +15,12 @@ const showNotice = computed(() => {
 </script>
 
 <template>
-  <main
-    class="yun-main flex-center"
+  <YunLayoutWrapper
+    class="items-center  flex-col"
     :class="{
-      'pl-0': !yunStore.leftSidebar.isOpen,
-      'md:pl-$va-sidebar-width': yunStore.leftSidebar.isOpen,
-      'pt-36': isPage,
-    }" flex="~ col" w="full"
+      'mt-0!': !isPage,
+    }"
   >
-    <YunSidebar :show-hamburger="true" />
-
     <template v-if="!isPage">
       <YunBanner />
       <YunSay v-if="themeConfig.say.enable" w="full" />
@@ -49,5 +43,5 @@ const showNotice = computed(() => {
     </slot>
 
     <YunFooter />
-  </main>
+  </YunLayoutWrapper>
 </template>

package/layouts/tags.vue

@@ -53,6 +53,7 @@ function displayTag(tag: string) {
 }
 
 const title = usePostTitle(frontmatter)
+const tagArr = computed(() => Array.from(tags.value).sort())
 
 // use flex to fix `overflow-wrap: break-words;` not working in Safari
 </script>
@@ -65,7 +66,6 @@ const title = usePostTitle(frontmatter)
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.tags')"
             :icon="frontmatter.icon || 'i-ri-tag-line'"
             :color="frontmatter.color"
@@ -73,14 +73,20 @@ const title = usePostTitle(frontmatter)
           />
         </template>
         <template #main-content>
-          <div class="yun-text-light" text="center" p="2">
-            {{ t('counter.tags', Array.from(tags).length) }}
-          </div>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div class="yun-text-light" text="center" p="2">
+              {{ t('counter.tags', tagArr.length) }}
+            </div>
+          </Transition>
 
           <div class="justify-center items-end" flex="~ wrap" gap="1">
             <YunLayoutPostTag
-              v-for="[key, tag] in Array.from(tags).sort()"
+              v-for="([key, tag], i) in tagArr"
               :key="key"
+              :i="i"
               :title="key"
               :count="tag.count"
               :style="getTagStyle(tag.count)"

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.20.0-beta.1",
+  "type": "module",
+  "version": "0.20.0-beta.10",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,9 +20,12 @@
   },
   "main": "index.ts",
   "module": "index.ts",
+  "scripts": {
+    "release": "bumpp && npm publish"
+  },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
-    "@explosions/fireworks": "^0.0.2",
+    "@explosions/fireworks": "^0.1.0",
     "@iconify-json/ant-design": "^1.2.1",
     "@iconify-json/simple-icons": "^1.2.5",
     "@vueuse/motion": "^2.2.5",
@@ -32,7 +36,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy-addon-waline": "0.2.0",
-    "valaxy": "0.20.0-beta.1"
+    "valaxy": "workspace:*",
+    "valaxy-addon-waline": "workspace:*"
   }
-}
+}

package/styles/animations/index.scss

@@ -34,3 +34,40 @@
     opacity: 1;
   }
 }
+
+// title-effects
+.yun-title-effects {
+  position: relative;
+  
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    opacity: 0;
+    border: 2px solid;
+    transition: 0.3s;
+    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-width: 2px 0 0 2px;
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  &::after {
+    right: 0;
+    bottom: 0;
+    border-width: 0 2px 2px 0;
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

package/styles/layout/index.scss

@@ -6,8 +6,3 @@
 html {
   overflow-y: scroll;
 }
-
-.yun-main {
-  transition: padding-left var(--va-transition-duration);
-  transition-timing-function: map.get($cubic-bezier, 'ease-in-out');
-}

package/unocss.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'unocss'
 
 export default defineConfig({
   shortcuts: [
-    ['yun-main', 'lt-md:pl-0'],
     ['yun-card', 'transition yun-transition shadow hover:shadow-lg'],
   ],
   rules: [

package/utils/animation.ts

@@ -1,4 +1,6 @@
 import { gsap } from 'gsap'
+// 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'],
         },
       }