valaxy-theme-yun 0.20.2 → 0.20.3

package/App.vue

@@ -31,16 +31,16 @@ useHead({
 const themeConfig = useThemeConfig()
 
 const app = useAppStore()
-const yunStore = useYunAppStore()
+const yun = useYunAppStore()
 const route = useRoute()
 
 watch(
   () => route.meta.layout,
   () => {
     if (route.meta.layout === 'home' || app.isMobile)
-      yunStore.leftSidebar.isOpen = false
+      yun.leftSidebar.isOpen = false
     else
-      yunStore.leftSidebar.isOpen = true
+      yun.leftSidebar.isOpen = false
   },
   { immediate: true },
 )
@@ -55,11 +55,15 @@ const isDev = import.meta.env.DEV
 </script>
 
 <template>
+  <YunStratoApp v-if="yun.isStrato" />
   <YunDebug v-if="isDev" />
 
   <YunPageHeaderGradient />
   <YunNavMenu />
-  <YunFullscreenMenu />
+
+  <YunFullscreenMenu v-if="yun.isNimbo" />
+  <YunStratoSidebar v-if="yun.isStrato" />
+
   <YunFireworks v-if="themeConfig.fireworks.enable" />
   <slot name="bg">
     <YunBg v-if="themeConfig.bg_image.enable" />

package/components/ValaxyMain.vue

@@ -10,7 +10,6 @@ const props = defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
-
 const siteConfig = useSiteConfig()
 
 const { styles, icon, color } = usePostProperty(props.frontmatter.type)
@@ -37,12 +36,16 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <main class="yun-main lt-md:w-full" flex="~ center">
+  <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="{
+        class="content w-full md:w-3xl lg:w-2xl xl:w-2xl 2xl:w-4xl"
+        :class="{
           'no-aside': !aside,
-        }" flex="~ col grow"
+        }"
+        flex="~ col grow"
         p="lt-md:0"
       >
         <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">

package/components/YunAside.vue

