valaxy-theme-hairy 0.0.9 → 0.0.13

package/components/HairyArticleSeries.vue

@@ -1,17 +1,30 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
-import { computed } from 'vue'
+import { computed, inject, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { toArr } from '../utils'
 import { useCurrentCategory } from '../hooks/useCategory'
 
 const frontmatter = useFrontmatter()
 const paths = computed(() => toArr(frontmatter.value.categories).filter(Boolean) as string[])
 const category = useCurrentCategory(paths)
-const posts = computed(() => category.value.posts || [])
+const posts = computed(() => {
+  const result = category.value.posts || []
+  return result.sort((a, b) => (a.date || 1) > (b.date || 1) ? 1 : -1)
+})
+const router = useRouter()
+
+const active = inject('HairyUserTab:active', ref(''))
 
 function isCurrent(title = '') {
   return frontmatter.value.title === title
 }
+
+async function changePost(path = '') {
+  router.push(path)
+  await nextTick()
+  active.value = 'aside'
+}
 </script>
 
 <template>
@@ -20,7 +33,7 @@ function isCurrent(title = '') {
       On this Series
     </div>
     <ul class="va-toc relative z-1">
-      <a v-for="(item, index) of posts" :key="index" class="va-toc-item" @click="$router.push(item.path || '')">
+      <a v-for="(item, index) of posts" :key="index" class="va-toc-item" @click="changePost(item.path)">
         <a class="outline-link" :class="[isCurrent(item.title) && 'active']">{{ index + 1 }}.{{ item.title }}</a>
       </a>
     </ul>

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

@@ -2,8 +2,8 @@
 import { computed, provide, useCssVars, useSlots } from 'vue'
 import { executeOverlay } from 'unoverlay-vue'
 import type { ImageViewerProps } from 'element-plus/es/components/image-viewer/index'
-import type { AtWillNumber } from '@hairy/libcore'
-import { atWillToUnit } from '@hairy/libcore'
+import type { AtWillNumber } from '../utils'
+import { atWillToUnit } from '../utils'
 import HairyImageViewer from './HairyImageViewer.vue'
 
 const props = withDefaults(defineProps<{

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/components/HairyPostList.vue

@@ -1,24 +1,51 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
-import { computed } from 'vue'
+import { computed, defineProps, ref, withDefaults } from 'vue'
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
+import { usePostLayout } from '../hooks/usePostLayout'
 
 const props = withDefaults(defineProps<{
   type?: string
   posts?: Post[]
+  curPage?: number
+  pagination?: boolean
 }>(), {
+  curPage: 1,
+  pagination: false,
 })
+const layout = usePostLayout()
 
-const routes = usePostList() as any as Ref<Post[]>
-const posts = computed(() => props.posts || routes.value)
+const pageSize = ref(7)
+const routes = usePostList({ type: props.type || '' })
+const posts = computed<any[]>(() => props.posts || routes.value)
+const pagePosts = computed(() => posts.value.slice((props.curPage - 1) * pageSize.value, props.curPage * pageSize.value))
+const displayedPosts = computed(() => props.pagination ? pagePosts.value : posts.value)
 </script>
 
 <template>
-  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
-    <Transition v-for="post, i in posts" :key="i" name="fade">
-      <HairyArticleText :post="post" />
-    </Transition>
-  </ul>
+  <HairyPostImageList v-if="layout.includes('image')" :posts="displayedPosts" />
+  <HairyPostTextsList v-else :posts="displayedPosts" />
+  <ValaxyPagination v-if="pagination" :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
 </template>
 
+<style lang="scss">
+.pagination {
+  font-size: 16px;
+}
+
+.pagination .prev.active,
+.pagination .next.active,
+.pagination .page-number.active {
+  font-weight: normal;
+  background: transparent;
+  color: var(--hy-c-primary);
+  cursor: default;
+}
+
+.pagination .prev:hover,
+.pagination .next:hover,
+.pagination .page-number:hover {
+  color: var(--va-c-bg);
+  background: rgba(143, 230, 213, 0.8);
+}
+</style>

package/components/HairyPostTextsList.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { Post } from 'valaxy'
+import { usePostList } from 'valaxy'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  posts?: Post[]
+}>(), {})
+
+const routes = usePostList() as any as Ref<Post[]>
+const posts = computed(() => props.posts || routes.value)
+</script>
+
+<template>
+  <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+    <Transition v-for="post, i in posts" :key="i" name="fade">
+      <HairyArticleText :post="post" />
+    </Transition>
+  </ul>
+</template>
+

package/components/HairyUserNav.vue

@@ -1,8 +1,23 @@
 <script lang="ts" setup>
-import { useCategory, usePostList, useTag } from 'valaxy'
-const category = useCategory()
+import { usePostList, useTag } from 'valaxy'
+import { computed } from 'vue'
+import { toArr } from '../utils'
 const posts = usePostList()
 const tags = useTag()
+
+const total = computed(() => {
+  const categories = posts.value.map(v => toArr(v.categories || [])).filter(v => v.length)
+  const maps: string[] = []
+  for (const category of categories) {
+    let caches: string[] = []
+    for (const iterator of category) {
+      caches.push(iterator)
+      maps.push(caches.join('-'))
+    }
+    caches = []
+  }
+  return new Set(maps).size
+})
 </script>
 
 <template>
@@ -11,7 +26,7 @@ const tags = useTag()
       文章
     </HairyUserStats>
     <div class="w-1px bg-gray bg-opacity-50" />
-    <HairyUserStats :count="category.total" @click="$router.push('/categories/')">
+    <HairyUserStats :count="total" @click="$router.push('/categories/')">
       分类
     </HairyUserStats>
     <div class="w-1px bg-gray bg-opacity-50" />

package/components/HairyUserTab.vue

@@ -2,9 +2,9 @@
 import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index'
 import 'element-plus/es/components/tabs/style/index'
 import 'element-plus/es/components/tab-pane/style/index'
-import { ref } from 'vue'
-
+import { provide, ref } from 'vue'
 const active = ref('aside')
+provide('HairyUserTab:active', active)
 </script>
 
 <template>

package/hooks/useYearArchives.ts

@@ -27,17 +27,21 @@ export function useYearArchives() {
       const [year, month] = [days.format('YYYY'), days.format('MM')]
       if (!maps[year])
         maps[year] = {}
-      if (!maps[year][month]) { maps[year][month] = { count: 1, posts: [post] } }
+      if (!maps[year][month]) { maps[year][month] = { count: 1, posts: [post as any] } }
       else {
         maps[year][month].count++
-        maps[year][month].posts.push(post)
+        maps[year][month].posts.unshift(post as any)
       }
     }
     for (const [year, months] of Object.entries(maps)) {
       for (const [month, { count, posts }] of Object.entries(months))
-        items.push({ year, month, count, posts })
+        items.unshift({ year, month, count, posts })
     }
-    return items
+    return items.sort((a, b) => {
+      const aTime = `${a.year}-${a.month}`
+      const bTime = `${b.year}-${b.month}`
+      return bTime > aTime ? 1 : -1
+    })
   })
   return archives
 }

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.9",
+  "version": "0.0.13",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",
@@ -21,7 +21,6 @@
   "dependencies": {
     "@docsearch/css": "^3.1.1",
     "@docsearch/js": "^3.1.1",
-    "@hairy/libcore": "^0.3.0",
     "@hairy/vue-use": "^1.2.0",
     "@iconify-json/ant-design": "^1.1.3",
     "@iconify-json/simple-icons": "^1.1.19",

package/pages/archives/[year]/[month]/index.vue

@@ -33,7 +33,6 @@ const post = computed(() => months.value.flatMap(item => item.posts))
       {{ month }}月
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
-
   <el-timeline>
     <el-timeline-item
       v-for="(item, index) in post"

package/pages/archives/index.vue

@@ -26,15 +26,21 @@ const posts = usePostList()
       size="large"
     >
       <div class="activity inline-flex items-center">
-        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year))">
           {{ activity.year }}
         </HairyLink>
