valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/third/HairySearchBtnDisplay.vue

@@ -1,29 +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>
+<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

@@ -1,20 +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>
+<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

@@ -1,19 +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>
+<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/third/HairySwiperCarousel.vue

@@ -1,45 +1,45 @@
-<script lang="ts" setup>
-import images from '@hairy:images:home'
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Autoplay, EffectFade } from 'swiper/modules'
-import 'swiper/css'
-import 'swiper/css/autoplay'
-import 'swiper/css/effect-fade'
-
-images.sort(() => Math.random() - 0.5)
-</script>
-
-<template>
-  <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"
-  >
-    <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">
-.HairyCarousel {
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, .2);
-    z-index: 2;
-    transition: all .2s ease-in-out 0s;
-  }
-}
-.dark {
-  .HairyCarousel::before {
-    background-color: rgba(0,0,0,.4);
-  }
-}
-</style>
+<script lang="ts" setup>
+import images from '@hairy:images:home'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, EffectFade } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/autoplay'
+import 'swiper/css/effect-fade'
+
+images.sort(() => Math.random() - 0.5)
+</script>
+
+<template>
+  <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"
+  >
+    <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">
+.HairyCarousel {
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .2);
+    z-index: 2;
+    transition: all .2s ease-in-out 0s;
+  }
+}
+.dark {
+  .HairyCarousel::before {
+    background-color: rgba(0,0,0,.4);
+  }
+}
+</style>

package/composables/archives.ts

@@ -1,48 +1,48 @@
-/* eslint-disable style/max-statements-per-line */
-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 ArchiveYear {
-  year: string
-  month: string
-  count: number
-  posts: Post[]
-}
-
-export function useYearArchives() {
-  const posts = usePostList()
-  const archives = computed(() => {
-    const maps: ArchiveYearMaps = {}
-    const items: ArchiveYear[] = []
-    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 as any] } }
-      else {
-        maps[year][month].count++
-        maps[year][month].posts.unshift(post as any)
-      }
-    }
-    for (const [year, months] of Object.entries(maps)) {
-      for (const [month, { count, posts }] of Object.entries(months))
-        items.unshift({ year, month, count, posts })
-    }
-    return items.sort((a, b) => {
-      const aTime = `${a.year}-${a.month}`
-      const bTime = `${b.year}-${b.month}`
-      return bTime > aTime ? 1 : -1
-    })
-  })
-  return archives
-}
+/* eslint-disable style/max-statements-per-line */
+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 ArchiveYear {
+  year: string
+  month: string
+  count: number
+  posts: Post[]
+}
+
+export function useYearArchives() {
+  const posts = usePostList()
+  const archives = computed(() => {
+    const maps: ArchiveYearMaps = {}
+    const items: ArchiveYear[] = []
+    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 as any] } }
+      else {
+        maps[year][month].count++
+        maps[year][month].posts.unshift(post as any)
+      }
+    }
+    for (const [year, months] of Object.entries(maps)) {
+      for (const [month, { count, posts }] of Object.entries(months))
+        items.unshift({ year, month, count, posts })
+    }
+    return items.sort((a, b) => {
+      const aTime = `${a.year}-${a.month}`
+      const bTime = `${b.year}-${b.month}`
+      return bTime > aTime ? 1 : -1
+    })
+  })
+  return archives
+}

package/composables/category.ts

@@ -1,43 +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
-  })
-}
+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

@@ -1,11 +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)
-}
+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

@@ -1,13 +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()
-  }
-}
+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

@@ -1,60 +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
-}
+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

@@ -1,8 +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 './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

@@ -1,16 +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
-}
+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
+}