valaxy-theme-yun 0.20.1 → 0.20.3

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

@@ -94,7 +94,7 @@ export const defaultThemeConfig: ThemeConfig = {
       icon: 'i-simple-icons-notion',
     },
     'twitter': {
-      color: '#1da1f2',
+      color: 'black',
       icon: 'i-ri-twitter-x-fill',
     },
     'wechat': {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,16 +24,16 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@explosions/fireworks": "^0.1.0",
     "@iconify-json/ant-design": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.10",
+    "@iconify-json/simple-icons": "^1.2.11",
     "@vueuse/motion": "^2.2.6",
     "animejs": "^3.2.2",
     "gsap": "^3.12.5",
-    "primevue": "^4.1.1",
-    "radix-vue": "^1.9.8"
+    "primevue": "^4.2.1",
+    "radix-vue": "^1.9.9"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.20.1",
+    "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,
   }
 })