-        <span class="text-gray-5 text-size-5 mx-2">/</span>
-        <HairyLink @click="$router.push(getArchiveLink(activity.year, activity.month))">
+        <span class="text-gray-5 mx-2">/</span>
+        <HairyLink class="text-size-8" @click="$router.push(getArchiveLink(activity.year, activity.month))">
           {{ activity.month }}
         </HairyLink>
         <span class="text-gray-5 text-size-5 ml-1">({{ activity.count }}篇)</span>
       </div>
+      <HairyTimelinePostItem v-for="(item, index) in activity.posts.slice(0, 2)" :key="index" :post="item" />
+      <div v-if="activity.posts.length > 2">
+        <HairyLink @click="$router.push(getArchiveLink(activity.year))">
+          ....
+        </HairyLink>
+      </div>
     </el-timeline-item>
   </el-timeline>
 </template>

package/pages/categories/[...categories].vue

@@ -22,18 +22,20 @@ const router = useRouter()
 
 const paths = computed(() => props.categories.split('/').filter(Boolean))
 const current = useCurrentCategory(paths)
-
 const posts = useCategoryPost(paths)
 
 const i18n = useI18n()
 
+const s = '/'
+
 const getBreadcrumbPath = (index: number) => {
-  if (paths.value[index] === paths.value[paths.value.length - 1])
+  const paths = props.categories.split('/').filter(Boolean)
+  if (paths[index] === paths[paths.length - 1])
     return ''
-  return `/categories/${paths.value.slice(0, index)}`
+  return `/categories/${paths.slice(0, index + 1).join('/')}`
 }
 const displayCategory = (key: string) => {
-  router.push({ path: `/categories/${[...paths.value, key].join('/')}` })
+  router.push({ path: `/categories/${[key, ...paths.value].reverse().join('/')}` })
 }
 </script>
 
