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

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,120 @@
+<script setup lang="ts">
+import { type CSSProperties, computed, ref } from 'vue'
+import { TinyColor } from '@ctrl/tinycolor'
+import { useMotion } from '@vueuse/motion'
+import type { ProjectItem } from '../../types'
+import { cubicBezier } from '../../client/constants'
+
+const props = defineProps<{
+  i: number
+  project: ProjectItem
+}>()
+
+const cardRef = ref<HTMLElement>()
+useMotion(cardRef, {
+  initial: {
+    opacity: 0,
+    y: 50,
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: props.i * 50,
+      type: 'spring',
+      ease: cubicBezier.easeIn,
+      damping: 8,
+      duration: 400,
+    },
+  },
+})
+
+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
+    ref="cardRef"
+    flex="~ col center"
+    class="m-2 w-90 transform rounded shadow-md grayscale-30"
+    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" :i="i" />
+</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>

package/components/project/YunProjectToggleButton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  active?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    class="bg-white-90 m-2 inline-flex items-center justify-center rounded px-2 gap-2 h-8"
+    :class="{
+      'bg-blue-500 text-white': active,
+      'hover:bg-$va-c-bg-soft': !active,
+    }"
+  >
+    <slot />
+  </button>
+</template>

package/components/project/YunProjects.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { ProjectDataType } from '../../types'
+
+const fm = useFrontmatter()
+const { t } = useI18n()
+const projects = reactive(fm.value.projects as ProjectDataType)
+
+const curCategory = ref('all')
+</script>
+
+<template>
+  <div flex="~ col center">
+    <h2 class="mb-3 text-2xl">
+      {{ fm.title || t('title.projects') }}
+    </h2>
+
+    <div flex="~ wrap" justify="center">
+      <YunProjectToggleButton
+        :active="curCategory === 'all'"
+        @click="curCategory = 'all'"
+      >
+        全部
+      </YunProjectToggleButton>
+      <YunProjectToggleButton
+        v-for="(category, key) in projects"
+        :key="key"
+        :active="key === curCategory"
+        @click="curCategory = key as string"
+      >
+        <span class="inline-flex">{{ category.emoji }}</span>
+        <span class="inline-flex">{{ category.title }}</span>
+      </YunProjectToggleButton>
+    </div>
+
+    <div flex="~ wrap" justify="center">
+      <template v-for="(category, key) in projects" :key="key">
+        <YunProjectCollection
+          v-if="curCategory === 'all' || curCategory === key"
+          :title="category.title"
+          :projects="projects[key].collection"
+        />
+      </template>
+    </div>
+  </div>
+</template>

package/components/prologue/PrologueSocialIcon.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  social: {
+    name: string
+    link: string
+    icon: string
+    color: string
+  }
+  // animation
+  delay: number
+}>()
+
+const iconRef = ref<HTMLElement>()
+useMotion(iconRef, {
+  initial: {
+    scale: 0.8,
+    x: 0,
+    y: 20,
+    opacity: 0,
+  },
+  enter: {
+    scale: 1,
+    x: 0,
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: 'spring',
+      duration: 20000,
+      damping: 8,
+      delay: props.delay,
+    },
+  },
+})
+</script>
+
+<template>
+  <div
+    v-tooltip="social.name"
+    class="size-10 inline-flex-center"
+  >
+    <a
+      ref="iconRef"
+      class="prologue-social-icon inline-flex-center w-full h-full text-white bg-$c-brand hover:bg-white hover:text-$c-brand"
+      rel="noopener"
+      :href="social.link" :title="social.name"
+      target="_blank"
+      :style="`--c-brand:${social.color}`"
+    >
+      <div
+        class="size-6"
+        :class="social.icon"
+      />
+    </a>
+  </div>
+</template>

package/components/prologue/PrologueSocialLinks.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div flex="~ wrap" class="justify-center items-center mx-5">
+    <PrologueSocialIcon
+      v-for="item, i in siteConfig.social"
+      :key="i"
+      :social="item"
+      :delay="i * 50 + 1000"
+    />
+  </div>
+</template>

package/components/prologue/PrologueSquare.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import { ref } from 'vue'
+import { cubicBezier } from '../../client/constants'
+import { useThemeConfig } from '../../composables'
+
+const themeConfig = useThemeConfig()
+
+const showContent = ref(false)
+const avatarRef = ref<HTMLElement>()
+const motionInstance = useMotion(avatarRef, {
+  initial: {
+    borderRadius: '0%',
+    width: 'var(--total-char-height)',
+    height: 'var(--total-char-height)',
+    rotate: 135,
+    y: '0%',
+  },
+  enter: {
+    borderRadius: '50%',
+    rotate: 0,
+    y: '0%',
+    width: '120px',
+    height: '120px',
+    boxShadow: 'none',
+    transition: {
+      type: 'keyframes',
+      ease: cubicBezier.easeIn,
+      duration: 800,
+      onComplete: () => {
+        motionInstance.variant.value = 'leave'
+        showContent.value = true
+      },
+    },
+  },
+  leave: {
+    // y: '-50%',
+    boxShadow: '0 5px 100px rgba(0, 0, 0, 0.15)',
+    transition: {
+      type: 'keyframes',
+      ease: cubicBezier.easeInOut,
+      duration: 500,
+    },
+  },
+})
+
+const introRef = ref<HTMLElement>()
+useMotion(introRef, {
+  initial: {
+    y: '0%',
+  },
+  enter: {
+    y: 'calc(-50%)',
+    transition: {
+      delay: 800,
+      type: 'keyframes',
+      ease: cubicBezier.easeInOut,
+      duration: 400,
+    },
+  },
+})
+</script>
+
+<template>
+  <div
+    flex="~ col"
+    class="yun-square-container items-center justify-center text-center"
+    :class="{
+      'size-$total-char-height': !showContent,
+    }"
+  >
+    <slot />
+
+    <div
+      ref="introRef"
+      flex="~ col center"
+      class="info relative"
+    >
+      <div
+        ref="avatarRef" flex="~ col" class="absolute yun-square bg-$va-c-text square-rotate w-full"
+      >
+        <LineBurstEffects
+          class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
+          :duration="800"
+        />
+        <YunAuthorAvatar />
+      </div>
+
+      <div
+        v-if="showContent"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: '0',
+        }"
+        :enter="{
+          opacity: 1,
+          y: 'calc(50% + 60px)',
+          transition: {
+            type: 'keyframes',
+            ease: cubicBezier.easeInOut,
+            duration: 400,
+          },
+        }"
+      >
+        <YunAuthorName class="mt-3" />
+        <YunAuthorIntro />
+
+        <YunDivider />
+
+        <div flex="~ col" class="gap-2 items-center justify-center">
+          <YunSiteTitle />
+          <YunSiteSubtitle />
+          <YunSiteDescription />
+        </div>
+
+        <YunDivider />
+
+        <div
+          class="mt-4 flex-center w-50 md:w-100 m-auto gap-2"
+          flex="~ wrap"
+          p="x-$rect-margin"
+        >
+          <YunSiteLinkItem
+            :page="{
+              name: '博客文章',
+              icon: 'i-ri-article-line',
+              url: '/posts/',
+            }"
+          />
+          <slot />
+          <YunSiteLinkItem
+            v-for="item, i in themeConfig.pages"
+            :key="i" :page="item"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+</style>