valaxy-theme-hairy 1.0.0 → 1.0.1

package/components/HairyContainer.vue

@@ -2,6 +2,10 @@
 import { onMounted } from 'vue'
 import { setupDefaultDark } from '../composables'
 
+import 'element-plus/theme-chalk/base.css'
+import 'element-plus/theme-chalk/el-timeline.css'
+import 'element-plus/theme-chalk/el-timeline-item.css'
+
 onMounted(setupDefaultDark)
 </script>
 

package/components/HairyDrawer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import 'element-plus/es/components/drawer/style/index'
+import 'element-plus/theme-chalk/el-dialog.css'
 import { ElDrawer } from 'element-plus/es/components/drawer/index'
 import { useRoute } from 'vue-router'
 import { watch } from 'vue'
@@ -24,11 +24,10 @@ watch(() => route.fullPath, () => showDrawer.value = false)
 
 <style lang="scss">
   .el-drawer {
+    background-color: transparent;
     .el-drawer__header {
       display: none;
     }
-
-    background-color: transparent;
     .el-icon.el-drawer__close {
       font-size: 24px;
     }

package/components/HairyImage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElImage, imageProps } from 'element-plus/es/components/image/index'
-import 'element-plus/es/components/image/style/index'
+import 'element-plus/theme-chalk/el-image.css'
 import { inject } from 'vue'
 
 const props = defineProps(imageProps)

package/components/HairyPageArchives.vue

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

package/components/HairyPageTags.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { useHairyTags } from '../composables'
+
+const router = useRouter()
+
+const { getTagStyle, tags } = useHairyTags({
+  primary: '#1bc9a6',
+})
+
+function displayTag(tag: string) {
+  router.push(`/tags/${tag}`)
+}
+</script>
+
+<template>
+  <div class="min-h-59vh 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>
+
+<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/components/HairyTabbar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 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 'element-plus/theme-chalk/el-tabs.css'
+import 'element-plus/theme-chalk/el-tab-pane.css'
 import { computed, provide, ref } from 'vue'
 
 import type { DefaultTheme } from 'valaxy/types'

package/components/parts/HairyBreadcrumb.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElBreadcrumb, breadcrumbProps } from 'element-plus/es/components/breadcrumb/index'
-import 'element-plus/es/components/breadcrumb/style/index'
+import 'element-plus/theme-chalk/el-breadcrumb.css'
 import type { PropType } from 'vue'
 import { computed } from 'vue'
 

package/components/parts/HairyImageViewer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { usePrograms } from '@overlastic/vue'
 import { ElImageViewer, imageViewerProps } from 'element-plus/es/components/image-viewer/index'
-import 'element-plus/es/components/image-viewer/style/index'
+import 'element-plus/theme-chalk/el-image-viewer.css'
 import { onMounted, onUnmounted } from 'vue'
 
 const props = defineProps(imageViewerProps)

package/components/parts/HairyUserNav.vue

@@ -59,13 +59,13 @@ async function navigation(path: string) {
       padding: 2px;
       width: 100%;
       border: 1px solid transparent;
-      > div {
-        justify-content: center;
-      }
       border-radius: 10px;
       transition: all 0.2s;
       background-color: transparent;
       user-select: none;
+      > div {
+        justify-content: center;
+      }
     }
 
     .HairyMenuItem:hover,

package/layouts/{archive.vue → archives.vue}

@@ -3,7 +3,7 @@
     <HairyNavbar />
     <HairyHeader />
     <HairyBody>
-      <router-view />
+      <HairyPageArchives />
     </HairyBody>
     <HairyFooter />
     <HairyDrawer />

package/layouts/default.vue

@@ -1,3 +1,6 @@
+<script lang="ts" setup>
+</script>
+
 <template>
   <HairyContainer>
     <HairyNavbar />
@@ -8,3 +11,5 @@
     <HairyFooter />
   </HairyContainer>
 </template>
+
+

package/layouts/post.vue

@@ -3,7 +3,7 @@ import { dayjs } from 'element-plus'
 import { useFrontmatter } from 'valaxy'
 import { useRouter } from 'vue-router'
 import { ElTag } from 'element-plus/es/components/tag/index'
-import 'element-plus/es/components/tag/style/index'
+import 'element-plus/theme-chalk/el-tag.css'
 
 defineProps<{
   header?: {

package/layouts/tags.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+console.log('---')
 </script>
 
 <template>
@@ -6,7 +7,7 @@
     <HairyNavbar />
     <HairyHeader title="所有标签" />
     <HairyBody>
-      <router-view />
+      <HairyPageTags />
     </HairyBody>
     <HairyFooter />
   </HairyContainer>

package/package.json

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

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

@@ -1,7 +1,5 @@
 <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 { useRoute } from 'vue-router'
 import { useYearArchives } from '../../../../composables'

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

@@ -1,7 +1,5 @@
 <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 { useRoute } from 'vue-router'

package/pages/archives/index.vue

@@ -1,61 +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 { getArchiveLink } from '../../utils'
-import { useYearArchives } from '../../composables'
-
-const activities = useYearArchives()
-const posts = usePostList()
-</script>
-
-<template>
-  <HairyBreadcrumb class="mb-5" size="large" after="归档">
-    <HairyBreadcrumbItem to="/">
-      首页
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem>
-      目前共计 {{ posts.length }} 篇文章
-    </HairyBreadcrumbItem>
-  </HairyBreadcrumb>
-  <ElTimeline>
-    <ElTimelineItem
-      v-for="(activity, index) in activities"
-      :key="index"
-      size="large"
-      hollow
-    >
-      <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>
-      <HairyTimelineContent 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>
-    </ElTimelineItem>
-  </ElTimeline>
-</template>
+<template></template>
 
 <route lang="yaml">
 meta:
-  layout: archive
+  layout: archives
 </route>
-
-<style lang="scss" scoped>
-.activity:hover {
-  .HairyLink {
-    color: var(--hy-c-primary);
-  }
-}
-</style>

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

@@ -6,8 +6,6 @@ import { useThemeConfig } from 'valaxy'
 import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
 
 import type { HairyTheme } from '../..'
-import 'element-plus/es/components/timeline/style/index'
-import 'element-plus/es/components/timeline-item/style/index'
 import { useCategory, useCategoryPost } from '../../composables'
 
 const themeConfig = useThemeConfig<HairyTheme.Config>()

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

@@ -2,8 +2,6 @@
 import { computed } from 'vue'
 import { usePostList } from 'valaxy'
 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 { useRoute } from 'vue-router'
 
 const tag = computed(() => useRoute().params.tag)

package/pages/tags/index.vue

@@ -1,48 +1,6 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-import { useHairyTags } from '../../composables'
-
-const router = useRouter()
-
-const { getTagStyle, tags } = useHairyTags({
-  primary: '#1bc9a6',
-})
-
-function displayTag(tag: string) {
-  router.push(`/tags/${tag}`)
-}
-</script>
-
-<template>
-  <div class="min-h-59vh 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>