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

package/components/project/YunProjectToggleButton.vue

@@ -0,0 +1,16 @@
+<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,
+    }"
+  >
+    <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,144 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import { ref } from 'vue'
+import { useSiteConfig } from 'valaxy'
+import { cubicBezier } from '../../client/constants'
+import { useThemeConfig } from '../../composables'
+
+const siteConfig = useSiteConfig()
+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 />
+        <YunSiteTitle />
+        <h4 v-if="siteConfig.subtitle" class="site-subtitle block text-$va-c-text op-80" text="sm">
+          {{ siteConfig.subtitle }}
+        </h4>
+        <div v-if="siteConfig.description" class="site-description my-1">
+          {{ siteConfig.description }}
+        </div>
+
+        <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>

package/components/prologue/YunAEFrame.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { PopmotionTransitionProps } from '@vueuse/motion'
+import { useMotion } from '@vueuse/motion'
+import { useAppStore } from 'valaxy'
+import { computed, ref } from 'vue'
+
+const tlRef = ref<HTMLElement>()
+const trRef = ref<HTMLElement>()
+const blRef = ref<HTMLElement>()
+const brRef = ref<HTMLElement>()
+
+const app = useAppStore()
+const cornerSize = computed(() => {
+  return app.isMobile ? 40 : 50
+})
+const cornerMargin = computed(() => {
+  return app.isMobile ? 10 : 30
+})
+const cornerBorderSize = computed(() => {
+  return app.isMobile ? 3 : 5
+})
+
+const cornerTransitionProps: PopmotionTransitionProps = {
+  type: 'spring',
+  duration: 600,
+}
+
+useMotion(tlRef, {
+  initial: {
+    x: -cornerMargin.value,
+    y: -cornerMargin.value,
+  },
+  enter: {
+    x: 0,
+    y: 0,
+    transition: cornerTransitionProps,
+  },
+})
+
+useMotion(trRef, {
+  initial: {
+    x: cornerMargin.value,
+    y: -cornerMargin.value,
+  },
+  enter: {
+    x: 0,
+    y: 0,
+    transition: cornerTransitionProps,
+  },
+})
+
+useMotion(blRef, {
+  initial: {
+    x: -cornerMargin.value,
+    y: cornerMargin.value,
+  },
+  enter: {
+    x: 0,
+    y: 0,
+    transition: cornerTransitionProps,
+  },
+})
+
+useMotion(brRef, {
+  initial: {
+    x: cornerMargin.value,
+    y: cornerMargin.value,
+  },
+  enter: {
+    x: 0,
+    y: 0,
+    transition: cornerTransitionProps,
+  },
+})
+
+const cssVarStyles = computed(() => {
+  return {
+    '--corner-size': `${cornerSize.value}px`,
+    '--corner-margin': `${cornerMargin.value}px`,
+    '--corner-border-size': `${cornerBorderSize.value}px`,
+  }
+})
+</script>
+
+<template>
+  <div
+    class="ae-frame" :style="cssVarStyles"
+  >
+    <div ref="tlRef" class="absolute" />
+    <div ref="trRef" class="absolute" />
+    <div ref="blRef" class="absolute" />
+    <div ref="brRef" class="absolute" />
+  </div>
+</template>
+
+<style lang="scss">
+.ae-frame {
+  div {
+    width: var(--corner-size);
+    height: var(--corner-size);
+
+    &::before, &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      background-color: var(--va-c-text);
+    }
+
+    &::before {
+      width: 100%;
+      height: var(--corner-border-size);
+    }
+
+    &::after {
+      width: var(--corner-border-size);
+      height: 100%;
+    }
+
+    &:nth-child(1) {
+      top: var(--corner-margin);
+      left: var(--corner-margin);
+    }
+
+    &:nth-child(2) {
+      top: var(--corner-margin);
+      right: var(--corner-margin);
+
+      &::after {
+        top: 0;
+        right: 0;
+      }
+    }
+
+    &:nth-child(3) {
+      bottom: var(--corner-margin);
+      left: var(--corner-margin);
+
+      &::before {
+        bottom: 0;
+        left: 0;
+      }
+    }
+
+    &:nth-child(4) {
+      bottom: var(--corner-margin);
+      right: var(--corner-margin);
+
+      &::before, &::after {
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+}
+</style>

package/components/prologue/YunAERect.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { PopmotionTransitionProps } from '@vueuse/motion'
+import { useMotion } from '@vueuse/motion'
+import { ref } from 'vue'
+import { cubicBezier } from '../../client/constants'
+
+const rectRef = ref<HTMLElement>()
+
+const tRef = ref<HTMLElement>()
+const lRef = ref<HTMLElement>()
+const bRef = ref<HTMLElement>()
+const rRef = ref<HTMLElement>()
+
+const transitionOptions: PopmotionTransitionProps = {
+  type: 'tween',
+  duration: 600,
+  ease: cubicBezier.easeIn,
+}
+
+useMotion(rectRef, {
+  initial: {
+    backgroundColor: 'rgba(255, 255, 255, 0)',
+  },
+  enter: {
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    transition: {
+      type: 'keyframes',
+      duration: 1000,
+      ease: cubicBezier.easeIn,
+    },
+  },
+})
+
+useMotion(tRef, {
+  initial: {
+    x: '-100%',
+  },
+  enter: {
+    x: '0%',
+    transition: transitionOptions,
+  },
+})
+
+useMotion(lRef, {
+  initial: {
+    y: '-100%',
+  },
+  enter: {
+    y: '0%',
+    transition: transitionOptions,
+  },
+})
+
+useMotion(bRef, {
+  initial: {
+    x: '100%',
+  },
+  enter: {
+    x: '0%',
+    transition: transitionOptions,
+  },
+})
+
+useMotion(rRef, {
+  initial: {
+    y: '100%',
+  },
+  enter: {
+    y: '0%',
+    transition: transitionOptions,
+  },
+})
+</script>
+
+<template>
+  <div ref="rectRef" class="absolute ae-rect">
+    <div ref="tRef" />
+    <div ref="lRef" />
+    <div ref="bRef" />
+    <div ref="rRef" />
+  </div>
+</template>
+
+<style lang="scss">
+.ae-rect {
+  top: var(--rect-margin);
+  left: var(--rect-margin);
+  width: calc(100% - var(--rect-margin) * 2);
+  height: calc(100% - var(--rect-margin) * 2);
+  overflow: hidden;
+
+  div {
+    position: absolute;
+    overflow: hidden;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: var(--va-c-text);
+    }
+
+    &:nth-child(1),
+    &:nth-child(3) {
+      left: 0;
+      width: 100%;
+      height: 1px;
+    }
+
+    &:nth-child(2),
+    &:nth-child(4) {
+      top: 0;
+      width: 1px;
+      height: 100%;
+    }
+
+    &:nth-child(3) {
+      bottom: 0;
+    }
+
+    &:nth-child(4) {
+      right: 0;
+    }
+  }
+}
+</style>

package/components/site/YunFullscreenMenuItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useYunAppStore } from '../../stores'
+import type { PageProps } from '../../types'
+
+defineProps<{
+  page: PageProps
+}>()
+
+const yunApp = useYunAppStore()
+</script>
+
+<template>
+  <AppLink
+    class="link-item w-full items-center justify-center md:justify-start gap-2 transition rounded text-2xl p-4 sm:(text-3xl p-6) lg:(text-4xl p-7)"
+    inline-flex
+    :to="page.url" :title="page.name"
+    :style="`color:${page.color}`"
+    hover="bg-gray-100/50 dark:bg-gray-800/50"
+    @click="yunApp.fullscreenMenu.isOpen = false"
+  >
+    <div :class="page.icon" class="icon" />
+    <span>
+      {{ page.name }}
+    </span>
+  </AppLink>
+</template>

