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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 云游君 YunYouJun <me@yunyoujun.cn>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/ValaxyMain.vue

@@ -45,10 +45,10 @@ onContentUpdated(() => {
         }" flex="~ col grow"
         p="lt-md:0"
       >
-        <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">
+        <YunCard :cover="frontmatter.cover" m="0" class="relative pt-8" :style="styles as StyleValue">
           <slot name="main-header">
             <YunPageHeader
-              class="mb-2 mt-8"
+              class="mb-2"
               :title="title"
               :icon="frontmatter.icon || icon"
               :color="frontmatter.color || color"

package/components/YunAlbum.vue

@@ -9,7 +9,7 @@ defineProps<{
 
 <template>
   <AppLink class="yun-album-list-item" :to="album.url">
-    <figure :title="album.desc">
+    <figure class="m-10" flex="~ col" :title="album.desc">
       <img
         loading="lazy"
         class="yun-album-list-cover"
@@ -17,9 +17,19 @@ defineProps<{
         :alt="album.caption"
         :on-error="onImgError"
       >
-      <figcaption>
-        「{{ album.caption }}」
+      <figcaption class="yun-album-caption yun-title-effects text-$va-c-text inline-flex">
+        {{ album.caption }}
       </figcaption>
     </figure>
   </AppLink>
 </template>
+
+<style lang="scss">
+.yun-album-caption {
+  position: absolute;
+  bottom: -3rem;
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+</style>

package/components/YunAlbumList.vue

@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <div class="yun-album-list">
-    <YunAlbum v-for="album in albums" :key="album.url" :album="album" />
+  <div class="yun-album-list mb-4">
+    <YunAlbum
+      v-for="album in albums" :key="album.url"
+      :album="album"
+    />
   </div>
 </template>
 
@@ -26,7 +29,6 @@ defineProps<{
     figure {
       position: relative;
       width: 15rem;
-      margin: 2rem;
 
       &::before {
         content: '';
@@ -53,14 +55,6 @@ defineProps<{
         object-fit: cover;
         background-color: #eee;
       }
-
-      figcaption {
-        position: absolute;
-        bottom: -2.5rem;
-        display: block;
-        text-align: center;
-        width: 100%;
-      }
     }
   }
 }

package/components/YunCategories.vue

@@ -26,11 +26,12 @@ const categoryList = computed(() => {
 <template>
   <div flex="~ col">
     <ul
-      v-for="category in categories.values()"
+      v-for="(category, i) in categories.values()"
       :key="category.name"
       class="category-list"
     >
       <YunCategory
+        :i="i"
         :parent-key="category.name"
         :category="category"
         :level="level + 1"

package/components/YunCategory.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { CategoryList, Post } from 'valaxy'
-import { isCategoryList, useInvisibleElement } from 'valaxy'
+import { useInvisibleElement } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+import { useYunSpringAnimation } from '../composables/animation'
 
 const props = withDefaults(defineProps<{
+  i?: number
   parentKey: string
   // to eliminate the warning
   category: Post | CategoryList
@@ -20,24 +22,10 @@ const props = withDefaults(defineProps<{
 })
 
 const router = useRouter()
-const route = useRoute()
-const categoryList = computed(() => {
-  const c = (route.query.category as string) || ''
-  return Array.isArray(c) ? [c] : c.split('/')
-})
 
 const collapse = ref(props.collapsable)
 const { t } = useI18n()
 
-/**
- * i18n
- */
-const { locale } = useI18n()
-function getTitle(post: Post | any) {
-  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
-  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
-}
-
 const postCollapseElRef = ref<HTMLElement>()
 const { show } = useInvisibleElement(postCollapseElRef)
 /**
@@ -61,11 +49,21 @@ onMounted(() => {
   if (postCollapseEl)
     postCollapseElRef.value = postCollapseEl
 })
+
+const categoryRef = ref<HTMLElement>()
+if (props.level === 1) {
+  useYunSpringAnimation(categoryRef, {
+    i: props.i || 0,
+    y: 20,
+    duration: 200,
+  })
+}
 </script>
 
 <template>
   <li
-    class="category-list-item inline-flex items-center cursor-pointer w-full gap-2 transition px-3 py-2 rounded"
+    ref="categoryRef"
+    class="category-list-item inline-flex items-center cursor-pointer w-full gap-2 px-3 py-2 rounded"
     hover="bg-black/5"
   >
     <span
@@ -98,28 +96,16 @@ onMounted(() => {
   >
     <ul v-if="!collapse">
       <li
-        v-for="categoryItem, i in category.children.values()" :key="i"
+        v-for="categoryItem, cI in category.children.values()"
+        :key="cI"
         class="post-list-item text-$va-c-text" m="l-4"
         hover="text-$va-c-primary-lighter"
       >
-        <template v-if="isCategoryList(categoryItem)">
-          <YunCategory
-            :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
-            :category="categoryItem"
-            :collapsable="!categoryList.includes(categoryItem.name)"
-          />
-        </template>
-
-        <template v-else>
-          <RouterLink
-            v-if="categoryItem.title" :to="categoryItem.path || ''"
-            class="inline-flex items-center gap-2 px-3 py-2 w-full rounded transition"
-            hover="bg-black/5"
-          >
-            <div i-ri-file-text-line />
-            <span font="serif black">{{ getTitle(categoryItem) }}</span>
-          </RouterLink>
-        </template>
+        <YunCategoryChildItem
+          :i="cI"
+          :category-item="categoryItem"
+          :parent-key="parentKey"
+        />
       </li>
     </ul>
   </Transition>

package/components/YunCategoryChildItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Post } from 'valaxy'
+import { isCategoryList } from 'valaxy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  i?: number
+  categoryItem: any
+  parentKey?: string
+}>()
+
+/**
+ * i18n
+ */
+const { locale } = useI18n()
+function getTitle(post: Post | any) {
+  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
+}
+const route = useRoute()
+const categoryList = computed(() => {
+  const c = (route.query.category as string) || ''
+  return Array.isArray(c) ? [c] : c.split('/')
+})
+</script>
+
+<template>
+  <template v-if="isCategoryList(categoryItem)">
+    <YunCategory
+      :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
+      :category="categoryItem"
+      :collapsable="!categoryList.includes(categoryItem.name)"
+    />
+  </template>
+
+  <template v-else>
+    <RouterLink
+      v-if="categoryItem.title"
+      :to="categoryItem.path || ''"
+      class="inline-flex items-center gap-2 px-3 py-2 w-full rounded"
+      hover="bg-black/5"
+    >
+      <div i-ri-file-text-line />
+      <span font="serif black">{{ getTitle(categoryItem) }}</span>
+    </RouterLink>
+  </template>
+</template>

package/components/YunLayoutPostTag.vue

@@ -1,12 +1,22 @@
 <script lang="ts" setup>
-defineProps<{
+import { ref } from 'vue'
+import { useYunSpringAnimation } from '../composables/animation'
+
+const props = defineProps<{
+  i?: number
   title: string
   count: number
 }>()
+
+const tagRef = ref<HTMLElement>()
+useYunSpringAnimation(tagRef, {
+  i: props.i || 0,
+})
 </script>
 
 <template>
   <span
+    ref="tagRef"
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >

package/components/YunPostCollapse.vue

@@ -45,9 +45,11 @@ const sortedYears = computed(() => {
 
 <template>
   <div class="post-collapse px-10 lt-sm:px-5 max-w-3xl" relative>
-    <div w="full" text="center" class="yun-text-light" p="2">
-      {{ t('counter.archives', posts.length) }}
-    </div>
+    <Transition appear enter-active-class="animate-fade-in animate-duration-400">
+      <div w="full" text="center" class="yun-text-light" p="2">
+        {{ t('counter.archives', posts.length) }}
+      </div>
+    </Transition>
 
     <div class="post-collapse-action" text="center">
       <button class="yun-icon-btn shadow hover:shadow-md" @click="isDesc = !isDesc">

package/components/project/YunProjectCard.vue

@@ -1,9 +1,34 @@
 <script setup lang="ts">
-import { type CSSProperties, computed } from 'vue'
+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 props = defineProps<{ project: ProjectItem }>()
 const cardStyle = computed(() => {
   const styles: CSSProperties = {
     color: props.project.textColor,
@@ -63,8 +88,9 @@ const links = computed(() => [
 
 <template>
   <div
+    ref="cardRef"
     flex="~ col center"
-    class="m-2 w-90 transform rounded shadow-md grayscale-30 transition duration-400"
+    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"

package/components/project/YunProjectCollection.vue

@@ -11,5 +11,5 @@ defineProps<{
   <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" />
+  <YunProjectCard v-for="project, i in projects" :key="i" :project="project" :i="i" />
 </template>

package/components/project/YunProjectToggleButton.vue

@@ -9,6 +9,7 @@ defineProps<{
     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 />

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

@@ -33,7 +33,6 @@ const pageIcon = computed(() => {
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.archives')"
             :icon="pageIcon"
             :color="frontmatter.color"

package/layouts/categories.vue

@@ -53,7 +53,6 @@ useSchemaOrg([
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.categories')"
             :icon="pageIcon"
             :color="frontmatter.color"
@@ -61,9 +60,14 @@ useSchemaOrg([
           />
         </template>
         <template #main-content>
-          <div text="center" class="yun-text-light" p="2">
-            {{ t('counter.categories', Array.from(categories.children).length) }}
-          </div>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div text="center" class="yun-text-light" p="2">
+              {{ t('counter.categories', Array.from(categories.children).length) }}
+            </div>
+          </Transition>
           <YunCategories :categories="categories.children" />
           <RouterView />
         </template>

package/layouts/gallery.vue

@@ -29,34 +29,35 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
 </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.gallery')"
-          :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.photos', photos.length) }}
-        </div>
-        <div class="page-action" text="center">
-          <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
-            <div i-ri-arrow-go-back-line />
-          </a>
-        </div>
-        <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
-        <YunGallery v-else :photos="photos" />
-        <RouterView />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('title.gallery')"
+            :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.photos', photos.length) }}
+          </div>
+          <div class="page-action" text="center">
+            <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
+              <div i-ri-arrow-go-back-line />
+            </a>
+          </div>
+          <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
+          <YunGallery v-else :photos="photos" />
+          <RouterView />
+        </template>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/tags.vue

@@ -53,6 +53,7 @@ function displayTag(tag: string) {
 }
 
 const title = usePostTitle(frontmatter)
+const tagArr = computed(() => Array.from(tags.value).sort())
 
 // use flex to fix `overflow-wrap: break-words;` not working in Safari
 </script>
@@ -65,7 +66,6 @@ const title = usePostTitle(frontmatter)
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.tags')"
             :icon="frontmatter.icon || 'i-ri-tag-line'"
             :color="frontmatter.color"
@@ -73,14 +73,20 @@ const title = usePostTitle(frontmatter)
           />
         </template>
         <template #main-content>
-          <div class="yun-text-light" text="center" p="2">
-            {{ t('counter.tags', Array.from(tags).length) }}
-          </div>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div class="yun-text-light" text="center" p="2">
+              {{ t('counter.tags', tagArr.length) }}
+            </div>
+          </Transition>
 
           <div class="justify-center items-end" flex="~ wrap" gap="1">
             <YunLayoutPostTag
-              v-for="[key, tag] in Array.from(tags).sort()"
+              v-for="([key, tag], i) in tagArr"
               :key="key"
+              :i="i"
               :title="key"
               :count="tag.count"
               :style="getTagStyle(tag.count)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.20.0-beta.2",
+  "version": "0.20.0-beta.4",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",

package/styles/animations/index.scss

@@ -34,3 +34,40 @@
     opacity: 1;
   }
 }
+
+// title-effects
+.yun-title-effects {
+  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: 0;
+    border-width: 2px 0 0 2px;
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  &::after {
+    right: 0;
+    bottom: 0;
+    border-width: 0 2px 2px 0;
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  &:hover::before,
+  &:hover::after {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}