@@ -28,7 +28,7 @@ watch(() => [yun.rightSidebar.isOpen, yun.size.isXl], async () => {
 <template>
   <aside
     flex="~ col"
-    class="va-card yun-aside sticky top-0 lg:top-68px min-h-sm"
+    class="va-card yun-aside sticky top-0 lg:top-$yun-margin-top min-h-sm"
     :class="{
       float: isAsideFloat,
       show,
@@ -70,7 +70,7 @@ watch(() => [yun.rightSidebar.isOpen, yun.size.isXl], async () => {
   width: 0;
   transform: translateX(100%);
   transition: all 0.2s map.get($cubic-bezier, 'ease-in-out');
-  max-height: calc(100vh - 68px);
+  max-height: calc(100vh - var(--yun-margin-top));
 
   // float panel
   &.float {

package/components/YunBanner.vue

@@ -7,28 +7,28 @@
 
 import type { CSSProperties } from 'vue'
 import { computed, onMounted, ref } from 'vue'
-import { random, sleep } from 'valaxy'
+import { sleep } from 'valaxy'
 import { useThemeConfig } from '../composables'
+import { useYunAppStore } from '../stores'
+import { useYunBanner } from '../composables/useYunBanner'
 
+const yun = useYunAppStore()
 const themeConfig = useThemeConfig()
 
-const chars = computed(() => {
-  const arr = []
-  for (let i = 0; i < themeConfig.value.banner.title.length; i++) {
-    const rn = random(1.5, 3.5)
-    arr.push(rn)
-  }
-  return arr
-})
 // height of top/bottom line
-const totalCharHeight = computed(() => chars.value.reduce((a, b) => a + b, 0))
+
+const { totalCharHeight, chars } = useYunBanner(themeConfig.value.banner)
 
 const bannerStyles = computed<CSSProperties>(() => {
-  return {
+  const styles: CSSProperties = {
     '--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',
   }
+  if (yun.isStrato)
+    styles.borderBottom = `1px solid var(--banner-line-color)`
+
+  return styles
 })
 
 const lineStatus = ref<
@@ -43,10 +43,12 @@ const animationStatus = ref('banner')
 onMounted(async () => {
   await sleep(500)
   lineStatus.value = 'active'
-  await sleep(500)
-  lineStatus.value = 'exit'
+  if (yun.isNimbo) {
+    await sleep(500)
+    lineStatus.value = 'exit'
 
-  animationStatus.value = 'prologue'
+    animationStatus.value = 'prologue'
+  }
 })
 </script>
 
@@ -58,20 +60,21 @@ onMounted(async () => {
         :class="lineStatusClass"
       />
     </div>
-    <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="{
-            '--banner-char-size': `${chars[i]}rem`,
-          } as CSSProperties"
-        >
-          <span class="char">
-            {{ c }}
-          </span>
-        </span>
-      </div>
-    </div>
-    <PrologueSquare v-else class="z-1" />
+
+    <template v-if="yun.isNimbo">
+      <YunBannerCharContainer
+        v-if="animationStatus === 'banner'"
+        :title="themeConfig.banner.title"
+        :chars="chars"
+      />
+      <PrologueSquare v-else class="z-1" />
+    </template>
+    <template v-if="yun.isStrato">
+      <YunBannerCharContainer
+        :title="themeConfig.banner.title"
+        :chars="chars"
+      />
+    </template>
 
     <div class="banner-line-container bottom">
       <div

package/components/YunFullscreenMenu.vue

@@ -10,32 +10,33 @@ const app = useAppStore()
 </script>
 
 <template>
-  <Transition name="slide-down">
+  <Transition :name="app.isMobile ? 'slide-down' : 'slide-left'">
     <div
       v-if="yunApp.fullscreenMenu.isOpen"
       ref="fullscreenMenuRef"
       p="t-20 md:t-26"
       class="yun-fullscreen-menu fixed left-0 right-0 bottom-0 top-0 bg-$va-c-bg-soft z-$yun-z-fullscreen-menu overflow-auto"
     >
-      <div class="flex-center gap-2">
+      <!-- <div v-if="app.isMobile" class="flex-center gap-2">
         <YunToggleDark transition />
         <YunToggleLocale v-if="app.showToggleLocale" />
-      </div>
+      </div> -->
 
-      <YunFullscreenMenuList>
-        <YunFullscreenMenuItem
-          :page="{
-            name: '站点主页',
-            icon: 'i-ri-home-2-line',
-            url: '/',
-          }"
-        />
-      </YunFullscreenMenuList>
-
-      <div v-if="!yunApp.size.isLg" class="mt-4">
+      <div v-if="!yunApp.size.isLg" class="my-4">
         <YunSiteInfo class="text-center" />
+
+        <YunGradientDivider class="my-2 op-20" />
+
         <YunPostsInfo />
       </div>
+      <YunGradientDivider v-if="!yunApp.size.isLg" class="my-2 op-20" />
+
+      <YunFullscreenMenuList />
+
+      <YunGradientDivider v-if="!yunApp.size.isLg" class="my-2 op-20" />
+      <div v-if="!yunApp.size.isLg" class="flex-center">
+        <YunConfig />
+      </div>
     </div>
   </Transition>
 </template>
@@ -44,6 +45,8 @@ const app = useAppStore()
 @use 'sass:map';
 @use 'valaxy-theme-yun/styles/vars.scss' as *;
 
+.slide-left-enter-active,
+.slide-left-leave-active,
 .slide-down-enter-active,
 .slide-down-leave-active {
   opacity: 1;
@@ -57,4 +60,10 @@ const app = useAppStore()
   opacity: 0;
   transform: translateY(-100%);
 }
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+}
 </style>

package/components/YunFuseSearch.vue

@@ -1,70 +1,23 @@
 <script lang="ts" setup>
-import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import { useFuse } from '@vueuse/integrations/useFuse'
-import { computed, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useSiteConfig } from 'valaxy'
-import type { FuseListItem } from 'valaxy/types'
+import { useFuseSearch } from 'valaxy'
 
 import { isClient, onClickOutside, useScrollLock } from '@vueuse/core'
 
-const props = defineProps<{
+defineProps<{
   open: boolean
 }>()
 const emit = defineEmits(['close'])
 
-const searchContainer = ref<HTMLElement>()
-
-const isLocked = useScrollLock(isClient ? document.body : null)
-
-const { t } = useI18n()
-
-const fuseListData = ref<FuseListItem[]>([])
-
-const siteConfig = useSiteConfig()
-const keys = computed(() => {
-  const ks = siteConfig.value.fuse.options.keys || []
-  return ks.length === 0
-    ? ['title', 'tags', 'categories', 'excerpt']
-    : ks
-})
-
 const input = ref('')
-// todo export options
-const useFuseOptions = computed<UseFuseOptions<FuseListItem>>(() => ({
-  fuseOptions: {
-    includeMatches: true,
-    findAllMatches: true,
 
-    ...siteConfig.value.fuse.options,
-    keys: keys.value,
-
-    // threshold: 0.99,
-    // ignoreLocation: true,
-  },
-  // resultLimit: resultLimit.value,
-  // matchAllWhenSearchEmpty: matchAllWhenSearchEmpty.value,
-}))
-const { results } = useFuse(input, fuseListData, useFuseOptions)
+const isLocked = useScrollLock(isClient ? document.documentElement : null)
+const { t } = useI18n()
+const { results } = useFuseSearch(input)
 
 const searchInputRef = ref<HTMLInputElement>()
-
-watch(() => props.open, async () => {
-  if (!props.open)
-    return
-
-  const fuseListDataPath = siteConfig.value.fuse.dataPath.startsWith('http')
-    ? siteConfig.value.fuse.dataPath
-    : `${import.meta.env.BASE_URL}${siteConfig.value.fuse.dataPath}`
-  fetch(fuseListDataPath)
-    .then(res => res.json())
-    .then((data) => {
-      if (Array.isArray(data))
-        fuseListData.value = data
-
-      searchInputRef.value?.focus()
-    })
-})
+const searchContainer = ref<HTMLElement>()
 
 onClickOutside(searchInputRef, () => {
   // emit('close')

package/components/YunNavMenu.vue

@@ -1,131 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-import { useAppStore, useSiteConfig } from 'valaxy'
-import { useRoute } from 'vue-router'
 import { useYunAppStore } from '../stores'
-// import { useThemeConfig } from '../composables'
 
-// const app = useAppStore()
-const yunApp = useYunAppStore()
-const siteConfig = useSiteConfig()
-// const themeConfig = useThemeConfig()
-
-const showMenu = ref(false)
-const route = useRoute()
-onMounted(() => {
-  if (route.meta.layout === 'home') {
-    setTimeout(() => {
-      showMenu.value = true
-    }, 600)
-  }
-  else {
-    showMenu.value = true
-  }
-})
-
-const playAnimation = ref(false)
-watch(() => yunApp.scrollY, () => {
-  if (yunApp.scrollY > 10)
-    playAnimation.value = true
-  else
-    playAnimation.value = false
-})
-
-const app = useAppStore()
+const yun = useYunAppStore()
 </script>
 
 <template>
-  <Transition
-    enter-active-class="animate-fade-in"
-  >
-    <div
-      v-if="showMenu"
-      class="yun-nav-menu z-$yun-z-nav-menu"
-      border="~ solid $va-c-text"
-      :class="{
-        play: playAnimation,
-      }"
-    >
-      <!--  -->
-      <ValaxyHamburger
-        :active="yunApp.fullscreenMenu.isOpen"
-        class="menu-btn sidebar-toggle leading-4 size-12"
-        inline-flex cursor="pointer"
-        hover="bg-white/80 dark:bg-black/80"
-        z="$yun-z-menu-btn"
-        @click="yunApp.fullscreenMenu.toggle()"
-      />
-      <YunNavMenuItem icon="i-ri-home-4-line" to="/" />
-
-      <div class="flex flex-1 flex-center">
-        <YunNavMenuTitle />
-      </div>
-
-      <div class="inline-flex-center">
-        <!-- <template v-if="!app.isMobile && themeConfig.nav">
-          <template v-for="item in themeConfig.nav" :key="item.text">
-            <AppLink
-              v-if="'link' in item"
-              :to="item.link"
-              class="menu-btn inline-flex-center p-2 transition text-$va-c-text"
-              inline-flex cursor="pointer"
-              hover="bg-white/80 dark:bg-black/80"
-              z="$yun-z-menu-btn"
-            >
-              {{ item.text }}
-            </AppLink>
-            <template v-else-if="'items' in item" />
-          </template>
-        </template> -->
-
-        <YunToggleLocale
-          v-if="yunApp.size.isSm && app.showToggleLocale"
-          class="rounded-none!"
-        />
-        <YunToggleDark class="rounded-none!" transition />
-        <YunSearchTrigger v-if="siteConfig.search.enable" />
-      </div>
-    </div>
-  </Transition>
+  <YunStratoNavMenu v-if="yun.isStrato" />
+  <YunNimboNavMenu v-else-if="yun.isNimbo" />
 </template>
-
-<style lang="scss">
-@use 'sass:map';
-@use 'valaxy-theme-yun/styles/vars.scss' as *;
-@use "valaxy/client/styles/mixins/index.scss" as *;
-
-.yun-nav-menu {
-  position: fixed;
-
-  // safari not support
-  // animation-timeline: scroll();
-  // animation-range: 0 calc(30vh), exit;
-  background-color: transparent;
-  box-shadow: none;
-  display: flex;
-  top: var(--rect-margin);
-  left: var(--rect-margin);
-  right: var(--rect-margin);
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  transition: all 0.5s map.get($cubic-bezier, 'ease-in');
-
-  &.play {
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: var(--va-c-bg);
-    border-color: rgb(0 0 0 / 0.1);
-
-    --un-shadow: var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)), var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));
-
-    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-      var(--un-shadow);
-  }
-
-  .vt-hamburger-top, .vt-hamburger-middle, .vt-hamburger-bottom {
-    background-color: var(--va-c-text);
-  }
-}
-</style>

package/components/YunOverlay.vue

@@ -17,7 +17,7 @@ withDefaults(defineProps<{
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
 .yun-overlay {
-  background-color: rgb(0 0 0 / 0.3);
+  background-color: rgb(0 0 0 / 0.5);
   position: fixed;
   inset: 0;
   transition: opacity 0.4s;

package/components/YunSearchBtn.vue

@@ -22,8 +22,8 @@ function onClick() {
 <template>
   <button
     class="yun-search-btn popup-trigger size-12 inline-flex justify-center items-center"
+    :class="!open && 'hover-bg-white/80 hover:bg-black/80'"
     text="xl $va-c-text"
-    hover="bg-white/80 dark:bg-black/80"
     :title="t('menu.search')"
     @click="onClick"
   >
@@ -35,5 +35,6 @@ function onClick() {
 <style lang="scss">
 .yun-search-btn {
   z-index: var(--yun-z-search-btn);
+  transition: background-color var(--va-transition-duration);
 }
 </style>

package/components/YunSearchTrigger.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useSiteConfig } from 'valaxy'
 import { computed, defineAsyncComponent, onMounted, ref } from 'vue'
-import { useEventListener } from '@vueuse/core'
+import { useHotKey } from '../composables'
 
 const siteConfig = useSiteConfig()
 
@@ -14,20 +14,11 @@ function togglePopup() {
   open.value = !open.value
 }
 
-function handleSearchHotKey(event: KeyboardEvent) {
-  if (
-    (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))
-  ) {
-    event.preventDefault()
-    togglePopup()
-  }
-}
-
 const algoliaRef = ref()
 onMounted(() => {
   // algolia has its own hotkey
   if (isFuse.value)
-    useEventListener('keydown', handleSearchHotKey)
+    useHotKey('k', togglePopup)
 })
 
 function openSearch() {

package/components/YunSidebarCard.vue

@@ -6,6 +6,9 @@
   <YunCard class="p-4 min-h-sm" flex="~ col gap-1">
     <YunSiteInfo class="text-center" />
     <YunPostsInfo />
+    <YunGradientDivider class="my-2 op-20" />
     <YunSocialLinks />
+    <YunGradientDivider class="my-2 op-20" />
+    <YunSidebarLinks />
   </YunCard>
 </template>

package/components/YunSidebarLinks.vue

@@ -12,7 +12,7 @@ const themeConfig = useThemeConfig()
       :to="item.url" :title="item.name"
       :style="`color:${item.color}`"
     >
-      <div :class="item.icon" class="icon w-8 h-8" />
+      <div :class="item.icon" class="icon size-6" />
     </AppLink>
   </div>
 </template>

package/components/YunSiteInfo.vue

@@ -5,7 +5,7 @@ const siteConfig = useSiteConfig()
 </script>
 
 <template>
-  <div class="site-info gap-1 items-center" flex="~ col" m="t-4">
+  <div class="site-info gap-1 items-center" flex="~ col" p="t-8">
     <RouterLink
       class="site-author-avatar inline-flex-center" to="/about"
     >

package/components/layout/YunLayoutLeft.vue

@@ -5,7 +5,7 @@ const yun = useYunAppStore()
 </script>
 
 <template>
-  <div v-if="yun.size.isLg" flex="~ col" class="gap-4 sticky top-68px w-80">
+  <div v-if="yun.size.isLg" flex="~ col" class="gap-4 sticky top-$yun-margin-top w-80">
     <YunSidebarCard />
     <YunAdBoard />
   </div>

package/components/layout/YunLayoutWrapper.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useYunAppStore } from '../../stores'
+
 // common layout
+
+const yun = useYunAppStore()
+const classes = computed(() => {
+  if (yun.isNimbo)
+    return 'mt-24 md:mt-36'
+  return 'mt-12'
+})
 </script>
 
 <template>
   <div
     flex="~"
-    m="t-24 md:t-36"
-    class="w-full max-w-screen-2xl m-auto justify-center items-start gap-4"
+    class="w-full m-auto justify-center items-start gap-4"
+    :class="classes"
   >
     <slot />
   </div>

package/components/menu/YunNavMenuTitle.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
 import { useFrontmatter, useSiteConfig } from 'valaxy'
-import { ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useYunAppStore } from '../../stores'
 
 const yunApp = useYunAppStore()
 const fm = useFrontmatter()
 const siteConfig = useSiteConfig()
 
+const route = useRoute()
 const showPostTitle = ref(false)
+const showSiteTitle = computed(() => {
+  if (yunApp.isStrato)
+    return route.path === '/' ? false : yunApp.scrollY < 10
+  return !showPostTitle.value
+})
 watch(() => yunApp.scrollY, () => {
-  showPostTitle.value = yunApp.scrollY > 200
+  if (yunApp.isNimbo)
+    showPostTitle.value = yunApp.scrollY > 200
 })
 
 const router = useRouter()
@@ -57,7 +64,7 @@ function goToLink() {
         {{ fm.subtitle }}
       </span>
     </div>
-    <span v-else class="font-light truncate">
+    <span v-if="showSiteTitle" class="font-light truncate">
       {{ siteConfig.title }}
     </span>
   </div>

package/components/prologue/PrologueSquare.vue

@@ -56,16 +56,18 @@ const showContent = ref(false)
         <YunAuthorName class="mt-3" />
         <YunAuthorIntro />
 
-        <YunDivider />
-
-        <div flex="~ col" class="gap-2 items-center justify-center">
+        <div
+          flex="~ col"
+          class="gap-2 items-center justify-center"
+          my-4 md:my-6
+          py-4 md:py-6
+          border="t-1px b-1px black/60 dark:white/60"
+        >
           <YunSiteTitle />
           <YunSiteSubtitle />
           <YunSiteDescription />
         </div>
 
-        <YunDivider />
-
         <div
           class="mt-4 flex-center w-64 md:w-100 m-auto gap-2"
           flex="~ wrap"

package/components/site/YunFullscreenMenuItem.vue

@@ -11,8 +11,7 @@ const yunApp = useYunAppStore()
 
 <template>
   <AppLink
-    class="link-item w-full items-center justify-center md:justify-start gap-2 transition rounded text-2xl p-4 sm:(text-3xl p-6) lg:(text-4xl p-7)"
-    inline-flex
+    class="inline-flex link-item items-center justify-center md:justify-start gap-2 transition rounded text-xl p-3 sm:(text-3xl p-6) lg:(text-4xl p-7 w-full)"
     :to="page.url" :title="page.name"
     :style="`color:${page.color}`"
     hover="bg-gray-100/50 dark:bg-gray-800/50"

package/components/site/YunFullscreenMenuList.vue

@@ -1,14 +1,19 @@
 <script lang="ts" setup>
+import { useAppStore } from 'valaxy'
 import { useThemeConfig } from '../../composables'
 
+const app = useAppStore()
 const themeConfig = useThemeConfig()
 </script>
 
 <template>
   <div
-    class="links flex-center"
-    flex="~ col" text="left"
+    class="links flex-center lg:flex-col"
+    flex="~" text="left"
     p="x-$rect-margin"
+    :class="{
+      'flex-wrap': app.isMobile,
+    }"
   >
     <slot />
     <YunFullscreenMenuItem

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import { useAppStore, useSiteConfig } from 'valaxy'
+import { useRoute } from 'vue-router'
+import { useYunAppStore } from '../../../stores'
+// import { useThemeConfig } from '../composables'
+
+// const app = useAppStore()
+const yunApp = useYunAppStore()
+const siteConfig = useSiteConfig()
+// const themeConfig = useThemeConfig()
+
+const showMenu = ref(false)
+const route = useRoute()
+onMounted(() => {
+  if (route.meta.layout === 'home') {
+    setTimeout(() => {
+      showMenu.value = true
+    }, 600)
+  }
+  else {
+    showMenu.value = true
+  }
+})
+
+const playAnimation = ref(false)
+watch(() => yunApp.scrollY, () => {
+  if (yunApp.scrollY > 10)
+    playAnimation.value = true
+  else
+    playAnimation.value = false
+})
+
+const app = useAppStore()
+</script>
+
+<template>
+  <Transition
+    enter-active-class="animate-fade-in"
+  >
+    <div
+      v-if="showMenu"
+      class="yun-nav-menu z-$yun-z-nav-menu fixed bg-transparent"
+      border="~ solid $va-c-text"
+      :class="{
+        play: playAnimation,
+      }"
+    >
+      <!--  -->
+      <div class="inline-flex justify-start items-center flex-1">
+        <ValaxyHamburger
+          :active="yunApp.fullscreenMenu.isOpen"
+          class="menu-btn sidebar-toggle leading-4 size-12"
+          inline-flex cursor="pointer"
+          hover="bg-white/80 dark:bg-black/80"
+          z="$yun-z-menu-btn"
+          @click="yunApp.fullscreenMenu.toggle()"
+        />
+        <YunNavMenuItem icon="i-ri-home-4-line" to="/" />
+      </div>
+
+      <div class="flex flex-1 flex-center">
+        <YunNavMenuTitle />
+      </div>
+
+      <div class="inline-flex-center justify-end items-center flex-1">
+        <!-- <template v-if="!app.isMobile && themeConfig.nav">
+          <template v-for="item in themeConfig.nav" :key="item.text">
+            <AppLink
+              v-if="'link' in item"
+              :to="item.link"
+              class="menu-btn inline-flex-center p-2 transition text-$va-c-text"
+              inline-flex cursor="pointer"
+              hover="bg-white/80 dark:bg-black/80"
+              z="$yun-z-menu-btn"
+            >
+              {{ item.text }}
+            </AppLink>
+            <template v-else-if="'items' in item" />
+          </template>
+        </template> -->
+
+        <YunToggleLocale
+          v-if="yunApp.size.isSm && app.showToggleLocale"
+          class="rounded-none!"
+        />
+        <YunToggleDark class="rounded-none!" transition />
+        <YunSearchTrigger v-if="siteConfig.search.enable" />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
+
+.yun-nav-menu {
+  // safari not support
+  // animation-timeline: scroll();
+  // animation-range: 0 calc(30vh), exit;
+  box-shadow: none;
+  display: flex;
+  top: var(--rect-margin);
+  left: var(--rect-margin);
+  right: var(--rect-margin);
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  transition: all 0.5s map.get($cubic-bezier, 'ease-in');
+
+  &.play {
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--va-c-bg);
+    border-color: rgb(0 0 0 / 0.1);
+
+    --un-shadow: var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)), var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));
+
+    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+      var(--un-shadow);
+  }
+
+  .vt-hamburger-top, .vt-hamburger-middle, .vt-hamburger-bottom {
+    background-color: var(--va-c-text);
+  }
+}
+</style>

