valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/parts/HairyOutline.vue

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

@@ -1,48 +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>
+<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/parts/HairySocialLinks.vue

@@ -1,27 +1,27 @@
-<script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-
-const config = useSiteConfig()
-</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>
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+
+const config = useSiteConfig()
+</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/parts/HairyTimelineContent.vue

@@ -1,39 +1,39 @@
-<script lang="ts" setup>
-import type { Post } from 'valaxy'
-import dayjs from 'dayjs'
-import { withDefaults } from 'vue'
-import { last } from 'lodash-es'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { toArray } from '../../utils'
-
-withDefaults(
-  defineProps<{
-    post: Post
-    format?: string
-  }>(),
-  {
-    format: 'YYYY-MM-DD',
-  },
-)
-
-const i18n = useI18n()
-
-const router = useRouter()
-
-function displayCategory(keys: string | string[] = []) {
-  router.push({ path: `/categories/${toArray(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" 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>
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import dayjs from 'dayjs'
+import { withDefaults } from 'vue'
+import { last } from 'lodash-es'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { toArray } from '../../utils'
+
+withDefaults(
+  defineProps<{
+    post: Post
+    format?: string
+  }>(),
+  {
+    format: 'YYYY-MM-DD',
+  },
+)
+
+const i18n = useI18n()
+
+const router = useRouter()
+
+function displayCategory(keys: string | string[] = []) {
+  router.push({ path: `/categories/${toArray(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" 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>

package/components/parts/HairyUserNav.vue

@@ -1,95 +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>
+<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/parts/HairyUserStats.vue

@@ -1,18 +1,18 @@
-<script lang="ts" setup>
-defineProps<{
-  count?: number
-}>()
-</script>
-
-<template>
-  <div class="flex-center flex-col cursor-pointer hover:text-primary px-3 py-1">
-    <div class="font-bold leading-none">
-      {{ count || 0 }}
-    </div>
-    <div class="leading-none mt-1">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+defineProps<{
+  count?: number
+}>()
+</script>
+
+<template>
+  <div class="flex-center flex-col cursor-pointer hover:text-primary px-3 py-1">
+    <div class="font-bold leading-none">
+      {{ count || 0 }}
+    </div>
+    <div class="leading-none mt-1">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>