valaxy-theme-hairy 0.2.2 → 1.0.1

package/components/{HairyNavSearch.vue → HairySearch.vue}

@@ -1,89 +1,18 @@
 <script lang="ts" setup>
-import '@docsearch/css'
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
+import { computed } from 'vue'
 
-const HairyAlgoliaSearchBox = __ALGOLIA__
-  ? defineAsyncComponent(() => import('./HairyAlgoliaSearchBox.vue'))
-  : () => null
-
-const config = useConfig()
-const search = computed(() => config.value.search)
-const enable = computed(() => search.value.algolia.enable)
-
-// to avoid loading the docsearch js upfront (which is more than 1/3 of the
-// payload), we delay initializing it until the user has actually clicked or
-// hit the hotkey to invoke it.
-const loaded = ref(false)
-
-const metaKey = ref()
-
-onMounted(() => {
-  if (!search.value.enable || !search.value.algolia.enable)
-    return
-
-  // meta key detect (same logic as in @docsearch/js)
-  metaKey.value.textContent = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
-    ? '⌘'
-    : 'Ctrl'
-
-  const handleSearchHotKey = (e: KeyboardEvent) => {
-    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault()
-      load()
-      remove()
-    }
-  }
-  function remove() {
-    window.removeEventListener('keydown', handleSearchHotKey)
-  }
-
-  window.addEventListener('keydown', handleSearchHotKey)
-  onUnmounted(remove)
-})
-function load() {
-  if (!loaded.value)
-    loaded.value = true
-}
+const siteConfig = useSiteConfig()
+const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
+const isFuse = computed(() => siteConfig.value.search.type === 'fuse')
 </script>
 
 <template>
-  <div v-if="enable" class="VPNavBarSearch">
-    <HairyAlgoliaSearchBox v-if="loaded" />
-    <div v-else id="docsearch" @click="load">
-      <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>
-        <span class="DocSearch-Button-Keys">
-          <kbd ref="metaKey" class="DocSearch-Button-Key">Meta</kbd>
-          <kbd class="DocSearch-Button-Key">K</kbd>
-        </span>
-      </button>
-    </div>
-  </div>
+  <HairyAlgoliaSearch v-if="isAlgolia" />
+  <HairyFuseSearch v-if="isFuse" />
 </template>
 
-<style>
+<style lang="scss">
 .VPNavBarSearch {
   display: flex;
   align-items: center;
@@ -133,7 +62,7 @@ function load() {
   width: 32px;
   height: 55px;
   background: transparent;
-  transition: border-color 0.25s;
+  transition: all 0.25s;
 }
 
 .DocSearch-Button:hover {
@@ -146,7 +75,7 @@ function load() {
 }
 
 .DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
+  outline: none;
 }
 
 @media (min-width: 768px) {
@@ -161,8 +90,15 @@ function load() {
   }
 
   .DocSearch-Button:hover {
+    background-color: rgba(255, 255, 255, 0.4);
     border-color: var(--hy-c-brand);
-    /* background: var(--hy-c-bg-alt); */
+  }
+
+  .dark {
+    .DocSearch-Button:hover {
+      background-color: transparent;
+      border-color: var(--hy-c-brand);
+    }
   }
 }
 
@@ -242,7 +178,7 @@ function load() {
   transition: color 0.5s, border-color 0.5s;
 }
 
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+.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;
@@ -250,10 +186,6 @@ function load() {
   padding-right: 6px;
 }
 
-.dark .DocSearch-Footer {
-  border-top: 1px solid var(--hy-c-divider);
-}
-
 .DocSearch-Form {
   border: 1px solid var(--hy-c-brand);
   background-color: var(--hy-c-white);
@@ -262,4 +194,8 @@ function load() {
 .dark .DocSearch-Form {
   background-color: var(--hy-c-bg-mute);
 }
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--hy-c-divider);
+}
 </style>

package/components/{HairyUserCard.vue → HairySidebar.vue}

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useConfig, useThemeConfig } from 'valaxy'
+import { useSiteConfig, useThemeConfig } from 'valaxy'
 import { computed } from 'vue'
 import type { HairyTheme } from 'valaxy-theme-hairy'
 
-const config = useConfig()
-const theme = useThemeConfig<HairyTheme>()
+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)
@@ -13,7 +13,7 @@ const description = computed(() => theme.value.user?.description || config.value
 <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" />
+      <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar">
       <div class="leading-loose mt-2">
         {{ name }}
       </div>

package/components/HairyTabbar.vue

@@ -0,0 +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>

package/components/PageTags.vue

@@ -0,0 +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>

package/components/ValaxyMain.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
 
 defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
-const config = useConfig()
+const siteConfig = useSiteConfig()
 </script>
 
 <template>
@@ -34,7 +34,7 @@ const config = useConfig()
 
         <slot name="main-nav-after" />
 
-        <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment" />
+        <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment" />
 
         <slot name="footer" />
       </slot>

package/components/navbar/HairyNav.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HairyTheme } from 'valaxy-theme-hairy'
+import { useThemeConfig } from 'valaxy'
+import { computed } from 'vue'
+
+const themeConfig = useThemeConfig<HairyTheme.Config>()
+const nav = computed(() => themeConfig.value.nav || [])
+</script>
+
+<template>
+  <div class="flex items-center h-12.5">
+    <HairyNavItem v-for="(item, index) in nav" :key="index" :item="item" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/navbar/HairyNavExpand.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../../store'
+
+const { showDrawer } = storeToRefs(useGlobalStore())
+</script>
+
+<template>
+  <button class="yun-icon-btn lt-sm:text-size-xl" @click="showDrawer = !showDrawer">
+    <div i="ri-menu-fill" />
+  </button>
+</template>

