valaxy-theme-hairy 0.2.2 → 1.0.0

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,13 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+import { setupDefaultDark } from '../composables'
+
+onMounted(setupDefaultDark)
+</script>
+
+<template>
+  <div class="min-h-80vh">
+    <slot />
+    <HairyDrawer />
+  </div>
+</template>

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

@@ -2,23 +2,24 @@
 import 'element-plus/es/components/drawer/style/index'
 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">
@@ -38,7 +39,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

@@ -2,9 +2,10 @@
 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')
+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/{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>
 

package/components/{HairyNavSearch.vue → HairySearch.vue}

@@ -1,89 +1,18 @@
 <script lang="ts" setup>
-import '@docsearch/css'
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
-import { useConfig } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
+import { computed } from 'vue'
 
-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
-}
+const siteConfig = useSiteConfig()
+const isAlgolia = computed(() => siteConfig.value.search.type === 'algolia')
+const isFuse = computed(() => siteConfig.value.search.type === 'fuse')
 </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 lt-sm:text-size-xl">
-          <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>
+  <HairyAlgoliaSearch v-if="isAlgolia" />
+  <HairyFuseSearch v-if="isFuse" />
 </template>
 
-<style>
+<style lang="scss">
 .VPNavBarSearch {
   display: flex;
   align-items: center;
@@ -133,7 +62,7 @@ function load() {
   width: 32px;
   height: 55px;
   background: transparent;
-  transition: border-color 0.25s;
+  transition: all 0.25s;
 }
 
 .DocSearch-Button:hover {
@@ -146,7 +75,7 @@ function load() {
 }
 
 .DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
+  outline: none;
 }
 
 @media (min-width: 768px) {
@@ -161,8 +90,15 @@ function load() {
   }
 
   .DocSearch-Button:hover {
+    background-color: rgba(255, 255, 255, 0.4);
     border-color: var(--hy-c-brand);
-    /* background: var(--hy-c-bg-alt); */
+  }
+
+  .dark {
+    .DocSearch-Button:hover {
+      background-color: transparent;
+      border-color: var(--hy-c-brand);
+    }
   }
 }
 
@@ -242,7 +178,7 @@ function load() {
   transition: color 0.5s, border-color 0.5s;
 }
 
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
+.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;
@@ -250,10 +186,6 @@ function load() {
   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);
@@ -262,4 +194,8 @@ function load() {
 .dark .DocSearch-Form {
   background-color: var(--hy-c-bg-mute);
 }
+
+.dark .DocSearch-Footer {
+  border-top: 1px solid var(--hy-c-divider);
+}
 </style>

package/components/{HairyUserCard.vue → HairySidebar.vue}

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useConfig, useThemeConfig } from 'valaxy'
+import { useSiteConfig, useThemeConfig } from 'valaxy'
 import { computed } from 'vue'
 import type { HairyTheme } from 'valaxy-theme-hairy'
 
-const config = useConfig()
-const theme = useThemeConfig<HairyTheme>()
+const config = useSiteConfig()
+const theme = useThemeConfig<HairyTheme.Config>()
 
 const name = computed(() => theme.value.user?.name || config.value.author.name)
 const description = computed(() => theme.value.user?.description || config.value.description)
@@ -13,7 +13,7 @@ const description = computed(() => theme.value.user?.description || config.value
 <template>
   <div class="pt-5 animate__animated animate__fadeIn relative z-1">
     <div class="flex flex-col items-center">
-      <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar" />
+      <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar">
       <div class="leading-loose mt-2">
         {{ name }}
       </div>

package/components/{HairyUserTab.vue → HairyTabbar.vue}

@@ -2,23 +2,39 @@
 import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index'
 import 'element-plus/es/components/tabs/style/index'
 import 'element-plus/es/components/tab-pane/style/index'
-import { provide, ref } from 'vue'
+import { computed, provide, ref } from 'vue'
+
+import type { DefaultTheme } from 'valaxy/types'
+import { useFrontmatter, useThemeConfig } from 'valaxy'
+
 const active = ref('aside')
+
+const frontmatter = useFrontmatter()
+const themeConfig = useThemeConfig()
+
+const pageOutline = computed<DefaultTheme.Config['outline']>(
+  () => frontmatter.value.outline ?? themeConfig.value.outline,
+)
+
+const pageOutlineNotUndefined = computed(() =>
+  typeof pageOutline.value !== 'undefined',
+)
+
 provide('HairyUserTab:active', active)
 </script>
 
 <template>
-  <el-tabs v-model="active" class="pt-3">
-    <el-tab-pane name="aside">
+  <ElTabs v-model="active" class="pt-3">
+    <ElTabPane v-if="pageOutlineNotUndefined" name="aside">
       <template #label>
         <div class="flex items-center">
           <div class="i-ri-list-check-2" />
           <span class="ml-1">Aside</span>
         </div>
       </template>
-      <HairyToc />
-    </el-tab-pane>
-    <el-tab-pane label="Series" name="series">
+      <HairyOutline />
+    </ElTabPane>
+    <ElTabPane label="Series" name="series">
       <template #label>
         <div class="flex items-center gap-1">
           <div class="i-ri-flow-chart" />
@@ -26,15 +42,15 @@ provide('HairyUserTab:active', active)
         </div>
       </template>
       <HairyArticleSeries />
-    </el-tab-pane>
-    <el-tab-pane label="User" name="user">
+    </ElTabPane>
+    <ElTabPane label="User" name="user">
       <template #label>
         <div class="flex items-center gap-1">
           <div class="i-ri-user-line" />
           <span class="ml-1">User</span>
         </div>
       </template>
-      <HairyUserCard />
-    </el-tab-pane>
-  </el-tabs>
+      <HairySidebar />
+    </ElTabPane>
+  </ElTabs>
 </template>