valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/HairySearch.vue

@@ -1,201 +1,201 @@
-<script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-import { computed } from 'vue'
-
-const siteConfig = useSiteConfig()
-const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
-const isFuse = computed(() => siteConfig.value.search.type === 'fuse')
-</script>
-
-<template>
-  <HairyAlgoliaSearch v-if="isAlgolia" />
-  <HairyFuseSearch v-if="isFuse" />
-</template>
-
-<style lang="scss">
-.VPNavBarSearch {
-  display: flex;
-  align-items: center;
-}
-
-@media (min-width: 768px) {
-  .VPNavBarSearch {
-    flex-grow: 1;
-    padding-left: 24px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPNavBarSearch {
-    padding-left: 32px;
-  }
-}
-
-.DocSearch {
-  --docsearch-primary-color: var(--hy-c-brand);
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-text-color: var(--hy-c-text-1);
-  --docsearch-muted-color: var(--hy-c-text-2);
-  --docsearch-searchbox-shadow: none;
-  --docsearch-searchbox-focus-background: transparent;
-  --docsearch-key-gradient: transparent;
-  --docsearch-key-shadow: none;
-  --docsearch-modal-background: var(--hy-c-bg-soft);
-  --docsearch-footer-background: var(--hy-c-bg);
-}
-
-.dark .DocSearch {
-  --docsearch-modal-shadow: none;
-  --docsearch-footer-shadow: none;
-  --docsearch-logo-color: var(--hy-c-text-2);
-  --docsearch-hit-background: var(--hy-c-bg-mute);
-  --docsearch-hit-color: var(--hy-c-text-2);
-  --docsearch-hit-shadow: none;
-}
-
-.DocSearch-Button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  width: 32px;
-  height: 55px;
-  background: transparent;
-  transition: all 0.25s;
-}
-
-.DocSearch-Button:hover {
-  background: transparent;
-}
-
-.DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.DocSearch-Button:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    /* background-color: var(--hy-c-bg-alt); */
-  }
-
-  .DocSearch-Button:hover {
-    background-color: rgba(255, 255, 255, 0.4);
-    border-color: var(--hy-c-brand);
-  }
-
-  .dark {
-    .DocSearch-Button:hover {
-      background-color: transparent;
-      border-color: var(--hy-c-brand);
-    }
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
-  position: relative;
-  width: 1em;
-  height: 1em;
-  color: var(--hy-c-text-1);
-  fill: currentColor;
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--hy-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
-    color: var(--hy-c-text-2);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--hy-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--hy-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  display: none;
-  min-width: auto;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--hy-c-divider);
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-  min-width: 0;
-  width: auto;
-  height: 22px;
-  line-height: 22px;
-  font-size: 12px;
-  font-weight: 500;
-  transition: color 0.5s, border-color 0.5s;
-}
-
-.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key {
-  border-right: 1px solid var(--hy-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-}
-
-.DocSearch-Form {
-  border: 1px solid var(--hy-c-brand);
-  background-color: var(--hy-c-white);
-}
-
-.dark .DocSearch-Form {
-  background-color: var(--hy-c-bg-mute);
-}
-
-.dark .DocSearch-Footer {
-  border-top: 1px solid var(--hy-c-divider);
-}
-</style>
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+import { computed } from 'vue'
+
+const siteConfig = useSiteConfig()
+const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
+const isFuse = computed(() => siteConfig.value.search.type === 'fuse')
+</script>
+
+<template>
+  <HairyAlgoliaSearch v-if="isAlgolia" />
+  <HairyFuseSearch v-if="isFuse" />
+</template>
+
+<style lang="scss">
+.VPNavBarSearch {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .VPNavBarSearch {
+    flex-grow: 1;
+    padding-left: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPNavBarSearch {
+    padding-left: 32px;
+  }
+}
+
+.DocSearch {
+  --docsearch-primary-color: var(--hy-c-brand);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-text-color: var(--hy-c-text-1);
+  --docsearch-muted-color: var(--hy-c-text-2);
+  --docsearch-searchbox-shadow: none;
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+  --docsearch-modal-background: var(--hy-c-bg-soft);
+  --docsearch-footer-background: var(--hy-c-bg);
+}
+
+.dark .DocSearch {
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--hy-c-text-2);
+  --docsearch-hit-background: var(--hy-c-bg-mute);
+  --docsearch-hit-color: var(--hy-c-text-2);
+  --docsearch-hit-shadow: none;
+}
+
+.DocSearch-Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 32px;
+  height: 55px;
+  background: transparent;
+  transition: all 0.25s;
+}
+
+.DocSearch-Button:hover {
+  background: transparent;
+}
+
+.DocSearch-Button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.DocSearch-Button:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    justify-content: flex-start;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding: 0 10px 0 12px;
+    width: 100%;
+    height: 40px;
+    /* background-color: var(--hy-c-bg-alt); */
+  }
+
+  .DocSearch-Button:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-color: var(--hy-c-brand);
+  }
+
+  .dark {
+    .DocSearch-Button:hover {
+      background-color: transparent;
+      border-color: var(--hy-c-brand);
+    }
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  color: var(--hy-c-text-1);
+  fill: currentColor;
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--hy-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Search-Icon {
+    top: 1px;
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+    color: var(--hy-c-text-2);
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Placeholder {
+  display: none;
+  margin-top: 2px;
+  padding: 0 16px 0 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--hy-c-text-2);
+  transition: color 0.5s;
+}
+
+.DocSearch-Button:hover .DocSearch-Button-Placeholder {
+  color: var(--hy-c-text-1);
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Placeholder {
+    display: inline-block;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Keys {
+  display: none;
+  min-width: auto;
+}
+
+@media (min-width: 768px) {
+  .DocSearch-Button .DocSearch-Button-Keys {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Key {
+  display: block;
+  margin: 2px 0 0 0;
+  border: 1px solid var(--hy-c-divider);
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  padding-left: 6px;
+  min-width: 0;
+  width: auto;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.5s, border-color 0.5s;
+}
+
+.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key {
+  border-right: 1px solid var(--hy-c-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  padding-left: 2px;
+  padding-right: 6px;
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--hy-c-brand);
+  background-color: var(--hy-c-white);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--hy-c-bg-mute);
+}
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--hy-c-divider);
+}
+</style>

package/components/HairySidebar.vue

@@ -1,30 +1,30 @@
-<script lang="ts" setup>
-import { useSiteConfig, useThemeConfig } from 'valaxy'
-import { computed } from 'vue'
-import type { HairyTheme } from 'valaxy-theme-hairy'
-
-const config = useSiteConfig()
-const theme = useThemeConfig<HairyTheme.Config>()
-
-const name = computed(() => theme.value.user?.name || config.value.author.name)
-const description = computed(() => theme.value.user?.description || config.value.description)
-</script>
-
-<template>
-  <div class="pt-5 animate__animated animate__fadeIn relative z-1">
-    <div class="flex flex-col items-center">
-      <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar">
-      <div class="leading-loose mt-2">
-        {{ name }}
-      </div>
-      <div class="text-coolgray">
-        {{ description }}
-      </div>
-    </div>
-    <HairyUserNav />
-  </div>
-</template>
-
-<style lang="scss">
-
-</style>
+<script lang="ts" setup>
+import { useSiteConfig, useThemeConfig } from 'valaxy'
+import { computed } from 'vue'
+import type { HairyTheme } from 'valaxy-theme-hairy'
+
+const config = useSiteConfig()
+const theme = useThemeConfig<HairyTheme.Config>()
+
+const name = computed(() => theme.value.user?.name || config.value.author.name)
+const description = computed(() => theme.value.user?.description || config.value.description)
+</script>
+
+<template>
+  <div class="pt-5 animate__animated animate__fadeIn relative z-1">
+    <div class="flex flex-col items-center">
+      <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar">
+      <div class="leading-loose mt-2">
+        {{ name }}
+      </div>
+      <div class="text-coolgray">
+        {{ description }}
+      </div>
+    </div>
+    <HairyUserNav />
+  </div>
+</template>
+
+<style lang="scss">
+
+</style>

package/components/HairyTabbar.vue

@@ -1,56 +1,56 @@
-<script lang="ts" setup>
-import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index'
-import 'element-plus/theme-chalk/el-tabs.css'
-import 'element-plus/theme-chalk/el-tab-pane.css'
-import { computed, provide, ref } from 'vue'
-
-import type { DefaultTheme } from 'valaxy/types'
-import { useFrontmatter, useThemeConfig } from 'valaxy'
-
-const active = ref('aside')
-
-const frontmatter = useFrontmatter()
-const themeConfig = useThemeConfig()
-
-const pageOutline = computed<DefaultTheme.Config['outline']>(
-  () => frontmatter.value.outline ?? themeConfig.value.outline,
-)
-
-const pageOutlineNotUndefined = computed(() =>
-  typeof pageOutline.value !== 'undefined',
-)
-
-provide('HairyUserTab:active', active)
-</script>
-
-<template>
-  <ElTabs v-model="active" class="pt-3">
-    <ElTabPane v-if="pageOutlineNotUndefined" name="aside">
-      <template #label>
-        <div class="flex items-center">
-          <div class="i-ri-list-check-2" />
-          <span class="ml-1">Aside</span>
-        </div>
-      </template>
-      <HairyOutline />
-    </ElTabPane>
-    <ElTabPane label="Series" name="series">
-      <template #label>
-        <div class="flex items-center gap-1">
-          <div class="i-ri-flow-chart" />
-          <span class="ml-1">Series</span>
-        </div>
-      </template>
-      <HairyArticleSeries />
-    </ElTabPane>
-    <ElTabPane label="User" name="user">
-      <template #label>
-        <div class="flex items-center gap-1">
-          <div class="i-ri-user-line" />
-          <span class="ml-1">User</span>
-        </div>
-      </template>
-      <HairySidebar />
-    </ElTabPane>
-  </ElTabs>
-</template>
+<script lang="ts" setup>
+import { ElTabPane, ElTabs } from 'element-plus'
+import 'element-plus/theme-chalk/el-tabs.css'
+import 'element-plus/theme-chalk/el-tab-pane.css'
+import { computed, provide, ref } from 'vue'
+
+import type { DefaultTheme } from 'valaxy/types'
+import { useFrontmatter, useThemeConfig } from 'valaxy'
+
+const active = ref('aside')
+
+const frontmatter = useFrontmatter()
+const themeConfig = useThemeConfig()
+
+const pageOutline = computed<DefaultTheme.Config['outline']>(
+  () => frontmatter.value.outline ?? themeConfig.value.outline,
+)
+
+const pageOutlineNotUndefined = computed(() =>
+  typeof pageOutline.value !== 'undefined',
+)
+
+provide('HairyUserTab:active', active)
+</script>
+
+<template>
+  <ElTabs v-model="active" class="pt-3">
+    <ElTabPane v-if="pageOutlineNotUndefined" name="aside">
+      <template #label>
+        <div class="flex items-center">
+          <div class="i-ri-list-check-2" />
+          <span class="ml-1">Aside</span>
+        </div>
+      </template>
+      <HairyOutline />
+    </ElTabPane>
+    <ElTabPane label="Series" name="series">
+      <template #label>
+        <div class="flex items-center gap-1">
+          <div class="i-ri-flow-chart" />
+          <span class="ml-1">Series</span>
+        </div>
+      </template>
+      <HairyArticleSeries />
+    </ElTabPane>
+    <ElTabPane label="User" name="user">
+      <template #label>
+        <div class="flex items-center gap-1">
+          <div class="i-ri-user-line" />
+          <span class="ml-1">User</span>
+        </div>
+      </template>
+      <HairySidebar />
+    </ElTabPane>
+  </ElTabs>
+</template>

package/components/PageTags.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>