package/components/navbar/HairyNavItem.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { NavItem } from 'valaxy-theme-hairy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps<{
+  item: NavItem
+}>()
+const urlReg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
+const isLink = computed(() => urlReg.test(props.item?.link || ''))
+const isPointer = computed(() => Boolean(props.item.link) || isLink.value)
+
+const route = useRoute()
+
+const active = computed(() => {
+  return !isLink.value && (
+    props.item.link === '/'
+      ? route.path === props.item.link
+      : route.path.includes(props.item.link!)
+  )
+})
+</script>
+
+<template>
+  <a href="" class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', active && 'text-primary active']">
+    <HairyLink class="flex items-center" type="white" :href="item.link" :target="isLink ? '__blank' : ''">
+      <div v-if="item.icon" class="mr-1 icon" :class="item.icon" />
+      <div class="question">
+        {{ item.text }}
+      </div>
+    </HairyLink>
+  </a>
+</template>
+
+<style lang="scss" scoped></style>

package/components/navbar/HairyNavbarBackground.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="HairyNavBackground absolute inset-0 bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 blur-4" />
+</template>
+
+<style>
+
+</style>

package/components/navbar/HairyNavbarSearch.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div />
+</template>
+
+<style lang="scss" scoped></style>

package/components/{HairyNavTitle.vue → navbar/HairyNavbarTitle.vue}

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
-const config = useConfig()
-const hrefToUrl = () => {
+import { useSiteConfig } from 'valaxy'
+
+const config = useSiteConfig()
+
+function hrefToUrl() {
   location.href = config.value.url
 }
 </script>

package/components/navbar/HairyNavbarToggleDark.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { useAppStore } from 'valaxy'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const dark = computed(() => appStore.isDark)
+
+const themeTitle = computed(() => {
+  return dark.value ? t('button.toggle_light') : t('button.toggle_dark')
+})
+</script>
+
+<template>
+  <button
+    class="yun-icon-btn bg-light-1 p-1 dark:bg-transparent rounded-5 lt-sm:text-size-xl"
+    :title="themeTitle" :style="{ color: dark ? '' : '#f1cb64' }" @click="($event) => appStore.toggleDarkWithTransition($event, { duration: 600, easing: 'ease-in-out' })"
+  >
+    <div i="ri-sun-line dark:ri-moon-line" />
+  </button>
+</template>

package/components/{HairyBreadcrumb.vue → parts/HairyBreadcrumb.vue}

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ElBreadcrumb, breadcrumbProps } from 'element-plus/es/components/breadcrumb/index'
-import 'element-plus/es/components/breadcrumb/style/index'
+import 'element-plus/theme-chalk/el-breadcrumb.css'
 import type { PropType } from 'vue'
 import { computed } from 'vue'
 
@@ -26,7 +26,7 @@ const text = computed(() => `"${props.after || ''}"`)
   }
   .el-breadcrumb .el-breadcrumb__inner,
   .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
-    color: initial;
+    color: var(--va-c-text);
   }
   .el-breadcrumb .el-breadcrumb__inner.is-link {
     @apply border-b border-dashed hover:border-primary hover:text-primary transition-all cursor-pointer;

package/components/{HairyBreadcrumbItem.vue → parts/HairyBreadcrumbItem.vue}

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ElBreadcrumbItem, breadcrumbItemProps } from 'element-plus/es/components/breadcrumb/index'
+
 defineProps(breadcrumbItemProps)
 </script>
 
@@ -8,7 +9,3 @@ defineProps(breadcrumbItemProps)
     <slot />
   </ElBreadcrumbItem>
 </template>
-
-<style lang="scss" scoped>
-
-</style>

package/components/{lib/fish.js → parts/HairyFootFish.js}

@@ -1,8 +1,5 @@
+/* eslint-disable ts/no-use-before-define */
 /* eslint-disable eqeqeq */
-/* eslint-disable no-var */
-/* eslint-disable vars-on-top */
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable no-undef */
 
 class RENDERER {
   ENABLE = false
@@ -185,7 +182,7 @@ class RENDERER {
   }
 }
 
