valaxy-theme-hairy 0.2.2 → 1.0.1

package/client/index.ts

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

package/components/HairyBody.vue

@@ -1,43 +1,38 @@
 <script lang="ts" setup>
-import { useFrontmatter } from 'valaxy'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-const fr = useFrontmatter()
-const route = useRoute()
-
-const showWaline = computed(() => route.path.includes('/posts/') || fr.value.waline)
 </script>
 
 <template>
-  <div class="HairyBody min-h-49vh relative">
-    <div class="mx-auto breakpoint flex z-1 relative">
-      <div class="relative flex-1 pt-2 w-0">
+  <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 />
-        <HairyWaline v-if="showWaline" />
+        <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" />
-          <HairyUserCard v-else />
+          <HairySidebar v-else />
         </div>
       </div>
     </div>
+
     <div class="HairyBodyBackground" />
   </div>
 </template>
 
 <style lang="scss">
 .HairyBodyBackground {
-  @apply transition-all duration-200;
-  @apply absolute top-0 max-h-150vh top-5 bottom-0 w-full transition-opacity;
+  @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 {
-    transition-delay: 200ms;
-    transition-delay: 0;
     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);
@@ -47,5 +42,8 @@ const showWaline = computed(() => route.path.includes('/posts/') || fr.value.wal
     filter: blur(0px);
     background-size: cover;
   }
+  .main {
+    background: transparent;
+  }
 }
 </style>

package/components/HairyComment.vue

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

package/components/HairyContainer.vue

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

package/components/{HairyUserPopup.vue → HairyDrawer.vue}

@@ -1,33 +1,33 @@
 <script lang="ts" setup>
-import 'element-plus/es/components/drawer/style/index'
+import 'element-plus/theme-chalk/el-dialog.css'
 import { ElDrawer } from 'element-plus/es/components/drawer/index'
 import { useRoute } from 'vue-router'
-import { computed, watch } from 'vue'
-import { useContext } from '../hooks/useContext'
-const { drawerShow } = useContext()
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../store'
+
 const route = useRoute()
-const isPost = computed(() => route.fullPath.includes('/posts/'))
 
-watch(() => route.fullPath, () => {
-  drawerShow.value = false
-})
+const { showDrawer } = storeToRefs(useGlobalStore())
+
+watch(() => route.fullPath, () => showDrawer.value = false)
 </script>
 
 <template>
-  <el-drawer v-model="drawerShow" direction="ltr" size="auto" @close="drawerShow = false">
-    <HairyUserTab v-if="isPost" />
-    <HairyUserCard v-else />
-    <div class="dark:hidden absolute inset-0 bg-white bg-opacity-85 blur-5" />
-  </el-drawer>
+  <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;
     }
-
-    background-color: transparent;
     .el-icon.el-drawer__close {
       font-size: 24px;
     }
