valaxy-theme-hairy 1.0.1 → 1.0.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 云游君
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 云游君
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/client/index.ts

@@ -1 +1 @@
-export * from '../composables'
+export * from '../composables'

package/components/HairyBody.vue

@@ -1,49 +1,49 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="min-h-49vh relative z-5">
-    <div class="mx-auto container flex z-1 relative">
-      <div class="relative flex-1 pt-2 main">
-        <slot />
-        <HairyComment />
-      </div>
-      <div class="ml-4 w-60 lg:block hidden">
-        <div class="sticky top-3.125rem z-1">
-          <slot v-if="$slots.slide" name="slide" />
-          <HairySidebar v-else />
-        </div>
-      </div>
-    </div>
-
-    <div class="HairyBodyBackground" />
-  </div>
-</template>
-
-<style lang="scss">
-.HairyBodyBackground {
-  @apply absolute top-0 max-h-150vh top-5 bottom-0 w-full;
-  opacity: 0;
-}
-.main {
-  background: linear-gradient(to bottom,#fafafa 0,#fff 20%) no-repeat top;
-  padding: 1.25rem;
-  border-radius: 10px
-}
-
-.dark {
-  .HairyBodyBackground {
-    opacity: 1;
-    background-image:
-      linear-gradient(to bottom, var(--hy-c-waves-dimm) 0%, transparent 60%, var(--hy-c-waves-dimm) 100%), url(./images/bg.jpg);
-    background-position: center;
-    opacity: 0.4;
-    background-repeat: no-repeat;
-    filter: blur(0px);
-    background-size: cover;
-  }
-  .main {
-    background: transparent;
-  }
-}
-</style>
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="min-h-49vh relative z-5">
+    <div class="mx-auto container flex z-1 relative">
+      <div class="relative flex-1 pt-2 main">
+        <slot />
+        <HairyComment />
+      </div>
+      <div class="ml-4 w-60 lg:block hidden">
+        <div class="sticky top-3.125rem z-1">
+          <slot v-if="$slots.slide" name="slide" />
+          <HairySidebar v-else />
+        </div>
+      </div>
+    </div>
+
+    <div class="HairyBodyBackground" />
+  </div>
+</template>
+
+<style lang="scss">
+.HairyBodyBackground {
+  @apply absolute top-0 max-h-150vh top-5 bottom-0 w-full;
+  opacity: 0;
+}
+.main {
+  background: linear-gradient(to bottom,#fafafa 0,#fff 20%) no-repeat top;
+  padding: 1.25rem;
+  border-radius: 10px
+}
+
+.dark {
+  .HairyBodyBackground {
+    opacity: 1;
+    background-image:
+      linear-gradient(to bottom, var(--hy-c-waves-dimm) 0%, transparent 60%, var(--hy-c-waves-dimm) 100%), url(./images/bg.jpg);
+    background-position: center;
+    opacity: 0.4;
+    background-repeat: no-repeat;
+    filter: blur(0px);
+    background-size: cover;
+  }
+  .main {
+    background: transparent;
+  }
+}
+</style>

package/components/HairyCodepen.vue

@@ -1,40 +1,40 @@
-<script lang="ts" setup>
-import { useScriptTag } from '@vueuse/core'
-import { defineProps, withDefaults } from 'vue'
-
-withDefaults(
-  defineProps<{
-    height: number | string
-    defaultTab: string
-    slugHash: string
-    user?: string
-    prefill?: Record<string, any>
-    title?: string
-    placeholder?: string
-    theme?: string
-  }>(),
-  {
-    height: 300,
-    defaultTab: 'html',
-  },
-)
-
-useScriptTag('https://cpwebassets.codepen.io/assets/embed/ei.js')
-</script>
-
-<template>
-  <div
-    class="codepen"
-    :data-height="300"
-    :data-default-tab="defaultTab"
-    :data-slug-hash="slugHash"
-    :data-user="user"
-    :data-prefill="prefill"
-    :data-pen-title="title"
-    :data-placeholder="placeholder"
-    :data-theme-id="theme"
-  />
-</template>
-
-<style lang="scss" scoped>
-</style>
+<script lang="ts" setup>
+import { useScriptTag } from '@vueuse/core'
+import { defineProps, withDefaults } from 'vue'
+
+withDefaults(
+  defineProps<{
+    height: number | string
+    defaultTab: string
+    slugHash: string
+    user?: string
+    prefill?: Record<string, any>
+    title?: string
+    placeholder?: string
+    theme?: string
+  }>(),
+  {
+    height: 300,
+    defaultTab: 'html',
+  },
+)
+
+useScriptTag('https://cpwebassets.codepen.io/assets/embed/ei.js')
+</script>
+
+<template>
+  <div
+    class="codepen"
+    :data-height="300"
+    :data-default-tab="defaultTab"
+    :data-slug-hash="slugHash"
+    :data-user="user"
+    :data-prefill="prefill"
+    :data-pen-title="title"
+    :data-placeholder="placeholder"
+    :data-theme-id="theme"
+  />
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/HairyComment.vue

@@ -1,33 +1,33 @@
-<script lang="ts" setup>
-import { useAddonWaline } from 'valaxy-addon-waline'
-
-const addon = useAddonWaline()
-</script>
-
-<template>
-  <WalineClient w="full" :options="addon.options" />
-</template>
-
-<style lang="scss">
-// 可以在此处覆盖 waline 样式
-:root {
-  --waline-theme-color: var(--hy-c-primary);
-  --waline-active-color: var(--hy-c-primary-dark)
-}
-
-.wl-editor {
-  padding: 4px;
-  width: calc(100% - 1rem - 8px);
-}
-.wl-emoji-popup {
-  border-bottom: none !important;
-  z-index: 1000;
-}
-.wl-emoji-popup .wl-tabs {
-  height: auto !important;
-  overflow-x: auto !important;
-  padding: 0 !important;
-  margin-left: -1px;
-  margin-right: -1px;
-}
-</style>
+<script lang="ts" setup>
+import { useAddonWaline } from 'valaxy-addon-waline'
+
+const addon = useAddonWaline()
+</script>
+
+<template>
+  <WalineClient w="full" :options="addon.options" />
+</template>
+
+<style lang="scss">
+// 可以在此处覆盖 waline 样式
+:root {
+  --waline-theme-color: var(--hy-c-primary);
+  --waline-active-color: var(--hy-c-primary-dark)
+}
+
+.wl-editor {
+  padding: 4px;
+  width: calc(100% - 1rem - 8px);
+}
+.wl-emoji-popup {
+  border-bottom: none !important;
+  z-index: 1000;
+}
+.wl-emoji-popup .wl-tabs {
+  height: auto !important;
+  overflow-x: auto !important;
+  padding: 0 !important;
+  margin-left: -1px;
+  margin-right: -1px;
+}
+</style>

package/components/HairyContainer.vue

@@ -1,17 +1,17 @@
-<script lang="ts" setup>
-import { onMounted } from 'vue'
-import { setupDefaultDark } from '../composables'
-
-import 'element-plus/theme-chalk/base.css'
-import 'element-plus/theme-chalk/el-timeline.css'
-import 'element-plus/theme-chalk/el-timeline-item.css'
-
-onMounted(setupDefaultDark)
-</script>
-
-<template>
-  <div class="min-h-80vh">
-    <slot />
-    <HairyDrawer />
-  </div>
-</template>
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { setupDefaultDark } from '../composables'
+
+import 'element-plus/theme-chalk/base.css'
+import 'element-plus/theme-chalk/el-timeline.css'
+import 'element-plus/theme-chalk/el-timeline-item.css'
+
+onMounted(setupDefaultDark)
+</script>
+
+<template>
+  <div class="min-h-80vh">
+    <slot />
+    <HairyDrawer />
+  </div>
+</template>

package/components/HairyDrawer.vue

@@ -1,44 +1,44 @@
-<script lang="ts" setup>
-import 'element-plus/theme-chalk/el-dialog.css'
-import { ElDrawer } from 'element-plus/es/components/drawer/index'
-import { useRoute } from 'vue-router'
-import { watch } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useGlobalStore } from '../store'
-
-const route = useRoute()
-
-const { showDrawer } = storeToRefs(useGlobalStore())
-
-watch(() => route.fullPath, () => showDrawer.value = false)
-</script>
-
-<template>
-  <ElDrawer v-model="showDrawer" direction="ltr" size="auto" @close="showDrawer = false">
-    <div class="h-24px" />
-    <HairyTabbar v-if="route.fullPath.includes('/posts/')" />
-    <HairySidebar v-else />
-    <div class="dark:hidden absolute inset-0 bg-white bg-opacity-85" />
-  </ElDrawer>
-</template>
-
-<style lang="scss">
-  .el-drawer {
-    background-color: transparent;
-    .el-drawer__header {
-      display: none;
-    }
-    .el-icon.el-drawer__close {
-      font-size: 24px;
-    }
-    @media (max-width: 375px) {
-      width: 100% !important;
-    }
-  }
-  .dark {
-    .el-drawer {
-      background: radial-gradient(black, transparent);
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-    }
-  }
-</style>
+<script lang="ts" setup>
+import 'element-plus/theme-chalk/el-dialog.css'
+import { ElDrawer } from 'element-plus'
+import { useRoute } from 'vue-router'
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../store'
+
+const route = useRoute()
+
+const { showDrawer } = storeToRefs(useGlobalStore())
+
+watch(() => route.fullPath, () => showDrawer.value = false)
+</script>
+
+<template>
+  <ElDrawer v-model="showDrawer" direction="ltr" size="auto" @close="showDrawer = false">
+    <div class="h-24px" />
+    <HairyTabbar v-if="route.fullPath.includes('/posts/')" />
+    <HairySidebar v-else />
+    <div class="dark:hidden absolute inset-0 bg-white bg-opacity-85" />
+  </ElDrawer>
+</template>
+
+<style lang="scss">
+  .el-drawer {
+    background-color: transparent;
+    .el-drawer__header {
+      display: none;
+    }
+    .el-icon.el-drawer__close {
+      font-size: 24px;
+    }
+    @media (max-width: 375px) {
+      width: 100% !important;
+    }
+  }
+  .dark {
+    .el-drawer {
+      background: radial-gradient(black, transparent);
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    }
+  }
+</style>

package/components/HairyFooter.vue

@@ -1,62 +1,62 @@
-<script lang="ts" setup>
-import { capitalize, computed } from 'vue'
-import { useConfig, useSiteConfig, useThemeConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
-import pkg from 'valaxy/package.json'
-import type { HairyTheme } from 'valaxy-theme-hairy'
-
-const { t } = useI18n()
-
-const config = useConfig()
-const sideConfig = useSiteConfig()
-const themeConfig = useThemeConfig<HairyTheme.Config>()
-
-const year = new Date().getFullYear()
-
-const isThisYear = computed(() => {
-  return year === themeConfig.value.footer?.since
-})
-
-const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
-const footerIcon = computed(() => themeConfig.value.footer?.icon)
-
-// const frontmatter = useFrontmatter()
-</script>
-
-<template>
-  <footer v-if="themeConfig.footer" class="va-footer pt-5" text="center sm" style="color:var(--va-c-text-light); overflow-x: hidden;">
-    <div class="z-5 relative">
-      <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
-        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
-          {{ themeConfig.footer.beian.icp }}
-        </a>
-      </div>
-      <div class="copyright flex justify-center items-center" p="1">
-        <span>
-          &copy;
-          <template v-if="!isThisYear">
-            {{ themeConfig.footer.since }} -
-          </template>
-          {{ year }}
-        </span>
-
-        <a v-if="footerIcon" class="inline-flex animate-pulse ml-2" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
-          <div :class="footerIcon.name" />
-        </a>
-
-        <span>{{ sideConfig.author.name }}</span>
-        <span class="mx-2">|</span>
-        <span class="flex items-center">
-          <div class="i-ri-eye-fill mr-1" />
-          <span class="waline-pageview-count" data-path="/">-</span>
-        </span>
-      </div>
-      <div v-if="themeConfig.footer.powered" class="powered" m="2">
-        <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="`valaxy-theme-${config.theme}`" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
-      </div>
-    </div>
-
-    <slot />
-    <HairyFootFish />
-  </footer>
-</template>
+<script lang="ts" setup>
+import { capitalize, computed } from 'vue'
+import { useConfig, useSiteConfig, useThemeConfig } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import pkg from 'valaxy/package.json'
+import type { HairyTheme } from 'valaxy-theme-hairy'
+
+const { t } = useI18n()
+
+const config = useConfig()
+const sideConfig = useSiteConfig()
+const themeConfig = useThemeConfig<HairyTheme.Config>()
+
+const year = new Date().getFullYear()
+
+const isThisYear = computed(() => {
+  return year === themeConfig.value.footer?.since
+})
+
+const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
+const footerIcon = computed(() => themeConfig.value.footer?.icon)
+
+// const frontmatter = useFrontmatter()
+</script>
+
+<template>
+  <footer v-if="themeConfig.footer" class="va-footer pt-5" text="center sm" style="color:var(--va-c-text-light); overflow-x: hidden;">
+    <div class="z-5 relative">
+      <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
+        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
+          {{ themeConfig.footer.beian.icp }}
+        </a>
+      </div>
+      <div class="copyright flex justify-center items-center" p="1">
+        <span>
+          &copy;
+          <template v-if="!isThisYear">
+            {{ themeConfig.footer.since }} -
+          </template>
+          {{ year }}
+        </span>
+
+        <a v-if="footerIcon" class="inline-flex animate-pulse ml-2" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
+          <div :class="footerIcon.name" />
+        </a>
+
+        <span>{{ sideConfig.author.name }}</span>
+        <span class="mx-2">|</span>
+        <span class="flex items-center">
+          <div class="i-ri-eye-fill mr-1" />
+          <span class="waline-pageview-count" data-path="/">-</span>
+        </span>
+      </div>
+      <div v-if="themeConfig.footer.powered" class="powered" m="2">
+        <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="`valaxy-theme-${config.theme}`" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+      </div>
+    </div>
+
+    <slot />
+    <HairyFootFish />
+  </footer>
+</template>

package/components/HairyHeader.vue

@@ -1,32 +1,32 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { useGlobalStore } from '../store'
-
-defineProps<{
-  headline?: string
-  title?: string
-  description?: string
-}>()
-
-const { headerRef } = storeToRefs(useGlobalStore())
-</script>
-
-<template>
-  <header ref="headerRef" class="relative animate__animated animate__fadeIn">
-    <div class="h-30vh lt-md:h-60vh min-h-80 flex-center">
-      <HairyHeadHero v-if="title || headline || description || $slots.description" class="relative z-2" :title="title" v-bind="$props">
-        <template #description>
-          <slot name="description" />
-        </template>
-      </HairyHeadHero>
-    </div>
-    <HairySwiperCarousel class="inset-0" style="position: absolute" />
-    <HairyHeadWaves class="relative z-10" />
-  </header>
-</template>
-
-<style>
-.HairyHeader {
-  position: relative;
-}
-</style>
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../store'
+
+defineProps<{
+  headline?: string
+  title?: string
+  description?: string
+}>()
+
+const { headerRef } = storeToRefs(useGlobalStore())
+</script>
+
+<template>
+  <header ref="headerRef" class="relative animate__animated animate__fadeIn">
+    <div class="h-30vh lt-md:h-60vh min-h-80 flex-center">
+      <HairyHeadHero v-if="title || headline || description || $slots.description" class="relative z-2" :title="title" v-bind="$props">
+        <template #description>
+          <slot name="description" />
+        </template>
+      </HairyHeadHero>
+    </div>
+    <HairySwiperCarousel class="inset-0" style="position: absolute" />
+    <HairyHeadWaves class="relative z-10" />
+  </header>
+</template>
+
+<style>
+.HairyHeader {
+  position: relative;
+}
+</style>

package/components/HairyImage.vue

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