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

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,23 @@
 <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,
+  delay: 25,
+})
 </script>
 
 <template>
   <span
+    ref="tagRef"
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >

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/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/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/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 />