valaxy-theme-hairy 1.0.1 → 1.0.2

package/node/theme/index.ts

@@ -1,78 +1,78 @@
-import type { ResolvedValaxyOptions, ValaxyTheme } from 'valaxy'
-import type { ThemeConfig } from '../../types'
-
-/**
- * Default Config
- */
-export const defaultThemeConfig: ThemeConfig = {
-  colors: {
-    primary: '#0078E7',
-  },
-
-  footer: {
-    since: 2022,
-    icon: {
-      name: 'i-ri-cloud-line',
-      animated: true,
-      color: 'var(--va-c-primary)',
-      url: 'https://sponsors.yunyoujun.cn',
-      title: 'Sponsor YunYouJun',
-    },
-
-    powered: true,
-
-    beian: {
-      enable: false,
-      icp: '',
-    },
-  },
-
-  nav: [],
-}
-
-// write a vite plugin
-// https://vitejs.dev/guide/api-plugin.html
-export function withThemeConfig(options: ResolvedValaxyOptions<ThemeConfig>): ValaxyTheme<ThemeConfig> {
-  const themeConfig = options.config.themeConfig || {}
-
-  return {
-    themeConfig: defaultThemeConfig,
-    vite: {
-      plugins: [
-        {
-          name: 'vite-plugin-hairy:theme',
-          config() {
-            return {
-              css: {
-                preprocessorOptions: {
-                  scss: {
-                    additionalData: `$c-primary: ${themeConfig.colors?.primary || '#0078E7'} !default;`,
-                  },
-                },
-              },
-
-              valaxy: {},
-            }
-          },
-        },
-      ],
-    },
-    unocss: {
-      safelist: generateSafelist(options.config.themeConfig as ThemeConfig),
-    },
-  }
-}
-
-/**
- * generateSafelist by config
- * @param themeConfig
- */
-export function generateSafelist(themeConfig: ThemeConfig) {
-  const safelist: string[] = []
-
-  const footerIcon = themeConfig.footer?.icon?.name
-  if (footerIcon)
-    safelist.push(footerIcon)
-
-  return safelist
-}
+import type { ResolvedValaxyOptions, ValaxyTheme } from 'valaxy'
+import type { ThemeConfig } from '../../types'
+
+/**
+ * Default Config
+ */
+export const defaultThemeConfig: ThemeConfig = {
+  colors: {
+    primary: '#0078E7',
+  },
+
+  footer: {
+    since: 2022,
+    icon: {
+      name: 'i-ri-cloud-line',
+      animated: true,
+      color: 'var(--va-c-primary)',
+      url: 'https://sponsors.yunyoujun.cn',
+      title: 'Sponsor YunYouJun',
+    },
+
+    powered: true,
+
+    beian: {
+      enable: false,
+      icp: '',
+    },
+  },
+
+  nav: [],
+}
+
+// write a vite plugin
+// https://vitejs.dev/guide/api-plugin.html
+export function withThemeConfig(options: ResolvedValaxyOptions<ThemeConfig>): ValaxyTheme<ThemeConfig> {
+  const themeConfig = options.config.themeConfig || {}
+
+  return {
+    themeConfig: defaultThemeConfig,
+    vite: {
+      plugins: [
+        {
+          name: 'vite-plugin-hairy:theme',
+          config() {
+            return {
+              css: {
+                preprocessorOptions: {
+                  scss: {
+                    additionalData: `$c-primary: ${themeConfig.colors?.primary || '#0078E7'} !default;`,
+                  },
+                },
+              },
+
+              valaxy: {},
+            }
+          },
+        },
+      ],
+    },
+    unocss: {
+      safelist: generateSafelist(options.config.themeConfig as ThemeConfig),
+    },
+  }
+}
+
+/**
+ * generateSafelist by config
+ * @param themeConfig
+ */
+export function generateSafelist(themeConfig: ThemeConfig) {
+  const safelist: string[] = []
+
+  const footerIcon = themeConfig.footer?.icon?.name
+  if (footerIcon)
+    safelist.push(footerIcon)
+
+  return safelist
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "packageManager": "pnpm@8.10.5",
   "author": {
     "email": "wwu710632@gmail.com",

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

@@ -1,48 +1,48 @@
-<script lang="ts" setup>
-import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useYearArchives } from '../../../../composables'
-import { getArchiveLink } from '../../../../utils'
-
-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 === 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))
-</script>
-
-<template>
-  <HairyBreadcrumb class="mb-5" size="large" :after="`归档(${count}篇)`">
-    <HairyBreadcrumbItem to="/archives/">
-      全部
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem :to="getArchiveLink(year)">
-      {{ year }}年
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem :to="getArchiveLink(year)">
-      {{ month }}月
-    </HairyBreadcrumbItem>
-  </HairyBreadcrumb>
-  <ElTimeline>
-    <ElTimelineItem
-      v-for="(item, index) in post"
-      :key="index"
-      hollow
-      size="large"
-    >
-      <HairyTimelineContent :post="item" />
-    </ElTimelineItem>
-  </ElTimeline>
-</template>
-
-<route lang="yaml">
-  meta:
-    layout: archive-month
-  </route>
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useYearArchives } from '../../../../composables'
+import { getArchiveLink } from '../../../../utils'
+
+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 === 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))
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" :after="`归档(${count}篇)`">
+    <HairyBreadcrumbItem to="/archives/">
+      全部
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem :to="getArchiveLink(year)">
+      {{ year }}年
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem :to="getArchiveLink(year)">
+      {{ month }}月
+    </HairyBreadcrumbItem>
+  </HairyBreadcrumb>
+  <ElTimeline>
+    <ElTimelineItem
+      v-for="(item, index) in post"
+      :key="index"
+      hollow
+      size="large"
+    >
+      <HairyTimelineContent :post="item" />
+    </ElTimelineItem>
+  </ElTimeline>
+</template>
+
+<route lang="yaml">
+  meta:
+    layout: archive-month
+  </route>

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

