feat: v4.14.11

package.json

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

src/components/common/banner.vue

@@ -1,34 +1,62 @@
 <script lang="ts" setup>
+  import type { CSSProperties } from 'vue'
   import { computed } from 'vue'
   import { useEnhancer } from '/@/app/enhancer'
   import { getAssetURL } from '/@/transforms/url'
 
   interface Props {
-    image: string
-    position?: number
+    image?: string
+    imagePosition?: number
+    video?: string
+    videoPosition?: number
     blur?: number
     cdn?: boolean
     isMobile?: boolean
   }
 
   const props = withDefaults(defineProps<Props>(), {
-    position: 20,
+    imagePosition: 20,
+    videoPosition: 48,
     blur: 0,
-    cdn: true,
+    cdn: false,
     isMobile: false
   })
 
   const { isDarkTheme, cdnDomain } = useEnhancer()
-  const backgroundImage = computed(() => (props.cdn ? getAssetURL(cdnDomain, props.image) : props.image))
+  const backgroundImage = computed(() => {
+    return props.cdn && props.image ? getAssetURL(cdnDomain, props.image) : props.image
+  })
+
+  const backgroundImageStyle = computed<CSSProperties>(() => {
+    if (!backgroundImage.value) {
+      return {}
+    }
+
+    return {
+      backgroundImage: `url(${backgroundImage.value})`,
+      backgroundPositionY: `${props.imagePosition}%`
+    }
+  })
+
+  const videoSource = computed(() => {
+    return props.cdn && props.video ? getAssetURL(cdnDomain, props.video) : props.video
+  })
 </script>
 
 <template>
   <div class="banner" :class="{ mobile: isMobile }">
-    <div
-      class="background"
-      :class="{ dark: isDarkTheme }"
-      :style="{ backgroundImage: `url(${backgroundImage})`, backgroundPositionY: `${position}%` }"
-    ></div>
+    <div class="background" :class="{ dark: isDarkTheme }" :style="backgroundImageStyle">
+      <video
+        class="video"
+        loop
+        muted
+        autoplay
+        :controls="false"
+        :style="{ objectPosition: `0% ${props.videoPosition}%` }"
+        :src="videoSource"
+        v-if="videoSource"
+      ></video>
+    </div>
     <div class="content" :class="{ blur: Boolean(blur) }" :style="{ '--blur': `${blur}px` }">
       <h2 class="title">
         <slot name="title"></slot>
@@ -62,6 +90,13 @@
       &.dark {
         filter: brightness(0.8);
       }
+
+      .video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        pointer-events: none;
+      }
     }
 
     .content {

src/components/widget/music-player/handle.vue

@@ -159,7 +159,7 @@
         height: 100%;
         overflow: hidden;
         background-color: $module-bg-darker-1;
-        background-image: url('/images/page-music/background-40x40.jpg');
+        background-image: url('/images/music.webp');
         background-size: cover;
       }
 

src/components/widget/music-player/player.vue

@@ -143,7 +143,7 @@
           border-radius: $sm-radius;
           margin-right: $gap;
           background-color: $module-bg-darker-1;
-          background-image: url('/images/page-music/background-40x40.jpg');
+          background-image: url('/images/music.webp');
           background-size: cover;
         }
 

src/pages/about/desktop.vue

@@ -52,9 +52,6 @@
     handleGTagEvent('feedback_modal')
   }
 
-  // MARK: To prevent vite from parsing video.source.src as an asset instead of a static resource and failing to compile it
-  const backgroundVideo = getAssetURL(cdnDomain, '/images/page-about/background.mp4')
-
   // meta
   useAboutPageMeta()
   // prefetch
@@ -128,9 +125,14 @@
   <div class="about-page">
     <div class="page-banner">
       <div class="background">
-        <video class="video" loop muted autoplay :controls="false">
-          <source :src="backgroundVideo" type="video/mp4" />
-        </video>
+        <video
+          class="video"
+          loop
+          muted
+          autoplay
+          :controls="false"
+          :src="getAssetURL(cdnDomain, '/videos/clips/ocean-1.mp4')"
+        ></video>
       </div>
       <div class="content">
         <div class="profile">

src/pages/about/mobile.vue

@@ -18,7 +18,7 @@
 
 <template>
   <div class="about-page">
-    <page-banner :position="70" :is-mobile="true" image="/images/page-about/banner-mobile.jpg">
+    <page-banner :is-mobile="true" image="/images/page-about/banner-mobile.jpg" :image-position="70" cdn>
       <template #title>
         <i18n :k="LanguageKey.PAGE_ABOUT" />
       </template>

src/pages/app.vue

@@ -39,9 +39,9 @@
         <webfont><i18n :k="LanguageKey.APP_SLOGAN" /></webfont>
       </p>
       <div class="screen">
-        <uimage cdn alt="app-hot" class="screen-img" src="/images/page-app/hot.png" />
+        <uimage alt="app-hot" class="screen-img" src="/images/page-app/hot.webp" cdn />
         <div class="download">