-var SURFACE_POINT = function (renderer, x) {
+const SURFACE_POINT = function (renderer, x) {
   this.renderer = renderer
   this.x = x
   this.init()
@@ -236,7 +233,7 @@ SURFACE_POINT.prototype = {
   },
 }
 
-var FISH = function (renderer) {
+const FISH = function (renderer) {
   this.renderer = renderer
   this.init()
 }
@@ -247,7 +244,8 @@ FISH.prototype = {
     this.direction = Math.random() < 0.5
     this.x = this.direction ? this.renderer.width + this.renderer.THRESHOLD : -this.renderer.THRESHOLD
     this.previousY = this.y
-    this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1)
+    this.vx = this.getRandomValue(4, 7) * (this.direction ? -1 : 1)
+
     if (this.renderer.reverse) {
       this.y = this.getRandomValue((this.renderer.height * 1) / 10, (this.renderer.height * 4) / 10)
       this.vy = this.getRandomValue(2, 5)

package/components/parts/HairyFootFish.vue

@@ -0,0 +1,38 @@
+<!-- eslint-disable no-new -->
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useScriptTag } from '@vueuse/core'
+import { useAppStore } from 'valaxy'
+import { RENDERER } from './HairyFootFish'
+
+const fishContainer = ref()
+
+const tag = useScriptTag('https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js')
+const appStore = useAppStore()
+const dark = computed(() => appStore.isDark)
+
+let renderer: RENDERER
+
+function reset() {
+  const color = dark.value ? 'hsl(0, 0%, 95%)' : 'hsl(0, 0%, 80%)'
+  if (!renderer)
+    renderer = new RENDERER(color)
+  else
+    renderer.setColor(color)
+}
+
+onMounted(() => {
+  tag.load()
+    .then(reset)
+})
+watch(dark, reset)
+</script>
+
+<template>
+  <div
+    id="jsi-flying-fish-container"
+    ref="fishContainer"
+    class="z-1 relative"
+    style="margin-top: -60px;"
+  />
+</template>

package/components/{HairyPostTitle.vue → parts/HairyHeadHero.vue}

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
 import { computed } from 'vue'
+
 const props = defineProps<{
-  headline?: String
-  title: String
+  headline?: string
+  title: string
   description?: string
 }>()
 
 const post = useFrontmatter()
 
-const headline = computed(() => post.value.headline || props.headline)
-const title = computed(() => post.value.title || props.title)
+const headline = computed(() => props.headline || post.value.headline)
+const title = computed(() => props.title || post.value.title)
 </script>
 
 <template>
-  <div class="flex-center flex-col text-shadow-lg text-white">
+  <div class="flex-center flex-col text-shadow-lg text-white mx-12px text-center">
     <div v-if="headline" class="font-frederick text-size-3.35em lt-sm:text-size-3rem leading-snug">
       {{ headline }}
     </div>

package/components/{HairyWaves.vue → parts/HairyHeadWaves.vue}

@@ -3,14 +3,14 @@
     class="waves w-full min-h-100px max-h-150px"
     viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"
   >
-    <defs>
+    <defs>rgba(250,250,250,var(--un-bg-opacity))
       <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
     </defs>
     <g class="parallax">
-      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="0" fill="var(--hy-c-waves-dimm-1)" />
-      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="3" fill="var(--hy-c-waves-dimm-2)" />
-      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="5" fill="var(--hy-c-waves-dimm-3)" />
-      <use class="transition-all duration-200" xlink:href="#gentle-wave" x="48" y="7" fill="var(--hy-c-waves-dimm)" />
+      <use class="" xlink:href="#gentle-wave" x="48" y="0" fill="var(--hy-c-waves-dimm-1)" />
+      <use class="" xlink:href="#gentle-wave" x="48" y="3" fill="var(--hy-c-waves-dimm-2)" />
+      <use class="" xlink:href="#gentle-wave" x="48" y="5" fill="var(--hy-c-waves-dimm-3)" />
+      <use class="" xlink:href="#gentle-wave" x="48" y="7" fill="var(--hy-c-waves-dimm)" />
     </g>
   </svg>
 </template>

package/components/parts/HairyImageGlobal.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { provide, useCssVars } 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 './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,
+}))
+
+// TODO global find images
+// 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: [url],
+    initialIndex: 0,
+  })
+}
+
+provide('HairyImageGroup:preview', preview)
+</script>
+
+<template>
+  <slot />
+</template>

package/components/{HairyImageViewer.vue → parts/HairyImageViewer.vue}

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { useOverlayMeta } from 'unoverlay-vue'
+import { usePrograms } from '@overlastic/vue'
 import { ElImageViewer, imageViewerProps } from 'element-plus/es/components/image-viewer/index'
-import 'element-plus/es/components/image-viewer/style/index'
+import 'element-plus/theme-chalk/el-image-viewer.css'
 import { onMounted, onUnmounted } from 'vue'
+
 const props = defineProps(imageViewerProps)
 
-const { visible, confirm } = useOverlayMeta()
+const { visible, resolve } = usePrograms()
 
 onMounted(() => {
   document.body.style.overflow = 'hidden'
@@ -17,6 +18,6 @@ onUnmounted(() => {
 
 <template>
   <div class="HairyImageViewer fixed inset-0 z-2000">
-    <ElImageViewer v-if="visible" v-bind="props" @close="confirm()"></ElImageViewer>
+    <ElImageViewer v-if="visible" v-bind="props" @close="resolve()" />
   </div>
 </template>