valaxy-theme-hairy 0.2.2 → 1.0.1

package/components/parts/HairyLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+defineProps<{
+  type?: 'white' | 'normal'
+  bordered?: boolean
+}>()
+</script>
+
+<template>
+  <a
+    class="cursor-pointer" :class="[
+      type === 'white'
+        ? 'text-black hover:text-primary dark:text-white'
+        : 'text:text-primary-light hover:text-primary-dark',
+      bordered && 'border-b border-dashed hover:border-primary',
+    ]"
+  >
+    <slot />
+  </a>
+</template>
+
+<style lang="scss" scoped></style>

package/components/{HairyMenu.vue → parts/HairyMenu.vue}

@@ -2,7 +2,8 @@
 import type { HairyTheme } from 'valaxy-theme-hairy'
 import { useThemeConfig } from 'valaxy'
 import { computed } from 'vue'
-const themeConfig = useThemeConfig<HairyTheme>()
+
+const themeConfig = useThemeConfig<HairyTheme.Config>()
 const nav = computed(() => themeConfig.value.nav || [])
 </script>
 

package/components/{HairyMenuItem.vue → parts/HairyMenuItem.vue}

@@ -2,21 +2,28 @@
 import type { NavItem } from 'valaxy-theme-hairy'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ejectWindow } from '../utils'
+import { storeToRefs } from 'pinia'
+import { ejectWindow } from '../../utils'
+import { useGlobalStore } from '../../store'
+
 const props = defineProps<{
   item: NavItem
 }>()
+const { showDrawer } = storeToRefs(useGlobalStore())
 const urlReg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
 const isLink = computed(() => urlReg.test(props.item?.link || ''))
 const isPointer = computed(() => Boolean(props.item.link) || isLink.value)
 const router = useRouter()
 const route = useRoute()
