valaxy-theme-yun 0.14.60 → 0.15.0

package/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useHead } from '@vueuse/head'
-import { useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig } from 'valaxy'
+import { onMounted } from 'vue'
 import { useThemeConfig } from './composables'
 
 useHead({
@@ -14,6 +15,11 @@ useHead({
 
 const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
+
+const app = useAppStore()
+onMounted(() => {
+  app.showLoading = false
+})
 </script>
 
 <template>
@@ -22,4 +28,7 @@ const themeConfig = useThemeConfig()
     <YunBg v-if="themeConfig.bg_image.enable" />
   </slot>
   <YunSearchTrigger v-if="siteConfig.search.enable" />
+  <Transition name="fade">
+    <YunLoading v-if="app.showLoading" />
+  </Transition>
 </template>

package/components/ValaxyMain.vue

@@ -74,7 +74,7 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <main class="yun-main lt-md:ml-0" flex="~">
+  <main class="yun-main md:pl-$va-sidebar-width lt-md:ml-0" flex="~">
     <div w="full" flex="~">
       <slot name="main">
         <div class="content" :class="!aside && 'no-aside'" flex="~ col grow" w="full" p="l-4 lt-md:0">

package/components/YunBanner.vue

@@ -6,7 +6,7 @@
  */
 
 import type { CSSProperties } from 'vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { random } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
@@ -28,12 +28,19 @@ const bannerStyles = computed<CSSProperties>(() => {
     '--banner-line-height': `calc(var(--banner-height, 100vh) / 2 - ${lineH.value}rem)`,
   }
 })
+
+const playExtendLine = ref(true)
 </script>
 
 <template>
-  <div id="banner" :style="bannerStyles">
+  <div id="yun-banner" :style="bannerStyles">
     <div class="banner-line-container">
-      <div class="banner-line vertical-line-top" />
+      <div
+        class="banner-line vertical-line-top"
+        :class="{
+          active: playExtendLine,
+        }"
+      />
     </div>
     <div class="banner-char-container">
       <div v-for="c, i in themeConfig.banner.title" :key="i" class="char-box">
@@ -49,7 +56,12 @@ const bannerStyles = computed<CSSProperties>(() => {
       </div>
     </div>
     <div class="banner-line-container bottom">
-      <div class="banner-line vertical-line-bottom" />
+      <div
+        class="banner-line vertical-line-bottom"
+        :class="{
+          active: playExtendLine,
+        }"
+      />
     </div>
     <YunCloud v-if="themeConfig.banner.cloud?.enable" />
     <YunGoDown />

package/components/YunBg.vue

@@ -6,37 +6,39 @@ import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
 
-const bgImgOpacity = useCssVar('--va-bg-img-opacity')
-if (themeConfig.value.bg_image.opacity)
-  bgImgOpacity.value = themeConfig.value.bg_image.opacity.toString() || '1'
+if (typeof themeConfig.value.bg_image.url !== 'undefined') {
+  const bgImgOpacity = useCssVar('--yun-bg-img-opacity')
+  if (themeConfig.value.bg_image.opacity)
+    bgImgOpacity.value = themeConfig.value.bg_image.opacity.toString() || '1'
 
-const bgImgUrl = computed(() => {
-  return isDark.value
-    ? themeConfig.value.bg_image.dark
-    : themeConfig.value.bg_image.url
-})
+  const bgImgUrl = computed(() => {
+    return isDark.value
+      ? themeConfig.value.bg_image.dark
+      : themeConfig.value.bg_image.url
+  })
 
-const bgImgCssVar = useCssVar('--va-bg-img')
+  const bgImgCssVar = useCssVar('--yun-bg-img')
 
-watch(() => bgImgUrl.value, () => {
-  bgImgCssVar.value = `url('${bgImgUrl.value}')`
-}, { immediate: true })
+  watch(() => bgImgUrl.value, () => {
+    bgImgCssVar.value = `url('${bgImgUrl.value}')`
+  }, { immediate: true })
+}
 </script>
 
 <template>
-  <div class="va-bg" />
+  <div class="yun-bg" />
 </template>
 
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
-.va-bg {
+.yun-bg {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: -1;
 
-  background-image: var(--va-bg-img);
+  background-image: var(--yun-bg-img);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -44,12 +46,12 @@ watch(() => bgImgUrl.value, () => {
   background-attachment: fixed;
   animation-name: bgFadeIn;
   animation-duration: 2s;
-  opacity: var(--va-bg-img-opacity, 1);
+  opacity: var(--yun-bg-img-opacity, 1);
 }
 
 // for ios
 @include ios {
-  .va-bg {
+  .yun-bg {
     background-attachment: scroll;
   }
 }
@@ -60,7 +62,7 @@ watch(() => bgImgUrl.value, () => {
   }
 
   to {
-    opacity: var(--va-bg-img-opacity, 1);
+    opacity: var(--yun-bg-img-opacity, 1);
   }
 }
 </style>

package/components/YunCard.vue

@@ -3,11 +3,12 @@ defineProps<{ cover?: string }>()
 </script>
 
 <template>
-  <div class="yun-card flex-center" flex="col" min-h="100px" bg="$va-c-bg-light">
+  <div class="yun-card flex-center rounded" flex="col" min-h="100px" bg="$va-c-bg-light">
     <img
       v-if="cover"
       width="640" height="360"
-      class="object-cover select-none" h="64 md:sm" w="full" :src="cover"
+      class="object-cover select-none" h="64 md:sm" w="full"
+      :src="cover"
     >
 
     <div v-if="$slots.header" class="yun-card-header">

package/components/YunFuseSearch.vue

@@ -7,6 +7,8 @@ import { useBodyScrollLock, useSiteConfig } from 'valaxy'
 import { useRouter } from 'vue-router'
 import type { FuseListItem } from 'valaxy/types'
 
+import { onClickOutside } from '@vueuse/core'
+
 const props = defineProps<{
   open: boolean
 }>()
@@ -69,6 +71,10 @@ function jumpToLink(link: string) {
   router.push(link)
   emit('close')
 }
+
+onClickOutside(searchInputRef, () => {
+  // emit('close')
+})
 </script>
 
 <template>
@@ -79,7 +85,9 @@ function jumpToLink(link: string) {
   >
     <div
       v-if="open" ref="searchContainer"
-      class="yun-popup yun-search-popup yun-fuse-search flex-center" flex="col"
+      class="yun-popup yun-search-popup yun-fuse-search flex-center pointer-events-auto" flex="col"
+      justify="start"
+      pt-12
     >
       <div class="yun-search-input-container flex-center" w="full">
         <input ref="searchInputRef" v-model="input" class="yun-search-input" :placeholder="t('search.placeholder')">
@@ -87,27 +95,25 @@ function jumpToLink(link: string) {
       <div v-if="input" class="flex-center" w="full" py="4">
         {{ t('search.hits', results.length || 0) }}
       </div>
-      <div overflow="auto" flex="~ 1" w="full">
+      <div v-if="results.length > 0" overflow="auto" flex="~" w="full">
         <div class="yun-fuse-result-container" flex="~ col" w="full">
-          <template v-if="results.length > 0">
-            <div
-              v-for="result in results" :key="result.item.title"
-              :to="result.item.link"
-              class="yun-fuse-result-item text-$va-c-text hover:(text-$va-c-bg bg-$va-c-text-dark bg-opacity-100)"
-              flex="~ col" pb-2
-              @click="jumpToLink(result.item.link)"
-            >
-              <h3 font="serif black">
-                {{ result.item.title }}
-              </h3>
-              <span text="sm" opacity="80">
-                {{ result.item.excerpt }}
-              </span>
-              <span text-xs opacity-50 mt="1">
-                Score Index: {{ result.refIndex }}
-              </span>
-            </div>
-          </template>
+          <div
+            v-for="result in results" :key="result.item.title"
+            :to="result.item.link"
+            class="yun-fuse-result-item text-$va-c-text hover:(text-$va-c-bg bg-$va-c-text-dark bg-opacity-100)"
+            flex="~ col" pb-2
+            @click="jumpToLink(result.item.link)"
+          >
+            <h3 font="serif black">
+              {{ result.item.title }}
+            </h3>
+            <span text="sm" opacity="80">
+              {{ result.item.excerpt }}
+            </span>
+            <span text-xs opacity-50 mt="1">
+              Score Index: {{ result.refIndex }}
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -126,7 +132,6 @@ function jumpToLink(link: string) {
   -webkit-backdrop-filter: blur(30px);
 
   text-align: center;
-  padding-top: 3.5rem;
   margin: 0;
   z-index: var(--yun-z-search-popup);
   transition: 0.6s;

package/components/YunLinks.vue

@@ -14,9 +14,17 @@ interface LinkType {
 const props = defineProps<{
   links: string | LinkType[]
   random: boolean
+  /**
+   * @description: 图片加载失败时显示的图片
+   */
+  errorImg?: string
 }>()
 
 const { data } = useRandomData(props.links, props.random)
+
+function onError(e: Event) {
+  onImgError(e, props.errorImg)
+}
 </script>
 
 <template>
@@ -25,7 +33,11 @@ const { data } = useRandomData(props.links, props.random)
       <li v-for="link, i in data" :key="i" class="link-item" :style="`--primary-color: ${link.color}`">
         <a class="link-url" p="x-4 y-2" :href="link.url" :title="link.name" alt="portrait" rel="friend">
           <div class="link-left">
-            <img class="link-avatar" w="16" h="16" loading="lazy" :src="link.avatar" :alt="link.name" :onError="onImgError">
+            <img
+              class="link-avatar" width="64" height="64" w="16" h="16"
+              loading="lazy" :src="link.avatar" :alt="link.name"
+              @error="onError"
+            >
           </div>
           <div class="link-info" m="l-2">
             <div class="link-blog" font="serif black">{{ link.blog }}</div>

package/components/YunLoading.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="yun-page-loading"
+    absolute left-0 right-0 bottom-0 top-0 flex justify="center" items-center
+    z-10
+    bg="$va-c-bg"
+  >
+    <div class="spinner" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.spinner {
+  width: 60px;
+  height: 60px;
+  border: 1px solid var(--va-c-primary);
+  margin: 100px auto;
+  animation: rotateplane 1.2s infinite ease-in-out;
+}
+
+@keyframes rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+
+  50% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+  }
+
+  100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+</style>

package/components/YunNotice.vue

@@ -5,7 +5,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="yun-notice">
+  <div class="yun-notice m-auto">
     <span v-html="content" />
     <slot />
   </div>

package/components/YunOutlineItem.vue

@@ -34,7 +34,7 @@ const { locale } = useI18n()
 
       &:hover,
       &.active {
-        color: var(--va-c-brand);
+        color: var(--va-c-primary-lighter);
         transition: color 0.25s;
       }
 

package/components/YunOverview.vue

@@ -34,9 +34,9 @@ const router = useRouter()
     </div>
 
     <YunSidebarNav />
-    <hr m="t-4 b-2">
+    <hr m="t-4 b-2" op="20">
     <YunSocialLinks />
-    <hr m="y-2">
+    <hr m="y-2" op="20">
     <YunSidebarLinks />
     <br>
   </div>

package/components/YunPostCard.vue

@@ -14,7 +14,7 @@ const { icon, styles } = usePostProperty(props.post.type)
 </script>
 
 <template>
-  <YunCard m="y-4 auto" :class="post.cover ? 'post-card-image' : 'post-card'" :style="styles as StyleValue">
+  <YunCard m="y-4 auto" :class="post.cover ? 'post-card-image' : 'post-card'" overflow="hidden" :style="styles as StyleValue">
     <div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
       <img
         v-if="post.cover"
@@ -25,7 +25,7 @@ const { icon, styles } = usePostProperty(props.post.type)
         class="cover object-cover object-center md:shadow"
       >
 
-      <div class="flex flex-col flex-1 items-center" :class="post.cover && 'max-h-54'" w="full">
+      <div class="flex flex-col items-center justify-center" :class="post.cover && 'h-54'" w="full">
         <AppLink
           class="post-title-link cursor-pointer"
           :to="post.path || ''"
@@ -38,9 +38,13 @@ const { icon, styles } = usePostProperty(props.post.type)
 
         <YunPostMeta :frontmatter="post" />
 
-        <div v-if="post.excerpt_type === 'text'" py="1" />
-        <div v-if="post.excerpt" class="markdown-body" text="left" w="full" p="x-6 lt-sm:4 y-1" v-html="post.excerpt" />
-        <div m="b-5" />
+        <div class="flex flex-grow" justify="center" items="center">
+          <div v-if="post.excerpt_type === 'text'" py="1" />
+          <div v-if="post.excerpt" class="markdown-body" op="80" text="left" w="full" p="x-6 lt-sm:4 y-2" v-html="post.excerpt" />
+          <div v-else m="b-5" />
+        </div>
+
+        <!-- <div m="b-5" /> -->
 
         <a
           v-if="post.url"
@@ -56,12 +60,19 @@ const { icon, styles } = usePostProperty(props.post.type)
     </div>
 
     <!-- always show -->
-    <div w="full" class="yun-card-actions flex justify-between" border="t" text="sm">
-      <div class="post-categories inline-flex" flex="wrap 1">
+    <div
+      w="full" class="yun-card-actions flex justify-between"
+      min-h="10"
+      border="t" text="sm"
+    >
+      <div class="post-categories inline-flex" flex="wrap 1" items="center">
         <YunPostCategories m="l-1" :categories="post.categories" />
       </div>
 
-      <div class="post-tags inline-flex" flex="wrap 1" justify="end" m="1">
+      <div
+        class="post-tags inline-flex" items="center"
+        flex="wrap 1" justify="end" m="1"
+      >
         <template v-if="post.tags">
           <YunPostTags :tags="post.tags" />
         </template>

package/components/YunPostCategories.vue

@@ -12,7 +12,10 @@ defineProps<{
       path: '/categories/',
       query: { category: Array.isArray(categories) ? categories[categories.length - 1] : categories },
     }"
-    class="post-category inline-flex-center"
+    class="transition post-category inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
+    px-2 h="7"
+    border rounded-full
+    bg="hover:(blue-500 opacity-10)"
   >
     <div m="x-1" inline-flex i-ri-folder-2-line />
     <span>

package/components/YunPostList.vue

@@ -46,6 +46,5 @@ const displayedPosts = computed(() =>
 <style>
 .yun-card-actions {
   border-top: 1px solid rgba(122, 122, 122, 0.15);
-  min-height: 2.5rem;
 }
 </style>

package/components/YunPostTags.vue

@@ -8,10 +8,14 @@ defineProps<{
 
 <template>
   <router-link
-    v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }" m="x-1"
-    class="post-tag inline-flex-center"
+    v-for="tag, i in tags" :key="i" :to="{ path: '/tags/', query: { tag } }" ml-1
+    class="transition post-tag inline-flex-center text-xs border-$va-c-divider hover:(text-blue-500 border-blue-500)"
+    px-2 h="7"
+    rounded-full
+    border
+    bg="hover:(blue-500 opacity-10)"
   >
-    <div m="r-1" i-ri-price-tag-3-line />
+    <!-- <div m="r-1" i-ri-price-tag-3-line /> -->
     <span>{{ tag }}</span>
   </router-link>
 </template>

package/components/YunSearchBtn.vue

@@ -1,17 +1,26 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   open?: boolean
 }>(), {
   open: false,
 })
 
+const emit = defineEmits(['close', 'open'])
+
 const { t } = useI18n()
+
+function onClick() {
+  if (props.open)
+    emit('close')
+  else
+    emit('open')
+}
 </script>
 
 <template>
-  <button class="yun-search-btn popup-trigger yun-icon-btn" :title="t('menu.search')">
+  <button class="yun-search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="onClick">
     <div v-if="!open" i-ri-search-line />
     <div v-else text="!2xl" i-ri-close-line />
   </button>

package/components/YunSearchTrigger.vue

@@ -21,14 +21,22 @@ watch(Meta_K, (val) => {
     togglePopup()
 })
 
+function openSearch() {
+  open.value = true
+}
+
+function closeSearch() {
+  open.value = false
+}
+
 const YunAlgoliaSearch = isAlgolia.value
   ? defineAsyncComponent(() => import('./third/YunAlgoliaSearch.vue'))
   : () => null
 </script>
 
 <template>
-  <YunSearchBtn :open="open && !isAlgolia" @click="togglePopup" />
+  <YunSearchBtn :open="open && !isAlgolia" @open="openSearch" @close="closeSearch" />
 
-  <YunAlgoliaSearch v-if="isAlgolia" :open="open" @close="open = false" />
-  <YunFuseSearch v-else-if="isFuse" :open="open" @close="open = false" />
+  <YunAlgoliaSearch v-if="isAlgolia" :open="open" @close="closeSearch" />
+  <YunFuseSearch v-else-if="isFuse" :open="open" @close="closeSearch" />
 </template>

package/components/YunSidebar.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useAppStore, useLayout } from 'valaxy'
+import { useAppStore } from 'valaxy'
+
+defineProps<{
+  showHamburger?: boolean
+}>()
 
 const app = useAppStore()
 const showOverview = ref(false)
-const isHome = useLayout('home')
 </script>
 
 <template>
@@ -14,12 +17,12 @@ const isHome = useLayout('home')
     :active="app.isSidebarOpen"
     class="menu-btn sidebar-toggle yun-icon-btn leading-4 fixed left-0.8rem top-0.6rem"
     inline-flex cursor="pointer" z="$yun-z-menu-btn"
-    :class="isHome ? '' : 'md:hidden'" @click="app.toggleSidebar()"
+    :class="showHamburger ? '' : 'md:hidden'" @click="app.toggleSidebar()"
   />
 
   <aside
     class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
-    :class="[app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']"
+    :class="[app.isSidebarOpen && 'open', !showHamburger && 'md:translate-x-0']"
     text="center" bg="$yun-sidebar-bg-color contain no-repeat" z="$yun-z-sidebar"
   >
     <div v-if="$slots.default" class="sidebar-nav" m="t-6">

package/composables/config.ts

@@ -4,7 +4,6 @@ import type { YunTheme } from '../types'
 
 /**
  * getThemeConfig
- * @returns
  */
 export function useThemeConfig<ThemeConfig = YunTheme.Config>() {
   const config = useValaxyConfig<ThemeConfig>()

package/composables/helper.ts

@@ -5,7 +5,6 @@ import { isClient } from '@vueuse/core'
  * fetch data from source, and random
  * @param source
  * @param random
- * @returns
  */
 export function useRandomData<T>(source: string | T[], random = false) {
   const data = ref<T[]>()

package/docs/zh-CN/config.md

@@ -53,6 +53,7 @@ export default defineConfig<ThemeConfig>({
 
 - `links`: 友情链接信息（可以是 YAML 数组形式，也可以是一个 JSON 文件链接）
 - `random`: 是否随机展示
+- `errorImg`: 图片加载失败时的图片链接
 
 譬如：
 
@@ -81,5 +82,20 @@ links:
 random: true
 ---
 
-<YunLinks :links="frontmatter.links" :random="frontmatter.random" />
+<YunLinks :links="frontmatter.links" :random="frontmatter.random" errorImg="https://cdn.yunyoujun.cn/img/avatar/none.jpg" />
+```
+
+## 样式
+
+### 覆盖背景、侧边栏图片
+
+您可以新建 `styles/css-vars.scss`，覆盖默认 CSS 变量。
+
+```css
+:root {
+  /* 背景图片 */
+  --yun-bg-img: url("https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg");
+  /* 侧边栏背景图片 */
+  --yun-sidebar-bg-img: url("https://cdn.yunyoujun.cn/img/bg/alpha-stars-timing-1.webp");
+}
 ```

package/layouts/404.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useBack } from 'valaxy'
+
+const { t } = useI18n()
+const { back } = useBack()
+</script>
+
+<template>
+  <YunSidebar :show-hamburger="true" />
+
+  <main class="va-main w-full h-screen" text="center" flex="~ col" justify="center" items="center">
+    <div class="not-found" title="404" font="mono">
+      404
+    </div>
+
+    <router-view />
+
+    <div>
+      <button class="btn rounded-full" p="x-6 y-2" text="sm" m="3 t8" :title="t('button.back')" @click="back">
+        {{ t('button.back') }}
+      </button>
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+// inspired by https://codepen.io/pgalor/pen/OeRWJQ
+.not-found {
+  font-size: 10rem;
+  text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+}
+</style>

package/layouts/home.vue

@@ -15,9 +15,9 @@ const isPage = computed(() => route.path.startsWith('/page'))
 <template>
   <main
     class="yun-main flex-center"
-    :class="(isHome && !app.isSidebarOpen) && 'pl-0'" flex="~ col" w="full"
+    :class="(isHome && !app.isSidebarOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
   >
-    <YunSidebar />
+    <YunSidebar :show-hamburger="true" />
 
     <template v-if="!isPage">
       <YunBanner v-if="themeConfig.banner.enable" />

package/node/config.ts

@@ -18,15 +18,16 @@ export const defaultThemeConfig: ThemeConfig = {
 
   bg_image: {
     enable: true,
-    url: 'https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg',
+    // url: bgImg,
     // dark: 'https://cdn.yunyoujun.cn/img/bg/dark-stars-timing-0-blur-30px.png',
   },
 
   say: {
     enable: true,
-    api: 'https://el-bot-api.elpsy.cn/api/words/young',
+    api: '',
+    // api: 'https://el-bot-api.elpsy.cn/api/words/young',
     hitokoto: {
-      enable: false,
+      enable: true,
       api: 'https://v1.hitokoto.cn',
     },
   },

package/node/unocss.ts

@@ -3,8 +3,6 @@ import type { UserThemeConfig } from '../types'
 
 /**
  * generateSafelist by config
- * @param themeConfig
- * @returns
  */
 export function generateSafelist(options: ResolvedValaxyOptions<UserThemeConfig>) {
   const themeConfig = options.config.themeConfig || {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.60",
+  "version": "0.15.0",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,12 +19,12 @@
   "dependencies": {
     "@explosions/fireworks": "^0.0.2",
     "@iconify-json/ant-design": "^1.1.10",
-    "@iconify-json/simple-icons": "^1.1.70",
+    "@iconify-json/simple-icons": "^1.1.73",
     "animejs": "^3.2.1"
   },
   "devDependencies": {
-    "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.60",
-    "valaxy-addon-waline": "0.1.0"
+    "@types/animejs": "^3.1.8",
+    "valaxy": "0.15.0",
+    "valaxy-addon-waline": "0.1.1"
   }
 }

package/styles/common/markdown.scss

@@ -57,4 +57,39 @@
       margin-bottom: 1rem;
     }
   }
+
+  hr {
+    opacity: 0.6;
+    height: 2px;
+    border-top-width: 0;
+    background-color: var(--va-c-text);
+  }
+}
+
+.markdown-body {
+  div[class*='language-'].line-numbers-mode {
+    /*rtl:ignore*/
+    padding-left: 32px;
+  }
+
+  .line-numbers-wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    /*rtl:ignore*/
+    left: 0;
+    z-index: 3;
+    /*rtl:ignore*/
+    border-right: 1px solid var(--va-code-block-divider-color);
+    padding-top: 20px;
+    width: 32px;
+    text-align: center;
+    font-family: var(--va-font-family-mono);
+    line-height: var(--va-code-line-height);
+    font-size: var(--va-code-font-size);
+    color: var(--va-code-line-number-color);
+    transition:
+      border-color 0.5s,
+      color 0.5s;
+  }
 }

package/styles/index.scss

@@ -9,3 +9,5 @@
 
 // override the default style of star-markdown-css
 @use "./common/markdown.scss" as *;
+@use 'valaxy/client/styles/components/code-group.scss' as *;
+@use 'valaxy/client/styles/components/custom-block.scss' as *;

package/styles/layout/index.scss

@@ -6,7 +6,5 @@ html {
 }
 
 .yun-main {
-  padding-left: var(--va-sidebar-width);
   transition: padding-left var(--va-transition-duration);
-  box-sizing: border-box;
 }

package/styles/vars.scss

@@ -5,10 +5,10 @@ $light: () !default;
 $light: map.merge(
   (
     "bg-img":
-      url("https://cdn.yunyoujun.cn/img/bg/stars-timing-0-blur-30px.jpg"),
+      url("../assets/images/light/bg-img.jpg"),
     "sidebar-bg-color": var(--va-c-bg-light),
     "sidebar-bg-img":
-      url("https://cdn.yunyoujun.cn/img/bg/alpha-stars-timing-1.webp"),
+      url("../assets/images/light/sidebar-bg-img.webp"),
   ),
   $light
 );

package/styles/widgets/banner.scss

@@ -1,7 +1,7 @@
 $banner-animation-duration: 1s;
 $char-animation-duration: 0.4s;
 
-#banner {
+#yun-banner {
   --banner-line-height: 0;
   --line-animation-duration: 0.4s;
 
@@ -26,6 +26,7 @@ $char-animation-duration: 0.4s;
   flex-direction: column;
   align-items: center;
   height: var(--banner-line-height);
+  transition: height 2s;
 
   &.bottom {
     justify-content: end;
@@ -43,11 +44,20 @@ $char-animation-duration: 0.4s;
     animation-duration: var(--line-animation-duration);
     animation-fill-mode: forwards;
     animation-timing-function: ease-in;
+    animation-iteration-count: 1;
   }
 
   &-bottom {
     flex-direction: column-reverse;
   }
+
+  &.active {
+    animation-name: extend-line;
+    animation-duration: var(--line-animation-duration);
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+    animation-iteration-count: 1;
+  }
 }
 
 @keyframes extend-line {

package/tsconfig.json

@@ -2,26 +2,26 @@
   // we need tsconfig.json to compile without
   // error: This is likely not portable. A type annotation is necessary.
   "compilerOptions": {
-    "allowJs": true,
-    "baseUrl": ".",
-    "module": "ESNext",
     "target": "ESNext",
     "lib": ["DOM", "ESNext"],
-    "strict": true,
-    "esModuleInterop": true,
     "jsx": "preserve",
-    "skipLibCheck": true,
+    "module": "ESNext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "types": [
       "vite/client",
       "vue/ref-macros",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
-    ]
+    ],
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
   },
   "exclude": ["**/dist/**", "node_modules"]
 }

package/types/index.d.ts

@@ -4,7 +4,7 @@ export namespace YunTheme {
   export type Config = ThemeConfig
   export type Sidebar = any
 
-  export type Banner = {
+  export interface Banner {
     /**
      * 是否启用
      */
@@ -48,7 +48,7 @@ export interface ThemeConfig {
   colors: {
     /**
      * @en primary color
-     * 
+     *
      * @zh 主题色
      * @default '#0078E7'
      */
@@ -72,7 +72,7 @@ export interface ThemeConfig {
     /**
      * @en Image url
      */
-    url: string
+    url?: string
     /**
      * @en Image url when dark mode
      */
@@ -84,9 +84,9 @@ export interface ThemeConfig {
   }
 
   /**
-   * @en 
+   * @en
    * say something
-   * 
+   *
    * @zh 说点什么
    * - 自定义 API 链接，如 https://el-bot-api.elpsy.cn/api/words/young
    * 你可以通过在 public 下新建 json 的方式来使用, 如 public/young.json

package/unocss.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'unocss'
+import { defineConfig, presetWebFonts } from 'unocss'
 
 export default defineConfig({
   shortcuts: [
@@ -20,4 +20,13 @@ export default defineConfig({
     ],
   ],
   // web fonts is so big, let the user decide
+  presets: [
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+      },
+    }),
+  ],
 })

package/utils/index.ts

@@ -1,10 +1,10 @@
-export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
+import noneImg from '../assets/images/none.jpg'
 
 /**
  * set default img
  * @param e
  */
-export function onImgError(e: Event, defaultImg = anonymousImage) {
+export function onImgError(e: Event, defaultImg = noneImg) {
   const targetEl = e.target as HTMLImageElement
   targetEl.setAttribute('data-src', targetEl.src)
   targetEl.src = defaultImg