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

package/components/YunFullscreenMenu.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useYunAppStore } from '../stores'
+
+const yunApp = useYunAppStore()
+const fullscreenMenuRef = ref<HTMLElement>()
+</script>
+
+<template>
+  <Transition name="slide-down">
+    <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">
+        <YunToggleDark transition />
+        <YunToggleLocale />
+      </div>
+
+      <YunFullscreenMenuList>
+        <YunFullscreenMenuItem
+          :page="{
+            name: '站点主页',
+            icon: 'i-ri-home-2-line',
+            url: '/',
+          }"
+        />
+      </YunFullscreenMenuList>
+
+      <div v-if="!yunApp.size.isLg" class="mt-4">
+        <YunSiteInfo class="text-center" />
+        <YunPostsInfo />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  opacity: 1;
+  transition: transform 0.4s map.get($cubic-bezier, 'ease-in-out'),
+    opacity 0.2s map.get($cubic-bezier, 'ease-in-out');
+  transform: translateY(0);
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+</style>

package/components/YunGirlItem.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMotion } from '@vueuse/motion'
+import { onImgError } from '../utils'
+import type { GirlType } from '../types'
+
+const props = defineProps<{
+  i: number
+  girl: GirlType
+}>()
+
+const itemRef = ref()
+useMotion(itemRef, {
+  initial: {
+    opacity: 0,
+    translateY: 40,
+  },
+  enter: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      type: 'spring',
+      duration: 400,
+      damping: 8,
+      delay: props.i * 50,
+    },
+  },
+})
+</script>
+
+<template>
+  <li ref="itemRef" class="girl-item">
+    <a
+      class="girl-item-link"
+      :href="girl.url || `https://zh.moegirl.org/${girl.name}`"
+      :title="girl.reason" alt="portrait" target="_blank" rel="noopener"
+    >
+      <figure class="girl-info">
+        <img class="girl-avatar" loading="lazy" :src="girl.avatar" :alt="girl.name" :onError="onImgError">
+        <figcaption class="girl-name" :title="(i + 1).toString()">{{ girl.name }}</figcaption>
+        <figcaption class="girl-from">{{ girl.from }}</figcaption>
+      </figure>
+    </a>
+  </li>
+</template>
+
+<style lang="scss">
+.girl-item {
+  display: inline-flex;
+  text-align: center;
+  justify-content: center;
+  width: 8rem;
+  margin: 1rem;
+
+  .girl {
+    &-info {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+
+    &-avatar {
+      object-fit: cover;
+      object-position: center top;
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+      padding: 0.2rem;
+      background-color: #fff;
+      box-shadow: 0 0 1rem rgb(0 0 0 / 0.12);
+      transition: 0.5s;
+
+      &:hover {
+        box-shadow: 0 0 2rem rgb(0 0 0 / 0.12);
+      }
+    }
+
+    &-name {
+      font-size: 0.9rem;
+    }
+
+    &-from {
+      font-size: 12px;
+      font-family: var(--va-font-serif);
+      font-weight: bold;
+      color: var(--va-c-text-light);
+
+      &::before {
+        content: '「';
+      }
+
+      &::after {
+        content: '」';
+      }
+    }
+  }
+}
+</style>

package/components/YunGirls.vue

@@ -1,14 +1,6 @@
 <script lang="ts" setup>
-import { onImgError } from '../utils'
 import { useRandomData } from '../composables'
-
-interface GirlType {
-  name: string
-  url: string
-  avatar: string
-  from?: string
-  reason?: string
-}
+import type { GirlType } from '../types'
 
 const props = defineProps<{
   girls: GirlType[] | string
@@ -21,19 +13,7 @@ const { data } = useRandomData(props.girls, props.random)
 <template>
   <div class="girls">
     <ul class="girl-items">
-      <li v-for="girl, i in data" :key="girl.name" class="girl-item">
-        <a
-          class="girl-item-link"
-          :href="girl.url || `https://zh.moegirl.org/${girl.name}`"
-          :title="girl.reason" alt="portrait" target="_blank" rel="noopener"
-        >
-          <figure class="girl-info">
-            <img class="girl-avatar" loading="lazy" :src="girl.avatar" :alt="girl.name" :onError="onImgError">
-            <figcaption class="girl-name" :title="(i + 1).toString()">{{ girl.name }}</figcaption>
-            <figcaption class="girl-from">{{ girl.from }}</figcaption>
-          </figure>
-        </a>
-      </li>
+      <YunGirlItem v-for="girl, i in data" :key="i" :i="i" :girl="girl" />
     </ul>
   </div>
 </template>
@@ -53,55 +33,4 @@ const { data } = useRandomData(props.girls, props.random)
 .girls-number {
   color: white;
 }
-
-.girl-item {
-  display: inline-flex;
-  text-align: center;
-  justify-content: center;
-  width: 8rem;
-  margin: 1rem;
-
-  .girl {
-    &-info {
-      width: 100%;
-      padding: 0;
-      margin: 0;
-    }
-
-    &-avatar {
-      object-fit: cover;
-      object-position: center top;
-      width: 4rem;
-      height: 4rem;
-      border-radius: 50%;
-      padding: 0.2rem;
-      background-color: #fff;
-      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.12);
-      transition: 0.5s;
-
-      &:hover {
-        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.12);
-      }
-    }
-
-    &-name {
-      font-size: 0.9rem;
-    }
-
-    &-from {
-      font-size: 12px;
-      font-family: var(--va-font-serif);
-      font-weight: bold;
-      color: var(--va-c-text-light);
-
-      &::before {
-        content: '「';
-      }
-
-      &::after {
-        content: '」';
-      }
-    }
-  }
-}
 </style>

