valaxy-theme-hairy 1.0.3 → 1.0.5

package/components/HairyFooter.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useConfig, useSiteConfig, useThemeConfig } from 'valaxy'
+import { useConfig, useRuntimeConfig, useSiteConfig, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import pkg from 'valaxy/package.json'
 import type { HairyTheme } from 'valaxy-theme-hairy'
@@ -19,8 +19,8 @@ const isThisYear = computed(() => {
 
 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()
+const runtimeConfig = useRuntimeConfig()
+const addonWaline = computed(() => runtimeConfig.value.addons['valaxy-addon-waline'])
 </script>
 
 <template>
@@ -45,11 +45,13 @@ const footerIcon = computed(() => themeConfig.value.footer?.icon)
         </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>
+        <template v-if="addonWaline.options?.pageview">
+          <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>
+        </template>
       </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>

package/components/HairyImageGroup.vue

@@ -2,8 +2,8 @@
 import { computed, provide, useCssVars, useSlots } from 'vue'
 import { renderOverlay } from '@overlastic/vue'
 import type { ImageViewerProps } from 'element-plus'
+import { atWillToUnit } from '../utils'
 import HairyImageViewer from './parts/HairyImageViewer.vue'
-import { atWillToUnit } from '../utils';
 
 const props = withDefaults(defineProps<{
   row?: string | number

package/components/parts/HairyImageGlobal.vue

@@ -2,8 +2,8 @@
 import { provide, useCssVars } from 'vue'
 import { renderOverlay } from '@overlastic/vue'
 import type { ImageViewerProps } from 'element-plus'
+import { atWillToUnit } from '../../utils'
 import HairyImageViewer from './HairyImageViewer.vue'
-import { atWillToUnit } from '../../utils';
 
 const props = withDefaults(defineProps<{
   row?: string | number

package/components/parts/HairyLink.vue

@@ -7,7 +7,7 @@ defineProps<{
 
 <template>
   <a
-    class="cursor-pointer" :class="[
+    class="cursor-pointer transition-colors" :class="[
       type === 'white'
         ? 'text-black hover:text-primary dark:text-white'
         : 'text:text-primary-light hover:text-primary-dark',

package/components/posts/HairyArticleImage.vue

@@ -59,7 +59,7 @@ function displayCategory(keys: string | string[] = []) {
               </span>
             </a>
             <div class="text-base leading-6 font-medium">
-              <a class="link cursor-pointer" aria-label="read more" @click="onReadMore">
+              <a class="link flex gap-2 cursor-pointer" aria-label="read more" @click="onReadMore">
                 <span v-if="reverse">←</span>
                 <span class="hidden md:block">Read more</span>
                 <span v-if="!reverse">→</span>
@@ -85,7 +85,7 @@ function displayCategory(keys: string | string[] = []) {
 
 .dark {
   .post-image {
-    @apply opacity-75 hover:opacity-90 ;
+    @apply opacity-75 hover:opacity-90 duration-200;
   }
 }
 

package/components/posts/HairyPostFooter.vue

@@ -9,7 +9,7 @@ const route = useRoute()
     <div class="border-t border-gray-200 dark:border-gray-600" />
     <div class="flex items-center justify-end mt-2">
       <div class="i-ri-eye-fill mr-2" />
-      阅读次数 <span class="waline-pageview-count mx-2" :data-path="route.path"> - </span> 次
+      阅读次数 <span class="waline-pageview-count mx-2" :data-path="route.path" /> 次
     </div>
   </div>
 </template>

package/composables/tags.ts

@@ -24,7 +24,7 @@ export function useHairyTags(options: {
     const range = max - min
     const percent = (count - min) / range
     return {
-      '--yun-tag-color': gray.mix(primaryColor, percent * 100).toString(),
+      '--yun-tag-color': gray.mix(primaryColor, (percent || 0) * 100).toString(),
       'fontSize': `${percent * 36 + 12}px`,
     }
   }

package/layouts/post.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ElTag, dayjs } from 'element-plus'
-import { useFrontmatter } from 'valaxy'
+import { useFrontmatter, useRuntimeConfig } from 'valaxy'
 import { useRouter } from 'vue-router'
+import { computed } from 'vue'
 
 import 'element-plus/theme-chalk/el-tag.css'
 
@@ -13,6 +14,8 @@ defineProps<{
   }
 }>()
 
+const runtimeConfig = useRuntimeConfig()
+const addonWaline = computed(() => runtimeConfig.value.addons['valaxy-addon-waline'])
 const router = useRouter()
 const post = useFrontmatter()
 
@@ -43,7 +46,7 @@ function displayTag(tag: string) {
         <HairyImageGlobal>
           <router-view />
         </HairyImageGlobal>
-        <HairyPostFooter />
+        <HairyPostFooter v-if="addonWaline.options?.pageview" />
       </template>
       <template #slide>
         <HairyTabbar />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "packageManager": "pnpm@8.10.5",
   "author": {
     "email": "wwu710632@gmail.com",
@@ -21,16 +21,16 @@
   "main": "client/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
+    "@iconify-json/ant-design": "^1.1.3",
+    "@iconify-json/fluent": "^1.1.18",
+    "@iconify-json/material-symbols": "^1.1.83",
+    "@iconify-json/simple-icons": "^1.1.19",
     "@overlastic/vue": "^0.4.7",
     "element-plus": "^2.7.6",
     "pinia": "^2.1.7",
     "swiper": "^11.0.5"
   },
   "devDependencies": {
-    "@iconify-json/ant-design": "^1.1.3",
-    "@iconify-json/fluent": "^1.1.18",
-    "@iconify-json/material-symbols": "^1.1.83",
-    "@iconify-json/simple-icons": "^1.1.19",
     "valaxy": "^0.19.1",
     "valaxy-addon-algolia": "^0.0.3",
     "valaxy-addon-meting": "^0.1.3",

package/utils/index.ts

@@ -1,2 +1,2 @@
 export * from './size'
-export * from './util'
+export * from './util'

package/utils/size.ts

@@ -1,4 +1,3 @@
-
 function isString(val: any) {
   return typeof val === 'string'
 }
@@ -14,8 +13,8 @@ export function atWillToUnit(value: any, unit = 'px') {
 }
 
 /** size 转换配置 */
-export type AtWillSize = any | [any, any] | { width: any; height: any }
-export interface Size { width: string; height: string }
+export type AtWillSize = any | [any, any] | { width: any, height: any }
+export interface Size { width: string, height: string }
 
 /**
  * 将 size 转换为宽高，用于元素宽高

package/valaxy.config.ts

@@ -16,6 +16,9 @@ export default defineTheme<ThemeConfig>((options) => {
       },
       outline: 2,
       theme: 'dark',
+      layout: {
+        post: 'image:slice:reverse',
+      },
     },
   }