-          <uimage cdn class="qrcode" alt="qrcode" src="/images/page-app/qrcode.png" />
+          <uimage class="qrcode" alt="qrcode" src="/images/page-app/qrcode.png" cdn />
           <ulink
             class="button"
             :href="VALUABLE_LINKS.GITHUB_SURMON_ME_NATIVE + '#android'"

src/pages/archive/desktop.vue

@@ -31,7 +31,7 @@
 
 <template>
   <div class="archive-page">
-    <page-banner :position="46" image="/images/page-archive/banner.jpg">
+    <page-banner image="/images/page-archive/banner.webp" :image-position="34" cdn>
       <template #title>
         <webfont><i18n v-bind="i18ns.title" /></webfont>
       </template>

src/pages/archive/mobile.vue

@@ -29,7 +29,7 @@
 
 <template>
   <div class="archive-page">
-    <page-banner :position="80" :is-mobile="true" image="/images/page-archive/banner-mobile.jpg">
+    <page-banner :is-mobile="true" image="/images/page-archive/banner-mobile.webp" :image-position="80" cdn>
       <template #title><i18n :k="LanguageKey.PAGE_ARCHIVE" /></template>
       <template #description><i18n v-bind="i18ns.title" /></template>
     </page-banner>

src/pages/guestbook.vue

@@ -22,7 +22,7 @@
   const siteLikes = computed(() => appOption.data?.meta.likes || 0)
   // MARK: Only for client-side routing to navigate to this page
   const isLoading = ref(isClient && gState.isHydrated.value)
-  const bannerImage = `/images/page-guestbook/banner.jpg`
+  const bannerImage = `/images/page-guestbook/banner.webp`
 
   const handleLike = async () => {
     if (isLiked.value) {
@@ -73,7 +73,7 @@
     <responsive>
       <template #desktop>
         <div class="desktop-banner">
-          <uimage cdn class="image" :src="bannerImage" />
+          <uimage class="image" :src="bannerImage" cdn />
           <button class="like" :class="{ liked: isLiked }" :disabled="isLiked" @click="handleLike">
             <i class="icon iconfont icon-heart"></i>
             <span class="count">{{ isLiked ? `${siteLikes - 1} + 1` : siteLikes }}</span>
@@ -86,7 +86,7 @@
         </div>
       </template>
       <template #mobile>
-        <page-banner class="mobile-banner" :is-mobile="true" :position="70" :image="bannerImage">
+        <page-banner class="mobile-banner" :is-mobile="true" :image="bannerImage" :image-position="70" cdn>
           <template #title>
             <i18n :k="LanguageKey.PAGE_GUESTBOOK" />
           </template>
@@ -121,7 +121,10 @@
       @include radius-box($lg-radius);
 
       .image {
-        margin-top: -($gap * 6);
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 0% 60%;
         transition: all $transition-time-slow;
         &:hover {
           transform: rotate(2deg) scale(1.1);
@@ -175,7 +178,7 @@
           letter-spacing: 0.3px;
           color: $text;
           background-clip: text;
-          background-image: url('/images/page-guestbook/banner.jpg');
+          background-image: url('/images/page-guestbook/banner.webp');
           background-position: 100% 80%;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;

src/pages/photography/grid.vue

@@ -68,7 +68,7 @@
             <i class="iconfont icon-album" v-else-if="isAlbumMediaIns(media)"></i>
             <i class="iconfont icon-camera" v-else></i>
           </div>
-          <span class="time">
+          <span class="date">
             <udate to="YMD" :date="media.timestamp" separator="/" />
           </span>
         </div>
@@ -135,15 +135,15 @@
           color: $white;
         }
 
-        .time {
+        .date {
           opacity: 0.8;
           position: absolute;
           bottom: $sm-gap;
           left: $gap;
           color: $white;
-          font-size: $font-size-small;
-          font-family: monospace;
+          font-size: $font-size-root;
           font-weight: bold;
+          letter-spacing: 1px;
         }
 
         .mask {

src/pages/photography/index.vue

@@ -40,15 +40,6 @@
     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]
@@ -65,7 +56,7 @@
 
 <template>
   <div class="photography-page">
-    <page-banner class="page-banner" :cdn="false" :position="ramdomPosition" :image="randomBannerImage">
+    <page-banner class="page-banner" video="/videos/clips/ocean-4.mp4" :video-position="68" cdn>
       <template #title>
         <webfont>
           <i18n zh="大千同在，万象共栖" :en="`${META.author}'s photographs`" />

src/pages/sponsor.vue

@@ -31,7 +31,7 @@
 
 <template>
   <div class="sponsor-page">
-    <page-banner image="/images/page-sponsor/banner.webp">
+    <page-banner image="/images/page-sponsor/banner.webp" cdn>
       <template #title>
         <webfont>
           <i18n zh="赠吾玫瑰，手留余香" en="Become a sponsor to me" />

src/pages/youtube/index.vue

@@ -28,7 +28,7 @@
 
 <template>
   <div class="youtube-page">
-    <page-banner class="page-banner" :position="32" image="/images/page-photography/banner.jpg">
+    <page-banner class="page-banner" video="/videos/clips/desert-2.mp4" :video-position="60" cdn>
       <template #title>
         <webfont>
           <i18n zh="欢喜勇猛，向死而生" en="Because it's there" />