valaxy-theme-hairy 0.0.10 → 0.0.11

package/components/HairyArticleSeries.vue

@@ -1,17 +1,30 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
-import { computed } from 'vue'
+import { computed, inject, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { toArr } from '../utils'
 import { useCurrentCategory } from '../hooks/useCategory'
 
 const frontmatter = useFrontmatter()
 const paths = computed(() => toArr(frontmatter.value.categories).filter(Boolean) as string[])
 const category = useCurrentCategory(paths)
-const posts = computed(() => category.value.posts || [])
+const posts = computed(() => {
+  const result = category.value.posts || []
+  return result.sort((a, b) => (a.date || 1) > (b.date || 1) ? 1 : -1)
+})
+const router = useRouter()
+
+const active = inject('HairyUserTab:active', ref(''))
 
 function isCurrent(title = '') {
   return frontmatter.value.title === title
 }
+
+async function changePost(path = '') {
+  router.push(path)
+  await nextTick()
+  active.value = 'aside'
+}
 </script>
 
 <template>
@@ -20,7 +33,7 @@ function isCurrent(title = '') {
       On this Series
     </div>
     <ul class="va-toc relative z-1">
-      <a v-for="(item, index) of posts" :key="index" class="va-toc-item" @click="$router.push(item.path || '')">
+      <a v-for="(item, index) of posts" :key="index" class="va-toc-item" @click="changePost(item.path)">
         <a class="outline-link" :class="[isCurrent(item.title) && 'active']">{{ index + 1 }}.{{ item.title }}</a>
       </a>
     </ul>

package/components/HairyPostList.vue

@@ -1,24 +1,51 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { computed, defineProps, ref, withDefaults } from 'vue'
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
+import { usePostLayout } from '../hooks/usePostLayout'
 
 const props = withDefaults(defineProps<{
   type?: string
   posts?: Post[]
+  curPage?: number
+  pagination?: boolean
 }>(), {
+  curPage: 1,
+  pagination: false,
 })
+const layout = usePostLayout()
 
-const routes = usePostList() as any as Ref<Post[]>
-const posts = computed(() => props.posts || routes.value)
+const pageSize = ref(7)
+const routes = usePostList({ type: props.type || '' })
+const posts = computed<any[]>(() => props.posts || routes.value)
+const pagePosts = computed(() => posts.value.slice((props.curPage - 1) * pageSize.value, props.curPage * pageSize.value))
+const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts.value)
 </script>
 
 <template>
-  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
-    <Transition v-for="post, i in posts" :key="i" name="fade">
-      <HairyArticleText :post="post" />
-    </Transition>
-  </ul>
+  <HairyPostImageList v-if="layout.includes('image')" :posts="displayedPosts" />
+  <HairyPostTextsList v-else :posts="displayedPosts" />
+  <ValaxyPagination v-if="pagination" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
 </template>
 
+<style lang="scss">
+.pagination {
+  font-size: 16px;
+}
+
+.pagination .prev.active,
+.pagination .next.active,
+.pagination .page-number.active {
+  font-weight: normal;
+  background: transparent;
+  color: var(--hy-c-primary);
+  cursor: default;
+}
+
+.pagination .prev:hover,
+.pagination .next:hover,
+.pagination .page-number:hover {
+  color: var(--va-c-bg);
+  background: rgba(143, 230, 213, 0.8);
+}
+</style>

package/components/HairyPostTextsList.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { Post } from 'valaxy'
+import { usePostList } from 'valaxy'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  posts?: Post[]
+}>(), {})
+
+const routes = usePostList() as any as Ref<Post[]>
+const posts = computed(() => props.posts || routes.value)
+</script>
+
+<template>
+  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+    <Transition v-for="post, i in posts" :key="i" name="fade">
+      <HairyArticleText :post="post" />
+    </Transition>
+  </ul>
+</template>
+

package/components/HairyUserNav.vue

@@ -1,8 +1,23 @@
 <script lang="ts" setup>
-import { useCategory, usePostList, useTag } from 'valaxy'
-const category = useCategory()
+import { usePostList, useTag } from 'valaxy'
+import { computed } from 'vue'
+import { toArr } from '../utils'
 const posts = usePostList()
 const tags = useTag()
+
+const total = computed(() => {
+  const categories = posts.value.map(v => toArr(v.categories || [])).filter(v => v.length)
+  const maps: string[] = []
+  for (const category of categories) {
+    let caches: string[] = []
+    for (const iterator of category) {
+      caches.push(iterator)
+      maps.push(caches.join('-'))
+    }
+    caches = []
+  }
+  return new Set(maps).size
+})
 </script>
 
 <template>
@@ -11,7 +26,7 @@ const tags = useTag()
       文章
     </HairyUserStats>
     <div class="w-1px bg-gray bg-opacity-50" />
-    <HairyUserStats :count="category.total" @click="$router.push('/categories/')">
+    <HairyUserStats :count="total" @click="$router.push('/categories/')">
       分类
     </HairyUserStats>
     <div class="w-1px bg-gray bg-opacity-50" />

package/components/HairyUserTab.vue

@@ -2,9 +2,9 @@
 import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index'
 import 'element-plus/es/components/tabs/style/index'
 import 'element-plus/es/components/tab-pane/style/index'
-import { ref } from 'vue'
-
+import { provide, ref } from 'vue'
 const active = ref('aside')
+provide('HairyUserTab:active', active)
 </script>
 
 <template>

