valaxy-theme-hairy 1.0.5 → 1.1.0

package/App.vue

@@ -0,0 +1,15 @@
+<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'
+import 'element-plus/theme-chalk/el-tag.css'
+
+onMounted(setupDefaultDark)
+</script>
+
+<template>
+  <!-- ! -->
+</template>

package/components/HairyBody.vue

@@ -1,12 +1,20 @@
 <script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    comment?: boolean
+  }>(),
+  {
+    comment: true,
+  },
+)
 </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 />
+        <slot v-if="$slots.default" />
+        <HairyComment v-if="comment" />
       </div>
       <div class="ml-4 w-60 lg:block hidden">
         <div class="sticky top-3.125rem z-1">
@@ -15,7 +23,6 @@
         </div>
       </div>
     </div>
-
     <div class="HairyBodyBackground" />
   </div>
 </template>

package/components/HairyContainer.vue

@@ -1,17 +1,9 @@
 <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>
+  <HairyDrawer />
 </template>

package/components/HairyDrawer.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import 'element-plus/theme-chalk/el-dialog.css'
+import 'element-plus/theme-chalk/el-drawer.css'
+import 'element-plus/theme-chalk/el-overlay.css'
+
 import { ElDrawer } from 'element-plus'
 import { useRoute } from 'vue-router'
 import { watch } from 'vue'
@@ -14,7 +16,7 @@ watch(() => route.fullPath, () => showDrawer.value = false)
 </script>
 
 <template>
-  <ElDrawer v-model="showDrawer" direction="ltr" size="auto" @close="showDrawer = false">
+  <ElDrawer v-model="showDrawer" :z-index="10000" class="z-100" direction="ltr" size="auto" @close="showDrawer = false">
     <div class="h-24px" />
     <HairyTabbar v-if="route.fullPath.includes('/posts/')" />
     <HairySidebar v-else />
@@ -23,7 +25,7 @@ watch(() => route.fullPath, () => showDrawer.value = false)
 </template>
 
 <style lang="scss">
