valaxy-theme-hairy 0.2.2 → 1.0.0

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}

@@ -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 { 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>

package/components/parts/HairyLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+defineProps<{
+  type?: 'white' | 'normal'
+  bordered?: boolean
+}>()
+</script>
+
+<template>
+  <a
+    class="cursor-pointer" :class="[
+      type === 'white'
+        ? 'text-black hover:text-primary dark:text-white'
+        : 'text:text-primary-light hover:text-primary-dark',
+      bordered && 'border-b border-dashed hover:border-primary',
+    ]"
+  >
+    <slot />
+  </a>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -2,7 +2,8 @@
 import type { HairyTheme } from 'valaxy-theme-hairy'
 import { useThemeConfig } from 'valaxy'
 import { computed } from 'vue'
-const themeConfig = useThemeConfig<HairyTheme>()
+
+const themeConfig = useThemeConfig<HairyTheme.Config>()
 const nav = computed(() => themeConfig.value.nav || [])
 </script>
 

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

@@ -2,21 +2,28 @@
 import type { NavItem } from 'valaxy-theme-hairy'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ejectWindow } from '../utils'
+import { storeToRefs } from 'pinia'
+import { ejectWindow } from '../../utils'
+import { useGlobalStore } from '../../store'
+
 const props = defineProps<{
   item: NavItem
 }>()
+const { showDrawer } = storeToRefs(useGlobalStore())
 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 router = useRouter()
 const route = useRoute()
-const toLink = () => {
+
+function toLink() {
   if (isLink.value)
     return ejectWindow(props.item.link!)
   if (props.item.link)
     router.push(props.item.link)
+  showDrawer.value = false
 }
+
 const isActive = computed(() => {
   if (isLink.value)
     return false
@@ -27,14 +34,14 @@ const isActive = computed(() => {
 </script>
 
 <template>
-  <div class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', isActive && 'text-primary active']">
+  <button class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', isActive && 'text-primary active']">
     <div class="flex items-center hover:text-primary" @click="toLink">
       <div v-if="item.icon" class="mr-1 icon" :class="item.icon" />
       <div class="question">
         {{ item.text }}
       </div>
     </div>
-  </div>
+  </button>
 </template>
 
 <style lang="scss" scoped></style>

package/components/parts/HairyOutline.vue

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

package/components/parts/HairyOutlineItem.vue

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

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
 
-const config = useConfig()
+const config = useSiteConfig()
 </script>
 
 <template>