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

package/components/YunPostCard.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import type { Post } from 'valaxy'
-import type { StyleValue } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -14,7 +13,12 @@ const { icon, styles } = usePostProperty(props.post.type)
 </script>
 
 <template>
-  <YunCard m="y-4 auto" :class="post.cover ? 'post-card-image' : 'post-card'" overflow="hidden" :style="styles as StyleValue">
+  <YunCard
+    class="w-full"
+    m="auto"
+    :class="post.cover ? 'post-card-image' : 'post-card'"
+    overflow="hidden" :style="styles"
+  >
     <div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
       <img
         v-if="post.cover"
@@ -67,7 +71,7 @@ const { icon, styles } = usePostProperty(props.post.type)
     <div
       w="full" class="yun-card-actions flex justify-between"
       min-h="10"
-      border="t" text="sm"
+      text="sm"
     >
       <div class="post-categories inline-flex" flex="wrap 1" items="center">
         <YunPostCategories m="l-1" :categories="post.categories" />
@@ -77,3 +81,28 @@ const { icon, styles } = usePostProperty(props.post.type)
     </div>
   </YunCard>
 </template>
+
+<style lang="scss">
+.post-card {
+  // safari not support
+  // animation: card-appear 0.6s ease-in-out forwards, card-appear 0.6s ease-in-out forwards reverse;
+  // animation-timeline: view();
+  // animation-range: entry, exit;
+}
+
+@keyframes card-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.yun-card-actions {
+  border-top: 1px solid rgb(122 122 122 / 0.05);
+}
+</style>

package/components/YunPostCategories.vue

@@ -12,14 +12,14 @@ defineProps<{
       path: '/categories',
       query: { category: Array.isArray(categories) ? categories.join('/') : categories },
     }"
-    class="transition post-category inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
+    class="transition post-category inline-flex-center text-xs border-$va-c-divider"
     px-2 h="7"
     border rounded-full
-    bg="hover:(blue-500 opacity-10)"
+    hover="bg-blue-500 text-white"
   >
     <div m="x-1" inline-flex i-ri-folder-2-line />
     <span>
-      {{ Array.isArray(categories) ? categories.join(' > ') : categories }}
+      {{ Array.isArray(categories) ? categories.join(' / ') : categories }}
     </span>
   </RouterLink>
 </template>

package/components/YunPostCollapse.vue