-  .el-drawer {
+.el-drawer {
     background-color: transparent;
     .el-drawer__header {
       display: none;

package/components/HairyHeader.vue

@@ -12,7 +12,7 @@ const { headerRef } = storeToRefs(useGlobalStore())
 </script>
 
 <template>
-  <header ref="headerRef" class="relative animate__animated animate__fadeIn">
+  <header ref="headerRef" class="relative min-h-30vh 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>

package/components/HairyLinks.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+
+defineProps<{
+  links?: {
+    name: string
+    url: string
+    image: string
+    color: string
+    desc?: string
+  }[]
+}>()
+</script>
+
+<template>
+  <div class="min-h-30vh">
+    <div class="links">
+      <div
+        v-for="(item, index) in links" :key="index" class="link-block flex items-center py-0.5rem px-1rem rounded-lg"
+        :style="{ '--block-color': item.color }"
+      >
+        <a :href="item.url" class="w-4rem h-4rem">
+          <HairyImage class="w-full h-full rounded-xl" :src="item.image" />
+        </a>
+        <div class="pl-1rem flex-1">
+          <a :href="item.url" class="font-bold text-lg title">
+            {{ item.name }}
+          </a>
+          <div class="max-w-180px text-sm my-0.5rem truncate desc">
+            {{ item.desc }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.link-block {
+  border: 0.0625rem solid #f7f7f7;
+  box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0, 0, 0, 0.1);
+  --bg-color: var(--block-color, #666);
+  @apply transition-all duration-200;
+
+  .title {
+    color: var(--block-color);
+  }
+}
+
+.dark .link-block {
+  background: rgba($color: #989898, $alpha: 0.1);
+}
+
+.links .link-block:hover {
+  background-color: var(--bg-color);
+  box-shadow: 0 0.125rem 1.25rem var(--bg-color);
+  border-color: var(--bg-color);
+
+  .title,
+  .desc {
+    color: #fff;
+  }
+}
+
+.links {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 300px);
+  gap: 24px;
+}
+</style>

package/components/HairyNavbar.vue

@@ -29,7 +29,7 @@ onMounted(() => documentRef.value = document)
 
 <template>
   <div
-    class="fixed w-full h-3.125rem lt-sm:h-3.5rem top-0 opacity-0 z-10000"
+    class="fixed w-full h-3.125rem lt-sm:h-3.5rem top-0 opacity-0 z-1000 duration-200"
     :class="[show && 'opacity-100']"
   >
     <div class="px-12px md:px-0 mx-auto container flex relative z-1 h-full">

package/components/HairyPageTags.vue

@@ -21,7 +21,7 @@ function displayTag(tag: string) {
     <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"
+        :key="key" class="post-tag cursor-pointer transition-all duration-200"
         :style="getTagStyle(tag.count)"
         p="1"
         @click="displayTag(key.toString())"

package/components/HairyPosts.vue

@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<{
   posts?: Post[]
   curPage?: number
   pagination?: boolean
+  updated?: boolean
 }>(), {
   curPage: 1,
   pagination: false,
@@ -25,6 +26,7 @@ const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts
 <template>
   <div class="mt-8">
     <HairyPostToggleLayout />
+    <HairyUpdatedPost v-if="updated" :posts="posts" />
     <HairyPostImageList v-if="layout.includes('image')" :posts="displayedPosts" />
     <HairyPostTextsList v-else :posts="displayedPosts" />
     <ValaxyPagination v-if="pagination" class="mb-6" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />

package/components/PageTags.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import { useHairyTags } from '../../composables'
+import { useHairyTags } from '../composables'
 
 const router = useRouter()
 

package/components/parts/HairyImageViewer.vue

@@ -6,7 +6,9 @@ import { onMounted, onUnmounted } from 'vue'
 
 const props = defineProps(imageViewerProps)
 
-const { visible, resolve } = usePrograms()
+const { visible, resolve } = usePrograms({
+  duration: 1000,
+})
 
 onMounted(() => {
   document.body.style.overflow = 'hidden'

package/components/posts/HairyArticleImage.vue

@@ -32,19 +32,22 @@ function displayCategory(keys: string | string[] = []) {
   <li class="HairyArticleImage mb-10 py-2" :class="[slice && 'slice', reverse && 'reverse']">
     <article>
       <div class="flex justify-between items-center">
-        <a class="text-size-2xl font-bold truncate cursor-pointer lt-sm:text-size-lg" :class="[reverse ? 'order-last' : 'order-first']" @click="onReadMore">{{ post.title }}</a>
+        <a
+          class="text-size-2xl font-bold truncate cursor-pointer lt-sm:text-size-lg"
+          :class="[reverse ? 'order-last' : 'order-first']" @click="onReadMore"
+        >{{ post.title }}</a>
         <div class="flex justify-end gap-2 text-size-sm lt-sm:text-size-xs">
           <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
           <span>{{ post.wordCount }}字</span>
           <span class="lt-sm:hidden">{{ post.readingTime }}分钟</span>
         </div>
       </div>
-      <div class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5" :class="[reverse ? 'pl-4' : 'pr-4']">
+      <div
+        class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5"
+        :class="[reverse ? 'pl-4' : 'pr-4']"
+      >
         <div class="flex-1 post-image-content" :class="[reverse ? 'order-last' : 'order-first']">
-          <img
-            class="post-image rounded-1 w-full h-full object-cover cursor-pointer" :src="image"
-            @click="onReadMore"
-          >
+          <img class="post-image rounded-1 w-full h-full object-cover cursor-pointer" :src="image" @click="onReadMore">
         </div>
         <div class="flex-1 flex flex-col justify-between py-2 dark:py-0">
           <div class="flex-1 text-size-sm">
@@ -83,6 +86,10 @@ function displayCategory(keys: string | string[] = []) {
   -webkit-line-clamp: 5;
 }
 
+.post-image {
+  @apply duration-200;
+}
+
 .dark {
   .post-image {
     @apply opacity-75 hover:opacity-90 duration-200;
@@ -106,7 +113,7 @@ function displayCategory(keys: string | string[] = []) {
   .post-image-content {
     margin-right: 0;
     margin-left: 1rem;
-    clip-path: polygon(0 0,100% 0,100% 100%,8% 100%);
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
     border-radius: 0 0.625rem 0.625rem 0;
     overflow: hidden;
   }

package/components/posts/HairyPostToggleLayout.vue

@@ -18,7 +18,7 @@ const layouts = [
 const globalStore = useGlobalStore()
 const { headerRef } = storeToRefs(globalStore)
 const { height: headerHeight } = useElementSize(headerRef)
-const scroll = useScroll(document)
+const scroll = useScroll(typeof document !== 'undefined' ? document : undefined)
 
 const show = computed(() => {
   return scroll.y.value > headerHeight.value
@@ -26,7 +26,10 @@ const show = computed(() => {
 </script>
 
 <template>
-  <div class="inline-flex gap-2 sticky top-15 inset-0 rounded-2" :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']">
+  <div
+    class="inline-flex gap-2 sticky top-15 inset-0 rounded-2 transition-colors duration-200"
+    :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']"
+  >
     <div v-for="(item) in layouts" :key="item.layout" class="p-2 rounded-full cursor-pointer" :class="[layout === item.layout && 'text-primary']" @click="layout = item.layout">
       <div class="text-size-xl" :class="item.icon" />
     </div>

package/components/posts/HairyUpdatedPost.vue

@@ -0,0 +1,75 @@
+<!-- eslint-disable unused-imports/no-unused-vars -->
+<script lang="ts" setup>
+import { computed, defineProps } from 'vue'
+import type { Post } from 'valaxy'
+import { ElTag } from 'element-plus'
+import { useRouter } from 'vue-router'
+import { toArray } from '../../utils'
+
+const props = defineProps<{
+  type?: string
+  posts: Post[]
+}>()
+
+const router = useRouter()
+
+const post = computed(() => {
+  const clone = [...props.posts].map(v => ({
+    ...v,
+    date: v.updated instanceof Date
+      ? v.updated.valueOf()
+      : new Date(v.updated || Date.now()).valueOf(),
+  }))
+  clone.sort((b, a) => a.date - b.date)
+  return clone[0]
+})
+
+function displayCategory(keys: string | string[] = []) {
+  router.push({ path: `/categories/${toArray(keys).join('/')}` })
+}
+</script>
+
+<template>
+  <div class="border-b border-[var(--hy-c-divider)] flex-wrap items-center flex justify-between mb-4 gap-2">
+    <div class="flex-shrink-0 w-100px">
+      最近更新：
+    </div>
+    <div class="flex-1 flex items-center justify-end gap-2 flex-wrap">
+      <HairyLink :href="post.path">
+        {{ post.title }}
+      </HairyLink>
+      <template v-if="post.tags?.length">
+        <div class="lt-md:hidden">
+          |
+        </div>
+        <div class="lt-md:hidden">
+          <div class="tags flex-center gap-2">
+            <div class="i-material-symbols-bookmarks" />
+            <ElTag
+              v-for="(tag) in post.tags"
+              :key="tag"
+              size="small"
+              class="dark:bg-dark-50 cursor-pointer border-none!"
+              @click="$router.push(`/tags/${tag}`)"
+            >
+              {{ tag }}
+            </ElTag>
+          </div>
+        </div>
+      </template>
+      <template v-if="post.categories">
+        <div class="lt-md:hidden">
+          |
+        </div>
+        <div class="lt-md:hidden flex items-center gap-2">
+          <div class="i-material-symbols-folder-open-rounded text-14px" />
+          <ElTag size="small" class="dark:bg-dark-50 cursor-pointer border-none!" @click="displayCategory(post.categories)">
+            {{ post.categories }}
+          </ElTag>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/layouts/home.vue

@@ -25,8 +25,8 @@ const hello = riposte(
       :title="config.author.name"
       :description="`${hello}, how are you doing?`"
     />
-    <HairyBody>
-      <router-view />
+    <HairyBody :comment="false">
+      <HairyPosts updated pagination :cur-page="parseInt(String($route.params.page || 1))" />
     </HairyBody>
     <HairyFooter />
   </HairyContainer>

package/layouts/post.vue

@@ -4,8 +4,6 @@ import { useFrontmatter, useRuntimeConfig } from 'valaxy'
 import { useRouter } from 'vue-router'
 import { computed } from 'vue'
 
-import 'element-plus/theme-chalk/el-tag.css'
-
 defineProps<{
   header?: {
     title?: string

package/library/loading.ts

@@ -30,6 +30,8 @@ function createElement() {
 }
 
 function showFullLoading() {
+  if (typeof window === 'undefined')
+    return
   if (!el)
     el = createElement()
   el.style.opacity = '0'
@@ -41,6 +43,8 @@ function showFullLoading() {
 }
 
 function hideFullLoading() {
+  if (typeof window === 'undefined')
+    return
   if (!el)
     return
   el.style.opacity = '0'
@@ -52,6 +56,8 @@ function hideFullLoading() {
 }
 
 function loadFonts(fontFamily: string, url: string) {
+  if (typeof window === 'undefined')
+    return
   const font = new FontFace(fontFamily, `url(${url})`)
   font.load().then(() => {
     ;(document.fonts as any).add(font)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "packageManager": "pnpm@8.10.5",
   "author": {
     "email": "wwu710632@gmail.com",

package/pages/index.vue

@@ -1,6 +1,4 @@
-<template>
-  <HairyPosts pagination />
-</template>
+<template></template>
 
 <route lang="yaml">
 meta:

package/pages/page/[page].vue

@@ -1,10 +1,4 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <HairyPosts :pagination="true" :cur-page="parseInt(String($route.params.page))" />
-</template>
+<template></template>
 
 <route lang="yaml">
 meta:

package/styles/global.scss

@@ -6,6 +6,7 @@ body {
   font-family: var(--hy-font-family-seto);
   color: var(--va-c-text);
   background-color: var(--va-c-bg);
+  @apply transition-colors duration-200;
 }
 
 html,

package/utils/size.ts

@@ -19,7 +19,6 @@ export interface Size { width: string, height: string }
 /**
  * 将 size 转换为宽高，用于元素宽高
  * @param size AtWillSize
- * @returns
  */
 export function atWillToSize(size: AtWillSize, unit?: string): Size {
   const _atWillToUnit = (value: any) => atWillToUnit(value, unit)