package/components/theme/strato/YunStratoApp.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useCssVar } from '@vueuse/core'
+
+const yunMT = useCssVar('--yun-margin-top')
+yunMT.value = '48px'
+</script>
+
+<template>
+  <div />
+</template>

package/components/theme/strato/YunStratoNavMenu.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useAppStore, useSiteConfig } from 'valaxy'
+import { useRoute } from 'vue-router'
+import { useYunAppStore } from '../../../stores'
+// import { useThemeConfig } from '../composables'
+
+// const app = useAppStore()
+const yunApp = useYunAppStore()
+const siteConfig = useSiteConfig()
+// const themeConfig = useThemeConfig()
+
+const showMenu = ref(false)
+const route = useRoute()
+onMounted(() => {
+  if (route.meta.layout === 'home') {
+    setTimeout(() => {
+      showMenu.value = true
+    }, 600)
+  }
+  else {
+    showMenu.value = true
+  }
+})
+
+const playAnimation = ref(false)
+watch(() => yunApp.scrollY, () => {
+  if (yunApp.scrollY > 10)
+    playAnimation.value = true
+  else
+    playAnimation.value = false
+})
+
+const app = useAppStore()
+
+const showHamburger = computed(() => {
+  return app.isMobile ? true : route.meta.layout === 'home'
+})
+</script>
+
+<template>
+  <div class="fixed left-0 top-0" z="$yun-z-left-sidebar-menu">
+    <ValaxyHamburger
+      v-if="showHamburger"
+      :active="yunApp.leftSidebar.isOpen"
+      class="menu-btn sidebar-toggle leading-4 size-12 fixed"
+      inline-flex cursor="pointer"
+      hover="bg-white/80 dark:bg-black/80"
+      @click="yunApp.leftSidebar.toggle()"
+    />
+    <YunNavMenuItem v-else icon="i-ri-home-4-line" to="/" />
+  </div>
+
+  <Transition
+    enter-active-class="animate-fade-in"
+  >
+    <div
+      v-if="showMenu"
+      class="yun-nav-menu z-$yun-z-nav-menu fixed w-full flex justify-between items-center top-0"
+      :class="{
+        play: playAnimation,
+      }"
+    >
+      <!--  -->
+      <div class="inline-flex justify-start items-center flex-1" />
+
+      <div class="flex flex-1 flex-center">
+        <YunNavMenuTitle />
+      </div>
+
+      <div class="inline-flex flex-1 justify-end items-center">
+        <YunToggleLocale
+          v-if="yunApp.size.isSm && app.showToggleLocale"
+          class="rounded-none!"
+        />
+        <YunToggleDark class="rounded-none!" transition />
+        <YunSearchTrigger v-if="siteConfig.search.enable" />
+      </div>
+    </div>
+  </Transition>
+</template>

