valaxy-theme-hairy 0.2.2 → 1.0.0

package/components/third/HairySearchBtnDisplay.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import '@docsearch/css'
+</script>
+
+<template>
+  <div class="VPNavBarSearch">
+    <button type="button" class="DocSearch DocSearch-Button" aria-label="Search">
+      <span class="DocSearch-Button-Container lt-sm:text-size-xl">
+        <svg
+          class="DocSearch-Search-Icon"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+        >
+          <path
+            d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+            stroke="currentColor"
+            fill="none"
+            fill-rule="evenodd"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span class="DocSearch-Button-Placeholder">Search</span>
+      </span>
+      <HairySearchBtnKeys />
+    </button>
+  </div>
+</template>

package/components/third/HairySearchBtnInput.vue

@@ -0,0 +1,20 @@
+<template>
+  <span class="DocSearch-Button-Container lt-sm:text-size-xl">
+    <svg
+      class="DocSearch-Search-Icon"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+        stroke="currentColor"
+        fill="none"
+        fill-rule="evenodd"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <span class="DocSearch-Button-Placeholder">Search</span>
+  </span>
+</template>

package/components/third/HairySearchBtnKeys.vue

@@ -0,0 +1,19 @@
+<template>
+  <span class="DocSearch-Button-Keys">
+    <kbd class="DocSearch-Button-Key">
+      <svg
+        width="15" height="15"
+        class="DocSearch-Control-Key-Icon"
+      >
+        <path
+          d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
+          stroke-width="1.2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="square"
+        />
+      </svg>
+    </kbd>
+    <kbd class="DocSearch-Button-Key">K</kbd>
+  </span>
+</template>

package/components/{HairyCarousel.vue → third/HairySwiperCarousel.vue}

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import images from '@hairy:images:home'
 import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Autoplay, EffectFade } from 'swiper'
+import { Autoplay, EffectFade } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/autoplay'
 import 'swiper/css/effect-fade'
@@ -10,16 +10,16 @@ images.sort(() => Math.random() - 0.5)
 </script>
 
 <template>
-  <swiper
+  <Swiper
     effect="fade" :speed="2000" :fade-effect="{ crossFade: true }" :modules="[Autoplay, EffectFade]"
     :slides-per-view="1" :space-between="50" :autoplay="{
       delay: 4000,
     }" class="HairyCarousel swiper-no-swiping"
   >
-    <swiper-slide v-for="(item, index) in images" :key="index" class="w-full h-full">
-      <img class="w-full h-full object-cover" :src="item" />
-    </swiper-slide>
-  </swiper>
+    <SwiperSlide v-for="(item, index) in images" :key="index" class="w-full h-full">
+      <img class="w-full h-full object-cover" :src="item">
+    </SwiperSlide>
+  </Swiper>
 </template>
 
 <style lang="scss">

package/{hooks/useYearArchives.ts → composables/archives.ts}

@@ -1,3 +1,4 @@
+/* eslint-disable style/max-statements-per-line */
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
 import { computed } from 'vue'
@@ -5,10 +6,10 @@ import dayjs from 'dayjs'
 
 interface ArchiveYearMaps {
   [year: string]: {
-    [month: string]: { count: number; posts: Post[] }
+    [month: string]: { count: number, posts: Post[] }
   }
 }