package/components/site/YunFullscreenMenuList.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../../composables'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div
+    class="links flex-center"
+    flex="~ col" text="left"
+    p="x-$rect-margin"
+  >
+    <slot />
+    <YunFullscreenMenuItem
+      v-for="item, i in themeConfig.pages"
+      :key="i" :page="item"
+    />
+  </div>
+</template>

package/components/site/YunSiteLinkItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useYunAppStore } from '../../stores'
+import type { PageProps } from '../../types'
+
+defineProps<{
+  page: PageProps
+}>()
+
+const yunApp = useYunAppStore()
+</script>
+
+<template>
+  <AppLink
+    class="link-item inline-flex-center gap-2 transition rounded text-base p-1 md:(text-xl p-3) text-$va-c-text"
+    inline-flex
+    :to="page.url" :title="page.name"
+    :style="`color:${page.color}`"
+    hover="bg-gray-100/50 dark:bg-gray-800/50"
+    @click="yunApp.fullscreenMenu.isOpen = false"
+  >
+    <div :class="page.icon" class="icon" />
+    <span>
+      {{ page.name }}
+    </span>
+  </AppLink>
+</template>

package/components/site/YunSiteLinks.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useThemeConfig } from '../../composables'
+
+const themeConfig = useThemeConfig()
+</script>
+
+<template>
+  <div
+    class="links flex-center"
+    flex="~ col" text="left"
+    p="x-$rect-margin"
+  >
+    <slot />
+    <YunSiteLinkItem
+      v-for="item, i in themeConfig.pages"
+      :key="i" :page="item"
+    />
+  </div>
+</template>