valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/HairyImageGroup.vue

@@ -1,65 +1,65 @@
-<script lang="ts" setup>
-import { computed, provide, useCssVars, useSlots } from 'vue'
-import { renderOverlay } from '@overlastic/vue'
-import type { ImageViewerProps } from 'element-plus/es/components/image-viewer/index'
-import { atWillToUnit } from '@hairy/utils'
-import HairyImageViewer from './parts/HairyImageViewer.vue'
-
-const props = withDefaults(defineProps<{
-  row?: string | number
-  col?: string | number
-  gap?: string | number
-  justify?: string
-  align?: string
-}>(), {
-  row: 'auto',
-  col: 'auto',
-  gap: 10,
-  justify: 'space-evenly',
-  align: 'initial',
-})
-
-useCssVars(() => ({
-  width: atWillToUnit(props.row),
-  height: atWillToUnit(props.col),
-  gap: atWillToUnit(props.gap),
-  justify: props.justify,
-  align: props.align,
-}))
-
-const slots = useSlots()
-const paths = computed(() => slots
-  .default?.()
-  .map(v => v.props?.src)
-  .filter(Boolean) as string[],
-)
-
-function preview(url: string) {
-  const initialIndex = paths.value.findIndex(v => v === url) || 0
-  renderOverlay<Partial<ImageViewerProps>>(HairyImageViewer, {
-    urlList: paths.value,
-    initialIndex,
-  })
-}
-
-provide('HairyImageGroup:preview', preview)
-</script>
-
-<template>
-  <div class="HairyImageGroup">
-    <slot />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.HairyImageGroup {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, var(--width, auto));
-  gap: var(--gap);
-  justify-content: var(--justify);
-   align-items: var(--align);
-  :deep(.HairyImage) {
-    height: var(--height, auto);
-  }
-}
-</style>
+<script lang="ts" setup>
+import { computed, provide, useCssVars, useSlots } from 'vue'
+import { renderOverlay } from '@overlastic/vue'
+import type { ImageViewerProps } from 'element-plus'
+import { atWillToUnit } from '@hairy/utils'
+import HairyImageViewer from './parts/HairyImageViewer.vue'
+
+const props = withDefaults(defineProps<{
+  row?: string | number
+  col?: string | number
+  gap?: string | number
+  justify?: string
+  align?: string
+}>(), {
+  row: 'auto',
+  col: 'auto',
+  gap: 10,
+  justify: 'space-evenly',
+  align: 'initial',
+})
+
+useCssVars(() => ({
+  width: atWillToUnit(props.row),
+  height: atWillToUnit(props.col),
+  gap: atWillToUnit(props.gap),
+  justify: props.justify,
+  align: props.align,
+}))
+
+const slots = useSlots()
+const paths = computed(() => slots
+  .default?.()
+  .map(v => v.props?.src)
+  .filter(Boolean) as string[],
+)
+
+function preview(url: string) {
+  const initialIndex = paths.value.findIndex(v => v === url) || 0
+  renderOverlay<Partial<ImageViewerProps>>(HairyImageViewer, {
+    urlList: paths.value,
+    initialIndex,
+  })
+}
+
+provide('HairyImageGroup:preview', preview)
+</script>
+
+<template>
+  <div class="HairyImageGroup">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.HairyImageGroup {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, var(--width, auto));
+  gap: var(--gap);
+  justify-content: var(--justify);
+   align-items: var(--align);
+  :deep(.HairyImage) {
+    height: var(--height, auto);
+  }
+}
+</style>

package/components/HairyNavbar.vue

