feat: v4.14.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "4.14.7",
+  "version": "4.14.8",
   "description": "Surmon.me blog",
   "author": "Surmon",
   "license": "MIT",

src/components/common/banner.vue

@@ -7,17 +7,19 @@
     image: string
     position?: number
     blur?: number
+    cdn?: boolean
     isMobile?: boolean
   }
 
   const props = withDefaults(defineProps<Props>(), {
     position: 20,
     blur: 0,
+    cdn: true,
     isMobile: false
   })
 
   const { isDarkTheme, cdnDomain } = useEnhancer()
-  const backgroundImage = computed(() => getAssetURL(cdnDomain, props.image))
+  const backgroundImage = computed(() => (props.cdn ? getAssetURL(cdnDomain, props.image) : props.image))
 </script>
 
 <template>

src/pages/photography/gallery.vue

@@ -50,7 +50,7 @@
         </span>
       </div>
     </div>
-    <div class="content" :key="media.permalink">
+    <div class="content" :class="{ loaded: isLoaded }">
       <transition name="module">
         <div class="loading" v-if="!isLoaded">
           <spin />
@@ -109,12 +109,24 @@
       .album,
       .video {
         min-width: 32rem;
-        min-height: 66vh;
-        max-width: 94vw;
-        max-height: 86vh;
+        max-width: 32rem;
+        min-height: 48vh;
+        max-height: 48vh;
         width: auto;
         height: auto;
         overflow: hidden;
+        transition:
+          max-width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+          max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      &.loaded {
+        .image,
+        .album,
+        .video {
+          max-width: 94vw;
+          max-height: 86vh;
+        }
       }
 
       .caption {

src/pages/photography/grid.vue

@@ -68,6 +68,9 @@
             <i class="iconfont icon-album" v-else-if="isAlbumMediaIns(media)"></i>
             <i class="iconfont icon-camera" v-else></i>
           </div>
+          <span class="time">
+            <udate to="YMD" :date="media.timestamp" separator="/" />
+          </span>
         </div>
       </li>
     </ul>
@@ -131,6 +134,17 @@
           color: $white;
         }
 
+        .time {
+          opacity: 0.8;
+          position: absolute;
+          bottom: $sm-gap;
+          left: $gap;
+          color: $white;
+          font-size: $font-size-small;
+          font-family: monospace;
+          font-weight: bold;
+        }
+
         .mask {
           position: absolute;
           top: 0;

src/pages/photography/index.vue

@@ -5,11 +5,13 @@
   import { useUniversalFetch } from '/@/universal'
   import { Language, LanguageKey } from '/@/language'
   import { firstUpperCase } from '/@/transforms/text'
-  import { META } from '/@/config/app.config'
+  import { getOriginalProxyURL } from '/@/transforms/url'
+  import { isVideoMediaIns } from '/@/transforms/media'
+  import { META, VALUABLE_LINKS } from '/@/config/app.config'
   import type { InstagramMediaItem, InstagramMediaListResponse } from '/@/server/getters/instagram'
   import { TunnelModule } from '/@/constants/tunnel'
   import tunnel from '/@/services/tunnel'
-  import InstagramBanner from './banner.vue'
+  import PageBanner from '/@/components/common/banner.vue'
   import InstagramGrid from './grid.vue'
   import InstagramLoadmore from './loadmore.vue'
 
@@ -38,6 +40,15 @@
     return [...timeline, ...medias]
   })
 
+  const ramdomPosition = Math.floor(Math.random() * 70 + 10)
+  const randomBannerImage = computed(() => {
+    const data = instagramTimeline.data?.data ?? []
+    const allImages = data.filter((media) => !isVideoMediaIns(media))
+    const lucky = allImages[Math.floor(Math.random() * allImages.length)]
+    const source = lucky?.media_url
+    return source ? getOriginalProxyURL(source) : '/images/page-photography/banner.jpg'
+  })
+
   seoMeta(() => {
     const enTitle = firstUpperCase(_i18n.t(LanguageKey.PAGE_PHOTOGRAPHY, Language.English)!)
     const titles = isZhLang.value ? [_i18n.t(LanguageKey.PAGE_PHOTOGRAPHY), enTitle] : [enTitle]
@@ -54,7 +65,23 @@
 
 <template>
   <div class="photography-page">
-    <instagram-banner />
+    <page-banner class="page-banner" :cdn="false" :position="ramdomPosition" :image="randomBannerImage">
+      <template #title>
+        <webfont>
+          <i18n zh="大千同在，万象共栖" :en="`${META.author}'s photographs`" />
+        </webfont>
+      </template>
+      <template #description>
+        <i18n>
+          <template #zh>
+            <span>在我的 <ulink :href="VALUABLE_LINKS.INSTAGRAM" class="link">Instagram</ulink> 主页查看更多</span>
+          </template>
+          <template #en>
+            View all photographs on my <ulink :href="VALUABLE_LINKS.INSTAGRAM" class="link">Instagram</ulink>
+          </template>
+        </i18n>
+      </template>
+    </page-banner>
     <container class="page-bridge"></container>
     <container class="page-content">
       <placeholder :data="instagramTimeline.data?.data" :loading="instagramTimeline.fetching">
@@ -93,6 +120,13 @@
   .photography-page {
     min-height: $full-page-active-content-height;
 
+    .page-banner {
+      .link {
+        color: $white;
+        text-decoration: underline;
+      }
+    }
+
     .page-bridge {
       position: relative;
       height: 4rem;