valaxy-theme-yun 0.14.21 → 0.14.23

package/components/ValaxyMain.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
 import { usePostTitle, useSiteConfig } from 'valaxy'
-import { StyleValue, computed } from 'vue'
+import type { StyleValue } from 'vue'
+import { computed } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -24,7 +25,12 @@ const aside = computed(() => props.frontmatter.aside !== false)
         <div class="content" :class="!aside && 'no-aside'" flex="~ col grow" w="full" p="l-4 lt-md:0">
           <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">
             <slot name="main-header">
-              <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
+              <YunPageHeader
+                class="mb-2"
+                :title="title"
+                :icon="frontmatter.icon || icon" :color="frontmatter.color || color"
+                :cover="frontmatter.cover"
+              />
             </slot>
             <slot name="main-header-after" />
 

package/components/YunAlbum.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { Album } from 'valaxy'
+import { onImgError } from '../utils'
+
+defineProps<{
+  album: Album
+}>()
+</script>
+
+<template>
+  <AppLink class="yun-album-list-item" :to="album.url">
+    <figure :title="album.desc">
+      <img
+        loading="lazy"
+        class="yun-album-list-cover"
+        :src="album.cover"
+        :alt="album.caption"
+        :on-error="onImgError"
+      >
+      <figcaption>
+        「{{ album.caption }}」
+      </figcaption>
+    </figure>
+  </AppLink>
+</template>