@@ -44,7 +44,7 @@ const sortedYears = computed(() => {
 </script>
 
 <template>
-  <div class="post-collapse px-10 lt-sm:px-5" relative>
+  <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>
@@ -63,23 +63,12 @@ const sortedYears = computed(() => {
         </h2>
       </div>
 
-      <article
-        v-for="post, j in sortByDate(postListByYear[year], isDesc)" :key="j"
-        class="post-item" relative
-      >
-        <header class="post-header" flex items-center relative>
-          <div class="post-meta">
-            <time v-if="post.date" class="post-time" font="mono" opacity="80">{{
-              formatDate(post.date, 'MM-dd') }}
-            </time>
-          </div>
-          <h2 class="post-title" inline-flex items-center font="serif black">
-            <RouterLink :to="post.path || ''" class="post-title-link">
-              {{ post.title }}
-            </RouterLink>
-          </h2>
-        </header>
-      </article>
+      <YunPostCollapseItem
+        v-for="post, j in sortByDate(postListByYear[year], isDesc)"
+        :key="j"
+        :post="post"
+        :i="j"
+      />
     </div>
   </div>
 </template>
@@ -116,59 +105,5 @@ const sortedYears = computed(() => {
       }
     }
   }
-
-  .post-item {
-    &::before {
-      content: '';
-      position: absolute;
-      width: 2px;
-      height: 100%;
-      background: rgba(var(--va-c-primary-rgb), 0.3);
-    }
-  }
-
-  .post-header {
-    border-bottom: 1px solid rgba(var(--va-c-primary-rgb), 0.3);
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      width: 10px;
-      height: 10px;
-      margin-left: -4px;
-      border-radius: 50%;
-      border: 1px solid var(--va-c-primary);
-      background-color: var(--va-c-bg-light);
-      z-index: 1;
-      transition: background var(--va-transition-duration);
-    }
-
-    &:hover {
-      &::before {
-        background: var(--va-c-primary);
-      }
-    }
-
-    .post-title {
-      margin-left: 0.1rem;
-      padding: 0;
-      font-size: 1rem;
-
-      .post-title-link {
-        .icon {
-          width: 1.1rem;
-          height: 1.1rem;
-          margin-right: 0.3rem;
-        }
-      }
-    }
-
-    .post-meta {
-      font-size: 1rem;
-      margin: 1rem 0 1rem 1.2rem;
-      white-space: nowrap;
-    }
-  }
 }
 </style>

package/components/YunPostCollapseItem.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import type { Post } from 'valaxy'
+import { formatDate } from 'valaxy'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  i: number
+  post: Post
+}>()
+
+const show = ref(false)
+
+const itemRef = ref<HTMLElement>()
+useMotion(itemRef, {
+  initial: { opacity: 0, y: 20 },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 200,
+      delay: props.i * 50,
+      onComplete() {
+        show.value = true
+      },
+    },
+  },
+})
+</script>
+
+<template>
+  <article
+    ref="itemRef"
+    class="post-item relative"
+    :class="{ show }"
+  >
+    <header
+      class="post-header cursor-pointer w-full" flex="~" items-center relative
+      hover="bg-black/1"
+      :class="{ show }"
+    >
+      <div class="post-meta">
+        <time v-if="post.date" class="post-time" font="mono" opacity="80">{{
+          formatDate(post.date, 'MM-dd') }}
+        </time>
+      </div>
+      <h2 class="post-title w-full" inline-flex items-center font="serif black">
+        <RouterLink :to="post.path || ''" class="post-title-link">
+          {{ post.title }}
+        </RouterLink>
+      </h2>
+    </header>
+  </article>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.post-collapse {
+  .post-header {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 10px;
+      height: 10px;
+      margin-left: -4px;
+      border-radius: 50%;
+      border: 1px solid var(--va-c-primary);
+      background-color: var(--va-c-bg-light);
+      z-index: 1;
+      transition: background var(--va-transition-duration);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 1px;
+      background-color: rgba(var(--va-c-primary-rgb), 0.3);
+      transition: width 800ms map.get($cubic-bezier, 'ease-in');
+    }
+
+    &.show {
+      &::after {
+        width: 100%;
+      }
+    }
+
+    &:hover {
+      &::before {
+        background: var(--va-c-primary);
+      }
+    }
+
+    .post-title {
+      margin-left: 0.1rem;
+      padding: 0;
+      font-size: 1rem;
+
+      .post-title-link {
+        .icon {
+          width: 1.1rem;
+          height: 1.1rem;
+          margin-right: 0.3rem;
+        }
+      }
+    }
+
+    .post-meta {
+      font-size: 1rem;
+      margin: 1rem 0 1rem 1.2rem;
+      white-space: nowrap;
+    }
+  }
+
+  .post-item {
+    &::before {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 0;
+      background: rgba(var(--va-c-primary-rgb), 0.3);
+      transition: height 600ms map.get($cubic-bezier, 'ease-in');
+    }
+
+    &.show {
+      &::before {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

package/components/YunPostDateMeta.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import { formatDate } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { formatTimestamp } from '../utils'
+
+defineProps<{
+  // FrontMatter
+  frontmatter: Post
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div v-if="frontmatter.date" class="post-time flex items-center gap-4">
+    <span class="posted-time inline-flex-center gap-1" :title="t('post.posted') + formatTimestamp(frontmatter.date)">
+      <div class="inline-block" i-ri-calendar-line />
+      <time class="op-80">{{ formatDate(frontmatter.date) }}</time>
+    </span>
+
+    <span
+      v-if="frontmatter.updated && frontmatter.updated !== frontmatter.date"
+      class="edited-time inline-flex-center gap-1" :title="t('post.edited') + formatTimestamp(frontmatter.updated)"
+    >
+      <div i-ri-calendar-2-line />
+      <time class="op-80">{{ formatDate(frontmatter.updated) }}</time>
+    </span>
+  </div>
+</template>

package/components/YunPostList.vue

@@ -28,23 +28,18 @@ const displayedPosts = computed(() =>
 </script>
 
 <template>
-  <div class="yun-post-list" w="full" p="x-4 lt-sm:0">
+  <div flex="~ col" class="yun-post-list gap-4" w="full" p="x-4 lt-sm:0">
     <template v-if="!displayedPosts.length">
       <div py2 op50 text-center>
         博主还什么都没写哦～
       </div>
     </template>
 
-    <TransitionGroup name="fade">
-      <YunPostCard v-for="route, i in displayedPosts" :key="i" :post="route" />
-    </TransitionGroup>
+    <YunPostCard v-for="route, i in displayedPosts" :key="i" :post="route" />
   </div>
 
-  <ValaxyPagination :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
+  <YunPagination
+    class="mt-5"
+    :total="posts.length" :page-size="pageSize"
+  />
 </template>
-
-<style>
-.yun-card-actions {
-  border-top: 1px solid rgba(122, 122, 122, 0.15);
-}
-</style>

package/components/YunPostMeta.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { formatDate, useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { formatTimestamp } from '../utils'
 
 defineProps<{
   // FrontMatter
   frontmatter: Post
 }>()
 
+const app = useAppStore()
 const { t } = useI18n()
 
 const siteConfig = useSiteConfig()
@@ -27,50 +27,42 @@ const siteConfig = useSiteConfig()
   </div>
 
   <div
-    v-if="frontmatter" class="post-meta"
-    flex="~ col" justify="center" items="center" text="sm" py="1"
+    v-if="frontmatter"
+    class="post-meta gap-4"
+    flex="~ center"
+    text="sm"
+    :class="{
+      'flex-col gap-2!': app.isMobile || frontmatter.updated,
+    }"
   >
-    <div v-if="frontmatter.date" class="post-time flex items-center">
-      <span class="posted-time inline-flex-center" :title="t('post.posted') + formatTimestamp(frontmatter.date)">
-        <div class="inline-block" i-ri-calendar-line />
-        <time m="l-1">{{ formatDate(frontmatter.date) }}</time>
-      </span>
+    <YunPostDateMeta :frontmatter="frontmatter" />
 
-      <span
-        v-if="frontmatter.updated && frontmatter.updated !== frontmatter.date"
-        class="edited-time inline-flex-center" :title="t('post.edited') + formatTimestamp(frontmatter.updated)"
+    <div class="inline-flex-center gap-4">
+      <div
+        v-if="siteConfig.statistics.enable"
+        class="inline-flex-center post-counter gap-4"
       >
-        <span m="x-2">-</span>
-        <div i-ri-calendar-2-line />
-        <time m="l-1">{{ formatDate(frontmatter.updated) }}</time>
-      </span>
-    </div>
+        <span
+          v-if="frontmatter.wordCount"
+          class="word-count inline-flex-center gap-1" :title="t('statistics.word')"
+        >
+          <div class="inline-block" i-ri-file-word-line />
+          <span class="op-80">{{ frontmatter.wordCount }}</span>
+        </span>
 
-    <div
-      v-if="siteConfig.statistics.enable"
-      class="post-counter flex items-center" mt="2"
-    >
-      <span
-        v-if="frontmatter.wordCount"
-        class="word-count inline-flex-center" :title="t('statistics.word')"
-      >
-        <div class="inline-block" i-ri-file-word-line />
-        <span m="l-1">{{ frontmatter.wordCount }}</span>
-      </span>
+        <span
+          v-if="frontmatter.readingTime"
+          class="reading-time inline-flex-center gap-1"
+          :title="t('statistics.time')"
+        >
+          <div i-ri-timer-line />
+          <time class="op-80">{{ frontmatter.readingTime }}m</time>
+        </span>
+      </div>
 
-      <span
-        v-if="frontmatter.readingTime"
-        class="reading-time inline-flex-center"
-        :title="t('statistics.time')"
-      >
-        <span m="x-2">-</span>
-        <div i-ri-timer-line />
-        <time m="l-1">{{ frontmatter.readingTime }}m</time>
-      </span>
+      <YunWalineMeta />
     </div>
   </div>
-
-  <slot />
 </template>
 
 <style>

package/components/YunPostTags.vue

@@ -13,11 +13,11 @@ defineProps<{
   >
     <RouterLink
       v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }"
-      class="transition post-tag inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
+      class="transition post-tag inline-flex-center text-xs border-$va-c-divider"
       px-2 h="7"
       rounded-full
       border
-      bg="hover:(blue-500 opacity-10)"
+      hover="bg-blue-500 text-white"
     >
       <span>{{ tag }}</span>
     </RouterLink>

package/components/YunPostsInfo.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useCategories, useSiteStore, useTags } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const site = useSiteStore()
+
+const categories = useCategories()
+const tags = useTags()
+</script>
+
+<template>
+  <nav class="site-nav" text-xl mt-2>
+    <YunPostClassifyNavItem
+      to="/archives/" icon="i-ri-archive-line" :title="t('menu.archives')"
+      :total="site.postList.length"
+    />
+    <YunPostClassifyNavItem
+      to="/categories/" icon="i-ri-folder-2-line" :title="t('menu.categories')"
+      :total="Array.from(categories.children).length"
+    />
+    <YunPostClassifyNavItem
+      to="/tags/" icon="i-ri-price-tag-3-line" :title="t('menu.tags')"
+      :total="Array.from(tags).length"
+    />
+  </nav>
+</template>
+
+<style lang="scss">
+@use "valaxy/client/styles/mixins/index.scss" as *;
+
+.site-nav {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  line-height: 1.5;
+  white-space: nowrap;
+  text-align: center;
+}
+</style>

package/components/YunPrologue.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="grid-bg">
+    <YunAEFrame />
+    <YunAERect />
+
+    <div
+      flex="~ col"
+      class="justify-center items-center absolute bottom-5 md:bottom-12 left-0 right-0"
+    >
+      <PrologueSocialLinks />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.grid-bg {
+  --size: 40px;
+
+  background:
+    linear-gradient(90deg, rgb(255 255 255 / .1) 1px, transparent 1px),
+    linear-gradient(rgb(255 255 255 / .1) 1px, transparent 1px);
+  background-size: var(--size) var(--size);
+}
+</style>

package/components/YunSearchBtn.vue

@@ -20,18 +20,20 @@ function onClick() {
 </script>
 
 <template>
-  <button class="yun-search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="onClick">
-    <div v-if="!open" i-ri-search-line />
+  <button
+    class="yun-search-btn popup-trigger size-12 inline-flex justify-center items-center"
+    text="xl $va-c-text"
+    hover="bg-white/80 dark:bg-black/80"
+    :title="t('menu.search')"
+    @click="onClick"
+  >
+    <div v-if="!open" i-ri-search-line op-80 hover="op-100" />
     <div v-else text="!2xl" i-ri-close-line />
   </button>
 </template>
 
 <style lang="scss">
 .yun-search-btn {
-  position: fixed;
-  top: 0.6rem;
-  right: 0.8rem;
-  color: var(--va-c-primary);
   z-index: var(--yun-z-search-btn);
 }
 </style>

package/components/YunSelect.vue

@@ -22,7 +22,7 @@ function toggleOptionVisible(e: MouseEvent) {
 </script>
 
 <template>
-  <div class="relative h-8 w-30 text-$va-c-text-2 z-10" @mousedown.stop>
+  <div class="relative h-8 w-30 text-$va-c-text-2 z-$yun-z-select" @mousedown.stop>
     <button
       class="flex h-full w-full px-2 items-center justify-between rounded transition"
       border="~ gray op-30"
@@ -55,14 +55,4 @@ function toggleOptionVisible(e: MouseEvent) {
 .select-options {
   margin: 0;
 }
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity .2s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
 </style>

package/components/YunSidebar.vue

@@ -13,13 +13,13 @@ const showOverview = ref(false)
 <template>
   <ValaxyOverlay class="md:hidden" :show="yunStore.leftSidebar.isOpen" @click="yunStore.leftSidebar.toggle()" />
 
-  <ValaxyHamburger
+  <!-- <ValaxyHamburger
     :active="yunStore.leftSidebar.isOpen"
     class="menu-btn sidebar-toggle yun-icon-btn leading-4 fixed left-0.8rem top-0.6rem"
     inline-flex cursor="pointer" z="$yun-z-menu-btn"
     :class="showHamburger ? '' : 'md:hidden'"
     @click="yunStore.leftSidebar.toggle()"
-  />
+  /> -->
 
   <aside
     class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
@@ -55,6 +55,9 @@ const showOverview = ref(false)
 </template>
 
 <style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
 .sidebar {
   width: calc(100vw - 64px);
   max-width: var(--va-sidebar-width);
@@ -62,8 +65,8 @@ const showOverview = ref(false)
   background-position: bottom 1rem center;
   transform: translateX(-100%);
   transition: box-shadow var(--va-transition-duration),
-    background-color var(--va-transition-duration), opacity 0.25s,
-    transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1) !important;
+    background-color var(--va-transition-duration), opacity var(--va-transition-duration),
+    transform var(--va-transition-duration) map.get($cubic-bezier, 'ease-in-out') !important;
 
   &.open {
     transform: translateX(0);

package/components/YunSidebarCard.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// new sidebar card
+</script>
+
+<template>
+  <YunCard class="p-4 min-h-sm">
+    <YunSiteInfo class="text-center" />
+    <YunPostsInfo />
+  </YunCard>
+</template>

package/components/YunSidebarNav.vue

@@ -47,7 +47,6 @@ const tags = useTags()
   line-height: 1.5;
   white-space: nowrap;
   text-align: center;
-  margin-top: 1rem;
 }
 
 .site-link-item {