valaxy-theme-hairy 1.0.1 → 1.0.2

package/composables/outline.ts

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

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

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

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

package/layouts/archives.vue

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

package/layouts/categories.vue

@@ -1,13 +1,13 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <HairyContainer>
-    <HairyNavbar />
-    <HairyHeader title="分类" />
-    <HairyBody>
-      <router-view />
-    </HairyBody>
-    <HairyFooter />
-  </HairyContainer>
-</template>
+<script lang="ts" setup>
+</script>
+
+<template>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader title="分类" />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
+</template>

package/layouts/default.vue

@@ -1,15 +1,13 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <HairyContainer>
-    <HairyNavbar />
-    <HairyHeader />
-    <HairyBody>
-      <router-view />
-    </HairyBody>
-    <HairyFooter />
-  </HairyContainer>
-</template>
-
-
+<script lang="ts" setup>
+</script>
+
+<template>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader />
+    <HairyBody>
+      <router-view />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
+</template>

package/layouts/home.vue

@@ -1,33 +1,33 @@
-<script lang="ts" setup>
-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>
-  <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>
+<script lang="ts" setup>
+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>
+  <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>

package/layouts/post.vue

@@ -1,54 +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/theme-chalk/el-tag.css'
-
-defineProps<{
-  header?: {
-    title?: string
-    headline?: string
-    description?: string
-  }
-}>()
-
-const router = useRouter()
-const post = useFrontmatter()
-
-function displayTag(tag: string) {
-  router.push(`/tags/${tag}`)
-}
-</script>
-
-<template>
-  <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>
+<script lang="ts" setup>
+import { ElTag, dayjs } from 'element-plus'
+import { useFrontmatter } from 'valaxy'
+import { useRouter } from 'vue-router'
+
+import 'element-plus/theme-chalk/el-tag.css'
+
+defineProps<{
+  header?: {
+    title?: string
+    headline?: string
+    description?: string
+  }
+}>()
+
+const router = useRouter()
+const post = useFrontmatter()
+
+function displayTag(tag: string) {
+  router.push(`/tags/${tag}`)
+}
+</script>
+
+<template>
+  <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>

package/layouts/tag.vue

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

package/layouts/tags.vue

@@ -1,14 +1,10 @@
-<script lang="ts" setup>
-console.log('---')
-</script>
-
-<template>
-  <HairyContainer>
-    <HairyNavbar />
-    <HairyHeader title="所有标签" />
-    <HairyBody>
-      <HairyPageTags />
-    </HairyBody>
-    <HairyFooter />
-  </HairyContainer>
-</template>
+<template>
+  <HairyContainer>
+    <HairyNavbar />
+    <HairyHeader title="所有标签" />
+    <HairyBody>
+      <HairyPageTags />
+    </HairyBody>
+    <HairyFooter />
+  </HairyContainer>
+</template>