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

package/components/prologue/YunAEFrame.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const playAnim = ref(false)
+onMounted(() => {
+  playAnim.value = true
+})
+</script>
+
+<template>
+  <div
+    class="yun-ae-frame"
+    :class="{
+      play: playAnim,
+    }"
+  >
+    <div class="tl absolute" />
+    <div class="tr absolute" />
+    <div class="bl absolute" />
+    <div class="br absolute" />
+  </div>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+@include screen('md') {
+  .yun-ae-frame {
+    --corner-size: 50px;
+    --corner-margin: 30px;
+    --corner-border-size: 5px;
+  }
+}
+
+.yun-ae-frame {
+  --corner-size: 40px;
+  --corner-margin: 10px;
+  --corner-border-size: 3px;
+
+  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;
+      }
+    }
+  }
+
+  .tl, .tr, .bl, .br {
+    position: absolute;
+    transition: transform 0.6s map.get($cubic-bezier, 'ease-in');
+  }
+
+  .tl {
+    transform: translate(calc(var(--corner-margin) * -1), calc(var(--corner-margin) * -1));
+  }
+
+  .tr {
+    transform: translate(calc(var(--corner-margin)), calc(var(--corner-margin) * -1));
+  }
+
+  .bl {
+    transform: translate(calc(var(--corner-margin) * -1), calc(var(--corner-margin)));
+  }
+
+  .br {
+    transform: translate(calc(var(--corner-margin)), calc(var(--corner-margin)));
+  }
+
+  &.play {
+    .tl {
+      transform: translate(0, 0);
+    }
+
+    .tr {
+      transform: translate(0, 0);
+    }
+
+    .bl {
+      transform: translate(0, 0);
+    }
+
+    .br {
+      transform: translate(0, 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/YunSiteDescription.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div v-if="siteConfig.description" class="site-description text-$va-c-text text-sm">
+    {{ siteConfig.description }}
+  </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-white/80 dark:bg-black/80"
+    @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>

package/components/site/YunSiteSubtitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <h4
+    v-if="siteConfig.subtitle"
+    class="site-subtitle block text-$va-c-text op-80" text="sm"
+  >
+    {{ siteConfig.subtitle }}
+  </h4>
+</template>

package/components/site/YunSiteTitle.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <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>
+</template>
+
+<style lang="scss">
+.site-name {
+  --title-padding: -15px;
+
+  display: inline-flex;
+  color: var(--va-c-text);
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    opacity: 0;
+    border: 2px solid;
+    transition: 0.3s;
+    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
+  }
+
+  &::before {
+    top: 0;
+    left: var(--title-padding);
+    border-width: 2px 0 0 2px;
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  &::after {
+    right: var(--title-padding);
+    bottom: 0;
+    border-width: 0 2px 2px 0;
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+</style>

package/components/third/YunWalineMeta.vue

@@ -14,14 +14,26 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div v-if="addonWaline && addonWaline.options" flex="~" text="sm" my="1" h="5">
-    <div v-if="addonWaline.options.pageview" inline-flex justify="center" items="center" mx="2" :title="t('post.pageview_count')">
+  <div v-if="addonWaline && addonWaline.options" class="inline-flex gap-4" text="sm" h="5">
+    <div
+      v-if="addonWaline.options.pageview" inline-flex justify="center" items="center"
+      :title="t('post.pageview_count')"
+    >
       <div inline-flex i-ri-eye-line />
-      <span ml-1 inline-flex class="waline-pageview-count" :data-path="route.path" />
+      <span
+        ml-1 inline-flex class="waline-pageview-count op-80"
+        :data-path="route.path"
+      />
     </div>
-    <div v-if="addonWaline.options.comment" inline-flex justify="center" items="center" mx="2" :title="t('post.comment_count')">
+    <div
+      v-if="addonWaline.options.comment" inline-flex justify="center" items="center"
+      :title="t('post.comment_count')"
+    >
       <div inline-flex i-ri-chat-4-line />
-      <span ml-1 inline-flex class="waline-comment-count" :data-path="route.path" />
+      <span
+        ml-1 inline-flex class="waline-comment-count op-80"
+        :data-path="route.path"
+      />
     </div>
   </div>
 </template>

package/components/ui/YunDivider.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="h-1px bg-black/50 dark:bg-white/80 my-4 md:my-6" />
+</template>

package/composables/animation.ts

@@ -0,0 +1,33 @@
+import { useMotion } from '@vueuse/motion'
+import type { MaybeRef } from 'vue'
+import { cubicBezier } from '../client/constants'
+
+/**
+ * 统一的弹跳出现动画
+ */
+export function useYunSpringAnimation(target: MaybeRef<HTMLElement | undefined>, options: {
+  /**
+   * index order
+   */
+  i: number
+  y?: number
+  duration?: number
+}) {
+  useMotion(target, {
+    initial: {
+      opacity: 0,
+      y: options.y || 40,
+    },
+    enter: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: options.i * 50,
+        type: 'spring',
+        ease: cubicBezier.easeIn,
+        damping: 8,
+        duration: options.duration || 400,
+      },
+    },
+  })
+}

package/docs/zh-CN/config.md

@@ -30,9 +30,6 @@ export default defineConfig<ThemeConfig>({
       title: '云游君的小站',
       // 手动分割
       // title: ['云游君的', '小站'],
-      cloud: {
-        enable: true
-      }
     },
   }
 })

package/layouts/404.vue

@@ -7,8 +7,6 @@ const { back } = useBack()
 </script>
 
 <template>
-  <YunSidebar :show-hamburger="true" />
-
   <main class="va-main w-full h-screen" text="center" flex="~ col" justify="center" items="center">
     <div class="not-found" title="404" font="mono">
       404
@@ -27,6 +25,6 @@ const { back } = useBack()
 <style lang="scss" scoped>
 .not-found {
   font-size: 10rem;
-  text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+  text-shadow: 0 5px 10px rgb(0 0 0 / .25), 0 20px 20px rgb(0 0 0 / .15);
 }
 </style>

package/layouts/albums.vue

@@ -20,28 +20,29 @@ const albums = computed(() => frontmatter.value.albums || [])
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <template #main-header>
-        <YunPageHeader
-          :title="title || t('title.album')"
-          :icon="frontmatter.icon || 'i-ri-gallery-line'"
-          :color="frontmatter.color"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </template>
-      <template #main-content>
-        <div text="center" class="yun-text-light" p="2">
-          {{ t('counter.albums', albums.length) }}
-        </div>
-        <YunAlbumList :albums="albums" />
-        <RouterView />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('title.album')"
+            :icon="frontmatter.icon || 'i-ri-gallery-line'"
+            :color="frontmatter.color"
+            :page-title-class="frontmatter.pageTitleClass"
+          />
+        </template>
+        <template #main-content>
+          <div text="center" class="yun-text-light" p="2">
+            {{ t('counter.albums', albums.length) }}
+          </div>
+          <YunAlbumList :albums="albums" />
+          <RouterView />
+        </template>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/archives.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { defineWebPage, useSchemaOrg } from '@unhead/schema-org'
 import { useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -15,28 +16,38 @@ useSchemaOrg([
     '@type': 'CollectionPage',
   }),
 ])
+
+const pageIcon = computed(() => {
+  if (!frontmatter.value.icon)
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    frontmatter.value.icon = 'i-ri-archive-line'
+  return frontmatter.value.icon
+})
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <template #main-header>
-        <YunPageHeader
-          :title="title || t('menu.archives')"
-          :icon="frontmatter.icon || 'i-ri-archive-line'"
-          :color="frontmatter.color"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </template>
-      <template #main-content>
-        <RouterView />
-        <YunPostCollapse :posts="site.postList" />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('menu.archives')"
+            :icon="pageIcon"
+            :color="frontmatter.color"
+            :page-title-class="frontmatter.pageTitleClass"
+          />
+        </template>
+        <template #main-content>
+          <RouterView />
+          <YunPostCollapse :posts="site.postList" />
+        </template>
+      </component>
+    </RouterView>
+
+    <YunLayoutRight />
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>