@@ -1,73 +1,73 @@
-<script lang="ts" setup>
-import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import { computed } from 'vue'
-import type { Post } from 'valaxy'
-import { useRoute } from 'vue-router'
-import { getArchiveLink } from '../../../utils'
-import { useYearArchives } from '../../../composables'
-
-interface TimeLineByPost extends Post {
-  type: 'link' | 'post'
-  month: string
-  link: string
-  count: number
-}
-
-const activities = useYearArchives()
-
-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<TimeLineByPost>[] = []
-  for (const { year, count, month, posts } of filterYear.value) {
-    timeLines.push({
-      type: 'link',
-      month,
-      count,
-      link: getArchiveLink(year, month),
-    })
-    for (const post of posts)
-      timeLines.push({ ...post, type: 'post' })
-  }
-  return timeLines as TimeLineByPost[]
-})
-</script>
-
-<template>
-  <HairyBreadcrumb class="mb-5" size="large" after="归档">
-    <HairyBreadcrumbItem to="/archives/">
-      全部
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem>
-      {{ year }}年
-    </HairyBreadcrumbItem>
-  </HairyBreadcrumb>
-
-  <ElTimeline>
-    <template v-for="(item, index) in timelines" :key="index">
-      <ElTimelineItem
-        v-if="item.type === 'link'"
-        hollow
-        :index="index"
-        size="large"
-      >
-        <HairyLink @click="$router.push(getArchiveLink(year, item.month))">
-          {{ item.month }}月
-        </HairyLink>
-      </ElTimelineItem>
-      <ElTimelineItem
-        v-else
-        hollow
-        size="normal"
-      >
-        <HairyTimelineContent :post="item" />
-      </ElTimelineItem>
-    </template>
-  </ElTimeline>
-</template>
-
-<route lang="yaml">
-  meta:
-    layout: archive-year
-  </route>
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+import { computed } from 'vue'
+import type { Post } from 'valaxy'
+import { useRoute } from 'vue-router'
+import { getArchiveLink } from '../../../utils'
+import { useYearArchives } from '../../../composables'
+
+interface TimeLineByPost extends Post {
+  type: 'link' | 'post'
+  month: string
+  link: string
+  count: number
+}
+
+const activities = useYearArchives()
+
+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<TimeLineByPost>[] = []
+  for (const { year, count, month, posts } of filterYear.value) {
+    timeLines.push({
+      type: 'link',
+      month,
+      count,
+      link: getArchiveLink(year, month),
+    })
+    for (const post of posts)
+      timeLines.push({ ...post, type: 'post' })
+  }
+  return timeLines as TimeLineByPost[]
+})
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" after="归档">
+    <HairyBreadcrumbItem to="/archives/">
+      全部
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem>
+      {{ year }}年
+    </HairyBreadcrumbItem>
+  </HairyBreadcrumb>
+
+  <ElTimeline>
+    <template v-for="(item, index) in timelines" :key="index">
+      <ElTimelineItem
+        v-if="item.type === 'link'"
+        hollow
+        :index="index"
+        size="large"
+      >
+        <HairyLink @click="$router.push(getArchiveLink(year, item.month))">
+          {{ item.month }}月
+        </HairyLink>
+      </ElTimelineItem>
+      <ElTimelineItem
+        v-else
+        hollow
+        size="normal"
+      >
+        <HairyTimelineContent :post="item" />
+      </ElTimelineItem>
+    </template>
+  </ElTimeline>
+</template>
+
+<route lang="yaml">
+  meta:
+    layout: archive-year
+  </route>

