valaxy-theme-hairy 0.0.11 → 0.0.15

package/components/HairyArticleText.vue

@@ -13,6 +13,13 @@ const text = computed(() => {
     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/HairyFooter.vue

@@ -21,7 +21,7 @@ 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)">
+  <footer v-if="themeConfig.footer" class="va-footer p-4 pt-5 pb-14" 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 }}
@@ -41,7 +41,12 @@ const footerIcon = computed(() => themeConfig.value.footer.icon)
         <div :class="footerIcon.name" />
       </a>
 
-      <span class="ml-2">{{ config.author.name }}</span>
+      <span>{{ config.author.name }}</span>
+      <span class="mx-2">|</span>
+      <span v-if="config.comment.waline" class="flex items-center">
+        <div class="i-ri-eye-fill mr-1" />
+        <span class="waline-pageview-count" data-path="/" />
+      </span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">

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;
+
+  .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/HairyWaline.vue

@@ -6,6 +6,10 @@ const config = useConfig()
 // 挂载 Waline
 useWaline({
   el: '#waline',
+  emoji: [
+    '//unpkg.com/@waline/emojis@1.0.1/weibo',
+    '//unpkg.com/@waline/emojis@1.0.1/bilibili',
+  ],
   ...config.value.comment.waline,
 })
 </script>
@@ -26,4 +30,15 @@ useWaline({
   padding: 4px;
   width: calc(100% - 1rem - 8px);
 }
+.wl-emoji-popup {
+  border-bottom: none !important;
+  z-index: 1000;
+}
+.wl-emoji-popup .wl-tabs {
+  height: auto !important;
+  overflow-x: auto !important;
+  padding: 0 !important;
+  margin-left: -1px;
+  margin-right: -1px;
+}
 </style>

package/layouts/hairy.vue

@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import { pageviewCount } from '@waline/client'
+import { useConfig } from 'valaxy'
 
 const route = useRoute()
 const meta = computed(() => route.meta)
 const type = computed(() => meta.value.type || '')
-console.log(type.value)
+const config = useConfig()
+
+onMounted(() => {
+  pageviewCount({
+    serverURL: config.value.comment.waline.serverURL,
+    path: window.location.pathname,
+  })
+})
 </script>
 
 <template>

package/layouts/post.vue

@@ -1,8 +1,16 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
+import { ElTag } from 'element-plus/es/components/tag/index'
+import 'element-plus/es/components/tag/style/index'
 import dayjs from 'dayjs'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 const post = useFrontmatter()
+
+const displayTag = (tag: string) => {
+  router.push(`/tags/${tag}`)
+}
 </script>
 
 <template>
@@ -16,11 +24,25 @@ const post = useFrontmatter()
         <span>本文字数 {{ (post.length / 1000).toFixed(1) }}k 字</span>
         <span>阅读时长 {{ post.durations.minutes.toFixed(2) }} 分钟</span>
       </div>
+      <div v-if="post.tags?.length" class="tags flex-center gap-2 mt-2">
+        <el-tag v-for="(tag) in post.tags" :key="tag" class="dark:bg-dark-50 cursor-pointer" @click="displayTag(tag)">
+          {{ tag }}
+        </el-tag>
+      </div>
     </template>
     <router-view />
+    <div class="mb-15">
+      <div class="border-t border-gray-200 dark:border-gray-600"></div>
+      <div class="flex items-center justify-end mt-2">
+        <div class="i-ri-eye-fill mr-2" />
+        阅读次数 <span class="waline-pageview-count mx-2" /> 次
+      </div>
+    </div>
     <template #body-slide>
       <HairyUserTab />
     </template>
   </HairyLayout>
 </template>
 
+<style lang="scss">
+</style>

package/modules/loading.ts

@@ -1,10 +1,13 @@
 import './loading.scss'
 import { ref } from 'vue'
+import { fontFacePromise } from '../utils/fonts'
 import type { UserModule } from '..'
 
 export const install: UserModule = ({ router }) => {
   showFullLoading()
-  router.afterEach(hideFullLoading)
+  router.afterEach(() => {
+    fontFacePromise.then(hideFullLoading)
+  })
 }
 
 export const isLoading = ref(false)

package/package.json

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

package/styles/font-face.scss

@@ -14,7 +14,7 @@
   src: url('./fonts/Modesty.ttf')
 }
 
-@font-face {
-  font-family: "Seto";
-  src: url('./fonts/Seto.ttf')
-}
+// @font-face {
+//   font-family: "Seto";
+//   src: url('./fonts/Seto.ttf')
+// }

package/styles/index.scss

@@ -8,6 +8,7 @@
 body {
   font-family: var(--hy-font-family-seto);
   @apply transition-colors duration-200;
+  color: var(--va-c-text);
 }
 
 #app {
@@ -65,4 +66,8 @@ body {
   .breakpoint {
     width: 75vw;
   }
+}
+
+body {
+  // background-image: linear-gradient(to top, #f7f7f7 0, #fdfdfd 20%) no-repeat bottom;
 }

package/styles/markdown.scss

