valaxy-theme-hairy 0.0.1

package/components/HairyPostList.vue

@@ -0,0 +1,24 @@
+<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/HairyPostTitle.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import { computed } from 'vue'
+const props = defineProps<{
+  headline?: String
+  title: String
+  description?: string
+}>()
+
+const post = useFrontmatter()
+
+const headline = computed(() => post.value.headline || props.headline)
+const title = computed(() => post.value.title || props.title)
+</script>
+
+<template>
+  <div class="flex-center flex-col text-shadow-lg text-white">
+    <div v-if="headline" class="font-frederick text-size-3.35em lt-sm:text-size-3rem leading-snug">
+      {{ headline }}
+    </div>
+    <div class="text-size-2.5em lt-sm:text-size-2rem font-bold title tracking-1">
+      {{ title }}
+    </div>
+    <p v-if="description || $slots.description" class="text-size-sm">
+      <template v-if="description">
+        {{ description }}
+      </template>
+      <slot v-else name="description" />
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairySocialLinks.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+
+const config = useConfig()
+</script>
+
+<template>
+  <div class="links-of-author grid grid-cols-8 justify-center gap-1">
+    <a v-for="item, i in config.social" :key="i" class="links-of-author-item" rel="noopener" :href="item.link" :title="item.name" target="_blank" :style="`color:${item.color}`">
+      <div class="icon" :class="item.icon" />
+    </a>
+  </div>
+</template>
+
+<style lang="scss">
+.links-of-author {
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  &-item {
+    line-height: 1;
+    font-size: 0.9rem;
+  }
+}
+</style>

package/components/HairyTimelinePostItem.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import dayjs from 'dayjs'
+import { withDefaults } from 'vue'
+import last from 'lodash/last'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { toArr } from '../utils'
+withDefaults(
+  defineProps<{
+    post: Post
+    format: string
+  }>(),
+  {
+    format: 'YYYY-MM-DD',
+  },
+)
+
+const i18n = useI18n()
+
+const router = useRouter()
+
+const displayCategory = (keys: string | string[] = []) => {
+  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+}
+</script>
+
+<template>
+  <div class="mb-1 text-size-3.5 mt-1.5 flex items-center">
+    <div class="mr-2.2 dark:text-gray-500 text-gray-400">
+      {{ dayjs(post.date).format(format) }}
+    </div>
+    <HairyLink v-if="post.categories?.length" @click="displayCategory(post.categories)">
+      {{ i18n.t(last(toArr(post.categories)) || '') }}
+    </HairyLink>
+  </div>
+  <a class="cursor-pointer text-size-4" @click="$router.push(post.path || '')">{{ post.title }}</a>
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairyToc.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Header } from 'valaxy'
+import {
+  resolveHeaders,
+  useActiveAnchor,
+  useFrontmatter,
+  useThemeConfig,
+} from 'valaxy'
+
+const props = defineProps<{ headers?: Header[] }>()
+
+const frontmatter = useFrontmatter()
+const themeConfig = useThemeConfig()
+
+const { locale } = useI18n()
+const container = ref()
+const marker = ref()
+
+useActiveAnchor(container, marker)
+
+const resolvedHeaders = computed(() => {
+  return resolveHeaders(props.headers || frontmatter.value['it-toc'])
+})
+
+function handleClick({ target: el }: Event) {
+  const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
+  const heading = document.querySelector(decodeURIComponent(id)) as HTMLAnchorElement
+  heading?.focus()
+}
+</script>
+
+<template>
+  <div v-show="resolvedHeaders.length" ref="container">
+    <div class="content">
+      <div class="outline-title">
+        {{ themeConfig.outlineTitle || 'On this page' }}
+      </div>
+
+      <div ref="marker" class="outline-marker" />
+
+      <nav aria-labelledby="doc-outline-aria-label">
+        <span id="doc-outline-aria-label" class="visually-hidden">
+          Table of Contents for current page
+        </span>
+
+        <ul class="va-toc relative z-1">
+          <li
+            v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
+            v-show="!hidden"
+            :key="link"
+            class="va-toc-item"
+            :lang="lang || locale"
+          >
+            <a class="outline-link" :href="link" @click="handleClick">
+              {{ text }}
+            </a>
+            <ul v-if="children && frontmatter.outline === 'deep'">
+              <li v-for="item in children" v-show="!item.hidden" :key="item.link" :lang="lang || locale">
+                <a class="outline-link" p="l-3" :href="link" @click="handleClick">
+                  {{ item.text }}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  text-align: left;
+
+  .va-toc-item {
+    color: var(--va-c-text-light);
+  }
+}
+
+.content {
+  position: relative;
+  padding-left: 16px;
+  font-size: 14px;
+  text-align: left;
+}
+
+.outline-marker {
+  position: absolute;
+  top: 32px;
+  left: -2px;
+  z-index: 0;
+  opacity: 0;
+  width: 4px;
+  height: 18px;
+  background-color: var(--va-c-brand);
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.outline-title {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  color: var(--va-c-text-light);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--va-c-brand);
+  transition: color 0.25s;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}
+</style>

package/components/HairyUserCard.vue