package/hooks/useYearArchives.ts

@@ -27,17 +27,21 @@ export function useYearArchives() {
       const [year, month] = [days.format('YYYY'), days.format('MM')]
       if (!maps[year])
         maps[year] = {}
-      if (!maps[year][month]) { maps[year][month] = { count: 1, posts: [post] } }
+      if (!maps[year][month]) { maps[year][month] = { count: 1, posts: [post as any] } }
       else {
         maps[year][month].count++
-        maps[year][month].posts.push(post)
+        maps[year][month].posts.unshift(post as any)
       }
     }
     for (const [year, months] of Object.entries(maps)) {
       for (const [month, { count, posts }] of Object.entries(months))
-        items.push({ year, month, count, posts })
+        items.unshift({ year, month, count, posts })
     }
-    return items
+    return items.sort((a, b) => {
+      const aTime = `${a.year}-${a.month}`
+      const bTime = `${b.year}-${b.month}`
+      return bTime > aTime ? 1 : -1
+    })
   })
   return archives
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",

package/pages/archives/[year]/[month]/index.vue

@@ -33,7 +33,6 @@ const post = computed(() => months.value.flatMap(item => item.posts))
       {{ month }}月
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
-
   <el-timeline>
     <el-timeline-item
       v-for="(item, index) in post"

package/pages/archives/index.vue

@@ -26,15 +26,21 @@ const posts = usePostList()
       size="large"
     >
       <div class="activity inline-flex items-center">
-        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year))">
           {{ activity.year }}
         </HairyLink>
-        <span class="text-gray-5 text-size-5 mx-2">/</span>
-        <HairyLink @click="$router.push(getArchiveLink(activity.year, activity.month))">
+        <span class="text-gray-5 mx-2">/</span>
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year, activity.month))">
           {{ activity.month }}
         </HairyLink>
         <span class="text-gray-5 text-size-5 ml-1">({{ activity.count }}篇)</span>
       </div>
+      <HairyTimelinePostItem v-for="(item, index) in activity.posts.slice(0, 2)" :key="index" :post="item" />
+      <div v-if="activity.posts.length > 2">
+        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
+          ....
+        </HairyLink>
+      </div>
     </el-timeline-item>
   </el-timeline>
 </template>

package/pages/categories/[...categories].vue

@@ -22,18 +22,20 @@ const router = useRouter()
 
 const paths = computed(() => props.categories.split('/').filter(Boolean))
 const current = useCurrentCategory(paths)
-
 const posts = useCategoryPost(paths)
 
 const i18n = useI18n()
 
+const s = '/'
+
 const getBreadcrumbPath = (index: number) => {
-  if (paths.value[index] === paths.value[paths.value.length - 1])
+  const paths = props.categories.split('/').filter(Boolean)
+  if (paths[index] === paths[paths.length - 1])
     return ''
-  return `/categories/${paths.value.slice(0, index)}`
+  return `/categories/${paths.slice(0, index + 1).join('/')}`
 }
 const displayCategory = (key: string) => {
-  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
+  router.push({ path: `/categories/${[key, ...paths.value].reverse().join('/')}` })
 }
 </script>
 
@@ -45,10 +47,11 @@ const displayCategory = (key: string) => {
     <HairyBreadcrumbItem :to="paths.length && '/categories/' || ''">
       全部
     </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem v-for="(key, index) in paths" :key="key" :to="getBreadcrumbPath(index)">
+    <HairyBreadcrumbItem v-for="(key, index) in categories.split(s)" :key="key" :to="getBreadcrumbPath(index)">
       {{ i18n.t(key) }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
+
   <div class="grid__view dark:text-gray-3 flex-wrap">
     <template v-for="([key, item]) in current.children" :key="key">
       <div

package/pages/index.vue

@@ -1,11 +1,5 @@
-<script lang="ts" setup>
-import { usePostLayout } from '../hooks/usePostLayout'
-const layout = usePostLayout()
-</script>
-
 <template>
-  <HairyPostImageList v-if="layout.includes('image')" />
-  <HairyPostList v-else />
+  <HairyPostList :pagination="true" />
 </template>
 
 <route lang="yaml">

package/pages/page/[page].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ page: string }>()
+</script>
+
+<template>
+  <HairyPostList :pagination="true" :cur-page="parseInt(page)" />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>

package/pages/tags/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const { tags, getTagStyle } = useTags({
-  primary: 'red',
+  primary: '#1bc9a6',
 })
 
 const displayTag = (tag: string) => {
@@ -17,7 +17,7 @@ const displayTag = (tag: string) => {
     <div text="center" class="text-size-2.5em pt-10 mb-5">
       目前共计 {{ Array.from(tags).length }} 个标签
     </div>
-    <div text="center">
+    <div text="center" class="max-w-7xl flex flex-wrap justify-center items-center gap-2">
       <a v-for="[key, tag] in Array.from(tags).sort()" :key="key" class="post-tag cursor-pointer" :style="getTagStyle(tag.count)" p="1" @click="displayTag(key.toString())">
         {{ key }}
       </a>
@@ -29,3 +29,13 @@ const displayTag = (tag: string) => {
 meta:
   layout: tags
 </route>
+
+<style lang="scss" scoped>
+  a {
+    color: var(--yun-tag-color);
+    &:hover {
+      --un-text-opacity: 1;
+      color: var(--hy-c-primary-dark);
+    }
+  }
+</style>