valaxy-theme-hairy 0.2.2 → 1.0.1

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

@@ -1,21 +1,18 @@
 <script lang="ts" setup>
 import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import 'element-plus/es/components/timeline/style/index'
-import 'element-plus/es/components/timeline-item/style/index'
-import { computed, defineProps } from 'vue'
-import { useYearArchives } from '../../../../hooks/useYearArchives'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useYearArchives } from '../../../../composables'
 import { getArchiveLink } from '../../../../utils'
 
-const props = defineProps<{
-  year: string
-  month: string
-}>()
+const year = computed(() => useRoute().params.year as string)
+const month = computed(() => useRoute().params.month as string)
 
 const activities = useYearArchives()
 const months = computed(() =>
   activities.value
-    .filter(item => item.year === props.year)
-    .filter(item => item.month === props.month),
+    .filter(item => item.year === year.value)
+    .filter(item => item.month === month.value),
 )
 const count = computed(() => months.value.reduce((total, value) => total + value.count, 0))
 const post = computed(() => months.value.flatMap(item => item.posts))
@@ -33,19 +30,19 @@ const post = computed(() => months.value.flatMap(item => item.posts))
       {{ month }}月
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
-  <el-timeline>
-    <el-timeline-item
+  <ElTimeline>
+    <ElTimelineItem
       v-for="(item, index) in post"
       :key="index"
       hollow
       size="large"
     >
-      <HairyTimelinePostItem :post="item" />
-    </el-timeline-item>
-  </el-timeline>
+      <HairyTimelineContent :post="item" />
+    </ElTimelineItem>
+  </ElTimeline>
 </template>
 
 <route lang="yaml">
-meta:
-  layout: month
-</route>
+  meta:
+    layout: archive-month
+  </route>

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

@@ -1,25 +1,25 @@
 <script lang="ts" setup>
 import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import 'element-plus/es/components/timeline/style/index'
-import 'element-plus/es/components/timeline-item/style/index'
 import { computed } from 'vue'
 import type { Post } from 'valaxy'
-import { useYearArchives } from '../../../hooks/useYearArchives'
+import { useRoute } from 'vue-router'
 import { getArchiveLink } from '../../../utils'
