valaxy-theme-hairy 0.0.1

package/node/utils.ts

@@ -0,0 +1,20 @@
+import { createDefu } from 'defu'
+import isFunction from 'lodash/isFunction'
+import { mergeConfig as mergeViteConfig } from 'vite'
+/**
+ * merge valaxy.config
+ * (source, default)
+ */
+export const mergeValaxyConfig = createDefu((obj: any, key, value) => {
+  if (isFunction(obj[key]) || isFunction(value)) {
+    obj[key] = function (...args: any[]) {
+      obj[key]?.call(this, ...args)
+      value?.call(this, ...args)
+    }
+  }
+  if (key === 'vite') {
+    // a deep copy and needs to be taken over
+    obj[key] = mergeViteConfig(obj[key], value)
+    return true
+  }
+})

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "valaxy-theme-hairy",
+  "version": "0.0.1",
+  "packageManager": "pnpm@7.5.0",
+  "author": {
+    "email": "wwu710632@gmail.com",
+    "name": "TuiMao233",
+    "url": "https://github.com/TuiMao233"
+  },
+  "homepage": "https://github.com/TuiMao233/valaxy-theme-hairy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TuiMao233/valaxy-theme-hairy"
+  },
+  "keywords": [
+    "valaxy",
+    "theme",
+    "vue"
+  ],
+  "types": "index.d.ts",
+  "dependencies": {
+    "@docsearch/css": "^3.1.1",
+    "@docsearch/js": "^3.1.1",
+    "@hairy/libcore": "^0.3.0",
+    "@hairy/vue-use": "^1.2.0",
+    "@iconify-json/ant-design": "^1.1.3",
+    "@iconify-json/simple-icons": "^1.1.19",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "@vueuse/core": "^8.9.4",
+    "@waline/client": "^2.6.1",
+    "defu": "^6.0.0",
+    "element-plus": "^2.2.10",
+    "furigana-markdown-it": "^1.0.3",
+    "lodash": "^4.17.21",
+    "markdown-toc": "^1.2.0",
+    "reading-time": "^1.5.0",
+    "swiper": "^8.3.1",
+    "unoverlay-vue": "0.2.1",
+    "valaxy-addon-images": "0.0.1",
+    "valaxy-addon-statistics": "0.0.1",
+    "yaml": "^2.1.1"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^18.0.6"
+  }
+}

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

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+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 { getArchiveLink } from '../../../../utils'
+
+const props = defineProps<{
+  year: string
+  month: string
+}>()
+
+const activities = useYearArchives()
+const months = computed(() =>
+  activities.value
+    .filter(item => item.year === props.year)
+    .filter(item => item.month === props.month),
+)
+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>
+
+  <el-timeline>
+    <el-timeline-item
+      v-for="(item, index) in post"
+      :key="index"
+      hollow
+      size="large"
+    >
+      <HairyTimelinePostItem :post="item" />
+    </el-timeline-item>
+  </el-timeline>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: month
+</route>

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

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+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 { getArchiveLink } from '../../../utils'
+interface TimeLineItem 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 timelines = computed(() => {
+  const timeLines: Partial<TimeLineItem>[] = []
+  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 TimeLineItem[]
+})
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" after="归档">
+    <HairyBreadcrumbItem to="/archives/">
+      全部
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem>
+      {{ year }}年
+    </HairyBreadcrumbItem>
+  </HairyBreadcrumb>
+
+  <el-timeline>
+    <template v-for="(item, index) in timelines" :key="index">
+      <el-timeline-item
+        v-if="item.type === 'link'"
+        hollow
+        :index="index"
+        size="large"
+      >
+        <HairyLink @click="$router.push(getArchiveLink(year, item.month))">
+          {{ item.month }}月
+        </HairyLink>
+      </el-timeline-item>
+      <el-timeline-item
+        v-else
+        hollow
+        size="normal"
+      >
+        <HairyTimelinePostItem :post="item" />
+      </el-timeline-item>
+    </template>
+  </el-timeline>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: year
+</route>