package/pages/archives/index.md

@@ -0,0 +1,6 @@
+---
+layout: archives
+title: 归档
+nav: false
+comment: false
+---

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

@@ -1,108 +1,108 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useThemeConfig } from 'valaxy'
-import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-
-import type { HairyTheme } from '../..'
-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 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()
-
-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('/')}`
-}
-
-function displayCategory(key: string) {
-  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
-}
-</script>
-
-<template>
-  <HairyBreadcrumb class="mb-5" size="large" after="分类">
-    <HairyBreadcrumbItem to="/">
-      首页
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem :to="paths.length && '/categories/' || ''">
-      全部
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem v-for="(key, index) in categories.split('/')" :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
-        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-material-symbols-folder-open-rounded text-22 lt-sm:text-15" />
-        <div class="text-center leading-normal">
-          {{ i18n.t(key) }}
-        </div>
-        <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" />
-
-  <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" />
-    </ElTimelineItem>
-  </ElTimeline>
-  <template v-else>
-    <HairyPosts :posts="posts" />
-  </template>
-</template>
-
-<style lang="scss" scoped>
-.badge {
-  position: absolute;
-  // padding-left: 6px;
-  // padding-top: 2px;
-  // padding-bottom: 2px;
-  // padding-right: 6px;
-  line-height: normal;
-  border-radius: 50%;
-  color: #fff;
-}
-
-.grid__view {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 7.5rem);
-  gap: 3rem;
-
-  @media (max-width: 640px) {
-    grid-template-columns: repeat(auto-fill, 6.5rem);
-  }
-
-  &>* {
-    height: var(--height);
-  }
-}
-</style>
-
-<route lang="yaml">
-meta:
-  layout: categories
-</route>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { useThemeConfig } from 'valaxy'
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+
+import type { HairyTheme } from '../..'
+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 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()
+
+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('/')}`
+}
+
+function displayCategory(key: string) {
+  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
+}
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" after="分类">
+    <HairyBreadcrumbItem to="/">
+      首页
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem :to="paths.length && '/categories/' || ''">
+      全部
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem v-for="(key, index) in categories.split('/')" :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
+        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-material-symbols-folder-open-rounded text-22 lt-sm:text-15" />
+        <div class="text-center leading-normal">
+          {{ i18n.t(key) }}
+        </div>
+        <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" />
+
+  <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" />
+    </ElTimelineItem>
+  </ElTimeline>
+  <template v-else>
+    <HairyPosts :posts="posts" />
+  </template>
+</template>
+
+<style lang="scss" scoped>
+.badge {
+  position: absolute;
+  // padding-left: 6px;
+  // padding-top: 2px;
+  // padding-bottom: 2px;
+  // padding-right: 6px;
+  line-height: normal;
+  border-radius: 50%;
+  color: #fff;
+}
+
+.grid__view {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 7.5rem);
+  gap: 3rem;
+
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(auto-fill, 6.5rem);
+  }
+
+  &>* {
+    height: var(--height);
+  }
+}
+</style>
+
+<route lang="yaml">
+meta:
+  layout: categories
+</route>

package/pages/index.vue

@@ -1,8 +1,8 @@
-<template>
-  <HairyPosts pagination />
-</template>
-
-<route lang="yaml">
-meta:
-  layout: home
-</route>
+<template>
+  <HairyPosts pagination />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>