package/components/YunGoDown.vue

@@ -1,18 +1,13 @@
 <script lang="ts" setup>
-function goDown() {
-  const banner = document.getElementById('yun-banner')
-  if (banner) {
-    window.scrollTo({
-      top: banner.clientHeight,
-      behavior: 'smooth',
-    })
-  }
-}
+import { goDown } from '../utils'
 </script>
 
 <template>
-  <button class="go-down" aria-label="go-down" @click="goDown">
-    <div i-ri-arrow-down-s-line inline-flex />
+  <button
+    class="go-down w-20 bottom-0 text-sm md:(bottom-2 text-40px)" aria-label="go-down"
+    @click="goDown"
+  >
+    <div i-ri-arrow-down-s-fill inline-flex />
   </button>
 </template>
 
@@ -23,11 +18,9 @@ function goDown() {
   justify-content: center;
   align-items: center;
   position: absolute;
-  bottom: 1rem;
   z-index: var(--yun-z-go-down);
   animation: float 2s ease-in-out infinite;
-  font-size: 2.5rem;
-  color: var(--va-c-primary);
+  color: var(--va-c-text);
   transition: color var(--va-transition-duration);
 
   &:hover {
@@ -43,7 +36,7 @@ function goDown() {
 
   50% {
     opacity: 0.8;
-    transform: translateY(-0.8rem);
+    transform: translateY(-0.3em);
   }
 
   100% {

package/components/YunLayoutPostTag.vue

@@ -1,12 +1,22 @@
 <script lang="ts" setup>
-defineProps<{
+import { ref } from 'vue'
+import { useYunSpringAnimation } from '../composables/animation'
+
+const props = defineProps<{
+  i?: number
   title: string
   count: number
 }>()
+
+const tagRef = ref<HTMLElement>()
+useYunSpringAnimation(tagRef, {
+  i: props.i || 0,
+})
 </script>
 
 <template>
   <span
+    ref="tagRef"
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >

package/components/YunLinkItem.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import { ref } from 'vue'
+import { onImgError } from '../utils'
+import type { LinkType } from '../types'
+
+const props = defineProps<{
+  i: number
+  errorImg?: string
+  link: LinkType
+}>()
+
+function onError(e: Event) {
+  onImgError(e, props.errorImg)
+}
+
+const itemRef = ref()
+useMotion(itemRef, {
+  initial: {
+    opacity: 0,
+    translateY: 40,
+  },
+  enter: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      type: 'spring',
+      duration: 400,
+      damping: 8,
+      delay: props.i * 50,
+    },
+  },
+})
+</script>
+
+<template>
+  <li
+    ref="itemRef"
+    class="yun-link-item inline-flex"
+    :style="{
+      '--primary-color': link.color,
+    }"
+  >
+    <a
+      class="yun-link-url" p="x-4 y-2" :href="link.url" :title="link.name"
+      alt="portrait" rel="friend" target="_blank"
+    >
+      <div class="yun-link-left">
+        <img
+          class="yun-link-avatar" width="64" height="64" w="16" h="16"
+          loading="lazy"
+          :src="link.avatar" :alt="link.name"
+          @error="onError"
+        >
+      </div>
+      <div class="yun-link-info" m="l-2">
+        <div class="yun-link-blog" font="serif black">{{ link.blog }}</div>
+        <div class="yun-link-desc">{{ link.desc }}</div>
+      </div>
+    </a>
+  </li>
+</template>

package/components/YunLinks.vue

@@ -1,15 +1,6 @@
 <script lang="ts" setup>
 import { useRandomData } from '../composables'
-import { onImgError } from '../utils'
-
-interface LinkType {
-  avatar: string
-  name: string
-  url: string
-  color: string
-  blog: string
-  desc: string
-}
+import type { LinkType } from '../types'
 
 const props = defineProps<{
   links: string | LinkType[]
@@ -21,50 +12,27 @@ const props = defineProps<{
 }>()
 
 const { data } = useRandomData(props.links, props.random)
-
-function onError(e: Event) {
-  onImgError(e, props.errorImg)
-}
 </script>
 
 <template>
-  <div class="links">
-    <ul class="link-items">
-      <li v-for="link, i in data" :key="i" class="link-item" :style="`--primary-color: ${link.color}`">
-        <a class="link-url" p="x-4 y-2" :href="link.url" :title="link.name" alt="portrait" rel="friend" target="_blank">
-          <div class="link-left">
-            <img
-              class="link-avatar" width="64" height="64" w="16" h="16"
-              loading="lazy" :src="link.avatar" :alt="link.name"
-              @error="onError"
-            >
-          </div>
-          <div class="link-info" m="l-2">
-            <div class="link-blog" font="serif black">{{ link.blog }}</div>
-            <div class="link-desc">{{ link.desc }}</div>
-          </div>
-        </a>
-      </li>
+  <div class="yun-links">
+    <ul class="yun-link-items" flex="center wrap">
+      <YunLinkItem
+        v-for="link, i in data"
+        :key="i"
+        :i="i" :link="link" :error-img="errorImg"
+      />
     </ul>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.link-item {
-  display: inline-flex;
-}
-
-.links {
-  .link-items {
-    display: flex;
-    text-align: center;
-    justify-content: center;
-    flex-wrap: wrap;
-
+<style lang="scss">
+.yun-links {
+  .yun-link-items {
     padding-left: 0;
   }
 
-  .link-url {
+  .yun-link-url {
     --smc-link-color: var(--primary-color);
 
     display: inline-flex;
@@ -82,7 +50,7 @@ function onError(e: Event) {
       box-shadow: 0 2px 20px var(--primary-color, gray);
     }
 
-    .link {
+    .yun-link {
       &-left {
         line-height: 0;
       }
@@ -97,7 +65,7 @@ function onError(e: Event) {
         transition: 0.5s;
 
         &:hover {
-          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 0 20px rgb(0 0 0 / 0.1);
         }
       }
 
@@ -111,7 +79,7 @@ function onError(e: Event) {
     }
   }
 
-  .link-info {
+  .yun-link-info {
     display: inline-flex;
     flex-direction: column;
     justify-content: center;

package/components/YunNavMenu.vue

@@ -0,0 +1,125 @@
+<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
+})
+</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>
+</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/YunOutline.vue

@@ -11,9 +11,8 @@ const themeConfig = useThemeConfig()
 const container = ref()
 const marker = ref()
 
-useActiveAnchor(container, marker)
-
 const { headers, handleClick } = useOutline()
+useActiveAnchor(container, marker)
 </script>
 
 <template>

package/components/YunOverlay.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  show: boolean
+}>(), {
+  show: false,
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="yun-overlay z-$yun-z-overlay" />
+  </Transition>
+</template>
+
+<style lang="scss">
+@use "sass:map";
+@use "valaxy/client/styles/mixins/index.scss" as *;
+
+.yun-overlay {
+  background-color: rgb(0 0 0 / 0.3);
+  position: fixed;
+  inset: 0;
+  transition: opacity 0.4s;
+}
+
+@include mobile {
+  .yun-overlay {
+    display: block;
+  }
+}
+</style>