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

package/components/YunSiteInfo.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div class="site-info gap-1 items-center" flex="~ col" m="t-4">
+    <RouterLink
+      class="site-author-avatar inline-flex-center" to="/about"
+    >
+      <img class="rounded-full" :src="siteConfig.author.avatar" alt="avatar">
+      <!-- <span
+        v-if="siteConfig.author.status.emoji"
+        class="site-author-status absolute"
+        :title="siteConfig.author.status.message || undefined"
+      >{{ siteConfig.author.status.emoji }}</span> -->
+    </RouterLink>
+    <YunAuthorName />
+    <YunSiteTitle />
+    <h4
+      v-if="siteConfig.subtitle"
+      class="site-subtitle block"
+      text="xs"
+    >
+      {{ siteConfig.subtitle }}
+    </h4>
+    <div v-if="siteConfig.description" class="site-description">
+      {{ siteConfig.description }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.site-author-avatar {
+  position: relative;
+  line-height: 0;
+
+  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 {
+  height: 1.8rem;
+  width: 1.8rem;
+  bottom: 0;
+  right: 0;
+  line-height: 1.8rem;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+  background-color: var(--va-c-bg-light);
+  border: 1px solid rgb(255 255 255 / 0.1);
+}
+
+.site-info {
+  &.fix-top {
+    margin-top: -1.5rem;
+  }
+}
+</style>

package/components/YunSponsor.vue

@@ -18,10 +18,13 @@ const sponsorBtnTitle = computed(() => {
       class="sponsor-button yun-icon-btn shadow hover:shadow-md"
       :title="sponsorBtnTitle" text="red-400" @click="showQr = !showQr"
     >
-      <div i-ri-heart-line />
+      <div class="mt-2px" i-ri-heart-fill />
     </button>
 
-    <div class="qrcode-container qrcode flex-center flex-col" m="y-4" :class="showQr && 'show'">
+    <div
+      class="qrcode-container qrcode flex-center flex-col" m="y-4"
+      :class="showQr && 'show'"
+    >
       <div v-if="siteConfig.sponsor.description" class="sponsor-description" mb="4" text="sm">
         {{ siteConfig.sponsor.description }}
       </div>
@@ -41,10 +44,12 @@ const sponsorBtnTitle = computed(() => {
 </template>
 
 <style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
 .sponsor-button {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgb(255 255 255 / 0.1);
 
   div {
     transform: scale(1.1);
@@ -52,7 +57,7 @@ const sponsorBtnTitle = computed(() => {
   }
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: rgb(255 255 255 / 0.9);
 
     div {
       transform: scale(1.2);
@@ -67,12 +72,22 @@ const sponsorBtnTitle = computed(() => {
 }
 
 .qrcode-container {
+  --height: 200px;
+
   overflow: hidden;
   height: 0;
-  transition: height var(--va-transition-duration) ease-in-out;
+  opacity: 0;
+  transition: all var(--va-transition-duration) map.get($cubic-bezier, 'ease-in-out');
 
   &.show {
-    height: 260px;
+    height: var(--height);
+    opacity: 1;
+  }
+}
+
+@include screen('md') {
+  .qrcode-container {
+    --height: 260px;
   }
 }
 

package/components/animation/LineBurstEffects.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// 播放完销毁 css 动画
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  duration: number
+}>()
+
+const destroy = ref(false)
+onMounted(() => {
+  setTimeout(() => {
+    destroy.value = true
+  }, props.duration)
+})
+</script>
+
+<template>
+  <div
+    v-if="!destroy"
+    class="line-burst-effects absolute"
+  >
+    <div v-for="i in 8" :key="i" class="line">
+      <div>
+        <span />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.line-burst-effects {
+  .line {
+    position: absolute;
+    top: 0;
+    left: calc(50% - 2px);
+    width: 4px;
+    height: 100%;
+  }
+
+  @for $i from 1 through 8 {
+    .line:nth-child(#{$i}) {
+      transform: rotate($i * 45deg);
+
+      div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 20%;
+        overflow: hidden;
+      }
+
+      span {
+        display: block;
+        background-color: white;
+        content: '';
+        width: 100%;
+        height: 100%;
+        transform: translateY(100%);
+        animation: line-burst 0.8s forwards;
+      }
+    }
+  }
+}
+
+@keyframes line-burst {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}
+</style>

package/components/author/YunAuthorAvatar.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <img
+    class="rounded-full size-full"
+    :src="siteConfig.author.avatar" alt="avatar"
+  >
+</template>

package/components/author/YunAuthorIntro.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div v-if="siteConfig.author.intro" class="site-author-intro" m="t-0 b-4">
+    {{ siteConfig.author.intro }}
+  </div>
+</template>

package/components/author/YunAuthorName.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <RouterLink
+    class="site-author-name font-black font-serif text-$va-c-text op-80 hover:op-100 flex-center"
+    to="/about"
+  >
+    {{ siteConfig.author.name }}
+  </RouterLink>
+</template>

package/components/config/YunToggleDark.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { useAppStore } from 'valaxy'
+
+const props = defineProps<{
+  transition?: boolean
+}>()
+
+const appStore = useAppStore()
+const { t } = useI18n()
+
+const themeTitle = computed(() => {
+  return appStore.isDark ? t('button.toggle_light') : t('button.toggle_dark')
+})
+
+const styles = computed(() => {
+  return {
+    color: appStore.isDark ? '' : '#f1cb64',
+  }
+})
+
+function toggle(e: MouseEvent) {
+  props.transition ? appStore.toggleDarkWithTransition(e) : appStore.toggleDark()
+}
+</script>
+
+<template>
+  <button
+    class="yun-icon-btn"
+    :title="themeTitle"
+    :style="styles" @mousedown.prevent="() => { console.log('yes') }"
+    @click="toggle"
+  >
+    <div i="ri-sun-line dark:ri-moon-line" />
+  </button>
+</template>

package/components/layout/YunLayoutLeft.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useYunAppStore } from '../../stores'
+
+const yun = useYunAppStore()
+</script>
+
+<template>
+  <div v-if="yun.size.isLg" flex="~ col" class="gap-4 sticky top-68px w-80">
+    <YunSidebarCard />
+    <YunAdBoard />
+  </div>
+</template>

package/components/layout/YunLayoutRight.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useFrontmatter } from 'valaxy'
+import { useYunAppStore } from '../../stores'
+
+const fm = useFrontmatter()
+const yun = useYunAppStore()
+</script>
+
+<template>
+  <button
+    v-if="fm.aside !== false"
+    class="xl:hidden toc-btn shadow-md fixed yun-icon-btn z-350 bg-$va-c-bg-soft"
+    opacity="75" right="2" bottom="19"
+    @click="yun.rightSidebar.toggle()"
+  >
+    <div i-ri-file-list-line />
+  </button>
+
+  <YunOverlay :show="yun.rightSidebar.isOpen" @click="yun.rightSidebar.toggle()" />
+  <YunAside />
+</template>

package/components/layout/YunLayoutWrapper.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useYunAppStore } from '../../stores'
+
+const yun = useYunAppStore()
+</script>
+
+<template>
+  <div
+    flex="~"
+    class="mt-24 md:mt-36 w-full max-w-screen-2xl m-auto justify-center items-start gap-4"
+    :class="{
+      'flex-col': yun.size.isXs,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/menu/YunNavMenuItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+defineProps<{
+  icon: string
+  to?: string
+}>()
+
+const router = useRouter()
+</script>
+
+<template>
+  <div
+    class="size-12 inline-flex-center cursor-pointer z-$yun-z-nav-menu"
+    text="$va-c-text"
+    hover="bg-white/80 dark:bg-black/80 op-100"
+    op-80
+    @click="to && router.push(to)"
+  >
+    <div class="size-6" :class="icon" />
+  </div>
+</template>

package/components/menu/YunNavMenuTitle.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useFrontmatter, useSiteConfig } from 'valaxy'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useYunAppStore } from '../../stores'
+
+const yunApp = useYunAppStore()
+const fm = useFrontmatter()
+const siteConfig = useSiteConfig()
+
+const showPostTitle = ref(false)
+watch(() => yunApp.scrollY, () => {
+  showPostTitle.value = yunApp.scrollY > 200
+})
+
+const router = useRouter()
+function goToLink() {
+  if (!showPostTitle.value)
+    router.push('/')
+}
+</script>
+
+<template>
+  <div
+    v-motion
+    flex="~ center col h-full"
+    :class="{
+      'cursor-pointer': !showPostTitle,
+    }"
+    :initial="{
+      opacity: 0,
+      y: 10,
+    }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 400,
+        delay: 1200,
+      },
+    }"
+    @click="goToLink"
+  >
+    <div
+      v-if="fm.title && showPostTitle"
+      flex="~ col"
+      class="nav-menu-post-title text-xs font-bold flex items-center gap-1 lt-sm:max-w-40"
+    >
+      <div class="gap-1" flex="~">
+        <div
+          class="size-4"
+          :class="fm.icon || 'i-ri-article-line'"
+        />
+        <span class="truncate"> {{ fm.title }}</span>
+      </div>
+      <span v-if="fm.subtitle" class="font-light op-80">
+        {{ fm.subtitle }}
+      </span>
+    </div>
+    <span v-else class="font-light truncate">
+      {{ siteConfig.title }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+.nav-menu-post-title {
+  // safari not support
+  animation: nav-menu-title-appear 0.3s linear forwards;
+
+  // animation-timeline: scroll();
+  // animation-range: 0 calc(30vh);
+}
+
+@keyframes nav-menu-title-appear {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/components/menu/YunPostClassifyNavItem.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+defineProps<{
+  icon: string
+  title: string
+  /**
+   * Total number
+   */
+  total: number
+  to: string
+}>()
+</script>
+
+<template>
+  <RouterLink
+    flex="~ col center"
+    class="gap-1 w-20 p-2 rounded transition op-80"
+    :to="to" :title="title"
+    hover="bg-$va-c-bg-soft op-100"
+  >
+    <div flex="~ col" class="text-$va-c-text inline-flex-center gap-1">
+      <div class="text-2xl" :class="icon" />
+      <span class="text-xs">
+        {{ title }}
+      </span>
+    </div>
+    <span
+      class="count text-base dark:text-white/80"
+    >{{ total }}</span>
+  </RouterLink>
+</template>

package/components/page/YunPageHeaderGradient.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useValaxyDark } from 'valaxy'
+import { computed } from 'vue'
+// background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+const { isDark } = useValaxyDark()
+const gradientStyles = computed(() => {
+  if (isDark.value) {
+    return {
+      '--gradient-from': '0 0 0',
+      '--gradient-to': '0 0 0',
+    }
+  }
+  return {
+    '--gradient-from': '161 196 253',
+    '--gradient-to': '194 233 251',
+  }
+})
+</script>
+
+<template>
+  <div class="yun-page-header-gradient" :style="gradientStyles" />
+</template>
+
+<style lang="scss">
+.yun-page-header-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 500px;
+  z-index: var(--yun-z-page-gradient);
+  pointer-events: none;
+  background: linear-gradient(to right,rgb(var(--gradient-from) / 0.2) 0,rgb(var(--gradient-to) / .2) 100%);
+  mask-image: linear-gradient(#000,#fff0 70%);
+  animation: fade-in 2s;
+}
+</style>

package/components/project/YunProjectCard.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { type CSSProperties, computed } from 'vue'
+import { TinyColor } from '@ctrl/tinycolor'
+import type { ProjectItem } from '../../types'
+
+const props = defineProps<{ project: ProjectItem }>()
+const cardStyle = computed(() => {
+  const styles: CSSProperties = {
+    color: props.project.textColor,
+  }
+  if (props.project.color && (typeof props.project.gradient === 'undefined' || props.project.gradient)) {
+    const color = new TinyColor(props.project.color)
+    styles['--un-gradient-stops'] = `${color.spin(55).toHexString()}, ${props.project.color}`
+    if (!styles.color)
+      styles.color = color.isDark() ? 'white' : 'black'
+  }
+  else {
+    styles.backgroundColor = props.project.color || 'rgba(255,255,255,0.9)'
+    if (!styles.color)
+      styles.color = 'black'
+  }
+  return styles
+})
+
+const githubUrl = computed(() => {
+  if (props.project.github)
+    return `https://github.com/${props.project.github}`
+  else
+    return `https://github.com/YunYouJun/${props.project.name}`
+})
+
+const npmLink = computed(() => {
+  return props.project.npm ? `https://www.npmjs.com/package/${props.project.npm}` : ''
+})
+
+const projectUrl = computed(() => {
+  return props.project.url || githubUrl.value
+})
+
+const links = computed(() => [
+  {
+    url: projectUrl.value,
+    icon: 'i-ri-global-line',
+    color: '#6eb7f9',
+  },
+  {
+    url: props.project.docs,
+    icon: 'i-ri-book-line',
+    color: '#443ed1',
+  },
+  {
+    url: githubUrl.value,
+    icon: 'i-ri-github-line',
+    color: 'black',
+  },
+  {
+    url: npmLink.value,
+    icon: 'i-ri-npmjs-line',
+    color: 'red',
+  },
+])
+</script>
+
+<template>
+  <div
+    flex="~ col center"
+    class="m-2 w-90 transform rounded shadow-md grayscale-30 transition duration-400"
+    bg="opacity-80 gradient-to-br"
+    p="x-2 b-12"
+    hover="shadow-lg grayscale-0"
+    :style="cardStyle"
+  >
+    <div v-if="project.emoji" class="mt-4">
+      {{ project.emoji }}
+    </div>
+    <a :href="projectUrl" target="_blank" class="text-unset">
+      <h2 text="lg" font="bold" m="2">
+        {{ project.name || '忘记叫啥了' }}
+      </h2>
+    </a>
+    <small
+      class="block" p="2" text="center"
+      v-html="project.desc || '说点什么好呢'"
+    />
+    <div flex="~ center" class="absolute left-0 right-0 bottom-0 h-10">
+      <template v-for="item in links" :key="item.icon">
+        <YunProjectLinkItem
+          v-if="item.url"
+          :item="item"
+        />
+      </template>
+    </div>
+  </div>
+</template>

package/components/project/YunProjectCollection.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { ProjectItem } from '../../types'
+
+defineProps<{
+  title: string
+  projects: ProjectItem[]
+}>()
+</script>
+
+<template>
+  <div class="w-full flex justify-center" text="xl" font="black" m="b-2 t-4">
+    {{ title }}
+  </div>
+  <YunProjectCard v-for="project, i in projects" :key="i" :project="project" />
+</template>

package/components/project/YunProjectLinkItem.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+defineProps<{
+  item: {
+    url: string
+    icon: string
+    color: string
+  }
+}>()
+</script>
+
+<template>
+  <a
+    class="yun-project-link-item inline-flex items-center justify-center flex-1 p-2 h-full text-white"
+    :href="item.url" target="_blank"
+    :style="{
+      '--c-brand': item.color,
+    }"
+  >
+    <div :class="item.icon" />
+  </a>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.yun-project-link-item {
+  position: relative;
+  background-color: rgb(0 0 0 / 0.05);
+  transition: background-color 0.3s;
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--c-brand);
+    transition: all 0.3s map.get($cubic-bezier, 'ease-in');
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: var(--c-brand);
+    transition: all 0.3s map.get($cubic-bezier, 'ease-in');
+    inset: 0;
+    opacity: 0.1;
+    z-index: -1;
+  }
+
+  &:hover {
+    &::before {
+      height: 40px;
+      opacity: 0.8;
+    }
+  }
+}
+</style>