@@ -38,7 +38,7 @@ watch(() => route.fullPath, () => {
   .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,23 +1,26 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useConfig, useThemeConfig } from 'valaxy'
+import { useConfig, useSiteConfig, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import pkg from 'valaxy/package.json'
-import HairyFooterFish from './HairyFooterFish.vue'
+import type { HairyTheme } from 'valaxy-theme-hairy'
 
 const { t } = useI18n()
 
 const config = useConfig()
-const themeConfig = useThemeConfig()
+const sideConfig = useSiteConfig()
+const themeConfig = useThemeConfig<HairyTheme.Config>()
 
 const year = new Date().getFullYear()
 
 const isThisYear = computed(() => {
-  return year === themeConfig.value.footer.since
+  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 footerIcon = computed(() => themeConfig.value.footer?.icon)
+
+// const frontmatter = useFrontmatter()
 </script>
 
 <template>
@@ -41,11 +44,11 @@ const footerIcon = computed(() => themeConfig.value.footer.icon)
           <div :class="footerIcon.name" />
         </a>
 
-        <span>{{ config.author.name }}</span>
+        <span>{{ sideConfig.author.name }}</span>
         <span class="mx-2">|</span>
-        <span v-if="config.comment.waline" class="flex items-center">
+        <span class="flex items-center">
           <div class="i-ri-eye-fill mr-1" />
-          <span class="waline-pageview-count" data-path="/">1</span>
+          <span class="waline-pageview-count" data-path="/">-</span>
         </span>
       </div>
       <div v-if="themeConfig.footer.powered" class="powered" m="2">
@@ -54,6 +57,6 @@ const footerIcon = computed(() => themeConfig.value.footer.icon)
     </div>
 
     <slot />
-    <HairyFooterFish />
+    <HairyFootFish />
   </footer>
 </template>

package/components/HairyHeader.vue

@@ -1,26 +1,27 @@
 <script lang="ts" setup>
-import { useContext } from '../hooks/useContext'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../store'
 
 defineProps<{
-  headline?: String
-  title?: String
+  headline?: string
+  title?: string
   description?: string
 }>()
 
-const { headerRef } = useContext()
+const { headerRef } = storeToRefs(useGlobalStore())
 </script>
 
 <template>
-  <header ref="headerRef" class="HairyHeader relative animate__animated animate__fadeIn">
+  <header ref="headerRef" class="relative animate__animated animate__fadeIn">
     <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">
+      <HairyHeadHero v-if="title || headline || description || $slots.description" class="relative z-2" :title="title" v-bind="$props">
         <template #description>
           <slot name="description" />
         </template>
-      </HairyPostTitle>
+      </HairyHeadHero>
     </div>
-    <HairyCarousel class="inset-0" style="position: absolute" />
-    <HairyWaves class="relative z-10" />
+    <HairySwiperCarousel class="inset-0" style="position: absolute" />
+    <HairyHeadWaves class="relative z-10" />
   </header>
 </template>
 

package/components/HairyImage.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { ElImage, imageProps } from 'element-plus/es/components/image/index'
-import 'element-plus/es/components/image/style/index'
+import 'element-plus/theme-chalk/el-image.css'
 import { inject } from 'vue'
+
 const props = defineProps(imageProps)
 
-const preview = inject<(url: string) => void>('HairyImageGroup:preview')
+const preview = inject<any>('HairyImageGroup:preview', undefined)
 </script>
 
 <template>

package/components/HairyImageGroup.vue

@@ -1,19 +1,17 @@
 <script lang="ts" setup>
 import { computed, provide, useCssVars, useSlots } from 'vue'
-import { executeOverlay } from 'unoverlay-vue'
+import { renderOverlay } from '@overlastic/vue'
 import type { ImageViewerProps } from 'element-plus/es/components/image-viewer/index'
-import type { AtWillNumber } from '../utils'
-import { atWillToUnit } from '../utils'
-import HairyImageViewer from './HairyImageViewer.vue'
+import { atWillToUnit } from '@hairy/utils'
+import HairyImageViewer from './parts/HairyImageViewer.vue'
 
 const props = withDefaults(defineProps<{
-  row?: AtWillNumber
-  col?: AtWillNumber
-  gap?: AtWillNumber
+  row?: string | number
+  col?: string | number
+  gap?: string | number
   justify?: string
   align?: string
-}>(),
-{
+}>(), {
   row: 'auto',
   col: 'auto',
   gap: 10,
@@ -36,13 +34,11 @@ const paths = computed(() => slots
   .filter(Boolean) as string[],
 )
 
-const preview = (url: string) => {
+function preview(url: string) {
   const initialIndex = paths.value.findIndex(v => v === url) || 0
-  executeOverlay<Partial<ImageViewerProps>>(HairyImageViewer, {
-    props: {
-      urlList: paths.value,
-      initialIndex,
-    },
+  renderOverlay<Partial<ImageViewerProps>>(HairyImageViewer, {
+    urlList: paths.value,
+    initialIndex,
   })
 }
 
@@ -51,7 +47,7 @@ provide('HairyImageGroup:preview', preview)
 
 <template>
   <div class="HairyImageGroup">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

package/components/HairyNavbar.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, ref } from 'vue'
+import { useElementSize, useScroll, whenever } from '@vueuse/core'
+import { useSiteConfig } from 'valaxy'
+import { useGlobalStore } from '../store'
+
+// get header height
+const globalStore = useGlobalStore()
+const { headerRef } = storeToRefs(globalStore)
+const headerSize = useElementSize(headerRef)
+const headerHeight = computed(() => headerSize.height.value)
+
+// get document scroll
+const documentRef = ref()
+const scroll = useScroll(documentRef)
+const dire = ref<'top' | 'bottom'>('top')
+
+whenever(() => scroll.directions.top, () => dire.value = 'top')
+whenever(() => scroll.directions.bottom, () => dire.value = 'bottom')
+
+const show = computed(() => {
+  return scroll.y.value < (headerHeight.value / 2)
+    || dire.value === 'top'
+})
+const config = useSiteConfig()
+onMounted(() => documentRef.value = document)
+</script>
+
+<template>
+  <div
+    class="fixed w-full h-3.125rem lt-sm:h-3.5rem top-0 opacity-0 z-10000"
+    :class="[show && 'opacity-100']"
+  >
+    <div class="px-12px md:px-0 mx-auto container flex relative z-1 h-full">
+      <div class="flex items-center lt-sm:order-1 lt-sm:flex-1 justify-center">
+        <HairyLink class="px-2.5" type="white" :href="config.url">
+          {{ config.title }}
+        </HairyLink>
+      </div>
+      <div class="flex items-center sm:flex-1">
+        <HairyNavExpand class="sm:hidden pl-2 pr-13" />
+        <HairyNav class="lt-sm:hidden" />
+        <slot name="nav" />
+      </div>
+      <div class="flex-center order-1">
+        <HairyNavbarToggleDark />
+        <HairySearch />
+      </div>
+    </div>
+
+    <HairyNavbarBackground />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/HairyPageArchives.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/index'
+import { usePostList } from 'valaxy'
+
+import { getArchiveLink } from '../utils'
+import { useYearArchives } from '../composables'
+
+const activities = useYearArchives()
+const posts = usePostList()
+</script>
+
+<template>
+  <HairyBreadcrumb class="mb-5" size="large" after="归档">
+    <HairyBreadcrumbItem to="/">
+      首页
+    </HairyBreadcrumbItem>
+    <HairyBreadcrumbItem>
+      目前共计 {{ posts.length }} 篇文章
+    </HairyBreadcrumbItem>
+  </HairyBreadcrumb>
+  <ElTimeline>
+    <ElTimelineItem
+      v-for="(activity, index) in activities"
+      :key="index"
+      size="large"
+      hollow
+    >
+      <div class="activity inline-flex items-center">
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year))">
+          {{ activity.year }}
+        </HairyLink>
+        <span class="text-gray-5 mx-2">/</span>
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year, activity.month))">
+          {{ activity.month }}
+        </HairyLink>
+        <span class="text-gray-5 text-size-5 ml-1">({{ activity.count }}篇)</span>
+      </div>
+      <HairyTimelineContent v-for="(item, index) in activity.posts.slice(0, 2)" :key="index" :post="item" />
+      <div v-if="activity.posts.length > 2">
+        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
+          ....
+        </HairyLink>
+      </div>
+    </ElTimelineItem>
+  </ElTimeline>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: archive
+</route>
+
+<style lang="scss" scoped>
+.activity:hover {
+  .HairyLink {
+    color: var(--hy-c-primary);
+  }
+}
+</style>

package/components/HairyPageTags.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/{HairyPostList.vue → HairyPosts.vue}

@@ -2,7 +2,7 @@
 import { computed, defineProps, ref, withDefaults } from 'vue'
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
-import { usePostLayout } from '../hooks/usePostLayout'
+import { useLayoutPost } from '../composables'
 
 const props = withDefaults(defineProps<{
   type?: string
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   curPage: 1,
   pagination: false,
 })
-const layout = usePostLayout()
+const layout = useLayoutPost()
 
 const pageSize = ref(7)
 const routes = usePostList({ type: props.type || '' })
@@ -27,7 +27,7 @@ const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts
     <HairyPostToggleLayout />
     <HairyPostImageList v-if="layout.includes('image')" :posts="displayedPosts" />
     <HairyPostTextsList v-else :posts="displayedPosts" />
-    <ValaxyPagination v-if="pagination" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
+    <ValaxyPagination v-if="pagination" class="mb-6" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
   </div>
 </template>