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

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/bump.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'bumpp'
+
+export default defineConfig({
+  commit: false,
+  tag: false,
+  push: false,
+})

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,14 +37,18 @@ 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">
+  <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">
+          <div class="mt-8 mb-4">
             <slot name="main-header">
               <YunPageHeader
-                class="mb-2"
                 :title="title"
                 :icon="frontmatter.icon || icon"
                 :color="frontmatter.color || color"
@@ -52,67 +56,52 @@ onContentUpdated(() => {
                 :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-content-after" />
-            </div>
-          </YunCard>
-
-          <slot name="main-nav-before" />
-
-          <slot name="main-nav">
-            <YunPostNav v-if="frontmatter.nav !== false" />
-          </slot>
-
-          <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 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>
+          </div>
+          <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-nav-before" />
+
+        <slot name="main-nav">
+          <YunPostNav v-if="frontmatter.nav !== false" />
+        </slot>
+
+        <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 name="main-footer-before" />
+        <slot name="main-footer-after" />
+      </div>
+    </slot>
   </main>
 </template>
 
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
-@include screen('md') {
-  .yun-main {
-    &.has-sidebar {
-      padding-left: var(--va-sidebar-width);
-    }
-  }
-}
-
 @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/YunAdBoard.vue

@@ -0,0 +1,4 @@
+<template>
+  <!-- empty -->
+  <div />
+</template>

package/components/YunAlbum.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <AppLink class="yun-album-list-item" :to="album.url">
-    <figure :title="album.desc">
+    <figure class="m-10" flex="~ col" :title="album.desc">
       <img
         loading="lazy"
         class="yun-album-list-cover"
@@ -17,9 +17,19 @@ defineProps<{
         :alt="album.caption"
         :on-error="onImgError"
       >
-      <figcaption>
-        「{{ album.caption }}」
+      <figcaption class="yun-album-caption yun-title-effects text-$va-c-text inline-flex">
+        {{ album.caption }}
       </figcaption>
     </figure>
   </AppLink>
 </template>
+
+<style lang="scss">
+.yun-album-caption {
+  position: absolute;
+  bottom: -3rem;
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+</style>

package/components/YunAlbumList.vue

@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="yun-album-list">
-    <YunAlbum v-for="album in albums" :key="album.url" :album="album" />
+  <div class="yun-album-list mb-4">
+    <YunAlbum
+      v-for="album in albums" :key="album.url"
+      :album="album"
+    />
   </div>
 </template>
 
@@ -26,7 +29,6 @@ defineProps<{
     figure {
       position: relative;
       width: 15rem;
-      margin: 2rem;
 
       &::before {
         content: '';
@@ -53,14 +55,6 @@ defineProps<{
         object-fit: cover;
         background-color: #eee;
       }
-
-      figcaption {
-        position: absolute;
-        bottom: -2.5rem;
-        display: block;
-        text-align: center;
-        width: 100%;
-      }
     }
   }
 }

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,19 @@ 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, i) in categories.values()"
+      :key="category.name"
+      class="category-list"
+    >
+      <YunCategory
+        :i="i"
+        :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>