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

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/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>

package/components/YunOverview.vue

@@ -1,37 +1,10 @@
 <script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-import { useRouter } from 'vue-router'
-
-const siteConfig = useSiteConfig()
-const router = useRouter()
+// overview
 </script>
 
 <template>
   <div class="sidebar-panel" p="2">
-    <div class="site-info" m="t-6">
-      <RouterLink class="site-author-avatar" to="/about">
-        <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
-        <span v-if="siteConfig.author.status.emoji" class="site-author-status" :title="siteConfig.author.status.message || undefined">{{ siteConfig.author.status.emoji }}</span>
-      </RouterLink>
-      <div
-        class="site-author-name leading-6"
-        m="t-0 b-4"
-      >
-        <RouterLink to="/about">
-          {{ siteConfig.author.name }}
-        </RouterLink>
-      </div>
-      <RouterLink v-if="router.hasRoute('/about/site')" to="/about/site" class="site-name">
-        {{ siteConfig.title }}
-      </RouterLink>
-      <span v-else class="site-name">{{ siteConfig.title }}</span>
-      <h4 v-if="siteConfig.subtitle" class="site-subtitle block" text="xs">
-        {{ siteConfig.subtitle }}
-      </h4>
-      <div v-if="siteConfig.description" class="site-description my-1">
-        {{ siteConfig.description }}
-      </div>
-    </div>
+    <YunSiteInfo />
 
     <YunSidebarNav />
     <hr m="t-4 b-2" op="20">
@@ -47,57 +20,12 @@ const router = useRouter()
 <style lang="scss">
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
-.site-info {
-  &.fix-top {
-    margin-top: -1.5rem;
-  }
-}
-
-.site-author-avatar {
-  display: inline-block;
-  line-height: 0;
-  position: relative;
-
-  img {
-    height: 96px;
-    width: 96px;
-    max-width: 100%;
-    margin: 0;
-    padding: 4px;
-    background-color: white;
-    box-shadow: 0 0 10px rgba(black, 0.2);
-    transition: 0.4s;
-
-    &:hover {
-      box-shadow: 0 0 30px rgba(var(--va-c-primary-rgb), 0.2);
-    }
-  }
-}
-
-.site-author-status {
-  position: absolute;
-  height: 1.8rem;
-  width: 1.8rem;
-  bottom: 0;
-  right: 0;
-  line-height: 1.8rem;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  background-color: var(--va-c-bg-light);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
 .site-name {
   color: var(--va-c-text);
   font-family: get-css-var('font-serif');
   font-weight: 900;
 }
 
-.site-subtitle {
-  color: get-css-var('c-gray');
-  display: block;
-}
-
 .site-description {
   color: var(--va-c-text);
   font-size: 0.8rem;

package/components/YunPageHeader.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <header class="post-header" m="t-16 sm:t-6">
+  <header class="post-header">
     <h1
       class="post-title flex-center" p="2" text="2xl center"
       font="serif black"

package/components/YunPagination.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { usePagination } from 'valaxy'
+
+const props = defineProps<{
+  /**
+   * Total Pages
+   */
+  total: number
+  /**
+   * Page Size
+   */
+  pageSize: number
+}>()
+
+const { curPage, totalPages, showPage, getTo, surLen, prevTo, nextTo, showPrev, showNext } = usePagination({
+  total: props.total,
+  pageSize: props.pageSize,
+})
+</script>
+
+<template>
+  <nav class="pagination">
+    <RouterLink v-if="showPrev" class="page-number" :to="prevTo" aria-label="prev">
+      <div i-ri-arrow-left-s-line />
+    </RouterLink>
+
+    <template v-for="i in totalPages">
+      <RouterLink
+        v-if="showPage(i)" :key="i" class="page-number"
+        :class="curPage === i && 'active'"
+        :to="getTo(i)"
+      >
+        {{ i }}
+      </RouterLink>
+      <span v-else-if="i === curPage - surLen" :key="`prev-space-${i}`" class="space" disabled>
+        ...
+      </span>
+      <span v-else-if="i === curPage + surLen" :key="`next-space-${i}`" class="space" disabled>
+        ...
+      </span>
+    </template>
+
+    <RouterLink v-if="showNext" class="page-number" :to="nextTo" aria-label="next">
+      <div i-ri-arrow-right-s-line />
+    </RouterLink>
+  </nav>
+</template>
+
+<style lang="scss">
+:root {
+  --page-btn-bg-color: rgba(255, 255, 255, 0.5);
+  --page-btn-hover-bg-color: var(--va-c-primary-lighter);
+  --page-btn-active-bg-color: var(--va-c-primary-light);
+}
+
+.dark {
+  --page-btn-bg-color: var(--va-c-bg-light);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .prev, .next, .page-number, .space {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+    transition: background-color var(--va-transition-duration) ease;
+
+    // disabled attr
+    &[disabled] {
+      background-color: var(--va-c-bg-mute);
+    }
+  }
+
+  .prev, .next, .page-number {
+    cursor: pointer;
+    color: var(--va-c-text);
+    text-decoration: none;
+    background-color: var(--page-btn-bg-color);
+
+    &:hover {
+      color: var(--va-c-bg);
+      background: var(--page-btn-hover-bg-color);
+    }
+
+    &:active {
+      color: var(--va-c-bg);
+      background: var(--page-btn-active-bg-color);
+    }
+
+    &.active {
+      font-weight: normal;
+      background: var(--page-btn-active-bg-color);
+      color: var(--va-c-bg);
+      cursor: default;
+    }
+
+  }
+}
+</style>