package/components/{YunSidebar.vue → theme/strato/YunStratoSidebar.vue}

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useYunAppStore } from '../stores'
+import { useYunAppStore } from '../../../stores'
 
 defineProps<{
   showHamburger?: boolean
 }>()
 
-const yunStore = useYunAppStore()
+const yun = useYunAppStore()
 const showOverview = ref(false)
 </script>
 
 <template>
-  <ValaxyOverlay class="md:hidden" :show="yunStore.leftSidebar.isOpen" @click="yunStore.leftSidebar.toggle()" />
+  <!-- class="md:hidden"  -->
+  <YunOverlay :show="yun.leftSidebar.isOpen" @click="yun.leftSidebar.toggle()" />
 
   <!-- <ValaxyHamburger
     :active="yunStore.leftSidebar.isOpen"
@@ -22,12 +23,14 @@ const showOverview = ref(false)
   /> -->
 
   <aside
-    class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
+    id="yun-left-sidebar"
+    class="va-card transition yun-sidebar fixed inset-y-0 left-0 overflow-y-auto"
     :class="{
-      'open': yunStore.leftSidebar.isOpen,
+      'open': yun.leftSidebar.isOpen,
       'md:translate-x-0': !showHamburger,
     }"
-    text="center" bg="$yun-sidebar-bg-color contain no-repeat" z="$yun-z-sidebar"
+    text="center" bg="$yun-sidebar-bg-color contain no-repeat"
+    z="$yun-z-left-sidebar"
   >
     <div v-if="$slots.default" class="sidebar-nav" m="t-6">
       <button