package/components/YunAlbumList.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { Album } from 'valaxy'
+
+defineProps<{
+  albums: Album[]
+}>()
+</script>
+
+<template>
+  <div class="yun-album-list">
+    <YunAlbum v-for="album in albums" :key="album.url" :album="album" />
+  </div>
+</template>
+
+<style lang="scss">
+.yun {
+  &-album-list {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  &-album-list-item {
+    display: inline-flex;
+
+    figure {
+      position: relative;
+      width: 15rem;
+      margin: 2rem;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 1%;
+        left: 0.5%;
+        width: 100%;
+        height: 96%;
+        border: 0.25rem solid white;
+        background-color: #666;
+        box-shadow: 0 5px 10px rgba(#000000, 0.3);
+        transform: rotate(-3deg);
+      }
+
+      img {
+        vertical-align: bottom;
+        display: inline-flex;
+        border: 0.25rem solid white;
+        box-shadow: 0 8px 10px rgba(#000000, 0.3);
+        padding: 0;
+        transform: rotate(2deg);
+        width: 100%;
+        height: 10rem;
+        object-fit: cover;
+        background-color: #eee;
+      }
+
+      figcaption {
+        position: absolute;
+        bottom: -2.5rem;
+        display: block;
+        text-align: center;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

package/components/YunBanner.vue

@@ -5,7 +5,8 @@
  * @description https://github.com/YunYouJun/hexo-theme-yun
  */
 
-import { CSSProperties, computed, onBeforeMount, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, onBeforeMount, ref } from 'vue'
 import { random } from 'valaxy'
 import { useThemeConfig } from '../composables'
 

package/components/YunCategory.vue

@@ -28,7 +28,7 @@ const { t } = useI18n()
  * i18n
  */
 const { locale } = useI18n()
-const getTitle = (post: Post | any) => {
+function getTitle(post: Post | any) {
   const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
   return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
 }
@@ -39,7 +39,7 @@ const { show } = useInvisibleElement(postCollapseElRef)
  * scroll to post collapse by category
  * @param category
  */
-const jumpToDisplayCategory = (category: string) => {
+function jumpToDisplayCategory(category: string) {
   router.push({
     query: {
       category,

package/components/YunFooter.vue

@@ -40,7 +40,12 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
         {{ year }}
       </span>
 
-      <a v-if="themeConfig.footer.icon?.enable" class="inline-flex animate-pulse" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
+      <a
+        v-if="themeConfig.footer.icon?.enable"
+        class="inline-flex"
+        :class="themeConfig.footer.icon.animated ? 'animate-pulse' : ''"
+        :href="footerIcon.url" target="_blank" :title="footerIcon.title"
+      >
         <div :class="footerIcon.name" />
       </a>
       <span>{{ siteConfig.author.name }}</span>

package/components/YunFuseSearch.vue

@@ -62,7 +62,7 @@ watch(() => props.open, async () => {
 })
 
 const router = useRouter()
-const jumpToLink = (link: string) => {
+function jumpToLink(link: string) {
   router.push(link)
   emit('close')
 }

package/components/YunGallery.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import type { Photo } from 'valaxy'
+
+defineProps<{
+  photos: Photo[]
+}>()
+</script>
+
+<template>
+  <VAGallery :photos="photos" />
+</template>

package/components/YunPageHeader.vue

@@ -8,9 +8,12 @@ defineProps<{
 
 <template>
   <header class="post-header" m="t-4">
-    <h1 class="post-title" p="2" text="2xl center" font="serif black" :style="`color:${color}`">
-      <div v-if="icon" class="icon" m="r-1" inline-flex :class="icon" />
-      <span>{{ title }}</span>
+    <h1
+      class="post-title flex-center" p="2" text="2xl center"
+      font="serif black" :style="`color:${color}`"
+    >
+      <div v-if="icon" class="icon" m="r-1 t-1px" inline-flex :class="icon" />
+      <span inline-flex class="leading-none">{{ title }}</span>
     </h1>
   </header>
 </template>

package/components/YunPostCard.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import type { Post } from 'valaxy'
-import { StyleValue } from 'vue'
+import type { StyleValue } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{

package/components/YunSearchTrigger.vue

@@ -10,7 +10,7 @@ const isFuse = computed(() => siteConfig.value.search.type === 'fuse')
 
 const open = ref(false)
 
-const togglePopup = () => {
+function togglePopup() {
   open.value = !open.value
 }
 

package/layouts/albums.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
+import { useFrontmatter, usePostTitle } from 'valaxy'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const frontmatter = useFrontmatter()
+
+const title = usePostTitle(frontmatter)
+
+useSchemaOrg([
+  defineWebPage({
+    '@type': 'CollectionPage',
+  }),
+])
+
+const albums = computed(() => frontmatter.value.albums || [])
+</script>
+
+<template>
+  <Layout>
+    <template #main-header>
+      <YunPageHeader :title="title || t('title.album')" :icon="frontmatter.icon || 'i-ri-gallery-line'" :color="frontmatter.color" />
+    </template>
+    <template #main-content>
+      <div text="center" class="yun-text-light" p="2">
+        {{ t('counter.albums', albums.length) }}
+      </div>
+      <YunAlbumList :albums="albums" />
+      <router-view />
+    </template>
+  </Layout>
+</template>

package/layouts/gallery.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
+import { useFrontmatter, usePostTitle, useRuntimeConfig } from 'valaxy'
+import { computed, defineAsyncComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const { t } = useI18n()
+
+const frontmatter = useFrontmatter()
+
+const title = usePostTitle(frontmatter)
+
+useSchemaOrg([
+  defineWebPage({
+    '@type': 'CollectionPage',
+  }),
+])
+
+const photos = computed(() => frontmatter.value.photos || [])
+
+const runtimeConfig = useRuntimeConfig()
+
+const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
+  ? defineAsyncComponent(() => import('../components/YunGallery.vue'))
+  : () => null
+</script>
+
+<template>
+  <Layout>
+    <template #main-header>
+      <YunPageHeader
+        :title="title || t('title.gallery')"
+        :icon="frontmatter.icon || 'i-ri-gallery-line'"
+        :color="frontmatter.color"
+      />
+    </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>
+      <YunGallery :photos="photos" />
+      <router-view />
+    </template>
+  </Layout>
+</template>

package/layouts/tags.vue

@@ -42,7 +42,7 @@ const posts = computed(() => {
 const collapse = ref()
 const { show } = useInvisibleElement(collapse)
 
-const displayTag = (tag: string) => {
+function displayTag(tag: string) {
   router.push({
     query: {
       tag,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.21",
+  "version": "0.14.23",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.21"
+    "valaxy": "0.14.23"
   }
 }

package/styles/layout/post.scss

@@ -19,16 +19,6 @@
   }
 }
 
-.post-title {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .icon {
-    font-size: 1.4rem;
-  }
-}
-
 .post-title-link {
   position: relative;
   padding: 0.7rem 1.2rem;

package/types/index.d.ts

@@ -143,7 +143,7 @@ export interface ThemeConfig {
     /**
      * Icon between year and copyright info.
      */
-    icon: {
+    icon: Partial<{
       /**
        * icon name, i-xxx
        */
@@ -153,7 +153,7 @@ export interface ThemeConfig {
       color: string
       url: string
       title: string
-    }
+    }>
 
     /**
      * Powered by valaxy & valaxy-theme-${name}, default is yun

package/utils/index.ts

@@ -4,7 +4,7 @@ export const anonymousImage = 'https://cdn.yunyoujun.cn/img/avatar/none.jpg'
  * set default img
  * @param e
  */
-export const onImgError = (e: Event, defaultImg = anonymousImage) => {
+export function onImgError(e: Event, defaultImg = anonymousImage) {
   const targetEl = e.target as HTMLImageElement
   targetEl.setAttribute('data-src', targetEl.src)
   targetEl.src = defaultImg