valaxy-theme-hairy 0.0.11 → 0.0.13

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/HairyLinks.vue

@@ -0,0 +1,61 @@
+<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">
+            {{ 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 {
+      color: #fff;
+    }
+}
+
+.links {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 300px);
+  gap: 24px;
+}
+</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.13",
   "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

@@ -65,4 +65,8 @@ body {
   .breakpoint {
     width: 75vw;
   }
+}
+
+body {
+  // background-image: linear-gradient(to top, #f7f7f7 0, #fdfdfd 20%) no-repeat bottom;
 }

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)
-}
-