valaxy-theme-yun 0.20.1 → 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/YunConfig.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
+import { useAppStore } from 'valaxy'
+
 // sidebar config
+const app = useAppStore()
 </script>
 
 <template>
   <div>
     <YunToggleDark />
 
-    <YunToggleLocale />
+    <YunToggleLocale v-if="app.showToggleLocale" />
   </div>
 </template>

package/components/YunFullscreenMenu.vue

@@ -1,38 +1,42 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useAppStore } from 'valaxy'
 import { useYunAppStore } from '../stores'
 
 const yunApp = useYunAppStore()
 const fullscreenMenuRef = ref<HTMLElement>()
+
+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 />
-      </div>
+        <YunToggleLocale v-if="app.showToggleLocale" />
+      </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>
@@ -41,6 +45,8 @@ const fullscreenMenuRef = ref<HTMLElement>()
 @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;
@@ -54,4 +60,10 @@ const fullscreenMenuRef = ref<HTMLElement>()
   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/YunLinkItem.vue

@@ -47,12 +47,15 @@ useMotion(itemRef, {
       alt="portrait" rel="friend" target="_blank"
     >
       <div class="yun-link-left">
-        <img
-          class="yun-link-avatar w-16 h-16 aspect-ratio-1" width="64" height="64"
-          loading="lazy"
-          :src="link.avatar" :alt="link.name"
-          @error="onError"
-        >
+        <div class="yun-link-avatar size-16 overflow-hidden flex-center">
+          <img
+            class="size-16 object-center object-cover m-0!"
+            width="64" height="64"
+            loading="lazy"
+            :src="link.avatar" :alt="link.name"
+            @error="onError"
+          >
+        </div>
       </div>
       <div class="yun-link-info" m="l-2">
         <div class="yun-link-blog" font="serif black">{{ link.blog }}</div>

package/components/YunLinks.vue

@@ -58,7 +58,6 @@ const { data } = useRandomData(props.links, props.random)
       &-avatar {
         margin: 0;
         display: inline-flex;
-        max-width: 100%;
         border-radius: 50%;
         background-color: #fff;
         border: 1px solid var(--primary-color, gray);

package/components/YunNavMenu.vue

@@ -1,125 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
-import { 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 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> -->
-
-        <YunToggleDark class="rounded-none!" />
-        <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

@@ -3,8 +3,12 @@
 </script>
 
 <template>
-  <YunCard class="p-4 min-h-sm">
+  <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/YunSocialLinkItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useAppStore } from 'valaxy'
+import type { SocialLink } from 'valaxy/types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  social: SocialLink
+}>()
+
+const appStore = useAppStore()
+const color = computed(() => {
+  return (appStore.isDark && props.social.color === 'black') ? 'white' : props.social.color
+})
+</script>
+
+<template>
+  <a
+    class="links-of-author-item yun-icon-btn"
+    rel="noopener" :href="social.link" :title="social.name"
+    target="_blank"
+    :style="`color:${color}`"
+  >
+    <div class="icon" :class="social.icon" />
+  </a>
+</template>

package/components/YunSocialLinks.vue

@@ -6,9 +6,10 @@ const siteConfig = useSiteConfig()
 
 <template>
   <div class="links-of-author">
-    <a v-for="item, i in siteConfig.social" :key="i" class="links-of-author-item yun-icon-btn" rel="noopener" :href="item.link" :title="item.name" target="_blank" :style="`color:${item.color}`">
-      <div class="icon" :class="item.icon" />
-    </a>
+    <YunSocialLinkItem
+      v-for="item, i in siteConfig.social" :key="i"
+      :social="item"
+    />
   </div>
 </template>
 

package/components/config/YunToggleDark.vue

@@ -29,7 +29,8 @@ function toggle(e: MouseEvent) {
   <button
     class="yun-icon-btn"
     :title="themeTitle"
-    :style="styles" @mousedown.prevent="() => { console.log('yes') }"
+    :style="styles"
+    @mousedown.prevent="() => {}"
     @click="toggle"
   >
     <div i="ri-sun-line dark:ri-moon-line" />

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>