valaxy-theme-yun 0.19.13 → 0.20.0-beta.1

package/App.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { useHead } from '@unhead/vue'
-import { useAppStore, useSiteConfig } from 'valaxy'
-import { onMounted } from 'vue'
+import { useAppStore } from 'valaxy'
+import { onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useThemeConfig } from './composables'
+import { useYunAppStore } from './stores'
 
 const appStore = useAppStore()
 
@@ -26,23 +28,47 @@ useHead({
   ],
 })
 
-const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
 
 const app = useAppStore()
+const yunStore = useYunAppStore()
+const route = useRoute()
+
+watch(
+  () => route.meta.layout,
+  () => {
+    if (route.meta.layout === 'home' || app.isMobile)
+      yunStore.leftSidebar.isOpen = false
+    else
+      yunStore.leftSidebar.isOpen = true
+  },
+  { immediate: true },
+)
+
 onMounted(() => {
+  // for mobile vh
+  document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
   app.showLoading = false
 })
+
+const isDev = import.meta.env.DEV
 </script>
 
 <template>
+  <YunDebug v-if="isDev" />
+
+  <YunPageHeaderGradient />
+  <YunNavMenu />
+  <YunFullscreenMenu />
   <YunFireworks v-if="themeConfig.fireworks.enable" />
   <slot name="bg">
     <YunBg v-if="themeConfig.bg_image.enable" />
   </slot>
-  <YunSearchTrigger v-if="siteConfig.search.enable" />
   <Transition name="fade">
     <YunLoading v-if="app.showLoading" />
   </Transition>
   <YunBackToTop />
+
+  <!-- TODO -->
+  <!-- <YunDock /> -->
 </template>

package/client/constants/index.ts

@@ -0,0 +1,13 @@
+/**
+ * custom easing
+ */
+export const cubicBezier: Record<string, [number, number, number, number]> = {
+  /**
+   * 慢速开始，然后加速
+   */
+  easeIn: [0.18, 0.66, 0.05, 0.96],
+  /**
+   * 慢速开始和结束
+   */
+  easeInOut: [0.77, 0, 0.17, 1.02],
+}

package/components/ValaxyMain.vue

@@ -37,64 +37,60 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <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">
-          <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">
-            <slot name="main-header">
-              <YunPageHeader
-                class="mb-2"
-                :title="title"
-                :icon="frontmatter.icon || icon"
-                :color="frontmatter.color || color"
-                :cover="frontmatter.cover"
-                :page-title-class="frontmatter.pageTitleClass"
-              />
+  <main class="yun-main lt-md:w-full" flex="~ center">
+    <slot name="main">
+      <div
+        class="content w-full md:w-3xl lg:w-2xl xl:w-2xl 2xl:w-4xl" :class="{
+          'no-aside': !aside,
+        }" flex="~ col grow"
+        p="lt-md:0"
+      >
+        <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">
+          <slot name="main-header">
+            <YunPageHeader
+              class="mb-2 mt-8"
+              :title="title"
+              :icon="frontmatter.icon || icon"
+              :color="frontmatter.color || color"
+              :cover="frontmatter.cover"
+              :page-title-class="frontmatter.pageTitleClass"
+            />
+          </slot>
+          <slot name="main-header-after" />
+
+          <div p="x-4 b-8" class="sm:px-6 lg:px-12 xl:px-16" w="full">
+            <slot name="main-content">
+              <!-- <Transition appear> -->
+              <ValaxyMd :frontmatter="frontmatter">
+                <YunAiExcerpt v-if="frontmatter.excerpt_type === 'ai' && frontmatter.excerpt" />
+                <YunMdTimeWarning />
+
+                <slot name="main-content-md" />
+                <slot />
+              </ValaxyMd>
+              <!-- </Transition> -->
             </slot>
-            <slot name="main-header-after" />
-
-            <div p="x-4 b-8" class="sm:px-6 lg:px-12 xl:px-16" w="full">
-              <slot name="main-content">
-                <!-- <Transition appear> -->
-                <ValaxyMd :frontmatter="frontmatter">
-                  <YunAiExcerpt v-if="frontmatter.excerpt_type === 'ai' && frontmatter.excerpt" />
-                  <YunMdTimeWarning />
 
-                  <slot name="main-content-md" />
-                  <slot />
-                </ValaxyMd>
-                <!-- </Transition> -->
-              </slot>
+            <slot name="main-content-after" />
+          </div>
+        </YunCard>
 
-              <slot name="main-content-after" />
-            </div>
-          </YunCard>
+        <slot name="main-nav-before" />
 
-          <slot name="main-nav-before" />
+        <slot name="main-nav">
+          <YunPostNav v-if="frontmatter.nav !== false" />
+        </slot>
 