@@ -1,56 +1,56 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref } from 'vue'
-import { useElementSize, useScroll, whenever } from '@vueuse/core'
-import { useSiteConfig } from 'valaxy'
-import { useGlobalStore } from '../store'
-
-// get header height
-const globalStore = useGlobalStore()
-const { headerRef } = storeToRefs(globalStore)
-const headerSize = useElementSize(headerRef)
-const headerHeight = computed(() => headerSize.height.value)
-
-// get document scroll
-const documentRef = ref()
-const scroll = useScroll(documentRef)
-const dire = ref<'top' | 'bottom'>('top')
-
-whenever(() => scroll.directions.top, () => dire.value = 'top')
-whenever(() => scroll.directions.bottom, () => dire.value = 'bottom')
-
-const show = computed(() => {
-  return scroll.y.value < (headerHeight.value / 2)
-    || dire.value === 'top'
-})
-const config = useSiteConfig()
-onMounted(() => documentRef.value = document)
-</script>
-
-<template>
-  <div
-    class="fixed w-full h-3.125rem lt-sm:h-3.5rem top-0 opacity-0 z-10000"
-    :class="[show && 'opacity-100']"
-  >
-    <div class="px-12px md:px-0 mx-auto container flex relative z-1 h-full">
-      <div class="flex items-center lt-sm:order-1 lt-sm:flex-1 justify-center">
-        <HairyLink class="px-2.5" type="white" :href="config.url">
-          {{ config.title }}
-        </HairyLink>
-      </div>
-      <div class="flex items-center sm:flex-1">
-        <HairyNavExpand class="sm:hidden pl-2 pr-13" />
-        <HairyNav class="lt-sm:hidden" />
-        <slot name="nav" />
-      </div>
-      <div class="flex-center order-1">
-        <HairyNavbarToggleDark />
-        <HairySearch />
-      </div>
-    </div>
-
-    <HairyNavbarBackground />
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, ref } from 'vue'
+import { useElementSize, useScroll, whenever } from '@vueuse/core'
+import { useSiteConfig } from 'valaxy'
+import { useGlobalStore } from '../store'
+
+// get header height
+const globalStore = useGlobalStore()
+const { headerRef } = storeToRefs(globalStore)
+const headerSize = useElementSize(headerRef)
+const headerHeight = computed(() => headerSize.height.value)
+
+// get document scroll
+const documentRef = ref()
+const scroll = useScroll(documentRef)
+const dire = ref<'top' | 'bottom'>('top')
+
+whenever(() => scroll.directions.top, () => dire.value = 'top')
+whenever(() => scroll.directions.bottom, () => dire.value = 'bottom')
+
+const show = computed(() => {
+  return scroll.y.value < (headerHeight.value / 2)
+    || dire.value === 'top'
+})
+const config = useSiteConfig()
+onMounted(() => documentRef.value = document)
+</script>
+
+<template>
+  <div
+    class="fixed w-full h-3.125rem lt-sm:h-3.5rem top-0 opacity-0 z-10000"
+    :class="[show && 'opacity-100']"
+  >
+    <div class="px-12px md:px-0 mx-auto container flex relative z-1 h-full">
+      <div class="flex items-center lt-sm:order-1 lt-sm:flex-1 justify-center">
+        <HairyLink class="px-2.5" type="white" :href="config.url">
+          {{ config.title }}
+        </HairyLink>
+      </div>
+      <div class="flex items-center sm:flex-1">
+        <HairyNavExpand class="sm:hidden pl-2 pr-13" />
+        <HairyNav class="lt-sm:hidden" />
+        <slot name="nav" />
+      </div>
+      <div class="flex-center order-1">
+        <HairyNavbarToggleDark />
+        <HairySearch />
+      </div>
+    </div>
+
+    <HairyNavbarBackground />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairyPageArchives.vue