-const toLink = () => {
+
+function toLink() {
   if (isLink.value)
     return ejectWindow(props.item.link!)
   if (props.item.link)
     router.push(props.item.link)
+  showDrawer.value = false
 }
+
 const isActive = computed(() => {
   if (isLink.value)
     return false
@@ -27,14 +34,14 @@ const isActive = computed(() => {
 </script>
 
 <template>
-  <div class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', isActive && 'text-primary active']">
+  <button class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', isActive && 'text-primary active']">
     <div class="flex items-center hover:text-primary" @click="toLink">
       <div v-if="item.icon" class="mr-1 icon" :class="item.icon" />
       <div class="question">
         {{ item.text }}
       </div>
     </div>
-  </div>
+  </button>
 </template>
 
 <style lang="scss" scoped></style>

package/components/parts/HairyOutline.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  useActiveAnchor,
+} from 'valaxy'
+import { useOutline } from '../../composables'
+
+const container = ref()
+const marker = ref()
+
+useActiveAnchor(container, marker)
+
+const { headers, handleClick } = useOutline()
+</script>
+
+<template>
+  <div v-show="headers.length" ref="container">
+    <div class="content">
+      <div class="outline-title">
+        {{ '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>
+
+        <HairyOutlineItem
+          class="va-toc relative z-1 css-i18n-toc"
+          :headers="headers"
+          :on-click="handleClick"
+          root
+        />
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  text-align: left;
+}
+
+.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/parts/HairyOutlineItem.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { MenuItem } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  headers: MenuItem[]
+  onClick: (e: MouseEvent) => void
+  root?: boolean
+}>()
+
+const { locale } = useI18n()
+</script>
+
+<template>
+  <ul :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title, lang } in headers" :key="link" class="va-toc-item" :lang="lang || locale">
+      <a class="outline-link" :href="link" @click="onClick">{{ title }}</a>
+      <template v-if="children?.length">
+        <HairyOutlineItem :headers="children" :on-click="onClick" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  .va-toc-item {
+    .outline-link {
+      color: var(--va-c-text-light);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.5s;
+
+      &:hover,
+      &.active {
+        color: var(--va-c-primary-lighter);
+        transition: color 0.25s;
+      }
+
+    }
+
+    .nested {
+      padding-left: 0.8rem;
+    }
+  }
+}
+</style>

package/components/{HairySocialLinks.vue → parts/HairySocialLinks.vue}

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
 
-const config = useConfig()
+const config = useSiteConfig()
 </script>
 
 <template>

package/components/{HairyTimelinePostItem.vue → parts/HairyTimelineContent.vue}

@@ -5,11 +5,12 @@ import { withDefaults } from 'vue'
 import { last } from 'lodash-es'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { toArr } from '../utils'
+import { toArray } from '../../utils'
+
 withDefaults(
   defineProps<{
     post: Post
-    format: string
+    format?: string
   }>(),
   {
     format: 'YYYY-MM-DD',
@@ -20,8 +21,8 @@ const i18n = useI18n()
 
 const router = useRouter()
 
-const displayCategory = (keys: string | string[] = []) => {
-  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+function displayCategory(keys: string | string[] = []) {
+  router.push({ path: `/categories/${toArray(keys).join('/')}` })
 }
 </script>
 
@@ -30,11 +31,9 @@ const displayCategory = (keys: string | string[] = []) => {
     <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 v-if="post.categories?.length" bordered type="white" @click="displayCategory(post.categories)">
+      {{ i18n.t(last(toArray(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/parts/HairyUserNav.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { usePostList, useTags } from 'valaxy'
+import { computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { toArray } from '../../utils'
+import { useGlobalStore } from '../../store'
+
+const posts = usePostList()
+const tags = useTags()
+const router = useRouter()
+const { showDrawer } = storeToRefs(useGlobalStore())
+
+const total = computed(() => {
+  const categories = posts.value.map(v => toArray(v.categories || [])).filter(v => v.length)
+  const maps: string[] = []
+  for (const category of categories) {
+    let caches: string[] = []
+    for (const iterator of category) {
+      caches.push(iterator)
+      maps.push(caches.join('-'))
+    }
+    caches = []
+  }
+  return new Set(maps).size
+})
+
+async function navigation(path: string) {
+  await router.push(path)
+  await nextTick()
+  showDrawer.value = false
+}
+</script>
+
+<template>
+  <div class="flex justify-center mt-2">
+    <HairyUserStats :count="posts.length" @click="navigation('/archives/')">
+      文章
+    </HairyUserStats>
+    <div class="w-1px bg-gray bg-opacity-50" />
+    <HairyUserStats :count="total" @click="navigation('/categories/')">
+      分类
+    </HairyUserStats>
+    <div class="w-1px bg-gray bg-opacity-50" />
+    <HairyUserStats :count="tags.size" @click="navigation('/tags/')">
+      标签
+    </HairyUserStats>
+  </div>
+  <HairySocialLinks class="mt-5" />
+  <HairyMenu class="HairyUserMenu mt-5 flex-col h-auto" />
+</template>
+
+<style lang="scss">
+  .HairyUserMenu {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    .HairyMenuItem {
+      padding: 2px;
+      width: 100%;
+      border: 1px solid transparent;
+      border-radius: 10px;
+      transition: all 0.2s;
+      background-color: transparent;
+      user-select: none;
+      > div {
+        justify-content: center;
+      }
+    }
+
+    .HairyMenuItem:hover,
+    .HairyMenuItem.active {
+      background-color: #f4f4f5;
+    }
+    .HairyMenuItem:active {
+      background-color: #efefef;
+    }
+
+    .HairyMenuItem.active + .HairyMenuItem {
+      border-top-color: transparent;
+    }
+    .HairyMenuItem:hover + .HairyMenuItem {
+      border-top-color: transparent;
+    }
+  }
+  .dark .HairyUserMenu {
+    .HairyMenuItem:hover,
+    .HairyMenuItem.active {
+      background-color: #f4f4f50a;
+    }
+    .HairyMenuItem:active {
+      background-color: #f4f4f521;
+    }
+  }
+</style>

package/components/{article-layout → posts}/HairyArticleImage.vue

@@ -4,28 +4,27 @@ import { computed, defineProps } from 'vue'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { last } from 'lodash-es'
-import { usePostLayout } from '../../hooks/usePostLayout'
-import { toArr } from '../../utils'
+import { removeTags, toArray } from '../../utils'
+import { useLayoutPost } from '../../composables'
 
 const props = defineProps<{
   post: Post
   reverse?: boolean
 }>()
+
 const router = useRouter()
-const layout = usePostLayout()
+const layout = useLayoutPost()
 const slice = computed(() => layout.value.includes('slice'))
-const image = computed(() => props.post.image)
-
+const image = computed(() => props.post.image?.toString())
+const text = computed(() => removeTags(props.post.excerpt))
 const i18n = useI18n()
-
-const onReadMore = () => {
+function onReadMore() {
   if (props.post.path)
     router.push(props.post.path)
 }
 
-const displayCategory = (keys: string | string[] = []) => {
-  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+function displayCategory(keys: string | string[] = []) {
+  router.push({ path: `/categories/${toArray(keys).join('/')}` })
 }
 </script>
 
@@ -36,33 +35,33 @@ const displayCategory = (keys: string | string[] = []) => {
         <a class="text-size-2xl font-bold truncate cursor-pointer lt-sm:text-size-lg" :class="[reverse ? 'order-last' : 'order-first']" @click="onReadMore">{{ post.title }}</a>
         <div class="flex justify-end gap-2 text-size-sm lt-sm:text-size-xs">
           <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
-          <span>{{ (post.length / 1000).toFixed(1) }}k字</span>
-          <span class="lt-sm:hidden">{{ post.durations.minutes.toFixed(2) }}分钟</span>
+          <span>{{ post.wordCount }}字</span>
+          <span class="lt-sm:hidden">{{ post.readingTime }}分钟</span>
         </div>
       </div>
-      <div class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5 duration-200" :class="[reverse ? 'pl-4' : 'pr-4']">
+      <div class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5" :class="[reverse ? 'pl-4' : 'pr-4']">
         <div class="flex-1 post-image-content" :class="[reverse ? 'order-last' : 'order-first']">
           <img
             class="post-image rounded-1 w-full h-full object-cover cursor-pointer" :src="image"
             @click="onReadMore"
-          />
+          >
         </div>
         <div class="flex-1 flex flex-col justify-between py-2 dark:py-0">
           <div class="flex-1 text-size-sm">
             <div class="line-clamp-text">
-              {{ post.text }}
+              {{ text }}
             </div>
           </div>
           <div class="flex justify-between items-center">
             <a class="cursor-pointer" :class="[reverse && 'order-1']">
               <span v-if="post.categories?.length" @click="displayCategory(post.categories)">
-                {{ i18n.t(last(toArr(post.categories)) || '') }}
+                {{ i18n.t(toArray(post.categories).at(-1) || '') }}
               </span>
             </a>
             <div class="text-base leading-6 font-medium">
               <a class="link cursor-pointer" aria-label="read more" @click="onReadMore">
                 <span v-if="reverse">←</span>
-                Read more
+                <span class="hidden md:block">Read more</span>
                 <span v-if="!reverse">→</span>
               </a>
             </div>
@@ -86,7 +85,7 @@ const displayCategory = (keys: string | string[] = []) => {
 
 .dark {
   .post-image {
-    @apply opacity-75 hover: opacity-90 duration-200;
+    @apply opacity-75 hover:opacity-90 ;
   }
 }
 
@@ -115,7 +114,7 @@ const displayCategory = (keys: string | string[] = []) => {
 
 .HairyArticleImage.slice {
   .post-image {
-    @apply transition-all;
+    // @apply transition-all;
   }
 
   &:hover {

package/components/{article-layout → posts}/HairyArticleSeries.vue

@@ -1,17 +1,20 @@
 <script lang="ts" setup>
+import type { PostFrontMatter } from 'valaxy'
 import { useFrontmatter } from 'valaxy'
 import { computed, inject, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { toArr } from '../../utils'
-import { useCurrentCategory } from '../../hooks/useCategory'
+import { toArray } from '../../utils'
+import { useCategory } from '../../composables'
 
 const frontmatter = useFrontmatter()
-const paths = computed(() => toArr(frontmatter.value.categories).filter(Boolean) as string[])
-const category = useCurrentCategory(paths)
+const paths = computed(() => toArray(frontmatter.value.categories).filter(Boolean) as string[])
+const category = useCategory(paths)
+
 const posts = computed(() => {
-  const result = category.value.posts || []
+  const result = [...(category.value.children?.values() || [])] as PostFrontMatter[]
   return result.sort((a, b) => (a.date || 1) > (b.date || 1) ? 1 : -1)
 })
+
 const router = useRouter()
 
 const active = inject('HairyUserTab:active', ref(''))

package/components/{article-layout → posts}/HairyArticleText.vue

@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
 import { computed, defineProps } from 'vue'
-import { usePostLayout } from '../../hooks/usePostLayout'
+import { removeTags } from '../../utils'
+import { useLayoutPost } from '../../composables'
+
 const props = defineProps<{
   post: Post
 }>()
-const layout = usePostLayout()
+
+const layout = useLayoutPost()
+
 const text = computed(() => {
   if (layout.value === 'text')
-    return props.post.text
+    return removeTags(props.post.excerpt)
   return props.post.excerpt
 })
 </script>
@@ -28,7 +32,10 @@ const text = computed(() => {
           />
         </div>
         <div class="text-base leading-6 font-medium">
-          <a class="link" aria-label="read more" :href="post.path">Read more →</a>
+          <a class="link" aria-label="read more" :href="post.path">
+            <span class="hidden md:block">Read more</span>
+            <span> →</span>
+          </a>
         </div>
       </div>
     </article>

package/components/posts/HairyPostFooter.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<template>
+  <div class="mb-15">
+    <div class="border-t border-gray-200 dark:border-gray-600" />
+    <div class="flex items-center justify-end mt-2">
+      <div class="i-ri-eye-fill mr-2" />
+      阅读次数 <span class="waline-pageview-count mx-2" :data-path="route.path"> - </span> 次
+    </div>
+  </div>
+</template>

package/components/{article-layout → posts}/HairyPostImageList.vue

@@ -3,8 +3,7 @@ import type { Ref } from 'vue'
 import { computed } from 'vue'
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
-
-import { usePostLayout } from '../../hooks/usePostLayout'
+import { useLayoutPost } from '../../composables'
 
 const props = withDefaults(defineProps<{
   type?: string
@@ -12,10 +11,11 @@ const props = withDefaults(defineProps<{
 }>(), {
 })
 
+const layout = useLayoutPost()
+const reverse = computed(() => layout.value.includes('reverse'))
+
 const routes = usePostList() as any as Ref<Post[]>
 const posts = computed(() => props.posts || routes.value)
-const layout = usePostLayout()
-const reverse = computed(() => layout.value.includes('reverse'))
 </script>
 
 <template>
@@ -25,4 +25,3 @@ const reverse = computed(() => layout.value.includes('reverse'))
     </Transition>
   </ul>
 </template>
-

package/components/{article-layout → posts}/HairyPostTextsList.vue

@@ -20,4 +20,3 @@ const posts = computed(() => props.posts || routes.value)
     </Transition>
   </ul>
 </template>
-

package/components/posts/HairyPostToggleLayout.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../../store'
+import { useLayoutPost } from '../../composables'
+
+const layout = useLayoutPost()
+
+const layouts = [
+  { layout: 'image:slice:reverse' as const, icon: 'i-fluent-text-align-distributed-24-filled' },
+  { layout: 'image:slice' as const, icon: 'i-fluent-text-align-left-16-filled' },
+  { layout: 'image' as const, icon: 'i-fluent-text-align-justify-20-filled' },
+  { layout: 'markdown' as const, icon: 'i-fluent-markdown-20-filled' },
+  { layout: 'text' as const, icon: 'i-fluent-code-text-16-filled' },
+]
+
+const globalStore = useGlobalStore()
+const { headerRef } = storeToRefs(globalStore)
+const { height: headerHeight } = useElementSize(headerRef)
+const scroll = useScroll(document)
+
+const show = computed(() => {
+  return scroll.y.value > headerHeight.value
+})
+</script>
+
+<template>
+  <div class="inline-flex gap-2 sticky top-15 inset-0 rounded-2" :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']">
+    <div v-for="(item) in layouts" :key="item.layout" class="p-2 rounded-full cursor-pointer" :class="[layout === item.layout && 'text-primary']" @click="layout = item.layout">
+      <div class="text-size-xl" :class="item.icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyAlgoliaSearch.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import * as addonAlgolia from 'valaxy-addon-algolia'
+import { isEmptyAddon } from 'valaxy'
+import { whenever } from '@vueuse/core'
+
+if (isEmptyAddon(addonAlgolia))
+  throw new Error('Algolia addon is not installed')
+
+const { loaded, load, dispatchEvent } = addonAlgolia.useAddonAlgolia()
+
+whenever(loaded, dispatchEvent)
+</script>
+
+<template>
+  <AlgoliaSearchBox v-if="loaded" class="VPNavBarSearch" />
+  <HairySearchBtnDisplay v-else @click="load()" />
+</template>

package/components/third/HairyFuseSearch.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+  <HairySearchBtnDisplay @click="visible = true" />
+  <HairyFuseSearchDialog v-model:visible="visible" />
+</template>