@@ -45,10 +47,11 @@ const displayCategory = (key: string) => {
     <HairyBreadcrumbItem :to="paths.length && '/categories/' || ''">
       全部
     </HairyBreadcrumbItem>
-    <HairyBreadcrumbItem v-for="(key, index) in paths" :key="key" :to="getBreadcrumbPath(index)">
+    <HairyBreadcrumbItem v-for="(key, index) in categories.split(s)" :key="key" :to="getBreadcrumbPath(index)">
       {{ i18n.t(key) }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
+
   <div class="grid__view dark:text-gray-3 flex-wrap">
     <template v-for="([key, item]) in current.children" :key="key">
       <div

package/pages/index.vue

@@ -1,11 +1,5 @@
-<script lang="ts" setup>
-import { usePostLayout } from '../hooks/usePostLayout'
-const layout = usePostLayout()
-</script>
-
 <template>
-  <HairyPostImageList v-if="layout.includes('image')" />
-  <HairyPostList v-else />
+  <HairyPostList :pagination="true" />
 </template>
 
 <route lang="yaml">

package/pages/page/[page].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{ page: string }>()
+</script>
+
+<template>
+  <HairyPostList :pagination="true" :cur-page="parseInt(page)" />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>

package/pages/tags/index.vue

@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const { tags, getTagStyle } = useTags({
-  primary: 'red',
+  primary: '#1bc9a6',
 })
 
 const displayTag = (tag: string) => {
@@ -17,7 +17,7 @@ const displayTag = (tag: string) => {
     <div text="center" class="text-size-2.5em pt-10 mb-5">
       目前共计 {{ Array.from(tags).length }} 个标签
     </div>
-    <div text="center">
+    <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" :style="getTagStyle(tag.count)" p="1" @click="displayTag(key.toString())">
         {{ key }}
       </a>
@@ -29,3 +29,13 @@ const displayTag = (tag: string) => {
 meta:
   layout: tags
 </route>
+
+<style lang="scss" scoped>
+  a {
+    color: var(--yun-tag-color);
+    &:hover {
+      --un-text-opacity: 1;
+      color: var(--hy-c-primary-dark);
+    }
+  }
+</style>

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

@@ -1,3 +1,5 @@
+import { isNumber, isString } from 'lodash-es'
+
 /**
  * 跳转到新的页面
  * @param url 跳转url
@@ -26,3 +28,28 @@ export const toArr = <T>(arr: T[] | T): T[] => {
     return arr as any
   else return [arr].filter(Boolean) as any
 }
+
+export type AtWillNumber = string | number
+
+export const atWillToUnit = (value: AtWillNumber, unit = 'px') => {
+  if (!(isString(value) || isNumber(value)))
+    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)
-}
-