package/pages/archives/index.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+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 @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))">
+          {{ activity.month }}
+        </HairyLink>
+        <span class="text-gray-5 text-size-5 ml-1">({{ activity.count }}篇)</span>
+      </div>
+    </el-timeline-item>
+  </el-timeline>
+</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

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useThemeConfig } from 'valaxy'
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+import { useCurrentCategory } from '../../hooks/useCategory'
+import { useCategoryPost } from '../../hooks/useCategoryPost'
+
+import { usePostLayout } from '../../hooks/usePostLayout'
+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 layout = usePostLayout()
+const themeConfig = useThemeConfig<HairyTheme>()
+const categoriesLayout = computed(() => themeConfig.value.categories?.layout || 'post')
+
+const router = useRouter()
+
+const paths = computed(() => props.categories.split('/').filter(Boolean))
+const current = useCurrentCategory(paths)
+
+const posts = useCategoryPost(paths)
+
+const i18n = useI18n()
+
+const getBreadcrumbPath = (index: number) => {
+  if (paths.value[index] === paths.value[paths.value.length - 1])
+    return ''
+  return `/categories/${paths.value.slice(0, index)}`
+}
+const 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 paths" :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
+        class="relative flex items-center flex-col cursor-pointer hover:text-primary transition-color"
+        @click="displayCategory(key)"
+      >
+        <div class="i-ri-folder-open-line text-22 lt-sm:text-15" />
+        <div class="text-center leading-normal">
+          {{ i18n.t(key) }}
+        </div>
+        <div class="badge">
+          {{ item.total }}
+        </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">
+      <HairyTimelinePostItem :post="item" />
+    </el-timeline-item>
+  </el-timeline>
+  <template v-else>
+    <HairyPostImageList v-if="layout.includes('image')" :posts="posts" />
+    <HairyPostList v-else :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;
+
+  line-height: normal;
+  border-radius: 50%;
+  background-color: #f56c6c;
+  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

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

package/pages/tags/[tag].vue

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

package/pages/tags/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useTags } from 'valaxy'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const { tags, getTagStyle } = useTags({
+  primary: 'red',
+})
+
+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">
+      <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>

package/setup/main.ts

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

package/shims.d.ts

@@ -0,0 +1,8 @@
+declare module '@hairy:images:home' {
+  const images: string[]
+  export default images
+}
+declare module '@hairy:images:post' {
+  const images: string[]
+  export default images
+}

package/styles/css-vars.scss