-interface ArchiveYearItem {
+interface ArchiveYear {
   year: string
   month: string
   count: number
@@ -19,7 +20,7 @@ export function useYearArchives() {
   const posts = usePostList()
   const archives = computed(() => {
     const maps: ArchiveYearMaps = {}
-    const items: ArchiveYearItem[] = []
+    const items: ArchiveYear[] = []
     for (const post of posts.value) {
       if (!post.date)
         continue

package/composables/category.ts

@@ -0,0 +1,43 @@
+import type { CategoryList, PostFrontMatter } from 'valaxy'
+import { useCategories, usePostList } from 'valaxy'
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
+
+import { isEqual } from 'lodash-es'
+
+export function useCategory(categories: MaybeRef<string[]>) {
+  const all = useCategories()
+
+  unref(categories)
+  // [BBB]
+  return computed(() => {
+    let parent: PostFrontMatter & Partial<CategoryList> = all.value as any
+    for (const category of unref(categories)) {
+      const children = (parent.children || new Map([]))
+      for (const [key, value] of children) {
+        if (key === category && !key.startsWith('/posts')) {
+          parent = (value as PostFrontMatter)
+          continue
+        }
+      }
+    }
+    return parent
+  })
+}
+
+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/composables/config.ts

@@ -0,0 +1,11 @@
+import { computed } from 'vue'
+import { useConfig } from 'valaxy'
+import type { ThemeConfig } from '../types'
+
+/**
+ * getThemeConfig
+ */
+export function useThemeConfig<T = ThemeConfig>() {
+  const config = useConfig<T>()
+  return computed(() => config!.value.themeConfig)
+}

package/composables/dark.ts

@@ -0,0 +1,13 @@
+import { useAppStore, useThemeConfig } from 'valaxy'
+import { useLocalStorage } from '@vueuse/core'
+import type { ThemeConfig } from 'valaxy-theme-hairy'
+
+export function setupDefaultDark() {
+  const theme = useThemeConfig<ThemeConfig>()
+  const { toggleDark } = useAppStore()
+  const local = useLocalStorage('--hairy-mode', '')
+  if (theme.value.theme && !local.value) {
+    local.value = theme.value.theme
+    toggleDark()
+  }
+}

package/composables/fuse.ts

@@ -0,0 +1,60 @@
+import { computed, onMounted, ref } from 'vue'
+import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import type { FuseListItem } from 'valaxy/types'
+import { useSiteConfig } from 'valaxy'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+
+export function useFuseParsed(input: MaybeRefOrGetter<string>) {
+  const siteConfig = useSiteConfig()
+  const data = ref<FuseListItem[]>([])
+
+  const keys = computed(() => {
+    const defKs = ['title', 'tags', 'categories', 'excerpt']
+    const ks = siteConfig.value.fuse.options.keys || []
+    return ks.length === 0 ? defKs : ks
+  })
+
+  const fuseOptions = computed<UseFuseOptions<FuseListItem>>(() => ({
+    fuseOptions: {
+      ...siteConfig.value.fuse.options,
+      keys: keys.value,
+    // threshold: 0.99,
+    // ignoreLocation: true,
+    },
+    includeMatches: true,
+    findAllMatches: true,
+  // resultLimit: resultLimit.value,
+  // matchAllWhenSearchEmpty: matchAllWhenSearchEmpty.value,
+  }))
+
+  onMounted(async () => {
+    const path = !siteConfig.value.fuse.dataPath.startsWith('http')
+      ? `${import.meta.env.BASE_URL}${siteConfig.value.fuse.dataPath}`
+      : siteConfig.value.fuse.dataPath
+    data.value = await fetch(path).then(r => r.json() || [])
+  })
+
+  const { fuse, results: _results } = useFuse(input, data, fuseOptions)
+  const results = computed(() => _results.value.map((v) => {
+    return {
+      ...v,
+      item: {
+        ...v.item,
+        excerpt: removeTags(v.item.excerpt || ''),
+      },
+    }
+  }))
+  return { results, fuse, data }
+}
+
+function removeTags(content = '') {
+  content = content.replace(/<\/?[^>]*>/g, '')
+  content = content.replace(/[|]/g, '')
+  content = content.replace(/```.*?\n/sg, '')
+  content = content.replace(/:::.*?\n/sg, '')
+  content = content.replace(/\[\[toc\]\]/g, '')
+  content = content.replace(/\{lang=".*?\}/sg, '')
+  content = content.replace(/#.*? /sg, '')
+  return content
+}

package/composables/index.ts

@@ -0,0 +1,8 @@
+export * from './config'
+export * from './fuse'
+export * from './layout'
+export * from './category'
+export * from './archives'
+export * from './tags'
+export * from './outline'
+export * from './dark'

package/composables/layout.ts

@@ -0,0 +1,16 @@
+import { useThemeConfig } from 'valaxy'
+import { createSharedComposable, useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+import type { HairyTheme } from '../types'
+
+const useSharedStorage = createSharedComposable(useStorage)
+
+export function useLayoutPost() {
+  const themeConfig = useThemeConfig<HairyTheme.Config>()
+  const cache = useSharedStorage<HairyTheme.Layout['post']>('--hairy-theme:post-layout', null)
+  const layout = computed({
+    get: () => cache.value || themeConfig.value.layout?.post || 'image',
+    set: value => cache.value = value,
+  })
+  return layout
+}

package/composables/outline.ts

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia'
+import type { MenuItem } from 'valaxy'
+import { getHeaders, onContentUpdated, useFrontmatter, useThemeConfig } from 'valaxy'
+import type { DefaultTheme } from 'valaxy/types'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const useOutlineStore = defineStore('OutlineStore', {
+  state: () => ({} as Record<string, MenuItem[]>),
+})
+
+/**
+ * export headers & handleClick to generate outline
+ */
+export function useOutline() {
+  const frontmatter = useFrontmatter()
+  const themeConfig = useThemeConfig()
+  const route = useRoute()
+  const store = useOutlineStore()
+
+  const pageOutline = computed<DefaultTheme.Config['outline']>(
+    () => frontmatter.value.outline ?? themeConfig.value.outline,
+  )
+
+  const headers = computed(() => store.$state[route.path] || [])
+
+  onContentUpdated(() => {
+    if (pageOutline.value === false)
+      return
+    store.$state[route.path] = getHeaders(pageOutline.value)
+  })
+
+  const handleClick = ({ target: el }: Event) => {
+    const id = (el as HTMLAnchorElement).href!.split('#')[1]
+    const heading = document.getElementById(decodeURIComponent(id)) as HTMLAnchorElement
+    heading?.focus({ preventScroll: true })
+  }
+
+  return {
+    /**
+     * headers for toc
+     */
+    headers,
+    /**
+     * click hash heading
+     */
+    handleClick,
+  }
+}

package/composables/tags.ts

@@ -0,0 +1,36 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import { useTags } from 'valaxy'
+
+/**
+ * get utils about tags
+ */
+export function useHairyTags(options: {
+  /**
+   * Primary Color
+   */
+  primary: string
+} = {
+  primary: '#0078E7',
+}) {
+  const tags = useTags()
+
+  const gray = new TinyColor('#999999')
+  const primaryColor = new TinyColor(options.primary)
+
+  const getTagStyle = (count: number) => {
+    const counts = Array.from(tags.value).map(([_, value]) => value.count)
+    const max = Math.max(...counts)
+    const min = Math.min(...counts)
+    const range = max - min
+    const percent = (count - min) / range
+    return {
+      '--yun-tag-color': gray.mix(primaryColor, percent * 100).toString(),
+      'fontSize': `${percent * 36 + 12}px`,
+    }
+  }
+
+  return {
+    tags,
+    getTagStyle,
+  }
+}

package/layouts/archive-month.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader :title="`发表于'${$route.params.year}年${$route.params.month}月'的文章`" />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
+</template>

package/layouts/archive-year.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader :title="`发表于'${$route.params.year}年'的文章`" />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
+</template>

package/layouts/archive.vue

@@ -0,0 +1,11 @@
+<template>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+    <HairyDrawer />
+  </HairyContainer>
+</template>

package/layouts/categories.vue

@@ -1,6 +1,13 @@
+<script lang="ts" setup>
+</script>
+
 <template>
-  <HairyLayout :header="{ title: '分类' }">
-    <router-view />
-  </HairyLayout>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader title="分类" />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
 </template>
-

package/layouts/default.vue

@@ -1,9 +1,10 @@
-<script lang="ts" setup>
-</script>
-
 <template>
-  <HairyLayout :header="$route.meta.frontmatter">
-    <router-view />
-  </HairyLayout>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
 </template>
-

package/layouts/home.vue

@@ -1,23 +1,33 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
-const config = useConfig()
+import { useSiteConfig } from 'valaxy'
+import dayjs from 'dayjs'
+import { riposte } from '../utils'
+
+const config = useSiteConfig()
+
+const hour = dayjs().hour()
+const hello = riposte(
+  [hour >= 5 && hour < 12, 'Good morning'],
+  [hour >= 12 && hour < 18, 'Good afternoon'],
+  [true, 'Good evening'],
+)
 </script>
 
 <template>
-  <HairyLayout
-    class="HairyHomeLayout"
-    :header="{
-      headline: config.title,
-      title: config.author.name,
-      description: 'good evening, how are you doing?',
-    }"
-  >
-    <router-view />
-  </HairyLayout>
+  <HairyContainer>
+    <HairyNavbar>
+      <template #nav>
+        <slot name="header-nav" />
+      </template>
+    </HairyNavbar>
+    <HairyHeader
+      :headline="config.title"
+      :title="config.author.name"
+      :description="`${hello}, how are you doing?`"
+    />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
 </template>
-
-<style>
-.HairyHomeHeader .title {
-  @apply tracking-5;
-}
-</style>

package/layouts/post.vue

@@ -1,48 +1,54 @@
 <script lang="ts" setup>
+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 dayjs from 'dayjs'
-import { useRouter } from 'vue-router'
-const router = useRouter()
 
+defineProps<{
+  header?: {
+    title?: string
+    headline?: string
+    description?: string
+  }
+}>()
+
+const router = useRouter()
 const post = useFrontmatter()
 
-const displayTag = (tag: string) => {
+function displayTag(tag: string) {
   router.push(`/tags/${tag}`)
 }
 </script>
 
 <template>
-  <HairyLayout :header="{ title: post.title }">
-    <template #header-description>
-      <div class="text-center">
-        {{ post.description }}
-      </div>
-      <div class="flex gap-2">
-        <span>发表于 {{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
-        <span>本文字数 {{ (post.length / 1000).toFixed(1) }}k 字</span>
-        <span>阅读时长 {{ post.durations.minutes.toFixed(2) }} 分钟</span>
-      </div>
-      <div v-if="post.tags?.length" class="tags flex-center gap-2 mt-2">
-        <el-tag v-for="(tag) in post.tags" :key="tag" class="dark:bg-dark-50 cursor-pointer" @click="displayTag(tag)">
-          {{ tag }}
-        </el-tag>
-      </div>
-    </template>
-    <router-view />
-    <div class="mb-15">
-      <div class="border-t border-gray-200 dark:border-gray-600"></div>
-      <div class="flex items-center justify-end mt-2">
-        <div class="i-ri-eye-fill mr-2" />
-        阅读次数 <span class="waline-pageview-count mx-2">1</span> 次
-      </div>
-    </div>
-    <template #body-slide>
-      <HairyUserTab />
-    </template>
-  </HairyLayout>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader :title="post.title">
+      <template #description>
+        <div class="flex gap-2">
+          <span>发表于 {{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
+          <span>本文字数 {{ post.wordCount }} 字</span>
+          <span>阅读时长 {{ post.readingTime }} 分钟</span>
+        </div>
+        <div v-if="post.tags?.length" class="tags flex-center gap-2 mt-2">
+          <ElTag v-for="(tag) in post.tags" :key="tag" class="dark:bg-dark-50 cursor-pointer" @click="displayTag(tag)">
+            {{ tag }}
+          </ElTag>
+        </div>
+      </template>
+    </HairyHeader>
+    <HairyBody>
+      <template #default>
+        <HairyImageGlobal>
+          <router-view />
+        </HairyImageGlobal>
+        <HairyPostFooter />
+      </template>
+      <template #slide>
+        <HairyTabbar />
+      </template>
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
 </template>
-
-<style lang="scss">
-</style>

package/layouts/tag.vue

@@ -1,6 +1,10 @@
 <template>
-  <HairyLayout :header="{ title: `包含标签'${$route.params.tag}'的标签` }">
-    <router-view />
-  </HairyLayout>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader :title="`包含标签'${$route.params.tag}'的标签`" />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
 </template>
-

package/layouts/tags.vue

@@ -1,6 +1,13 @@
+<script lang="ts" setup>
+</script>
+
 <template>
-  <HairyLayout :header="{ title: '所有标签' }">
-    <router-view />
-  </HairyLayout>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader title="所有标签" />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
 </template>
-