@@ -58,7 +61,7 @@ const showOverview = ref(false)
 @use 'sass:map';
 @use 'valaxy-theme-yun/styles/vars.scss' as *;
 
-.sidebar {
+#yun-left-sidebar {
   width: calc(100vw - 64px);
   max-width: var(--va-sidebar-width);
   background-image: var(--yun-sidebar-bg-img);
@@ -71,17 +74,17 @@ const showOverview = ref(false)
   &.open {
     transform: translateX(0);
   }
-}
-
-.sidebar-nav {
-  .sidebar-nav-item {
-    color: var(--va-c-primary);
-    border: 1px solid var(--va-c-primary);
 
-    &.active {
+  .sidebar-nav {
+    .sidebar-nav-item {
+      color: var(--va-c-primary);
       border: 1px solid var(--va-c-primary);
-      color: white;
-      background-color: var(--va-c-primary);
+
+      &.active {
+        border: 1px solid var(--va-c-primary);
+        color: white;
+        background-color: var(--va-c-primary);
+      }
     }
   }
 }

package/components/ui/YunBannerCharContainer.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+defineProps<{
+  title: string
+  chars: number[]
+}>()
+</script>
+
+<template>
+  <div class="banner-char-container">
+    <div v-for="c, i in title" :key="i" class="char-box">
+      <span
+        :class="[i % 2 !== 0 ? 'char-right' : 'char-left']" :style="{
+          '--banner-char-size': `${chars[i]}rem`,
+        } as CSSProperties"
+      >
+        <span class="char">
+          {{ c }}
+        </span>
+      </span>
+    </div>
+  </div>
+</template>

package/components/ui/YunGradientDivider.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="yun-gradient-line" />
+</template>
+
+<style lang="scss">
+.yun-gradient-line {
+  --c-end: rgba(0 0 0 / 0);
+  --c-mid: rgba(0 0 0 / 1);
+}
+
+.dark {
+  .yun-gradient-line {
+    --c-end: rgba(255 255 255 / 0);
+    --c-mid: rgba(255 255 255 / 1);
+  }
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.yun-gradient-line {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, var(--c-end) 0%, var(--c-mid) 50%, var(--c-end) 100%);
+}
+</style>

package/composables/helper.ts

@@ -1,5 +1,5 @@
 import { ref, watch } from 'vue'
-import { isClient } from '@vueuse/core'
+import { isClient, useEventListener } from '@vueuse/core'
 
 /**
  * fetch data from source, and random
@@ -25,3 +25,18 @@ export function useRandomData<T>(source: string | T[], random = false) {
     data,
   }
 }
+
+export function useHotKey(key: string, callback: () => void) {
+  const isHotKeyActive = ref(false)
+
+  function handleHotKey(event: KeyboardEvent) {
+    if (event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault()
+      callback()
+    }
+  }
+
+  useEventListener('keydown', handleHotKey)
+
+  return { isHotKeyActive }
+}

package/composables/useYunBanner.ts

@@ -0,0 +1,21 @@
+import { computed } from 'vue'
+import { random } from 'valaxy'
+import type { YunTheme } from '../types'
+
+export function useYunBanner(options: YunTheme.Banner) {
+  const chars = computed(() => {
+    const arr = []
+    for (let i = 0; i < options.title.length; i++) {
+      const rn = random(1.5, 3.5)
+      arr.push(rn)
+    }
+    return arr
+  })
+
+  const totalCharHeight = computed(() => chars.value.reduce((a, b) => a + b, 0))
+
+  return {
+    chars,
+    totalCharHeight,
+  }
+}

package/layouts/collection.vue

@@ -3,16 +3,13 @@
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <div flex="~ wrap" gap="4">
-        Collection
-      </div>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <div flex="~ wrap" gap="4">
+          Collection
+        </div>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
 </template>

package/layouts/collections.vue

@@ -5,19 +5,16 @@ const { collections } = useCollections()
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <div flex="~ wrap" gap="4">
-        <YunCollectionItem
-          v-for="collection in collections" :key="collection.id"
-          :collection="collection"
-        />
-      </div>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <div flex="~ wrap" gap="4">
+          <YunCollectionItem
+            v-for="collection in collections" :key="collection.id"
+            :collection="collection"
+          />
+        </div>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
 </template>

package/layouts/home.vue

@@ -2,6 +2,9 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from '../composables'
+import { useYunAppStore } from '../stores'
+
+const yun = useYunAppStore()
 
 const route = useRoute()
 const themeConfig = useThemeConfig()
@@ -24,7 +27,7 @@ const showNotice = computed(() => {
     <template v-if="!isPage">
       <YunBanner />
       <YunSay v-if="themeConfig.say.enable" w="full" />
-      <YunPrologue class="absolute left-0 top-0 right-0 bottom-0" />
+      <YunPrologue v-if="yun.isNimbo" class="absolute left-0 top-0 right-0 bottom-0" />
     </template>
 
     <YunNotice

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -29,11 +29,11 @@
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
     "primevue": "^4.2.1",
-    "radix-vue": "^1.9.8"
+    "radix-vue": "^1.9.9"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.20.2",
+    "valaxy": "0.20.3",
     "valaxy-addon-waline": "0.2.0"
   },
   "scripts": {

package/stores/app.ts

@@ -1,8 +1,16 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { isClient, useScroll, useToggle } from '@vueuse/core'
 import { useScreenSize } from 'valaxy'
+import { computed } from 'vue'
+import { useThemeConfig } from '../composables'
 
 export const useYunAppStore = defineStore('yun-app', () => {
+  const themeConfig = useThemeConfig()
+  // v1 Theme
+  const isStrato = computed(() => themeConfig.value.type === 'strato')
+  // v2 Theme
+  const isNimbo = computed(() => themeConfig.value.type === 'nimbo')
+
   // 左侧边栏
   const [isLeftSidebarOpen, toggleLeftSidebar] = useToggle()
   // 右侧边栏
@@ -28,6 +36,9 @@ export const useYunAppStore = defineStore('yun-app', () => {
       toggle: toggleFullscreenMenu,
     },
     scrollY: isClient ? useScroll(window).y : 0,
+
+    isStrato,
+    isNimbo,
   }
 })
 

package/styles/css-vars.scss

@@ -2,6 +2,11 @@
 @use "./vars" as *;
 @use "valaxy/client/styles/mixins/index.scss" as * with($namespace: "yun");
 
+:root {
+  // yun
+  --yun-margin-top: 68px;
+}
+
 :root {
   @include set-css-var-from-map($common);
   @include set-css-var-from-map($z-index, "z");

package/styles/vars.scss

@@ -47,7 +47,9 @@ $z-index: map.merge(
     "search-btn": 31,
     "overlay": 32,
     "aside": 33,
-    "page-gradient": 34,
+    "left-sidebar": 34,
+    "left-sidebar-menu": 35,
+    "page-gradient": 35,
     "dock": 999999,
   ),
   $z-index