-interface TimeLineItem extends Post {
+import { useYearArchives } from '../../../composables'
+
+interface TimeLineByPost extends Post {
   type: 'link' | 'post'
   month: string
   link: string
   count: number
 }
-const props = defineProps<{
-  year: string
-}>()
 
 const activities = useYearArchives()
-const filterYear = computed(() => activities.value.filter(item => item.year === props.year))
+
+const year = computed(() => useRoute().params.year as string)
+
+const filterYear = computed(() => activities.value.filter(item => item.year === year.value))
 const timelines = computed(() => {
-  const timeLines: Partial<TimeLineItem>[] = []
+  const timeLines: Partial<TimeLineByPost>[] = []
   for (const { year, count, month, posts } of filterYear.value) {
     timeLines.push({
       type: 'link',
@@ -30,7 +30,7 @@ const timelines = computed(() => {
     for (const post of posts)
       timeLines.push({ ...post, type: 'post' })
   }
-  return timeLines as TimeLineItem[]
+  return timeLines as TimeLineByPost[]
 })
 </script>
 
@@ -44,9 +44,9 @@ const timelines = computed(() => {
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
 
-  <el-timeline>
+  <ElTimeline>
     <template v-for="(item, index) in timelines" :key="index">
-      <el-timeline-item
+      <ElTimelineItem
         v-if="item.type === 'link'"
         hollow
         :index="index"
@@ -55,19 +55,19 @@ const timelines = computed(() => {
         <HairyLink @click="$router.push(getArchiveLink(year, item.month))">
           {{ item.month }}月
         </HairyLink>
-      </el-timeline-item>
-      <el-timeline-item
+      </ElTimelineItem>
+      <ElTimelineItem
         v-else
         hollow
         size="normal"
       >
-        <HairyTimelinePostItem :post="item" />
-      </el-timeline-item>
+        <HairyTimelineContent :post="item" />
+      </ElTimelineItem>
     </template>
-  </el-timeline>
+  </ElTimeline>
 </template>
 
 <route lang="yaml">
-meta:
-  layout: year
-</route>
+  meta:
+    layout: archive-year
+  </route>

package/pages/archives/index.vue

@@ -1,59 +1,6 @@
-<script lang="ts" setup>
-import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import { usePostList } from 'valaxy'
-import 'element-plus/es/components/timeline/style/index'
-import 'element-plus/es/components/timeline-item/style/index'
-import { useYearArchives } from '../../hooks/useYearArchives'
-import { getArchiveLink } from '../../utils'
-const activities = useYearArchives()
-const posts = usePostList()
-</script>
-
-<template>
-  <HairyBreadcrumb class="mb-5" size="large" after="归档">
-    <HairyBreadcrumbItem to="/">
-      首页
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem>
-      目前共计 {{ posts.length }} 篇文章
-    </HairyBreadcrumbItem>
-  </HairyBreadcrumb>
-  <el-timeline>
-    <el-timeline-item
-      v-for="(activity, index) in activities"
-      :key="index"
-      hollow
-      size="large"
-    >
-      <div class="activity inline-flex items-center">
-        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year))">
-          {{ activity.year }}
-        </HairyLink>
-        <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>
+<template></template>
 
 <route lang="yaml">
 meta:
   layout: archives
 </route>
-
-<style lang="scss" scoped>
-.activity:hover {
-  .HairyLink {
-    color: var(--hy-c-primary);
-  }
-}
-</style>

package/pages/categories/{[...categories].vue → [...its].vue}

@@ -1,39 +1,35 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useThemeConfig } from 'valaxy'
 import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import { useCurrentCategory } from '../../hooks/useCategory'
-import { useCategoryPost } from '../../hooks/useCategoryPost'
 
 import type { HairyTheme } from '../..'
-import 'element-plus/es/components/timeline/style/index'
-import 'element-plus/es/components/timeline-item/style/index'
-const props = defineProps<{
-  categories: string
-}>()
-const themeConfig = useThemeConfig<HairyTheme>()
-const categoriesLayout = computed(() => themeConfig.value.categories?.layout || 'post')
+import { useCategory, useCategoryPost } from '../../composables'
+
+const themeConfig = useThemeConfig<HairyTheme.Config>()
+const layout = computed(() => themeConfig.value.layout?.categories || 'post')
 
 const router = useRouter()
+const route = useRoute()
 
-const paths = computed(() => props.categories.split('/').filter(Boolean))
-const current = useCurrentCategory(paths)
+const categories = computed(() => route.params.its as string)
+const paths = computed(() => categories.value.split('/').filter(Boolean))
+const current = useCategory(paths)
 const posts = useCategoryPost(paths)
 
 const i18n = useI18n()
 
-const s = '/'
-
-const getBreadcrumbPath = (index: number) => {
-  const paths = props.categories.split('/').filter(Boolean)
+function getBreadcrumbPath(index: number) {
+  const paths = categories.value.split('/').filter(Boolean)
   if (paths[index] === paths[paths.length - 1])
     return ''
   return `/categories/${paths.slice(0, index + 1).join('/')}`
 }
-const displayCategory = (key: string) => {
-  router.push({ path: `/categories/${[key, ...paths.value].reverse().join('/')}` })
+
+function displayCategory(key: string) {
+  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
 }
 </script>
 
@@ -45,7 +41,7 @@ const displayCategory = (key: string) => {
     <HairyBreadcrumbItem :to="paths.length && '/categories/' || ''">
       全部
     </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem v-for="(key, index) in categories.split(s)" :key="key" :to="getBreadcrumbPath(index)">
+    <HairyBreadcrumbItem v-for="(key, index) in categories.split('/')" :key="key" :to="getBreadcrumbPath(index)">
       {{ i18n.t(key) }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
@@ -53,44 +49,41 @@ const displayCategory = (key: string) => {
   <div class="grid__view dark:text-gray-3 flex-wrap">
     <template v-for="([key, item]) in current.children" :key="key">
       <div
-        class="relative flex items-center flex-col cursor-pointer hover:text-primary transition-color"
+        v-if="!key.startsWith('/post')"
+        class="relative flex items-center flex-col cursor-pointer hover:text-primary transition-colors"
         @click="displayCategory(key)"
       >
-        <div class="i-ri-folder-open-line text-22 lt-sm:text-15" />
+        <div class="i-material-symbols-folder-open-rounded text-22 lt-sm:text-15" />
         <div class="text-center leading-normal">
           {{ i18n.t(key) }}
         </div>
-        <div class="badge">
-          {{ item.total }}
+        <div class="badge text-12px right-20px top-12px">
+          {{ item.total }} dir
         </div>
       </div>
     </template>
   </div>
   <div class="border-t border-gray-200 dark:border-gray-500 mt-5" />
 
-  <el-timeline v-if="categoriesLayout === 'timeline'" class="pt-5 pl-10">
-    <el-timeline-item v-for="(item, index) in posts" :key="index" hollow size="large">
+  <ElTimeline v-if="layout === 'timeline'" class="pt-5 pl-10">
+    <ElTimelineItem v-for="(item, index) in posts" :key="index" hollow size="large">
       <HairyTimelinePostItem :post="item" />
-    </el-timeline-item>
-  </el-timeline>
+    </ElTimelineItem>
+  </ElTimeline>
   <template v-else>
-    <HairyPostList :posts="posts" />
+    <HairyPosts :posts="posts" />
   </template>
 </template>
 
 <style lang="scss" scoped>
 .badge {
   position: absolute;
-  right: 0.8rem;
-  top: 0.5rem;
-  padding-left: 6px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 6px;
-
+  // padding-left: 6px;
+  // padding-top: 2px;
+  // padding-bottom: 2px;
+  // padding-right: 6px;
   line-height: normal;
   border-radius: 50%;
-  background-color: #f56c6c;
   color: #fff;
 }
 

package/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <HairyPostList :pagination="true" />
+  <HairyPosts pagination />
 </template>
 
 <route lang="yaml">

package/pages/page/[page].vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-defineProps<{ page: string }>()
+
 </script>
 
 <template>
-  <HairyPostList :pagination="true" :cur-page="parseInt(page)" />
+  <HairyPosts :pagination="true" :cur-page="parseInt(String($route.params.page))" />
 </template>
 
 <route lang="yaml">

package/pages/tags/[tag]/index.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { usePostList } from 'valaxy'
+import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
+import { useRoute } from 'vue-router'
+
+const tag = computed(() => useRoute().params.tag)
+
+const posts = computed<any[]>(() =>
+  usePostList().value.filter(post => post.tags?.includes(tag.value as string)),
+)
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" after="标签">
+    <HairyBreadcrumbItem to="/">
+      首页
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem>
+      {{ tag }}
+    </HairyBreadcrumbItem>
+  </HairyBreadcrumb>
+  <ElTimeline>
+    <ElTimelineItem
+      v-for="(item, index) in posts"
+      :key="index"
+      hollow
+      size="large"
+    >
+      <HairyTimelineContent :post="item" />
+    </ElTimelineItem>
+  </ElTimeline>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: tag
+</route>

package/pages/tags/index.vue

@@ -1,41 +1,6 @@
-<script lang="ts" setup>
-import { useTags } from 'valaxy'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-
-const { tags, getTagStyle } = useTags({
-  primary: '#1bc9a6',
-})
-
-const displayTag = (tag: string) => {
-  router.push(`/tags/${tag}`)
-}
-</script>
-
-<template>
-  <div class="inset-0 h-full flex-center flex-col">
-    <div text="center" class="text-size-2.5em pt-10 mb-5">
-      目前共计 {{ Array.from(tags).length }} 个标签
-    </div>
-    <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>
-    </div>
-  </div>
-</template>
+<template></template>
 
 <route lang="yaml">
 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>

package/setup/main.ts

@@ -1,7 +1,7 @@
 import { defineAppSetup } from 'valaxy'
 
 // import { install as installScroll } from '../modules/scroll'
-import { install as installLoading } from '../modules/loading'
+import { install as installLoading } from '../library/loading'
 
 export default defineAppSetup((ctx) => {
   // installScroll(ctx)

package/store/index.ts

@@ -0,0 +1 @@
+export * from './modules/global'

package/store/modules/global.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useGlobalStore = defineStore('global', () => {
+  const headerRef = ref<HTMLDivElement>()
+  const showDrawer = ref(false)
+
+  return {
+    headerRef,
+    showDrawer,
+  }
+})

package/styles/components/index.scss

@@ -0,0 +1,4 @@
+@import "./aplayer.scss";
+@import "./scrollbar.scss";
+@import "./markdown.scss";
+@import "./nprogress.scss";

package/styles/{markdown.scss → components/markdown.scss}

@@ -1,4 +1,4 @@
-@use "valaxy/client/styles/mixins" as *;
+@forward 'valaxy/client/styles/mixins/index.scss';
 
 .markdown-body {
   --c-toc-link: var(--hy-c-text-light);
@@ -67,6 +67,7 @@ html.dark {
 .custom-block.tip {
   background-color: rgba(200, 200, 200, 0.1);
   border-color: var(--hy-c-primary);
+  padding: 0.5rem 1rem;
 }
 
 .markdown-body {

package/styles/components/nprogress.scss

@@ -0,0 +1,16 @@
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    top: 0;
+    // margin-top: -5px;
+    height: 5px;
+    opacity: 0.75;
+    background: var(--hy-c-primary);
+    position: fixed;
+    z-index: 1031;
+    left: 0;
+    width: 100%;
+    border-radius: 5px;
+  }
+}

package/styles/css-vars.scss

@@ -50,6 +50,8 @@
   --hy-c-indigo-lighter: #c9def1;
   --hy-c-indigo-dark: #1d2f3f;
   --hy-c-indigo-darker: #14212e;
+
+  --va-c-bg: #fafafa;
 }
 
 .dark {
@@ -61,8 +63,10 @@
   --hy-c-primary-dimm-1: rgba(143, 230, 213, 0.5);
   --hy-c-primary-dimm-2: rgba(143, 230, 213, 0.25);
   --hy-c-primary-dimm-3: rgba(143, 230, 213, 0.05);
+  --va-c-bg: #1b1b1f;
 }
 
+
 :root {
   --hy-c-waves-dimm: var(--va-c-bg);
   --hy-c-waves-dimm-1: rgba(255, 255, 255, 0.7);
@@ -151,6 +155,13 @@
   --hy-c-text-code: var(--hy-c-indigo-lighter);
 }
 
+:root {
+  --va-c-primary-light: var(--hy-c-primary-light);
+  --va-c-primary-lighter: var(--hy-c-primary-lighter);
+  --va-c-primary-dark: var(--hy-c-primary-dark);
+  --va-c-primary: var(--hy-c-primary);
+}
+
 /**
  * element-plus Theme
  * -------------------------------------------------------------------------- */

package/styles/element-plus/tabs.scss

@@ -14,7 +14,7 @@
   }
 
   .el-tabs__item {
-    @apply transition-colors;
+    // @apply transition-colors;
     padding: 0 10px;
   }
 

package/styles/element-plus/timeline.scss

@@ -1,7 +1,7 @@
 .el-timeline {
   .el-timeline-item__content {
     display: inline-block;
-    color: initial;
+    color: var(--va-c-text) !important;
     line-height: 1;
     font-size: 1.5rem;
 

package/styles/global.scss

@@ -0,0 +1,39 @@
+html {
+  color: var(--va-c-text);
+}
+
+body {
+  font-family: var(--hy-font-family-seto);
+  color: var(--va-c-text);
+  background-color: var(--va-c-bg);
+}
+
+html,
+body {
+  scroll-behavior: smooth;
+}
+
+a {
+  color: var(--hy-c-primary);
+  font-weight: 500;
+}
+
+
+@media (min-width: 1200px) {
+  .breakpoint {
+    width: 72.5rem
+  }
+}
+
+@media (max-width: 1200px) {
+  .breakpoint {
+    padding-left: .5rem;
+    padding-right: .5rem
+  }
+}
+
+@media (min-width: 1600px) {
+  .breakpoint {
+    width: 75vw
+  }
+}

package/styles/index.scss

@@ -1,73 +1,4 @@
-@import "./font-face.scss";
-@import "./markdown.scss";
-@import "./element-plus/index.scss";
-@import "./scrollbar.scss";
-@import "./aplayer.scss";
-@import "animate.css";
-
-body {
-  font-family: var(--hy-font-family-seto);
-  @apply transition-colors duration-200;
-  color: var(--va-c-text);
-}
-
-#app {
-  @apply transition-none;
-  min-height: 100vh;
-}
-
-a {
-  @apply transition-colors;
-  color: var(--hy-c-primary-light);
-
-  &:hover {
-    --un-text-opacity: 1;
-    color: var(--hy-c-primary-dark);
-  }
-}
-
-html,
-body {
-  scroll-behavior: smooth;
-}
-
-#nprogress {
-  pointer-events: none;
-
-  .bar {
-    top: 0;
-    // margin-top: -5px;
-    height: 5px;
-    opacity: 0.75;
-    background: var(--hy-c-primary);
-    position: fixed;
-    z-index: 1031;
-    left: 0;
-    width: 100%;
-    border-radius: 5px;
-  }
-}
-
-
-@media (min-width: 1200px) {
-  .breakpoint {
-    width: 72.5rem;
-  }
-}
-
-@media (max-width: 1200px) {
-  .breakpoint {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-  }
-}
-
-@media (min-width: 1600px) {
-  .breakpoint {
-    width: 75vw;
-  }
-}
-
-body {
-  // background-image: linear-gradient(to top, #f7f7f7 0, #fdfdfd 20%) no-repeat bottom;
-}
+@use './font-face' as *;
+@use './global' as *;
+@use './components' as *;
+@use './element-plus' as *;