valaxy-theme-hairy 0.0.6 → 0.0.9

package/components/HairyArticleSeries.vue

@@ -15,7 +15,7 @@ function isCurrent(title = '') {
 </script>
 
 <template>
-  <div class="pl-16px text-14px relative overflow-hidden">
+  <div class="pl-16px text-14px relative overflow-hidden animate__animated animate__fadeIn">
     <div class="outline-title">
       On this Series
     </div>

package/components/HairyBody.vue

@@ -9,7 +9,7 @@ const showWaline = computed(() => route.path.includes('/posts/') || fr.value.wal
 </script>
 
 <template>
-  <div class="HairyBody min-h-50vh relative">
+  <div class="HairyBody min-h-49vh relative">
     <div class="mx-auto breakpoint flex z-1 relative">
       <div class="relative flex-1 pt-2">
         <slot />

package/components/HairyFooter.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { capitalize, computed } from 'vue'
+import { useConfig, useThemeConfig } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+import pkg from 'valaxy/package.json'
+
+const { t } = useI18n()
+
+const config = useConfig()
+const themeConfig = useThemeConfig()
+
+const year = new Date().getFullYear()
+
+const isThisYear = computed(() => {
+  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)
+</script>
+
+<template>
+  <footer v-if="themeConfig.footer" class="va-footer p-4 pb-10" text="center sm" style="color:var(--va-c-text-light)">
+    <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
+        {{ themeConfig.footer.beian.icp }}
+      </a>
+    </div>
+
+    <div class="copyright flex justify-center items-center" p="1">
+      <span>
+        &copy;
+        <template v-if="!isThisYear">
+          {{ themeConfig.footer.since }} -
+        </template>
+        {{ year }}
+      </span>
+
+      <a v-if="footerIcon" class="inline-flex animate-pulse ml-2" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
+        <div :class="footerIcon.name" />
+      </a>
+
+      <span class="ml-2">{{ config.author.name }}</span>
+    </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>
+    </div>
+
+    <slot />
+  </footer>
+</template>

package/components/HairyHeader.vue

@@ -11,7 +11,7 @@ const { headerRef } = useContext()
 </script>
 
 <template>
-  <header ref="headerRef" class="HairyHeader relative">
+  <header ref="headerRef" class="HairyHeader 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">
         <template #description>

package/components/HairyLayout.vue

@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="HairyLayout">
+  <div class="HairyLayout min-h-100vh">
     <HairyNav />
     <HairyHeader v-bind="header">
       <template #description>
@@ -22,8 +22,7 @@ defineProps<{
       <template v-if="$slots['body-slide']" #slide>
         <slot name="body-slide" />
       </template>
-    </HairyBody>1
-    <HairyBackToTop />
-    <HairyMeting />
+    </HairyBody>
+    <HairyFooter class="z-1 relative" />
   </div>
 </template>

package/components/HairyToc.vue

@@ -32,7 +32,7 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div v-show="resolvedHeaders.length" ref="container">
+  <div v-show="resolvedHeaders.length" ref="container" class="animate__animated animate__fadeIn">
     <div class="content">
       <div class="outline-title">
         {{ themeConfig.outlineTitle || 'On this page' }}

package/components/HairyUserCard.vue

@@ -11,7 +11,7 @@ const description = computed(() => theme.value.user?.description || config.value
 </script>
 
 <template>
-  <div class="pt-5">
+  <div class="pt-5 animate__animated animate__fadeIn">
     <div class="flex flex-col items-center">
       <img class="mx-auto w-40 rounded-full -mx-1px" :src="config.author.avatar" />
       <div class="leading-loose mt-2">

package/components/HairyWaline.vue

@@ -22,4 +22,8 @@ useWaline({
   --waline-theme-color: var(--hy-c-primary);
   --waline-active-color: var(--hy-c-primary-dark)
 }
+.wl-editor {
+  padding: 4px;
+  width: calc(100% - 1rem - 8px);
+}
 </style>

package/index.d.ts

@@ -3,6 +3,9 @@ import type { ViteSSGContext } from 'vite-ssg'
 export interface HairyTheme {
   nav?: NavItem[];
   home?: {
+    headline?: string
+    title?: string
+    description?: string
     images?: string[]
   }
   user?: {
@@ -42,6 +45,46 @@ export interface HairyTheme {
     'storage-name'?: string
     [key: string]: any
   }
+
+  footer: Partial<{
+    /**
+     * 建站于
+     */
+    since: number
+
+    /**
+     * Icon between year and copyright info.
+     */
+    icon: {
+      /**
+       * icon name, i-xxx
+       */
+      name: string
+      animated: boolean
+      color: string
+      url: string
+      title: string
+    }
+
+    /**
+     * Powered by valaxy & valaxy-theme-${name}, default is yun
+     */
+    powered: boolean
+
+    /**
+     * Chinese Users | 中国用户
+     * 备案 ICP
+     * 国内用户需要在网站页脚展示备案 ICP 号
+     * https://beian.miit.gov.cn/
+     */
+    beian: {
+      enable: boolean
+      /**
+       * 苏ICP备xxxxxxxx号
+       */
+      icp: string
+    }
+  }>
 }
 export interface NavItem {
   text: string;

package/layouts/hairy.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const meta = computed(() => route.meta)
+const type = computed(() => meta.value.type || '')
+console.log(type.value)
+</script>
+
+<template>
+  <HairyBackToTop />
+  <HairyMeting />
+  <home v-if="type === 'home'" />
+  <post v-if="type === 'post'" />
+  <archives v-if="type === 'archives'" />
+  <categories v-if="type === 'categories'" />
+  <month v-if="type === 'month'" />
+  <tag v-if="type === 'tag'" />
+  <tags v-if="type === 'tags'" />
+  <year v-if="type === 'year'" />
+  <default v-if="type === 'default'" />
+</template>
+

package/layouts/tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <HairyLayout :header="{ title: `保护标签'${$route.params.tag}'的标签` }">
+  <HairyLayout :header="{ title: `包含标签'${$route.params.tag}'的标签` }">
     <router-view />
   </HairyLayout>
 </template>

package/modules/loading.scss

@@ -528,4 +528,8 @@
       transform: scale(0);
     }
   }
+}
+
+.dark .hy-loading {
+  background: var(--hy-c-gray-dark-5);
 }

package/node/addon-hairy.ts

@@ -1,11 +1,29 @@
-import type { ValaxyExtendConfig } from 'valaxy'
+import type { ResolvedValaxyOptions, ValaxyExtendConfig } from 'valaxy'
+import type { HairyTheme } from 'valaxy-theme-hairy'
 
-function addonHairy(): ValaxyExtendConfig {
+function addonHairy(options: ResolvedValaxyOptions<HairyTheme>): ValaxyExtendConfig {
+  const safelist = options.config.themeConfig?.nav?.filter(v => v.icon)?.map(v => v.icon || '') || []
   return {
     extendMd(ctx) {
       if (ctx.route.meta.excerpt)
         ctx.route.meta.frontmatter.text = removeTags(ctx.route.meta.excerpt)
     },
+    pages: {
+      extendRoute(route) {
+        // 改用 type, 由 theme 决定使用布局
+        if (!route.meta.type && route.meta.layout)
+          route.meta.type = route.meta.layout
+
+        if (!route.meta.type)
+          route.meta.type = 'default'
+
+        // 清除所有 layout, 使用统一入口 hairy.vue
+        route.meta.layout = 'hairy'
+      },
+    },
+    unocss: {
+      safelist,
+    },
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",
@@ -27,6 +27,7 @@
     "@iconify-json/simple-icons": "^1.1.19",
     "@vueuse/core": "^8.9.4",
     "@waline/client": "^2.6.1",
+    "animate.css": "^4.1.1",
     "dayjs": "^1.11.4",
     "defu": "^6.0.0",
     "element-plus": "^2.2.10",
@@ -34,8 +35,7 @@
     "markdown-toc": "^1.2.0",
     "reading-time": "^1.5.0",
     "swiper": "^8.3.1",
-    "unoverlay-vue": "0.2.1",
-    "yaml": "^2.1.1"
+    "unoverlay-vue": "0.2.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.182",

package/styles/aplayer.scss

@@ -0,0 +1,76 @@
+.aplayer.aplayer-fixed .aplayer-list,
+.aplayer .aplayer-info {
+  font-family: var(--hy-font-family-seto);
+}
+
+.dark {
+  .aplayer {
+    background: #2B2B2B;
+    padding: 6px;
+    color: #c2c2c2;
+  }
+
+
+
+  .aplayer.aplayer-fixed .aplayer-body {
+    background-color: #2B2B2B;
+  }
+
+  .aplayer.aplayer-fixed .aplayer-info {
+    border: none;
+  }
+
+  .aplayer .aplayer-miniswitcher {
+    background: #bebebe;
+  }
+
+  .aplayer.aplayer-fixed .aplayer-list {
+    border: none;
+  }
+
+  .aplayer .aplayer-list ol {
+    padding-right: 4px;
+  }
+
+  .aplayer .aplayer-list ol li.aplayer-list-light {
+    background-color: #404040;
+    color: var(--hy-c-primary);
+
+    .aplayer-list-cur {
+      background-color: var(--hy-c-primary) !important;
+    }
+  }
+
+  .aplayer .aplayer-list ol li {
+    border: none;
+
+    &:hover {
+      background: #373737;
+    }
+  }
+
+  .aplayer .aplayer-list ol li:nth-child(2n) {
+    background: #2F2F2F;
+
+    &:hover {
+      background: #373737;
+    }
+  }
+
+  .aplayer .aplayer-list ol li .aplayer-list-index,
+  .aplayer .aplayer-list ol li .aplayer-list-author {
+    color: #8C8C8C;
+  }
+
+  .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
+    fill: #d9d9d9 !important;
+  }
+
+  .aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
+    // fill: #c2c2c2;
+  }
+
+  .aplayer-pic {
+    // border-radius: 4px;
+  }
+}

package/styles/index.scss

@@ -2,6 +2,8 @@
 @import "./markdown.scss";
 @import "./element-plus/index.scss";
 @import "./scrollbar.scss";
+@import "./aplayer.scss";
+@import "animate.css";
 
 body {
   font-family: var(--hy-font-family-seto);
@@ -10,6 +12,7 @@ body {
 
 #app {
   @apply transition-none;
+  min-height: 100vh;
 }
 
 a {

package/valaxy.config.ts

@@ -7,11 +7,13 @@ import addonStatistics from './node/addon-statistics'
 import addonToc from './node/addon-toc'
 export default defineTheme<HairyTheme>((options) => {
   const images = addonImages(options)
+  const hairy = addonHairy(options)
 
   return {
     vite: images.vite,
+    pages: hairy.pages,
     extendMd(ctx) {
-      addonHairy().extendMd?.(ctx)
+      hairy.extendMd?.(ctx)
       images.extendMd?.(ctx)
       addonStatistics().extendMd?.(ctx)
       addonToc().extendMd?.(ctx)