@@ -0,0 +1,30 @@
+<script lang="tsx" setup>
+import { useConfig, useThemeConfig } from 'valaxy'
+import { computed } from 'vue'
+import type { HairyTheme } from 'valaxy-theme-hairy'
+
+const config = useConfig()
+const theme = useThemeConfig<HairyTheme>()
+
+const name = computed(() => theme.value.user?.name || config.value.author.name)
+const description = computed(() => theme.value.user?.description || config.value.description)
+</script>
+
+<template>
+  <div class="pt-5">
+    <div class="flex flex-col items-center">
+      <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar" />
+      <div class="leading-loose mt-2">
+        {{ name }}
+      </div>
+      <div class="text-coolgray">
+        {{ description }}
+      </div>
+    </div>
+    <HairyUserNav />
+  </div>
+</template>
+
+<style lang="scss">
+
+</style>

package/components/HairyUserNav.vue

@@ -0,0 +1,68 @@
+<script lang="tsx" setup>
+import { useCategory, usePostList, useTag } from 'valaxy'
+import { defineComponent } from 'vue'
+const category = useCategory()
+const posts = usePostList()
+const tags = useTag()
+const State = defineComponent({
+  props: {
+    count: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup: (props, { slots }) => {
+    return () => <div class="flex-center flex-col cursor-pointer hover:text-primary px-3 py-1">
+        <div class="font-bold leading-none">
+          {props.count}
+        </div>
+        <div class="leading-none mt-1">
+          {slots.default?.()}
+        </div>
+      </div>
+  },
+})
+</script>
+
+<template>
+  <div class="flex justify-center mt-2">
+    <State :count="posts.length" @click="$router.push('/archives/')">
+      文章
+    </State>
+    <div class="w-1px bg-gray bg-opacity-50" />
+    <State :count="category.total" @click="$router.push('/categories/')">
+      分类
+    </State>
+    <div class="w-1px bg-gray bg-opacity-50" />
+    <State :count="tags.size" @click="$router.push('/tags/')">
+      标签
+    </State>
+  </div>
+  <HairySocialLinks class="mt-5" />
+  <HairyMenu class="HairyUserMenu mt-5 flex-col h-auto" />
+</template>
+
+<style lang="scss">
+  .HairyUserMenu {
+    .HairyMenuItem {
+      padding: 2px;
+      width: 100%;
+      border: 1px solid transparent;
+      > div {
+        justify-content: center;
+      }
+    }
+
+    .HairyMenuItem:hover,
+    .HairyMenuItem.active {
+      border-top: 1px solid var(--hy-c-primary);
+      border-bottom: 1px solid var(--hy-c-primary);
+    }
+    .HairyMenuItem.active + .HairyMenuItem {
+      border-top-color: transparent;
+    }
+    .HairyMenuItem:hover + .HairyMenuItem {
+      border-top-color: transparent;
+    }
+  }
+</style>

package/components/HairyUserTab.vue

@@ -0,0 +1,40 @@
+<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 { ref } from 'vue'
+
+const active = ref('aside')
+</script>
+
+<template>
+  <el-tabs v-model="active" class="pt-3">
+    <el-tab-pane name="aside">
+      <template #label>
+        <div class="flex items-center">
+          <div class="i-ri-list-check-2" />
+          <span class="ml-1">Aside</span>
+        </div>
+      </template>
+      <HairyToc />
+    </el-tab-pane>
+    <el-tab-pane label="Series" name="series">
+      <template #label>
+        <div class="flex items-center gap-1">
+          <div class="i-ri-flow-chart" />
+          <span class="ml-1">Series</span>
+        </div>
+      </template>
+      <HairyArticleSeries />
+    </el-tab-pane>
+    <el-tab-pane label="User" name="user">
+      <template #label>
+        <div class="flex items-center gap-1">
+          <div class="i-ri-user-line" />
+          <span class="ml-1">User</span>
+        </div>
+      </template>
+      <HairyUserCard />
+    </el-tab-pane>
+  </el-tabs>
+</template>

package/components/HairyWaline.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { useWaline } from 'valaxy/client/composables/comments/waline'
+// 读取用户配置
+const config = useConfig()
+// 挂载 Waline
+useWaline({
+  el: '#waline',
+  ...config.value.comment.waline,
+})
+</script>
+
+<!-- Also, the documentation doesn't state that we need to install @waline/client, which I think is also an issue -->
+<template>
+  <!-- waline html 挂载点，将其写入布局中 -->
+  <div id="waline" w="full" />
+</template>
+
+<style lang="scss">
+// 可以在此处覆盖 waline 样式
+#waline {
+  --waline-theme-color: var(--hy-c-primary);
+  --waline-active-color: var(--hy-c-primary-dark)
+}
+</style>

package/components/HairyWaves.vue

