valaxy-theme-hairy 0.0.1

package/components/HairyCarousel.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import images from '@hairy:images:home'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, EffectFade } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/autoplay'
+import 'swiper/css/effect-fade'
+
+images.sort(() => Math.random() - 0.5)
+</script>
+
+<template>
+  <swiper
+    effect="fade" :speed="2000" :fade-effect="{ crossFade: true }" :modules="[Autoplay, EffectFade]"
+    :slides-per-view="1" :space-between="50" :autoplay="{
+      delay: 4000,
+    }" class="HairyCarousel swiper-no-swiping"
+  >
+    <swiper-slide v-for="(item, index) in images" :key="index" class="w-full h-full">
+      <img class="w-full h-full object-cover" :src="item" />
+    </swiper-slide>
+  </swiper>
+</template>
+
+<style lang="scss">
+.HairyCarousel {
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .2);
+    z-index: 2;
+    transition: all .2s ease-in-out 0s;
+  }
+}
+.dark {
+  .HairyCarousel::before {
+    background-color: rgba(0,0,0,.4);
+  }
+}
+</style>

package/components/HairyHeader.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { useContext } from '../hooks/useContext'
+
+defineProps<{
+  headline?: String
+  title?: String
+  description?: string
+}>()
+
+const { headerRef } = useContext()
+</script>
+
+<template>
+  <header ref="headerRef" class="HairyHeader relative">
+    <div class="h-30vh lt-md:h-60vh min-h-80 flex-center">
+      <HairyPostTitle v-if="title" class="relative z-2" :title="title" v-bind="$props">
+        <template #description>
+          <slot name="description" />
+        </template>
+      </HairyPostTitle>
+    </div>
+    <HairyCarousel class="inset-0" style="position: absolute" />
+    <HairyWaves class="relative z-10" />
+  </header>
+</template>
+
+<style>
+.HairyHeader {
+  position: relative;
+}
+</style>

package/components/HairyImage.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { ElImage, imageProps } from 'element-plus/es/components/image/index'
+import 'element-plus/es/components/image/style/index'
+import { inject } from 'vue'
+const props = defineProps(imageProps)
+
+const preview = inject<(url: string) => void>('HairyImageGroup:preview')
+</script>
+
+<template>
+  <ElImage v-bind="props" class="HairyImage" :class="[preview && 'cursor-pointer rounded']" @click="preview?.(src)" />
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairyImageGroup.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { computed, provide, useCssVars, useSlots } from 'vue'
+import { executeOverlay } from 'unoverlay-vue'
+import type { ImageViewerProps } from 'element-plus/es/components/image-viewer/index'
+import type { AtWillNumber } from '@hairy/libcore'
+import { atWillToUnit } from '@hairy/libcore'
+import HairyImageViewer from './HairyImageViewer.vue'
+
+const props = withDefaults(defineProps<{
+  row?: AtWillNumber
+  col?: AtWillNumber
+  gap?: AtWillNumber
+  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[],
+)
+
+const preview = (url: string) => {
+  const initialIndex = paths.value.findIndex(v => v === url) || 0
+  executeOverlay<Partial<ImageViewerProps>>(HairyImageViewer, {
+    props: {
+      urlList: paths.value,
+      initialIndex,
+    },
+  })
+}
+
+provide('HairyImageGroup:preview', preview)
+</script>
+
+<template>
+  <div class="HairyImageGroup">
+    <slot></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/HairyImageViewer.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useOverlayMeta } from 'unoverlay-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()
+
+onMounted(() => {
+  document.body.style.overflow = 'hidden'
+})
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <div class="HairyImageViewer fixed inset-0 z-2000">
+    <ElImageViewer v-if="visible" v-bind="props" @close="confirm()"></ElImageViewer>
+  </div>
+</template>

package/components/HairyLayout.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+defineProps<{
+  header?: {
+    title?: string
+    headline?: string
+    description?: string
+  }
+}>()
+</script>
+
+<template>
+  <div class="HairyLayout">
+    <HairyNav />
+    <HairyHeader v-bind="header">
+      <template #description>
+        <slot name="header-description" />
+      </template>
+    </HairyHeader>
+    <HairyBody>
+      <slot />
+
+      <template v-if="$slots['body-slide']" #slide>
+        <slot name="body-slide" />
+      </template>
+    </HairyBody>1
+    <HairyBackToTop />
+    <HairyMeting />
+  </div>
+</template>

package/components/HairyLink.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <span class="HairyLink cursor-pointer border-b border-dashed hover:border-primary hover:text-primary transition-all">
+    <slot />
+  </span>
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairyMenu.vue

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