-          <slot name="main-nav">
-            <YunPostNav v-if="frontmatter.nav !== false" />
-          </slot>
+        <slot name="main-nav-after" />
 
-          <slot name="main-nav-after" />
-
-          <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment">
-            <YunComment :class="frontmatter.nav === false ? 'mt-4' : 0" />
-          </slot>
+        <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment">
+          <YunComment :class="frontmatter.nav === false ? 'mt-4' : 0" />
+        </slot>
 
-          <slot name="main-footer-before" />
-          <YunFooter />
-          <slot name="main-footer-after" />
-        </div>
-      </slot>
-
-      <slot name="aside">
-        <YunAside v-if="aside">
-          <slot name="aside-custom" />
-        </YunAside>
-      </slot>
-    </div>
+        <slot name="main-footer-before" />
+        <slot name="main-footer-after" />
+      </div>
+    </slot>
   </main>
 </template>
 
@@ -112,7 +108,7 @@ onContentUpdated(() => {
 @include screen('xl') {
   .content{
     // 8px scrollbar width
-    max-width: calc(100vw - 2 * var(--va-sidebar-width) - 1rem - 8px);
+    // max-width: calc(100vw - 2 * var(--va-sidebar-width) - 1rem - 8px);
 
     &.no-aside {
       max-width: calc(100vw - var(--va-sidebar-width));

package/components/YunAside.vue

@@ -1,73 +1,97 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { useAppStore, useFrontmatter } from 'valaxy'
+import { useFrontmatter } from 'valaxy'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useYunAppStore } from '../stores'
 
-const frontmatter = useFrontmatter()
+const fm = useFrontmatter()
 const { t } = useI18n()
-const app = useAppStore()
-</script>
+const yun = useYunAppStore()
 
-<template>
-  <button
-    class="xl:hidden toc-btn shadow fixed yun-icon-btn z-350"
-    opacity="75" right="2" bottom="19"
-    @click="app.toggleRightSidebar()"
-  >
-    <div i-ri-file-list-line />
-  </button>
+const show = ref(false)
+const showToc = computed(() => {
+  return fm.value.toc !== false
+})
 
-  <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
+// aside float
+const isAsideFloat = ref(false)
+
+watch(() => [yun.rightSidebar.isOpen, yun.size.isXl], async () => {
+  await nextTick()
+  isAsideFloat.value = !yun.size.isXl
+  show.value = (yun.rightSidebar.isOpen || !isAsideFloat.value) && fm.value.aside !== false
+}, {
+  immediate: true,
+})
+</script>
 
-  <!--  -->
+<template>
   <aside
-    class="va-card yun-aside"
-    :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center"
+    flex="~ col"
+    class="va-card yun-aside sticky top-0 lg:top-68px min-h-sm"
+    :class="{
+      float: isAsideFloat,
+      show,
+      open: yun.rightSidebar.isOpen,
+    }"
+    text="center"
     overflow="auto"
   >
-    <div class="aside-container" flex="~ col">
-      <h2 v-if="frontmatter.toc !== false" m="t-6 b-2" font="serif black">
-        {{ t('sidebar.toc') }}
-      </h2>
-
-      <YunOutline v-if="frontmatter.toc !== false" />
+    <Transition name="fade" :delay="100">
+      <div v-show="show" class="w-full" flex="~ col">
+        <template v-if="showToc">
+          <h2
+            m="t-6 b-2"
+            font="serif black"
+          >
+            {{ t('sidebar.toc') }}
+          </h2>
+          <YunOutline />
+        </template>
 
-      <div class="flex-grow" />
+        <div class="flex-grow" />
 
-      <div v-if="$slots.default" class="custom-container">
-        <slot />
+        <div v-if="$slots.default" class="custom-container">
+          <slot />
+        </div>
       </div>
-    </div>
+    </Transition>
   </aside>
 </template>
 
 <style lang="scss">
+@use 'sass:map';
 @use 'valaxy/client/styles/mixins/index.scss' as *;
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
 
 .yun-aside {
-  position: fixed;
-  right: 0;
-  top: 0;
-  bottom: 0;
-
   // need fixed width
-  width: var(--va-sidebar-width, 300px);
+  // width: var(--va-sidebar-width, 300px);
+  width: 0;
   transform: translateX(100%);
-  transition: box-shadow var(--va-transition-duration),
-  background-color var(--va-transition-duration), opacity 0.25s,
-  transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
+  transition: all 0.2s map.get($cubic-bezier, 'ease-in-out');
+  max-height: calc(100vh - 68px);
+
+  // float panel
+  &.float {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--yun-z-aside);
+    max-height: 100vh;
+  }
+
+  &.show {
+    width: 320px;
+  }
 
   &.open {
+    width: 320px;
     right: 0;
     display: block;
-    z-index: 10;
     transform: translateX(0);
   }
-
-  &-container {
-    position: sticky;
-    top: 0;
-    height: 100vh;
-  }
 }
 
 @include screen('xl') {
@@ -78,7 +102,6 @@ const app = useAppStore()
 
 .toc-btn {
   color: var(--va-c-primary);
-  background-color: white;
   z-index: var(--yun-z-toc-btn);
 }
 </style>

package/components/YunBackToTop.vue

@@ -16,12 +16,19 @@ const strokeOffset = computed(() => {
 
 <template>
   <a
-    href="#" class="back-to-top yun-icon-btn"
-    :class="show && 'show'" @click="backToTop"
+    href="#"
+    class="back-to-top yun-icon-btn bg-$va-c-bg-soft shadow-md"
+    :class="show && 'show'"
+    @click="backToTop"
   >
-    <div w="8" h="8" i-ri-arrow-up-s-line />
+    <div class="size-8" i-ri-arrow-up-s-line />
     <svg class="progress-circle-container" viewBox="0 0 100 100">
-      <circle :stroke-dasharray="`${circumference} ${circumference}`" :stroke-dashoffset="strokeOffset" class="progress-circle" cx="50" cy="50" :r="radius" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+      <circle
+        :stroke-dasharray="`${circumference} ${circumference}`"
+        :stroke-dashoffset="strokeOffset"
+        stroke="currentColor" stroke-width="2" stroke-linecap="round"
+        class="progress-circle" cx="50" cy="50" :r="radius" fill="none"
+      />
     </svg>
   </a>
 </template>

package/components/YunBanner.vue

@@ -6,8 +6,8 @@
  */
 
 import type { CSSProperties } from 'vue'
-import { computed, ref } from 'vue'
-import { random } from 'valaxy'
+import { computed, onMounted, ref } from 'vue'
+import { random, sleep } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
@@ -21,15 +21,33 @@ const chars = computed(() => {
   return arr
 })
 // height of top/bottom line
-const lineH = computed(() => chars.value.reduce((a, b) => a + b, 0) / 2)
+const totalCharHeight = computed(() => chars.value.reduce((a, b) => a + b, 0))
 
 const bannerStyles = computed<CSSProperties>(() => {
   return {
-    '--banner-line-height': `calc(var(--banner-height, 100vh) / 2 - ${lineH.value}rem)`,
+    '--total-char-height': `${totalCharHeight.value}rem`,
+    '--banner-line-height': `calc(var(--banner-height, 100 * var(--vh)) / 2 - ${totalCharHeight.value / 2}rem)`,
+    'justify-content': 'space-between',
   }
 })
 
-const playExtendLine = ref(true)
+const lineStatus = ref<
+  'enter' | 'active' | 'exit' | ''
+>('enter')
+const lineStatusClass = computed(() => {
+  return lineStatus.value
+})
+
+const animationStatus = ref('banner')
+
+onMounted(async () => {
+  await sleep(500)
+  lineStatus.value = 'active'
+  await sleep(500)
+  lineStatus.value = 'exit'
+
+  animationStatus.value = 'prologue'
+})
 </script>
 
 <template>
@@ -37,12 +55,10 @@ const playExtendLine = ref(true)
     <div class="banner-line-container">
       <div
         class="banner-line vertical-line-top"
-        :class="{
-          active: playExtendLine,
-        }"
+        :class="lineStatusClass"
       />
     </div>
-    <div class="banner-char-container">
+    <div v-if="animationStatus === 'banner'" class="banner-char-container">
       <div v-for="c, i in themeConfig.banner.title" :key="i" class="char-box">
         <span
           :class="[i % 2 !== 0 ? 'char-right' : 'char-left']" :style="{
@@ -55,27 +71,27 @@ const playExtendLine = ref(true)
         </span>
       </div>
     </div>
+    <PrologueSquare v-else class="z-1" />
+
     <div class="banner-line-container bottom">
       <div
         class="banner-line vertical-line-bottom"
-        :class="{
-          active: playExtendLine,
-        }"
+        :class="lineStatusClass"
       />
     </div>
-    <YunCloud v-if="themeConfig.banner.cloud?.enable" />
     <YunGoDown />
   </div>
 </template>
 
 <style lang="scss">
 @use "../styles/widgets/banner.scss" as *;
+@use "../styles/modules/prologue.scss" as *;
 
 :root {
   // banner
   --banner-line-color: black;
   --banner-char-color: black;
-  --banner-char-bg-color: rgba(255, 255, 255, 0.5);
+  --banner-char-bg-color: rgb(255 255 255 / 0.5);
   --banner-char-hover-color: white;
 }
 
@@ -83,7 +99,7 @@ const playExtendLine = ref(true)
   // banner
   --banner-line-color: white;
   --banner-char-color: white;
-  --banner-char-bg-color: rgba(0, 0, 0, 0.5);
+  --banner-char-bg-color: rgb(0 0 0 / 0.5);
   --banner-char-hover-color: black;
 }
 </style>

package/components/YunBg.vue

@@ -38,6 +38,8 @@ if (typeof themeConfig.value.bg_image.url !== 'undefined') {
   width: 100%;
   height: 100%;
   z-index: -1;
+  top: 0;
+  left: 0;
   background-image: var(--yun-bg-img);
   background-size: cover;
   background-position: center;

package/components/YunCard.vue

@@ -3,7 +3,11 @@ defineProps<{ cover?: string }>()
 </script>
 
 <template>
-  <div class="yun-card flex-center rounded" 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"

package/components/YunCategories.vue

@@ -24,38 +24,18 @@ const categoryList = computed(() => {
 </script>
 
 <template>
-  <ul v-for="category in categories.values()" :key="category.name" class="category-list" m="l-4">
-    <YunCategory
-      :parent-key="category.name"
-      :category="category"
-      :level="level + 1"
-      :collapsable="!categoryList.includes(category.name)"
-    />
-  </ul>
+  <div flex="~ col">
+    <ul
+      v-for="category in categories.values()"
+      :key="category.name"
+      class="category-list"
+    >
+      <YunCategory
+        :parent-key="category.name"
+        :category="category"
+        :level="level + 1"
+        :collapsable="!categoryList.includes(category.name)"
+      />
+    </ul>
+  </div>
 </template>
-
-<style lang="scss">
-.post-list-item {
-  a {
-    color: var(--va-c-text-lighter);
-
-    &:hover {
-      color: var(--va-c-primary);
-    }
-  }
-}
-
-.category-list-item {
-  .folder-action {
-    &:hover {
-      color: var(--va-c-primary);
-    }
-  }
-
-  .category-name {
-    &:hover {
-      color: var(--va-c-primary);
-    }
-  }
-}
-</style>

package/components/YunCategory.vue

@@ -45,6 +45,8 @@ const { show } = useInvisibleElement(postCollapseElRef)
  * @param category
  */
 function jumpToDisplayCategory(category: string) {
+  collapse.value = false
+
   router.push({
     query: {
       category,
@@ -62,19 +64,44 @@ onMounted(() => {
 </script>
 
 <template>
-  <li class="category-list-item inline-flex items-center cursor-pointer">
-    <span class="folder-action inline-flex" @click="collapse = !collapse">
+  <li
+    class="category-list-item inline-flex items-center cursor-pointer w-full gap-2 transition px-3 py-2 rounded"
+    hover="bg-black/5"
+  >
+    <span
+      class="folder-action inline-flex"
+      hover="text-$va-c-primary-lighter"
+      @click="collapse = !collapse"
+    >
       <div v-if="collapse" i-ri-folder-add-line />
-      <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line />
+      <div v-else class="text-$va-c-primary dark:text-$va-c-primary-lighter" i-ri-folder-reduce-line />
     </span>
-    <span class="category-name" m="l-1" @click="jumpToDisplayCategory(parentKey)">
-      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }} [{{ category.total }}]
+    <span
+      class="category-name inline-flex items-center gap-2 w-full"
+      @click="jumpToDisplayCategory(parentKey)"
+    >
+      <span>
+        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }}
+      </span>
+      <span class="rounded-full px-1.5 bg-black/5 shadow-sm" text="xs black/55">
+        {{ category.total }}
+      </span>
     </span>
   </li>
 
-  <template v-if="!collapse">
-    <ul>
-      <li v-for="categoryItem, i in category.children.values()" :key="i" class="post-list-item" m="l-4">
+  <Transition
+    enter-active-class="v-enter-active"
+    enter-from-class="v-enter-from"
+    leave-active-class="v-leave-active"
+    leave-to-class="v-leave-to"
+    :duration="{ enter: 200, leave: 0 }"
+  >
+    <ul v-if="!collapse">
+      <li
+        v-for="categoryItem, i in category.children.values()" :key="i"
+        class="post-list-item text-$va-c-text" m="l-4"
+        hover="text-$va-c-primary-lighter"
+      >
         <template v-if="isCategoryList(categoryItem)">
           <YunCategory
             :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
@@ -84,12 +111,16 @@ onMounted(() => {
         </template>
 
         <template v-else>
-          <RouterLink v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center">
+          <RouterLink
+            v-if="categoryItem.title" :to="categoryItem.path || ''"
+            class="inline-flex items-center gap-2 px-3 py-2 w-full rounded transition"
+            hover="bg-black/5"
+          >
             <div i-ri-file-text-line />
-            <span m="l-1" font="serif black">{{ getTitle(categoryItem) }}</span>
+            <span font="serif black">{{ getTitle(categoryItem) }}</span>
           </RouterLink>
         </template>
       </li>
     </ul>
-  </template>
+  </Transition>
 </template>