@@ -57,4 +57,19 @@ html.dark {
 .custom-block.tip {
   background-color: rgba(200, 200, 200, 0.1);
   border-color: var(--hy-c-primary);
+}
+
+.markdown-body {
+  --un-prose-borders: var(--hy-c-primary);
+}
+
+.prose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
+  background: rgba(200, 200, 200, 0.1);
+  @apply py-1px;
+
+  font-size: 15px;
+
+  >p {
+    margin: 0.5rem 0;
+  }
 }

package/utils/fonts.ts

@@ -0,0 +1,15 @@
+import Seto from '../styles/fonts/Seto.ttf?url'
+import { createPromise } from '.'
+
+export const fontFacePromise = createPromise<void>()
+
+async function loadFonts(fontFamily: string, url: string) {
+  const font = new FontFace(fontFamily, `url(${url})`)
+  await font.load()
+  ;(document.fonts as any).add(font)
+}
+
+(async () => {
+  await loadFonts('Seto', Seto)
+  fontFacePromise.resolve()
+})()

package/utils/index.ts

@@ -36,3 +36,20 @@ export const atWillToUnit = (value: AtWillNumber, unit = 'px') => {
     return ''
   return isString(value) && /\D/g.test(value) ? value : value + unit
 }
+
+export interface PromiseResolver<T = void> extends Promise<T> {
+  resolve: (value: T) => void
+  reject: Function
+}
+export function createPromise<T>(): PromiseResolver<T> {
+  let resolve
+  let reject
+  // eslint-disable-next-line promise/param-names
+  const promise: any = new Promise((_r, _j) => {
+    resolve = _r
+    reject = _j
+  })
+  promise.resolve = resolve
+  promise.reject = reject
+  return promise as PromiseResolver<T>
+}

package/valaxy.config.ts