package/components/HairyMenuItem.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { NavItem } from 'valaxy-theme-hairy'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ejectWindow } from '../utils'
+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 router = useRouter()
+const route = useRoute()
+const toLink = () => {
+  if (isLink.value)
+    return ejectWindow(props.item.link!)
+  if (props.item.link)
+    router.push(props.item.link)
+}
+const isActive = computed(() => {
+  if (isLink.value)
+    return false
+  if (props.item.link === '/')
+    return route.path === props.item.link
+  return route.path.includes(props.item.link!)
+})
+</script>
+
+<template>
+  <div 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>
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairyMeting.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useAplayer, useThemeConfig } from 'valaxy'
+
+import type { HairyTheme } from 'valaxy-theme-hairy'
+
+const config = useThemeConfig<HairyTheme>()
+
+if (config.value.meting)
+  useAplayer()
+</script>
+
+<template>
+  <meting-js
+    v-if="config.meting && config.meting.fixed !== false"
+    v-bind="config.meting"
+    :fixed="true"
+  >
+  </meting-js>
+</template>

package/components/HairyNav.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useScroll, whenever } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { useHeaderHeight } from '../hooks/useHeaderHeight'
+
+const headerHeight = useHeaderHeight()
+const cache = ref<'top' | 'bottom'>('top')
+const scroll = useScroll(document)
+
+whenever(() => scroll.directions.top, () => {
+  cache.value = 'top'
+})
+whenever(() => scroll.directions.bottom, () => {
+  cache.value = 'bottom'
+})
+
+const show = computed(() => {
+  return scroll.y.value < (headerHeight.value / 2) || cache.value === 'top'
+})
+</script>
+
+<template>
+  <div class="HairyNav fixed w-full h-3.125rem top-0 z-20 opacity-0 transition-opacity duration-200" :class="[show && 'opacity-100']">
+    <div class="mx-auto breakpoint flex relative z-1">
+      <div class="flex-1 flex items-center">
+        <HairyNavTitle class="lt-sm:hidden" />
+        <HairyMenu />
+      </div>
+      <div class="flex-center lt-sm:hidden">
+        <HairyNavToggleDark />
+        <HairyNavSearch />
+      </div>
+    </div>
+    <HairyNavBackground />
+  </div>
+</template>
+
+<style>
+</style>

package/components/HairyNavBackground.vue

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

package/components/HairyNavSearch.vue

@@ -0,0 +1,265 @@
+<script lang="ts" setup>
+import '@docsearch/css'
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useConfig } from 'valaxy'
+
+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
+}
+</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">
+          <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>
+</template>
+
+<style>
+.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: border-color 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 !important;
+}
+
+@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 {
+    border-color: var(--hy-c-brand);
+    /* background: var(--hy-c-bg-alt); */
+  }
+}
+
+.DocSearch-Button .DocSearch-Button-Container {
+  display: flex;
+  align-items: center;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  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;
+}
+
+.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);
+}
+
+.dark .DocSearch-Form {
+  background-color: var(--hy-c-bg-mute);
+}
+</style>

package/components/HairyNavTitle.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+const config = useConfig()
+const hrefToUrl = () => {
+  location.href = config.value.url
+}
+</script>
+
+<template>
+  <div class="px-2.5">
+    <span class="cursor-pointer hover:text-primary" @click="hrefToUrl">{{ config.title }}</span>
+  </div>
+</template>

package/components/HairyNavToggleDark.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { isDark, toggleDark } from 'valaxy'
+
+const { t } = useI18n()
+const themeTitle = computed(() => {
+  return isDark.value ? t('button.toggle_light') : t('button.toggle_dark')
+})
+</script>
+
+<template>
+  <button class="yun-icon-btn" :title="themeTitle" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
+    <div i="ri-sun-line dark:ri-moon-line" />
+  </button>
+</template>

package/components/HairyPostImageList.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { Post } from 'valaxy'
+import { usePostList } from 'valaxy'
+
+import { usePostLayout } from '../hooks/usePostLayout'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  posts?: Post[]
+}>(), {
+})
+
+const routes = usePostList() as any as Ref<Post[]>
+const posts = computed(() => props.posts || routes.value)
+const layout = usePostLayout()
+const reverse = computed(() => layout.value.includes('reverse'))
+</script>
+
+<template>
+  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+    <Transition v-for="post, i in posts" :key="i" name="fade">
+      <HairyArticleImage :post="post" :reverse="reverse && (i % 2) === 0" />
+    </Transition>
+  </ul>
+</template>
+