@@ -1,59 +1,59 @@
-<script lang="ts" setup>
-import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
-import { usePostList } from 'valaxy'
-
-import { getArchiveLink } from '../utils'
-import { useYearArchives } from '../composables'
-
-const activities = useYearArchives()
-const posts = usePostList()
-</script>
-
-<template>
-  <HairyBreadcrumb class="mb-5" size="large" after="归档">
-    <HairyBreadcrumbItem to="/">
-      首页
-    </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem>
-      目前共计 {{ posts.length }} 篇文章
-    </HairyBreadcrumbItem>
-  </HairyBreadcrumb>
-  <ElTimeline>
-    <ElTimelineItem
-      v-for="(activity, index) in activities"
-      :key="index"
-      size="large"
-      hollow
-    >
-      <div class="activity inline-flex items-center">
-        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year))">
-          {{ activity.year }}
-        </HairyLink>
-        <span class="text-gray-5 mx-2">/</span>
-        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year, activity.month))">
-          {{ activity.month }}
-        </HairyLink>
-        <span class="text-gray-5 text-size-5 ml-1">({{ activity.count }}篇)</span>
-      </div>
-      <HairyTimelineContent v-for="(item, index) in activity.posts.slice(0, 2)" :key="index" :post="item" />
-      <div v-if="activity.posts.length > 2">
-        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
-          ....
-        </HairyLink>
-      </div>
-    </ElTimelineItem>
-  </ElTimeline>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: archive
-</route>
-
-<style lang="scss" scoped>
-.activity:hover {
-  .HairyLink {
-    color: var(--hy-c-primary);
-  }
-}
-</style>
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus'
+import { usePostList } from 'valaxy'
+
+import { getArchiveLink } from '../utils'
+import { useYearArchives } from '../composables'
+
+const activities = useYearArchives()
+const posts = usePostList()
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" after="归档">
+    <HairyBreadcrumbItem to="/">
+      首页
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem>
+      目前共计 {{ posts.length }} 篇文章
+    </HairyBreadcrumbItem>
+  </HairyBreadcrumb>
+  <ElTimeline>
+    <ElTimelineItem
+      v-for="(activity, index) in activities"
+      :key="index"
+      size="large"
+      hollow
+    >
+      <div class="activity inline-flex items-center">
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year))">
+          {{ activity.year }}
+        </HairyLink>
+        <span class="text-gray-5 mx-2">/</span>
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year, activity.month))">
+          {{ activity.month }}
+        </HairyLink>
+        <span class="text-gray-5 text-size-5 ml-1">({{ activity.count }}篇)</span>
+      </div>
+      <HairyTimelineContent v-for="(item, index) in activity.posts.slice(0, 2)" :key="index" :post="item" />
+      <div v-if="activity.posts.length > 2">
+        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
+          ....
+        </HairyLink>
+      </div>
+    </ElTimelineItem>
+  </ElTimeline>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: archive
+</route>
+
+<style lang="scss" scoped>
+.activity:hover {
+  .HairyLink {
+    color: var(--hy-c-primary);
+  }
+}
+</style>

package/components/HairyPageTags.vue

