valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/parts/HairyFootFish.vue

@@ -1,38 +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>
+<!-- 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/parts/HairyHeadHero.vue

@@ -1,34 +1,34 @@
-<script lang="ts" setup>
-import { useFrontmatter } from 'valaxy'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  headline?: string
-  title: string
-  description?: string
-}>()
-
-const post = useFrontmatter()
-
-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 mx-12px text-center">
-    <div v-if="headline" class="font-frederick text-size-3.35em lt-sm:text-size-3rem leading-snug">
-      {{ headline }}
-    </div>
-    <div class="text-size-2.5em lt-sm:text-size-2rem font-bold title tracking-1">
-      {{ title }}
-    </div>
-    <p v-if="description || $slots.description" class="text-size-sm">
-      <template v-if="description">
-        {{ description }}
-      </template>
-      <slot v-else name="description" />
-    </p>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  headline?: string
+  title: string
+  description?: string
+}>()
+
+const post = useFrontmatter()
+
+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 mx-12px text-center">
+    <div v-if="headline" class="font-frederick text-size-3.35em lt-sm:text-size-3rem leading-snug">
+      {{ headline }}
+    </div>
+    <div class="text-size-2.5em lt-sm:text-size-2rem font-bold title tracking-1">
+      {{ title }}
+    </div>
+    <p v-if="description || $slots.description" class="text-size-sm">
+      <template v-if="description">
+        {{ description }}
+      </template>
+      <slot v-else name="description" />
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/parts/HairyHeadWaves.vue

@@ -1,67 +1,67 @@
-<template>
-  <svg
-    class="waves w-full min-h-100px max-h-150px"
-    viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"
-  >
-    <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="" 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>
-
-<style lang="scss" scoped>
-.waves {
-  height: max(100px, min(150px, 15vh));
-  margin-bottom: -7px;
-}
-
-/* Animation */
-.parallax > use {
-  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
-}
-
-.parallax > use:nth-child(1) {
-  animation-delay: -2s;
-  animation-duration: 7s;
-}
-
-.parallax > use:nth-child(2) {
-  animation-delay: -3s;
-  animation-duration: 10s;
-}
-
-.parallax > use:nth-child(3) {
-  animation-delay: -4s;
-  animation-duration: 13s;
-}
-
-.parallax > use:nth-child(4) {
-  animation-delay: -5s;
-  animation-duration: 20s;
-}
-
-@keyframes move-forever {
-  0% {
-    transform: translate3d(-90px, 0, 0);
-  }
-  100% {
-    transform: translate3d(85px, 0, 0);
-  }
-}
-
-/*Shrinking for mobile*/
-@media (max-width: 768px) {
-  .waves {
-    margin-top: -40px;
-    height: 40px;
-    min-height: 40px;
-  }
-
-}
-</style>
+<template>
+  <svg
+    class="waves w-full min-h-100px max-h-150px"
+    viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"
+  >
+    <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="" 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>
+
+<style lang="scss" scoped>
+.waves {
+  height: max(100px, min(150px, 15vh));
+  margin-bottom: -7px;
+}
+
+/* Animation */
+.parallax > use {
+  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
+}
+
+.parallax > use:nth-child(1) {
+  animation-delay: -2s;
+  animation-duration: 7s;
+}
+
+.parallax > use:nth-child(2) {
+  animation-delay: -3s;
+  animation-duration: 10s;
+}
+
+.parallax > use:nth-child(3) {
+  animation-delay: -4s;
+  animation-duration: 13s;
+}
+
+.parallax > use:nth-child(4) {
+  animation-delay: -5s;
+  animation-duration: 20s;
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+
+/*Shrinking for mobile*/
+@media (max-width: 768px) {
+  .waves {
+    margin-top: -40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+}
+</style>

package/components/parts/HairyImageGlobal.vue

@@ -1,51 +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>
+<script lang="ts" setup>
+import { provide, useCssVars } from 'vue'
+import { renderOverlay } from '@overlastic/vue'
+import type { ImageViewerProps } from 'element-plus'
+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/parts/HairyImageViewer.vue

@@ -1,23 +1,23 @@
-<script lang="ts" setup>
-import { usePrograms } from '@overlastic/vue'
-import { ElImageViewer, imageViewerProps } from 'element-plus/es/components/image-viewer/index'
-import 'element-plus/theme-chalk/el-image-viewer.css'
-import { onMounted, onUnmounted } from 'vue'
-
-const props = defineProps(imageViewerProps)
-
-const { visible, resolve } = usePrograms()
-
-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="resolve()" />
-  </div>
-</template>
+<script lang="ts" setup>
+import { usePrograms } from '@overlastic/vue'
+import { ElImageViewer, imageViewerProps } from 'element-plus'
+import 'element-plus/theme-chalk/el-image-viewer.css'
+import { onMounted, onUnmounted } from 'vue'
+
+const props = defineProps(imageViewerProps)
+
+const { visible, resolve } = usePrograms()
+
+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="resolve()" />
+  </div>
+</template>

package/components/parts/HairyLink.vue

@@ -1,21 +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>
+<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/parts/HairyMenu.vue

@@ -1,16 +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">
-    <HairyMenuItem v-for="(item, index) in nav" :key="index" :item="item" />
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<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">
+    <HairyMenuItem v-for="(item, index) in nav" :key="index" :item="item" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/parts/HairyMenuItem.vue

@@ -1,47 +1,47 @@
-<script lang="ts" setup>
-import type { NavItem } from 'valaxy-theme-hairy'
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-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()
-
-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
-  if (props.item.link === '/')
-    return route.path === props.item.link
-  return route.path.includes(props.item.link!)
-})
-</script>
-
-<template>
-  <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>
-  </button>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import type { NavItem } from 'valaxy-theme-hairy'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+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()
+
+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
+  if (props.item.link === '/')
+    return route.path === props.item.link
+  return route.path.includes(props.item.link!)
+})
+</script>
+
+<template>
+  <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>
+  </button>
+</template>
+
+<style lang="scss" scoped></style>