valaxy-theme-hairy 1.0.4 → 1.0.6

package/components/HairyFooter.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useConfig, useSiteConfig, useThemeConfig, useRuntimeConfig } 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'
@@ -52,7 +52,6 @@ const addonWaline = computed(() => runtimeConfig.value.addons['valaxy-addon-wali
             <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/HairyLinks.vue

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

@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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',
+      },
     },
   }