@@ -0,0 +1,161 @@
+:root {
+  --hy-c-primary: #1bc9a6;
+  --hy-c-primary-light: #14d6af;
+  --hy-c-primary-lighter: #15e8be;
+  --hy-c-primary-dark: #1aaa8d;
+  --hy-c-primary-darker: #0b755f;
+  --hy-c-primary-dimm-1: rgba(27, 201, 166, 0.5);
+  --hy-c-primary-dimm-2: rgba(27, 201, 166, 0.25);
+  --hy-c-primary-dimm-3: rgba(27, 201, 166, 0.05);
+
+  --hy-c-black: #1a1a1a;
+  --hy-c-black-pure: #000000;
+  --hy-c-black-soft: #242424;
+  --hy-c-black-mute: #2f2f2f;
+
+  --hy-c-white: #ffffff;
+  --hy-c-white-soft: #f9f9f9;
+  --hy-c-white-mute: #f1f1f1;
+
+  --hy-c-gray: #8e8e8e;
+  --hy-c-gray-light-1: #aeaeae;
+  --hy-c-gray-light-2: #c7c7c7;
+  --hy-c-gray-light-3: #d1d1d1;
+  --hy-c-gray-light-4: #e5e5e5;
+  --hy-c-gray-light-5: #f2f2f2;
+  --hy-c-gray-dark-1: #636363;
+  --hy-c-gray-dark-2: #484848;
+  --hy-c-gray-dark-3: #3a3a3a;
+  --hy-c-gray-dark-4: #282828;
+  --hy-c-gray-dark-5: #202020;
+
+  --hy-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --hy-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --hy-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --hy-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --hy-c-text-light-1: var(--hy-c-indigo);
+  --hy-c-text-light-2: rgba(60, 60, 60, 0.70);
+  --hy-c-text-light-3: rgba(60, 60, 60, 0.33);
+  --hy-c-text-light-4: rgba(60, 60, 60, 0.18);
+
+  --hy-c-text-dark-1: rgba(255, 255, 255, 0.87);
+  --hy-c-text-dark-2: rgba(235, 235, 235, 0.60);
+  --hy-c-text-dark-3: rgba(235, 235, 235, 0.38);
+  --hy-c-text-dark-4: rgba(235, 235, 235, 0.18);
+
+  --hy-c-indigo: #213547;
+  --hy-c-indigo-soft: #476582;
+  --hy-c-indigo-light: #aac8e4;
+  --hy-c-indigo-lighter: #c9def1;
+  --hy-c-indigo-dark: #1d2f3f;
+  --hy-c-indigo-darker: #14212e;
+}
+
+.dark {
+  --hy-c-primary: #8fe6d5;
+  --hy-c-primary-light: #a8ffee;
+  --hy-c-primary-lighter: #bafef1;
+  --hy-c-primary-dark: #66ccb8;
+  --hy-c-primary-darker: #24a188;
+  --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);
+}
+
+:root {
+  --hy-c-waves-dimm: var(--va-c-bg);
+  --hy-c-waves-dimm-1: rgba(255, 255, 255, 0.7);
+  --hy-c-waves-dimm-2: rgba(255, 255, 255, 0.5);
+  --hy-c-waves-dimm-3: rgba(255, 255, 255, 0.3);
+}
+
+.dark {
+  --hy-c-waves-dimm-1: rgba(34, 34, 34, 0.7);
+  --hy-c-waves-dimm-2: rgba(34, 34, 34, 0.5);
+  --hy-c-waves-dimm-3: rgba(34, 34, 34, 0.3);
+}
+
+/**
+ * Typography
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --hy-font-family-seto: Seto;
+  --hy-font-family-modesty: Modesty;
+  --hy-font-family-christmas: MountainsofChristmas;
+  --hy-font-family-frederick: FrederickatheGreat;
+}
+
+/**
+ * Colors Theme
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --hy-c-bg: var(--hy-c-white);
+  --hy-c-bg-soft: var(--hy-c-white-soft);
+  --hy-c-bg-mute: var(--hy-c-white-mute);
+  --hy-c-bg-alt: var(--hy-c-white-soft);
+
+  --hy-c-divider: var(--hy-c-divider-light-1);
+  --hy-c-divider-light: var(--hy-c-divider-light-2);
+
+  --hy-c-divider-inverse: var(--hy-c-divider-dark-1);
+  --hy-c-divider-inverse-light: var(--hy-c-divider-dark-2);
+
+  --hy-c-text-1: var(--hy-c-text-light-1);
+  --hy-c-text-2: var(--hy-c-text-light-2);
+  --hy-c-text-3: var(--hy-c-text-light-3);
+  --hy-c-text-4: var(--hy-c-text-light-4);
+
+  --hy-c-text-inverse-1: var(--hy-c-text-dark-1);
+  --hy-c-text-inverse-2: var(--hy-c-text-dark-2);
+  --hy-c-text-inverse-3: var(--hy-c-text-dark-3);
+  --hy-c-text-inverse-4: var(--hy-c-text-dark-4);
+
+  --hy-c-text-code: var(--hy-c-indigo-soft);
+
+  --hy-c-brand: var(--hy-c-primary);
+  --hy-c-brand-light: var(--hy-c-primary-light);
+  --hy-c-brand-lighter: var(--hy-c-primary-lighter);
+  --hy-c-brand-dark: var(--hy-c-primary-dark);
+  --hy-c-brand-darker: var(--hy-c-primary-darker);
+
+  --va-c-brand: var(--hy-c-brand);
+
+  --hy-c-sponsor: #fd1d7c;
+}
+
+.dark {
+  --hy-c-bg: var(--hy-c-black-soft);
+  --hy-c-bg-soft: var(--hy-c-black-mute);
+  --hy-c-bg-mute: var(--hy-c-gray-dark-3);
+  --hy-c-bg-alt: var(--hy-c-black);
+
+  --hy-c-divider: var(--hy-c-divider-dark-1);
+  --hy-c-divider-light: var(--hy-c-divider-dark-2);
+
+  --hy-c-divider-inverse: var(--hy-c-divider-light-1);
+  --hy-c-divider-inverse-light: var(--hy-c-divider-light-2);
+
+  --hy-c-text-1: var(--hy-c-text-dark-1);
+  --hy-c-text-2: var(--hy-c-text-dark-2);
+  --hy-c-text-3: var(--hy-c-text-dark-3);
+  --hy-c-text-4: var(--hy-c-text-dark-4);
+
+  --hy-c-text-inverse-1: var(--hy-c-text-light-1);
+  --hy-c-text-inverse-2: var(--hy-c-text-light-2);
+  --hy-c-text-inverse-3: var(--hy-c-text-light-3);
+  --hy-c-text-inverse-4: var(--hy-c-text-light-4);
+
+  --hy-c-text-code: var(--hy-c-indigo-lighter);
+}
+
+/**
+ * element-plus Theme
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --el-color-primary: var(--hy-c-primary) !important;
+  --el-text-color-primary: var(--hy-c-text-2) !important;
+}

package/styles/element-plus/index.scss

@@ -0,0 +1,2 @@
+@import "./timeline.scss";
+@import "./tabs.scss";

package/styles/element-plus/tabs.scss

@@ -0,0 +1,26 @@
+.el-tabs__nav-wrap::after {
+  @apply bg-gray-200;
+}
+
+.dark .el-tabs__nav-wrap::after {
+  @apply bg-gray-500;
+}
+
+.el-tabs {
+
+  .el-tabs__active-bar,
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+
+  .el-tabs__item {
+    @apply transition-colors;
+    padding: 0 10px;
+  }
+
+  .el-tabs__nav-scroll {
+    display: flex;
+    justify-content: center;
+  }
+
+}

package/styles/element-plus/timeline.scss

@@ -0,0 +1,19 @@
+.el-timeline {
+  .el-timeline-item__content {
+    display: inline-block;
+    color: initial;
+    line-height: 1;
+    font-size: 1.5rem;
+
+    @media (max-width: 1200px) {
+      font-size: 1.3rem;
+    }
+  }
+
+  .el-timeline-item__wrapper {}
+
+  .el-timeline-item__node--normal,
+  .el-timeline-item__tail {
+    top: 4px;
+  }
+}