valaxy-theme-hairy 0.1.3 → 0.1.4

package/components/HairyBody.vue

@@ -15,6 +15,7 @@ const showWaline = computed(() => route.path.includes('/posts/') || fr.value.wal
         <slot />
         <HairyWaline v-if="showWaline" />
       </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" />
@@ -27,10 +28,6 @@ const showWaline = computed(() => route.path.includes('/posts/') || fr.value.wal
 </template>
 
 <style lang="scss">
-.a {
-  overflow: hidden;
-}
-
 .HairyBodyBackground {
   @apply transition-all duration-200;
   @apply absolute top-0 max-h-150vh top-5 bottom-0 w-full transition-opacity;
@@ -43,8 +40,7 @@ const showWaline = computed(() => route.path.includes('/posts/') || fr.value.wal
     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(https://tva2.sinaimg.cn/large/008ugSUaly8h4mt4lbuc0j31hc0u040c.jpg);
+      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;

package/components/HairyFooterFish.vue

@@ -1,16 +1,26 @@
+<!-- eslint-disable no-new -->
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import { useScriptTag } from '@vueuse/core'
-import { RENDERER } from './fish'
+import { RENDERER } from './lib/fish'
 
 const fishContainer = ref()
 
 const tag = useScriptTag('https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js')
+
+let renderer: RENDERER
+
+function reset() {
+  const color = 'hsl(0, 0%, 95%)'
+  if (!renderer)
+    renderer = new RENDERER(color)
+  else
+    renderer.setColor(color)
+}
+
 onMounted(() => {
   tag.load()
-    .then(() => {
-      new RENDERER().init()
-    })
+    .then(reset)
 })
 </script>
 

package/components/HairyNavBackground.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="HairyNavBackground transition-colors absolute inset-0 bg-white bg-opacity-80 dark:bg-black dark:bg-opacity-80 blur-5" />
+  <div class="HairyNavBackground transition-colors absolute inset-0 bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 blur-5" />
 </template>
 
 <style>

package/components/HairyNavToggleDark.vue

@@ -10,7 +10,7 @@ const themeTitle = computed(() => {
 </script>
 
 <template>
-  <button class="yun-icon-btn" :title="themeTitle" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
+  <button class="yun-icon-btn bg-light-1 p-1 dark:bg-transparent rounded-5" :title="themeTitle" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
     <div i="ri-sun-line dark:ri-moon-line" />
   </button>
 </template>

package/components/HairyPostList.vue

@@ -23,9 +23,12 @@ const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts
 </script>
 
 <template>
-  <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" />
+  <div class="mt-8">
+    <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" />
+  </div>
 </template>
 
 <style lang="scss">

package/components/HairyPostToggleLayout.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { useScroll } from '@vueuse/core'
+import { computed } from 'vue'
+import { usePostLayout } from '../hooks/usePostLayout'
+import { useHeaderHeight } from '../hooks/useHeaderHeight'
+import type { HairyPostLayout } from '..'
+
+const layout = usePostLayout()
+const layouts = [
+  { layout: 'image:slice:reverse' as HairyPostLayout, icon: 'i-fluent-text-align-distributed-24-filled' },
+  { layout: 'image:slice' as HairyPostLayout, icon: 'i-fluent-text-align-left-16-filled' },
+  { layout: 'image' as HairyPostLayout, icon: 'i-fluent-text-align-justify-20-filled' },
+  { layout: 'markdown' as HairyPostLayout, icon: 'i-fluent-markdown-20-filled' },
+  { layout: 'text' as HairyPostLayout, icon: 'i-fluent-code-text-16-filled' },
+]
+
+const headerHeight = useHeaderHeight()
+const scroll = useScroll(document)
+
+const show = computed(() => {
+  return scroll.y.value > headerHeight.value
+})
+</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 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>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/{HairyArticleImageDefault.vue → article-layout/HairyArticleImage.vue}

@@ -5,8 +5,8 @@ import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { last } from 'lodash-es'
-import { usePostLayout } from '../hooks/usePostLayout'
-import { toArr } from '../utils'
+import { usePostLayout } from '../../hooks/usePostLayout'
+import { toArr } from '../../utils'
 
 const props = defineProps<{
   post: Post
@@ -30,24 +30,24 @@ const displayCategory = (keys: string | string[] = []) => {
 </script>
 
 <template>
-  <li class="HairyArticleImage my-10 py-2" :class="[slice && 'slice', reverse && 'reverse']">
+  <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" :class="[reverse ? 'order-first' : 'order-last']" @click="onReadMore">{{ post.title }}</a>
-        <div class="flex justify-end gap-2 text-size-sm">
+        <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.length / 1000).toFixed(1) }}k字</span>
-          <span>{{ post.durations.minutes.toFixed(2) }}分钟</span>
+          <span class="lt-sm:hidden">{{ post.durations.minutes.toFixed(2) }}分钟</span>
         </div>
       </div>
-      <div class="h-200px flex">
+      <div class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5 duration-200" :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"
           />
         </div>
-        <div class="flex flex-col justify-between flex-1">
+        <div class="flex-1 flex flex-col justify-between py-2 dark:py-0">
           <div class="flex-1 text-size-sm">
             <div class="line-clamp-text">
               {{ post.text }}

package/components/{HairyArticleSeries.vue → article-layout/HairyArticleSeries.vue}

@@ -2,8 +2,8 @@
 import { useFrontmatter } from 'valaxy'
 import { computed, inject, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { toArr } from '../utils'
-import { useCurrentCategory } from '../hooks/useCategory'
+import { toArr } from '../../utils'
+import { useCurrentCategory } from '../../hooks/useCategory'
 
 const frontmatter = useFrontmatter()
 const paths = computed(() => toArr(frontmatter.value.categories).filter(Boolean) as string[])

package/components/{HairyArticleText.vue → article-layout/HairyArticleText.vue}

@@ -1,25 +1,16 @@
 <script lang="ts" setup>
-import { useThemeConfig } from 'valaxy'
 import type { Post } from 'valaxy'
 import { computed, defineProps } from 'vue'
-import type { HairyTheme } from '..'
+import { usePostLayout } from '../../hooks/usePostLayout'
 const props = defineProps<{
   post: Post
 }>()
-const themeConfig = useThemeConfig<HairyTheme>()
-const layout = computed(() => themeConfig.value.post?.layout || 'text')
+const layout = usePostLayout()
 const text = computed(() => {
   if (layout.value === 'text')
     return props.post.text
   return props.post.excerpt
 })
-
-const Blogs = {
-  name: 'Mao’s blog',
-  desc: '记录生活、持续学习。',
-  link: 'https://hairy.blog/',
-  thumbnail: 'https://user-images.githubusercontent.com/49724027/182444624-6228d153-94cb-461d-a5d8-be8535441fb6.png',
-}
 </script>
 
 <template>

package/components/{HairyPostImageList.vue → article-layout/HairyPostImageList.vue}

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
 
-import { usePostLayout } from '../hooks/usePostLayout'
+import { usePostLayout } from '../../hooks/usePostLayout'
 
 const props = withDefaults(defineProps<{
   type?: string
@@ -21,7 +21,7 @@ const reverse = computed(() => layout.value.includes('reverse'))
 <template>
   <ul class="divide-y divide-gray-200 dark:divide-gray-700">
     <Transition v-for="post, i in posts" :key="i" name="fade">
-      <HairyArticleImage :post="post" :reverse="reverse && (i % 2) === 0" />
+      <HairyArticleImage :post="post" :reverse="reverse && !((i % 2) === 0)" />
     </Transition>
   </ul>
 </template>

package/components/{fish.js → lib/fish.js}

@@ -11,9 +11,15 @@ class RENDERER {
   MAX_INTERVAL_COUNT = 50
   INIT_HEIGHT_RATE = 0.5
   THRESHOLD = 50
-  init() {
+
+  COLOR = 'hsl(0, 0%, 95%)'
+
+  constructor(color) {
     if (this.ENABLE)
       return
+
+    this.setColor(color)
+    this.removeCanvas()
     this.setParameters()
     this.reconstructMethods()
     this.setup()
@@ -22,6 +28,18 @@ class RENDERER {
     this.ENABLE = true
   }
 
+  removeCanvas() {
+    const container = document.querySelector('#jsi-flying-fish-container')
+    const canvas = container.querySelector('canvas')
+    if (canvas)
+      canvas.remove()
+  }
+
+  setColor(color) {
+    if (color)
+      this.COLOR = color
+  }
+
   setParameters() {
     this.$window = $(window)
     this.$container = $('#jsi-flying-fish-container')
@@ -148,7 +166,7 @@ class RENDERER {
     requestAnimationFrame(this.render)
     this.controlStatus()
     this.context.clearRect(0, 0, this.width, this.height)
-    this.context.fillStyle = 'hsl(0, 0%, 95%)'
+    this.context.fillStyle = this.COLOR
     for (let i = 0, count = this.fishes.length; i < count; i++)
       this.fishes[i].render(this.context)
 

package/hooks/usePostLayout.ts

@@ -1,9 +1,16 @@
 import { useThemeConfig } from 'valaxy'
+import { createSharedComposable, useStorage } from '@vueuse/core'
 import { computed } from 'vue'
-import type { HairyTheme } from '..'
+import type { HairyPostLayout, HairyTheme } from '..'
+
+const useSharedStorage = createSharedComposable(useStorage)
 
 export function usePostLayout() {
   const themeConfig = useThemeConfig<HairyTheme>()
-  const layout = computed(() => themeConfig.value.post?.layout || 'text')
+  const cache = useSharedStorage<HairyPostLayout>('--hairy-theme:post-layout', null)
+  const layout = computed({
+    get: () => cache.value || themeConfig.value.post?.layout || 'image',
+    set: value => cache.value = value,
+  })
   return layout
 }

package/index.d.ts

@@ -1,5 +1,7 @@
 import type { ViteSSGContext } from 'vite-ssg'
 
+export type HairyPostLayout = 'text' | 'markdown' | 'image' | 'image:slice' | 'image:slice:reverse'
+
 export interface HairyTheme {
   nav?: NavItem[];
   mode?: 'dark'
@@ -14,7 +16,7 @@ export interface HairyTheme {
     description?: string;
   };
   post?: {
-    layout?: 'text' | 'markdown' | 'image' | 'image:slice' | 'image:slice:reverse'
+    layout?: HairyPostLayout
     images?: string[]
   }
   categories?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",

package/pages/categories/[...categories].vue

@@ -7,14 +7,12 @@ import { ElTimeline, ElTimelineItem } from 'element-plus/es/components/timeline/
 import { useCurrentCategory } from '../../hooks/useCategory'
 import { useCategoryPost } from '../../hooks/useCategoryPost'
 
-import { usePostLayout } from '../../hooks/usePostLayout'
 import type { HairyTheme } from '../..'
 import 'element-plus/es/components/timeline/style/index'
 import 'element-plus/es/components/timeline-item/style/index'
 const props = defineProps<{
   categories: string
 }>()
-const layout = usePostLayout()
 const themeConfig = useThemeConfig<HairyTheme>()
 const categoriesLayout = computed(() => themeConfig.value.categories?.layout || 'post')
 
@@ -76,8 +74,7 @@ const displayCategory = (key: string) => {
     </el-timeline-item>
   </el-timeline>
   <template v-else>
-    <HairyPostImageList v-if="layout.includes('image')" :posts="posts" />
-    <HairyPostList v-else :posts="posts" />
+    <HairyPostList :posts="posts" />
   </template>
 </template>
 

package/unocss.config.ts

@@ -1,6 +1,15 @@
 import { defineConfig } from 'unocss'
 const safelist = [
   'i-ri:home-2-fill',
+  'i-ri-list-check-2',
+  'i-ri-flow-chart',
+  'i-ri-user-line',
+
+  'i-fluent-text-align-distributed-24-filled',
+  'i-fluent-text-align-left-16-filled',
+  'i-fluent-text-align-justify-20-filled',
+  'i-fluent-markdown-20-filled',
+  'i-fluent-code-text-16-filled',
 ]
 export default defineConfig({
   theme: {
@@ -20,6 +29,7 @@ export default defineConfig({
     ['font-frederick', { 'font-family': 'var(--hy-font-family-frederick)' }],
     ['text-primary', { color: 'var(--hy-c-primary)' }],
     ['border-primary', { 'border-color': 'var(--hy-c-primary)' }],
+    ['bg-primary', { background: 'var(--hy-c-primary)' }],
   ],
   shortcuts: [
     ['flex-center', 'flex justify-center items-center'],

package/components/HairyArticleImage.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import type { Post } from 'valaxy'
-
-defineProps<{
-  post: Post
-  reverse?: boolean
-}>()
-</script>
-
-<template>
-  <HairyArticleImageDefault :post="post" :reverse="reverse" class="hidden sm:block" />
-  <HairyArticleImageSmall :post="post" :reverse="reverse" class="hidden lt-sm:block" />
-</template>
-
-<style lang="scss">
-
-</style>

package/components/HairyArticleImageSmall.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup>
-import type { Post } from 'valaxy'
-import { computed, defineProps } from 'vue'
-import dayjs from 'dayjs'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { last } from 'lodash-es'
-import { usePostLayout } from '../hooks/usePostLayout'
-import { toArr } from '../utils'
-
-const props = defineProps<{
-  post: Post
-  reverse?: boolean
-}>()
-const router = useRouter()
-const layout = usePostLayout()
-const slice = computed(() => layout.value.includes('slice'))
-const image = computed(() => props.post.image)
-
-const i18n = useI18n()
-
-const onReadMore = () => {
-  if (props.post.path)
-    router.push(props.post.path)
-}
-
-const displayCategory = (keys: string | string[] = []) => {
-  router.push({ path: `/categories/${toArr(keys).join('/')}` })
-}
-</script>
-
-<template>
-  <li class="HairyArticleImage my-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" :class="[reverse ? 'order-first' : 'order-last']" @click="onReadMore">{{ post.title }}</a>
-        <div class="flex justify-end gap-2 text-size-sm">
-          <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
-          <span>{{ (post.length / 1000).toFixed(1) }}k字</span>
-          <span>{{ post.durations.minutes.toFixed(2) }}分钟</span>
-        </div>
-      </div>
-    </article>
-  </li>
-</template>
-
-<style lang="scss">
-
-</style>