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

package/components/YunOverview.vue

@@ -1,37 +1,10 @@
 <script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-import { useRouter } from 'vue-router'
-
-const siteConfig = useSiteConfig()
-const router = useRouter()
+// overview
 </script>
 
 <template>
   <div class="sidebar-panel" p="2">
-    <div class="site-info" m="t-6">
-      <RouterLink class="site-author-avatar" to="/about">
-        <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
-        <span v-if="siteConfig.author.status.emoji" class="site-author-status" :title="siteConfig.author.status.message || undefined">{{ siteConfig.author.status.emoji }}</span>
-      </RouterLink>
-      <div
-        class="site-author-name leading-6"
-        m="t-0 b-4"
-      >
-        <RouterLink to="/about">
-          {{ siteConfig.author.name }}
-        </RouterLink>
-      </div>
-      <RouterLink v-if="router.hasRoute('/about/site')" to="/about/site" class="site-name">
-        {{ siteConfig.title }}
-      </RouterLink>
-      <span v-else class="site-name">{{ siteConfig.title }}</span>
-      <h4 v-if="siteConfig.subtitle" class="site-subtitle block" text="xs">
-        {{ siteConfig.subtitle }}
-      </h4>
-      <div v-if="siteConfig.description" class="site-description my-1">
-        {{ siteConfig.description }}
-      </div>
-    </div>
+    <YunSiteInfo />
 
     <YunSidebarNav />
     <hr m="t-4 b-2" op="20">
@@ -47,59 +20,9 @@ const router = useRouter()
 <style lang="scss">
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
-.site-info {
-  &.fix-top {
-    margin-top: -1.5rem;
-  }
-}
-
-.site-author-avatar {
-  display: inline-block;
-  line-height: 0;
-  position: relative;
-
-  img {
-    height: 96px;
-    width: 96px;
-    max-width: 100%;
-    margin: 0;
-    padding: 4px;
-    background-color: white;
-    box-shadow: 0 0 10px rgba(black, 0.2);
-    transition: 0.4s;
-
-    &:hover {
-      box-shadow: 0 0 30px rgba(var(--va-c-primary-rgb), 0.2);
-    }
-  }
-}
-
-.site-author-status {
-  position: absolute;
-  height: 1.8rem;
-  width: 1.8rem;
-  bottom: 0;
-  right: 0;
-  line-height: 1.8rem;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  background-color: var(--va-c-bg-light);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
 .site-name {
   color: var(--va-c-text);
   font-family: get-css-var('font-serif');
   font-weight: 900;
 }
-
-.site-subtitle {
-  color: get-css-var('c-gray');
-  display: block;
-}
-
-.site-description {
-  color: var(--va-c-text);
-  font-size: 0.8rem;
-}
 </style>

package/components/YunPageHeader.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <header class="post-header" m="t-16 sm:t-6">
+  <header class="post-header">
     <h1
       class="post-title flex-center" p="2" text="2xl center"
       font="serif black"

package/components/YunPagination.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { usePagination } from 'valaxy'
+
+const props = defineProps<{
+  /**
+   * Total Pages
+   */
+  total: number
+  /**
+   * Page Size
+   */
+  pageSize: number
+}>()
+
+const { curPage, totalPages, showPage, getTo, surLen, prevTo, nextTo, showPrev, showNext } = usePagination({
+  total: props.total,
+  pageSize: props.pageSize,
+})
+</script>
+
+<template>
+  <nav class="pagination">
+    <RouterLink v-if="showPrev" class="page-number" :to="prevTo" aria-label="prev">
+      <div i-ri-arrow-left-s-line />
+    </RouterLink>
+
+    <template v-for="i in totalPages">
+      <RouterLink
+        v-if="showPage(i)" :key="i" class="page-number"
+        :class="curPage === i && 'active'"
+        :to="getTo(i)"
+      >
+        {{ i }}
+      </RouterLink>
+      <span v-else-if="i === curPage - surLen" :key="`prev-space-${i}`" class="space" disabled>
+        ...
+      </span>
+      <span v-else-if="i === curPage + surLen" :key="`next-space-${i}`" class="space" disabled>
+        ...
+      </span>
+    </template>
+
+    <RouterLink v-if="showNext" class="page-number" :to="nextTo" aria-label="next">
+      <div i-ri-arrow-right-s-line />
+    </RouterLink>
+  </nav>
+</template>
+
+<style lang="scss">
+:root {
+  --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);
+}
+
+.dark {
+  --page-btn-bg-color: var(--va-c-bg-light);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .prev, .next, .page-number, .space {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+
+    // disabled attr
+    &[disabled] {
+      color: var(--va-c-text-light);
+      background-color: var(--va-c-bg-mute);
+    }
+  }
+
+  .prev, .next, .page-number {
+    cursor: pointer;
+    color: var(--va-c-text);
+    text-decoration: none;
+    background-color: var(--page-btn-bg-color);
+
+    &:hover {
+      // color: var(--va-c-bg);
+      color: white;
+      background: var(--page-btn-hover-bg-color);
+    }
+
+    &:active {
+      // 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);
+      cursor: default;
+    }
+
+  }
+}
+</style>

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,10 +44,12 @@ const sortedYears = computed(() => {
 </script>
 
 <template>
-  <div class="post-collapse px-10 lt-sm:px-5" relative>
-    <div w="full" text="center" class="yun-text-light" p="2">
-      {{ t('counter.archives', posts.length) }}
-    </div>
+  <div class="post-collapse px-10 lt-sm:px-5 max-w-3xl" relative>
+    <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">
@@ -63,23 +65,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 +107,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>