@@ -0,0 +1,67 @@
+<template>
+  <svg
+    class="waves w-full min-h-100px max-h-150px"
+    viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"
+  >
+    <defs>
+      <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+    </defs>
+    <g class="parallax">
+      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="0" fill="var(--hy-c-waves-dimm-1)" />
+      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="3" fill="var(--hy-c-waves-dimm-2)" />
+      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="5" fill="var(--hy-c-waves-dimm-3)" />
+      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="7" fill="var(--hy-c-waves-dimm)" />
+    </g>
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+.waves {
+  height: max(100px, min(150px, 15vh));
+  margin-bottom: -7px;
+}
+
+/* Animation */
+.parallax > use {
+  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+}
+
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+
+/*Shrinking for mobile*/
+@media (max-width: 768px) {
+  .waves {
+    margin-top: -40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+}
+</style>

package/components/ValaxyMain.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { PageData, Post } from 'valaxy'
+import { useConfig } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+  data?: PageData
+}>()
+const config = useConfig()
+</script>
+
+<template>
+  <main>
+    <div w="full" flex="~">
+      <slot name="main">
+        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
+          <slot name="main-header" />
+          <slot name="main-header-after" />
+
+          <slot name="main-content">
+            <div class="markdown-body prose max-w-none pb-8">
+              <ValaxyMd :frontmatter="frontmatter">
+                <slot name="main-content-md" />
+                <slot />
+              </ValaxyMd>
+            </div>
+            <slot name="main-content-after" />
+          </slot>
+        </div>
+
+        <slot name="main-nav-before" />
+
+        <slot name="main-nav" />
+
+        <slot name="main-nav-after" />
+
+        <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment" />
+
+        <slot name="footer" />
+      </slot>
+    </div>
+
+    <slot name="aside" />
+  </main>
+</template>

package/hooks/useCategory.ts

@@ -0,0 +1,18 @@
+import type { ParentCategory, PostCategory } from 'valaxy'
+import { useCategory } from 'valaxy'
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
+
+export function useCurrentCategory(categories: MaybeRef<string[]>) {
+  const all = useCategory()
+  return computed(() => {
+    let parent: ParentCategory & Partial<PostCategory> = all
+    for (const category of unref(categories)) {
+      for (const [key, value] of parent.children) {
+        if (key === category)
+          parent = (value as ParentCategory)
+      }
+    }
+    return parent
+  })
+}

package/hooks/useCategoryPost.ts

@@ -0,0 +1,21 @@
+import type { MaybeRef } from '@vueuse/shared'
+import { usePostList } from 'valaxy'
+import isEqual from 'lodash/isEqual'
+import { computed, unref } from 'vue'
+
+export function useCategoryPost(categories: MaybeRef<string[]>) {
+  const postList = usePostList()
+  return computed(() => {
+    if (!unref(categories).length)
+      return postList.value
+    return postList.value.filter((item) => {
+      let target = Array.isArray(item.categories)
+        ? item.categories
+        : [item.categories || '']
+      target = target.filter(Boolean)
+      if (unref(categories)[0] === 'Uncategorized')
+        return !target.length
+      return isEqual(target.sort(), unref(categories).sort())
+    }) as any
+  })
+}

package/hooks/useContext.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { createContext } from '../utils/createContext'
+
+const HairyContext = createContext('Hairy', () => {
+  const headerRef = ref<HTMLDivElement>()
+
+  return {
+    headerRef,
+  }
+})
+
+export const useContext = () => {
+  return HairyContext.inject()
+}
+
+export default HairyContext

package/hooks/useHeaderHeight.ts

@@ -0,0 +1,9 @@
+import { useElementSize } from '@vueuse/core'
+import { computed } from 'vue'
+import { useContext } from './useContext'
+
+export function useHeaderHeight() {
+  const { headerRef } = useContext()
+  const size = useElementSize(headerRef)
+  return computed(() => size.height.value)
+}

package/hooks/usePostLayout.ts

@@ -0,0 +1,9 @@
+import { useThemeConfig } from 'valaxy'
+import { computed } from 'vue'
+import type { HairyTheme } from '..'
+
+export function usePostLayout() {
+  const themeConfig = useThemeConfig<HairyTheme>()
+  const layout = computed(() => themeConfig.value.post?.layout || 'text')
+  return layout
+}

package/hooks/useYearArchives.ts

@@ -0,0 +1,43 @@
+import type { Post } from 'valaxy'
+import { usePostList } from 'valaxy'
+import { computed } from 'vue'
+import dayjs from 'dayjs'
+
+interface ArchiveYearMaps {
+  [year: string]: {
+    [month: string]: { count: number; posts: Post[] }
+  }
+}
+interface ArchiveYearItem {
+  year: string
+  month: string
+  count: number
+  posts: Post[]
+}
+
+export function useYearArchives() {
+  const posts = usePostList()
+  const archives = computed(() => {
+    const maps: ArchiveYearMaps = {}
+    const items: ArchiveYearItem[] = []
+    for (const post of posts.value) {
+      if (!post.date)
+        continue
+      const days = dayjs(post.date)
+      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] } }
+      else {
+        maps[year][month].count++
+        maps[year][month].posts.push(post)
+      }
+    }
+    for (const [year, months] of Object.entries(maps)) {
+      for (const [month, { count, posts }] of Object.entries(months))
+        items.push({ year, month, count, posts })
+    }
+    return items
+  })
+  return archives
+}