valaxy-theme-yun 0.28.4 → 0.28.5

package/components/YunGirls.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { GirlType } from '../types'
+import { computed } from 'vue'
 import { useRandomData } from '../composables'
 
 const props = defineProps<{
@@ -8,12 +9,18 @@ const props = defineProps<{
 }>()
 
 const { data } = useRandomData(props.girls, props.random)
+const isUrlSource = computed(() => typeof props.girls === 'string')
 </script>
 
 <template>
   <div class="girls">
-    <ul class="girl-items">
-      <YunGirlItem v-for="girl, i in data" :key="i" :i="i" :girl="girl" />
+    <ClientOnly v-if="isUrlSource">
+      <ul class="girl-items">
+        <YunGirlItem v-for="girl, i in data" :key="girl.url" :i="i" :girl="girl" />
+      </ul>
+    </ClientOnly>
+    <ul v-else class="girl-items">
+      <YunGirlItem v-for="girl, i in data" :key="girl.url" :i="i" :girl="girl" />
     </ul>
   </div>
 </template>

package/components/YunLinks.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { LinkType } from '../types'
+import { computed } from 'vue'
 import { useRandomData } from '../composables'
 
 const props = defineProps<{
@@ -12,14 +13,40 @@ const props = defineProps<{
 }>()
 
 const { data } = useRandomData(props.links, props.random)
+
+/**
+ * When links source is a URL (string), data is fetched asynchronously on the
+ * client side only.  During SSG the list is empty, but after hydration the
+ * fetched items are injected into the DOM.  Wrapping the list in
+ * `<ClientOnly>` avoids a hydration-mismatch between the static (empty) HTML
+ * and the client-rendered (populated) list, which could cause `replaceChild`
+ * errors or the list not appearing at all.
+ *
+ * For static array data the mismatch risk is lower (SSR and client render
+ * the same initial order), so `<ClientOnly>` is not applied.
+ */
+const isUrlSource = computed(() => typeof props.links === 'string')
 </script>
 
 <template>
   <div class="yun-links">
-    <ul class="yun-link-items" flex="center wrap">
+    <!--
+      Use ClientOnly when links are fetched from a URL to prevent
+      hydration mismatch (SSG renders empty list, client fills it).
+    -->
+    <ClientOnly v-if="isUrlSource">
+      <ul class="yun-link-items" flex="center wrap">
+        <YunLinkItem
+          v-for="link, i in data"
+          :key="link.url"
+          :i="i" :link="link" :error-img="errorImg"
+        />
+      </ul>
+    </ClientOnly>
+    <ul v-else class="yun-link-items" flex="center wrap">
       <YunLinkItem
         v-for="link, i in data"
-        :key="i"
+        :key="link.url"
         :i="i" :link="link" :error-img="errorImg"
       />
     </ul>

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -47,7 +47,7 @@ const app = useAppStore()
       v-if="showMenu"
       class="yun-nav-menu z-$yun-z-nav-menu fixed bg-transparent"
       :class="{
-        play: playAnimation,
+        'shadow play': playAnimation,
       }"
     >
       <!--  -->
@@ -113,7 +113,6 @@ const app = useAppStore()
   // safari not support
   // animation-timeline: scroll();
   // animation-range: 0 calc(30vh), exit;
-  box-shadow: none;
   display: flex;
 
   // top: var(--rect-margin);
@@ -126,19 +125,14 @@ const app = useAppStore()
   align-items: center;
   justify-content: space-between;
   height: var(--yun-nav-height, 50px);
-  transition: all var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in');
+  transition: background-color var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in'),
+    backdrop-filter var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in'),
+    box-shadow var(--va-transition-duration-moderate) 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);
+    background-color: var(--yun-nav-bg-color);
+    backdrop-filter: blur(var(--yun-nav-blur));
+    -webkit-backdrop-filter: blur(var(--yun-nav-blur));
   }
 
   .vt-hamburger-top, .vt-hamburger-middle, .vt-hamburger-bottom {

package/components/theme/strato/YunStratoNavMenu.vue

@@ -87,3 +87,19 @@ const isHomePage = computed(() => route.meta.layout === 'home')
     </div>
   </Transition>
 </template>
+
+<style lang="scss" scoped>
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.yun-nav-menu {
+  height: var(--yun-nav-height, 50px);
+  transition: all var(--va-transition-duration-moderate) map.get($cubic-bezier, 'ease-in');
+
+  &.play {
+    background-color: var(--yun-nav-bg-color);
+    backdrop-filter: blur(var(--yun-nav-blur));
+    -webkit-backdrop-filter: blur(var(--yun-nav-blur));
+  }
+}
+</style>

package/layouts/home.vue

@@ -19,7 +19,7 @@ const showNotice = computed(() => {
 
 <template>
   <YunLayoutWrapper :no-margin="!isPage">
-    <div class="w-full flex flex-col items-center pb-8">
+    <div class="w-full flex flex-col items-center pb-4">
       <template v-if="themeConfig.banner?.enable">
         <template v-if="!isPage">
           <div class="w-full">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.28.4",
+  "version": "0.28.5",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -25,16 +25,16 @@
     "@ctrl/tinycolor": "^4.2.0",
     "@explosions/fireworks": "^0.2.0",
     "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/simple-icons": "^1.2.75",
+    "@iconify-json/simple-icons": "^1.2.78",
     "@vueuse/motion": "^3.0.3",
     "animejs": "^4.3.6",
-    "gsap": "^3.14.2",
-    "reka-ui": "^2.9.2"
+    "gsap": "^3.15.0",
+    "reka-ui": "^2.9.6"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
     "valaxy-addon-waline": "0.2.1",
-    "valaxy": "0.28.4"
+    "valaxy": "0.28.5"
   },
   "scripts": {
     "release": "bumpp && pnpm publish"

package/styles/css-vars.scss

@@ -9,6 +9,8 @@
   --yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-text) 30%, black);
   --yun-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
   --yun-nav-height: 50px;
+  --yun-nav-bg-color: rgb(255 255 255 / 0.8);
+  --yun-nav-blur: 12px;
 }
 
 :root {
@@ -31,6 +33,7 @@ html.dark {
   --va-c-bg: #1a1a1d;
   --va-c-bg-soft: #121215;
   --yun-home-hero-name-background: linear-gradient(120deg, var(--va-c-primary) 30%, #41d1ff);
+  --yun-nav-bg-color: rgb(26 26 29 / 0.8);
 }
 
 // animation

package/types/index.d.ts

@@ -269,7 +269,7 @@ export interface ThemeConfig extends DefaultTheme.Config {
        * 苏公网安备xxxxxxxx号
        * https://beian.mps.gov.cn/
        */
-      police: string
+      police?: string
     }
   }>