@@ -1,48 +1,48 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-import { useHairyTags } from '../composables'
-
-const router = useRouter()
-
-const { getTagStyle, tags } = useHairyTags({
-  primary: '#1bc9a6',
-})
-
-function displayTag(tag: string) {
-  router.push(`/tags/${tag}`)
-}
-</script>
-
-<template>
-  <div class="min-h-59vh flex-center flex-col">
-    <div text="center" class="text-size-2.5em pt-10 mb-5">
-      目前共计 {{ Array.from(tags).length }} 个标签
-    </div>
-    <div text="center" class="max-w-7xl flex flex-wrap justify-center items-center gap-2">
-      <a
-        v-for="[key, tag] in Array.from(tags).sort()"
-        :key="key" class="post-tag cursor-pointer"
-        :style="getTagStyle(tag.count)"
-        p="1"
-        @click="displayTag(key.toString())"
-      >
-        {{ key }}
-      </a>
-    </div>
-  </div>
-</template>
-
-<route lang="yaml">
-meta:
-  layout: tags
-</route>
-
-<style lang="scss" scoped>
-  a {
-    color: var(--yun-tag-color);
-    &:hover {
-      --un-text-opacity: 1;
-      color: var(--hy-c-primary-dark);
-    }
-  }
-</style>
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { useHairyTags } from '../composables'
+
+const router = useRouter()
+
+const { getTagStyle, tags } = useHairyTags({
+  primary: '#1bc9a6',
+})
+
+function displayTag(tag: string) {
+  router.push(`/tags/${tag}`)
+}
+</script>
+
+<template>
+  <div class="min-h-59vh flex-center flex-col">
+    <div text="center" class="text-size-2.5em pt-10 mb-5">
+      目前共计 {{ Array.from(tags).length }} 个标签
+    </div>
+    <div text="center" class="max-w-7xl flex flex-wrap justify-center items-center gap-2">
+      <a
+        v-for="[key, tag] in Array.from(tags).sort()"
+        :key="key" class="post-tag cursor-pointer"
+        :style="getTagStyle(tag.count)"
+        p="1"
+        @click="displayTag(key.toString())"
+      >
+        {{ key }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: tags
+</route>
+
+<style lang="scss" scoped>
+  a {
+    color: var(--yun-tag-color);
+    &:hover {
+      --un-text-opacity: 1;
+      color: var(--hy-c-primary-dark);
+    }
+  }
+</style>

package/components/HairyPosts.vue

@@ -1,54 +1,54 @@
-<script lang="ts" setup>
-import { computed, defineProps, ref, withDefaults } from 'vue'
-import type { Post } from 'valaxy'
-import { usePostList } from 'valaxy'
-import { useLayoutPost } from '../composables'
-
-const props = withDefaults(defineProps<{
-  type?: string
-  posts?: Post[]
-  curPage?: number
-  pagination?: boolean
-}>(), {
-  curPage: 1,
-  pagination: false,
-})
-const layout = useLayoutPost()
-
-const pageSize = ref(7)
-const routes = usePostList({ type: props.type || '' })
-const posts = computed<any[]>(() => props.posts || routes.value)
-const pagePosts = computed(() => posts.value.slice((props.curPage - 1) * pageSize.value, props.curPage * pageSize.value))
-const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts.value)
-</script>
-
-<template>
-  <div class="mt-8">
-    <HairyPostToggleLayout />
-    <HairyPostImageList v-if="layout.includes('image')" :posts="displayedPosts" />
-    <HairyPostTextsList v-else :posts="displayedPosts" />
-    <ValaxyPagination v-if="pagination" class="mb-6" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
-  </div>
-</template>
-
-<style lang="scss">
-.pagination {
-  font-size: 16px;
-}
-
-.pagination .prev.active,
-.pagination .next.active,
-.pagination .page-number.active {
-  font-weight: normal;
-  background: transparent;
-  color: var(--hy-c-primary);
-  cursor: default;
-}
-
-.pagination .prev:hover,
-.pagination .next:hover,
-.pagination .page-number:hover {
-  color: var(--va-c-bg);
-  background: rgba(143, 230, 213, 0.8);
-}
-</style>
+<script lang="ts" setup>
+import { computed, defineProps, ref, withDefaults } from 'vue'
+import type { Post } from 'valaxy'
+import { usePostList } from 'valaxy'
+import { useLayoutPost } from '../composables'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  posts?: Post[]
+  curPage?: number
+  pagination?: boolean
+}>(), {
+  curPage: 1,
+  pagination: false,
+})
+const layout = useLayoutPost()
+
+const pageSize = ref(7)
+const routes = usePostList({ type: props.type || '' })
+const posts = computed<any[]>(() => props.posts || routes.value)
+const pagePosts = computed(() => posts.value.slice((props.curPage - 1) * pageSize.value, props.curPage * pageSize.value))
+const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts.value)
+</script>
+
+<template>
+  <div class="mt-8">
+    <HairyPostToggleLayout />
+    <HairyPostImageList v-if="layout.includes('image')" :posts="displayedPosts" />
+    <HairyPostTextsList v-else :posts="displayedPosts" />
+    <ValaxyPagination v-if="pagination" class="mb-6" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
+  </div>
+</template>
+
+<style lang="scss">
+.pagination {
+  font-size: 16px;
+}
+
+.pagination .prev.active,
+.pagination .next.active,
+.pagination .page-number.active {
+  font-weight: normal;
+  background: transparent;
+  color: var(--hy-c-primary);
+  cursor: default;
+}
+
+.pagination .prev:hover,
+.pagination .next:hover,
+.pagination .page-number:hover {
+  color: var(--va-c-bg);
+  background: rgba(143, 230, 213, 0.8);
+}
+</style>