valaxy-theme-yun 0.14.22 → 0.14.23

package/components/YunAlbum.vue

@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <a class="yun-album-list-item" :href="album.url">
+  <AppLink class="yun-album-list-item" :to="album.url">
     <figure :title="album.desc">
       <img
         loading="lazy"
@@ -21,5 +21,5 @@ defineProps<{
         「{{ album.caption }}」
       </figcaption>
     </figure>
-  </a>
+  </AppLink>
 </template>

package/components/YunGallery.vue

@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-import Lightgallery from 'lightgallery/vue'
-import 'lightgallery/scss/lightgallery.scss'
-
 import type { Photo } from 'valaxy'
 
 defineProps<{
@@ -10,7 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <Lightgallery class="yun-photo-list">
-    <YunPhoto v-for="photo in photos" :key="photo.src" :photo="photo" />
-  </Lightgallery>
+  <VAGallery :photos="photos" />
 </template>

package/layouts/gallery.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
-import { useFrontmatter, usePostTitle } from 'valaxy'
-import { computed } from 'vue'
+import { useFrontmatter, usePostTitle, useRuntimeConfig } from 'valaxy'
+import { computed, defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
@@ -20,6 +20,12 @@ useSchemaOrg([
 ])
 
 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.22",
+  "version": "0.14.23",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -20,11 +20,10 @@
     "@iconify-json/ant-design": "^1.1.5",
     "@iconify-json/simple-icons": "^1.1.47",
     "animejs": "^3.2.1",
-    "lightgallery": "^2.7.1",
     "valaxy-addon-waline": "0.1.0"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.22"
+    "valaxy": "0.14.23"
   }
 }

package/components/YunPhoto.vue

@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import type { Photo } from 'valaxy'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  photo: Photo
-}>()
-
-const subHtml = computed(() => {
-  return `<h4>${props.photo.caption}</h4><p>${props.photo.desc}</p>`
-})
-</script>
-
-<template>
-  <figure class="yun-photo-list-item" :data-src="photo.src" :data-sub-html="subHtml">
-    <img class="yun-photo-list-cover" :src="photo.src" loading="lazy" :alt="photo.caption">
-    <figcaption>
-      {{ photo.caption }}
-    </figcaption>
-  </figure>
-</template>
-
-<style lang="scss">
-.yun {
-  &-photo-list {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  &-photo-list-item {
-    display: inline-flex;
-    position: relative;
-    width: 15rem;
-    margin: 1.5rem;
-    cursor: pointer;
-
-    img {
-      box-sizing: border-box;
-      vertical-align: bottom;
-      display: inline-flex;
-      border: 0.25rem solid white;
-      box-shadow: 0 8px 10px rgba(#000000, 0.1);
-      width: 100%;
-      height: 10rem;
-      object-fit: cover;
-      background-color: #eee;
-    }
-
-    figcaption {
-      position: absolute;
-      bottom: -1.8rem;
-      display: block;
-      text-align: center;
-      width: 100%;
-      font-size: 0.9rem;
-    }
-  }
-}
-</style>