@@ -12,6 +12,7 @@ export default defineTheme<HairyTheme>((options) => {
   return {
     vite: images.vite,
     pages: hairy.pages,
+    unocss: hairy.unocss,
     extendMd(ctx) {
       hairy.extendMd?.(ctx)
       images.extendMd?.(ctx)

package/utils/loading.scss

@@ -1,531 +0,0 @@
-.vp-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  width: 100vw;
-  height: 100vh;
-  background: #eee;
-
-  transition: opacity 0.5s;
-
-  .wrapper {
-    width: 50px;
-    height: 50px;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    margin-left: -50px;
-    margin-top: -50px;
-  
-  }
-  
-  #preloader {
-    width: 50px;
-    height: 50px;
-    border: 2px solid var(--hy-c-primary);
-    border-radius: 0px;
-    -webkit-animation: preloader 4.5s infinite linear;
-    -moz-animation: preloader 4.5s infinite linear;
-    -ms-animation: preloader 4.5s infinite linear;
-    animation: preloader 4.5s infinite linear;
-  }
-  
-  #preloader:after {
-    content: '';
-    width: 14px;
-    height: 14px;
-    background: var(--hy-c-primary);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-left: -7px;
-    margin-top: -7px;
-    border-radius: 20px;
-    -webkit-animation: preloader_after 4.5s infinite linear;
-    -moz-animation: preloader_after 4.5s infinite linear;
-    -ms-animation: preloader_after 4.5s infinite linear;
-    animation: preloader_after 4.5s infinite linear;
-    -webkit-transform: scale(0);
-  }
-  
-  @-webkit-keyframes preloader {
-    0% {
-      -webkit-transform: scale(0)
-    }
-  
-    10% {
-      -webkit-transform: scale(1.3)
-    }
-  
-    12% {
-      -webkit-transform: scale(1)
-    }
-  
-    15% {
-      -webkit-transform: scale(1.3)
-    }
-  
-    17% {
-      -webkit-transform: scale(1)
-    }
-  
-    25% {
-      -webkit-transform: scale(1)
-    }
-  
-    40% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    42% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    44% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    46% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    48% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    50% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    95% {
-      -webkit-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    100% {
-      -webkit-transform: scale(0) rotate(180deg);
-      border-radius: 100px;
-    }
-  }
-  
-  @-moz-keyframes preloader {
-    0% {
-      -moz-transform: scale(0)
-    }
-  
-    10% {
-      -moz-transform: scale(1.3)
-    }
-  
-    12% {
-      -moz-transform: scale(1)
-    }
-  
-    15% {
-      -moz-transform: scale(1.3)
-    }
-  
-    17% {
-      -moz-transform: scale(1)
-    }
-  
-    25% {
-      -moz-transform: scale(1)
-    }
-  
-    40% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    42% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    44% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    46% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    48% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    50% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    95% {
-      -moz-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    100% {
-      -moz-transform: scale(0) rotate(180deg);
-      border-radius: 100px;
-    }
-  }
-  
-  @-ms-keyframes preloader {
-    0% {
-      -ms-transform: scale(0)
-    }
-  
-    10% {
-      -ms-transform: scale(1.3)
-    }
-  
-    12% {
-      -ms-transform: scale(1)
-    }
-  
-    15% {
-      -ms-transform: scale(1.3)
-    }
-  
-    17% {
-      -ms-transform: scale(1)
-    }
-  
-    25% {
-      -ms-transform: scale(1)
-    }
-  
-    40% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    42% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    44% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    46% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    48% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    50% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    95% {
-      -ms-transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    100% {
-      -ms-transform: scale(0) rotate(180deg);
-      border-radius: 100px;
-    }
-  }
-  
-  @keyframes preloader {
-    0% {
-      transform: scale(0)
-    }
-  
-    10% {
-      transform: scale(1.3)
-    }
-  
-    12% {
-      transform: scale(1)
-    }
-  
-    15% {
-      transform: scale(1.3)
-    }
-  
-    17% {
-      transform: scale(1)
-    }
-  
-    25% {
-      transform: scale(1)
-    }
-  
-    40% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    42% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    44% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    46% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 0px;
-    }
-  
-    48% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    50% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    95% {
-      transform: scale(1) rotate(180deg);
-      border-radius: 20px;
-    }
-  
-    100% {
-      transform: scale(0) rotate(180deg);
-      border-radius: 100px;
-    }
-  }
-  
-  @-webkit-keyframes preloader_after {
-    0% {
-      -webkit-transform: scale(0);
-    }
-  
-    45% {
-      -webkit-transform: scale(0);
-    }
-  
-    50% {
-      -webkit-transform: scale(1);
-    }
-  
-    55% {
-      -webkit-transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    60% {
-      -webkit-transform: scale(1) translateY(20px) translateX(14px);
-    }
-  
-    65% {
-      -webkit-transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    70% {
-      -webkit-transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    75% {
-      -webkit-transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    80% {
-      -webkit-transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    85% {
-      -webkit-transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    90% {
-      -webkit-transform: scale(1) translateY(0px) translateX(0px);
-    }
-  
-    95% {
-      -webkit-transform: scale(1.5);
-    }
-  
-    100% {
-      -webkit-transform: scale(0);
-    }
-  }
-  
-  @-moz-keyframes preloader_after {
-    0% {
-      -moz-transform: scale(0);
-    }
-  
-    45% {
-      -moz-transform: scale(0);
-    }
-  
-    50% {
-      -moz-transform: scale(1);
-    }
-  
-    55% {
-      -moz-transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    60% {
-      -moz-transform: scale(1) translateY(20px) translateX(14px);
-    }
-  
-    65% {
-      -moz-transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    70% {
-      -moz-transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    75% {
-      -moz-transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    80% {
-      -moz-transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    85% {
-      -moz-transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    90% {
-      -moz-transform: scale(1) translateY(0px) translateX(0px);
-    }
-  
-    95% {
-      -moz-transform: scale(1.5);
-    }
-  
-    100% {
-      -moz-transform: scale(0);
-    }
-  }
-  
-  @-ms-keyframes preloader_after {
-    0% {
-      -ms-transform: scale(0);
-    }
-  
-    45% {
-      -ms-transform: scale(0);
-    }
-  
-    50% {
-      -ms-transform: scale(1);
-    }
-  
-    55% {
-      -ms-transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    60% {
-      -ms-transform: scale(1) translateY(20px) translateX(14px);
-    }
-  
-    65% {
-      -ms-transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    70% {
-      -ms-transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    75% {
-      -ms-transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    80% {
-      -ms-transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    85% {
-      -ms-transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    90% {
-      -ms-transform: scale(1) translateY(0px) translateX(0px);
-    }
-  
-    95% {
-      -ms-transform: scale(1.5);
-    }
-  
-    100% {
-      -ms-transform: scale(0);
-    }
-  }
-  
-  @keyframes preloader_after {
-    0% {
-      transform: scale(0);
-    }
-  
-    45% {
-      transform: scale(0);
-    }
-  
-    50% {
-      transform: scale(1);
-    }
-  
-    55% {
-      transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    60% {
-      transform: scale(1) translateY(20px) translateX(14px);
-    }
-  
-    65% {
-      transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    70% {
-      transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    75% {
-      transform: scale(1) translateY(-20px) translateX(14px);
-    }
-  
-    80% {
-      transform: scale(1) translateY(20px) translateX(-14px);
-    }
-  
-    85% {
-      transform: scale(1) translateY(-20px) translateX(-14px);
-    }
-  
-    90% {
-      transform: scale(1) translateY(0px) translateX(0px);
-    }
-  
-    95% {
-      transform: scale(1.5);
-    }
-  
-    100% {
-      transform: scale(0);
-    }
-  }
-}

package/utils/loading.ts

@@ -1,30 +0,0 @@
-import './loading.scss'
-
-function createElement() {
-  const loadingEl = document.createElement('div')
-  loadingEl.className = 'vp-loading'
-  loadingEl.innerHTML = `\
-<div class="wrapper">
-  <div id="preloader"></div>
-</div>
-`
-  return loadingEl
-}
-
-let el: HTMLElement
-
-export function showFullLoading() {
-  if (!el)
-    el = createElement()
-  el.style.opacity = '0'
-  document.body.appendChild(el)
-  setTimeout(() => el.style.opacity = '1')
-}
-
-export function hideFullLoading() {
-  if (!el)
-    return
-  el.style.opacity = '0'
-  setTimeout(() => el.remove(), 500)
-}
-