From c32cdf858e61982e31a815626bae265f76211635 Mon Sep 17 00:00:00 2001
From: Surmon <surmon.me@gmail.com>
Date: Sat, 12 Aug 2023 05:23:35 +0700
Subject: [PATCH] feat: v4.16.2

---
 package.json                         |  2 +-
 src/components/flow/desktop/item.vue | 63 +++++++++++++++++++---------
 src/components/flow/mobile/item.vue  | 41 ++++++++++--------
 src/pages/article/related.vue        | 51 +++++++++++++---------
 src/pages/index/carrousel.vue        | 57 ++++++++++++++++++-------
 src/transforms/imgproxy.ts           | 21 ++++++----
 src/transforms/url.ts                |  4 ++
 7 files changed, 160 insertions(+), 79 deletions(-)

diff --git a/package.json b/package.json
index fafece93..94ebdce8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "4.16.1",
+  "version": "4.16.2",
   "description": "Surmon.me blog",
   "author": "Surmon",
   "license": "MIT",
diff --git a/src/components/flow/desktop/item.vue b/src/components/flow/desktop/item.vue
index f526a0cb..1d387ed6 100755
--- a/src/components/flow/desktop/item.vue
+++ b/src/components/flow/desktop/item.vue
@@ -4,8 +4,8 @@
   import { Article } from '/@/interfaces/article'
   import { useEnhancer } from '/@/app/enhancer'
   import { useIdentityStore } from '/@/stores/identity'
-  import { getImgProxyPath } from '/@/transforms/imgproxy'
-  import { getImgProxyURL } from '/@/transforms/url'
+  import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
+  import { getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
   import { getArticleDetailRoute, getCategoryFlowRoute } from '/@/transforms/route'
   import { isOriginalType, isHybridType, isReprintType } from '/@/transforms/state'
   import { numberSplit } from '/@/transforms/text'
@@ -26,18 +26,17 @@
     return language === Language.Chinese ? '中文' : 'EN'
   }
 
-  const getThumbnailURL = (url: string) => {
-    if (!url) {
-      return ''
-    }
-    if (!url.startsWith(API_CONFIG.STATIC)) {
+  const getThumbnailURL = (url: string, format?: ImgProxyFormat) => {
+    if (!isOriginalStaticURL(url)) {
       return url
     }
     return getImgProxyURL(
       cdnDomain,
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+        resize: true,
         width: 350,
-        height: 238
+        height: 238,
+        format
       })
     )
   }
@@ -45,7 +44,15 @@
 
 <template>
   <div class="article-item">
-    <div class="item-background" :style="{ backgroundImage: `url(${getThumbnailURL(article.thumbnail)})` }" />
+    <div
+      class="item-background"
+      :class="isOriginalStaticURL(article.thumbnail) ? 'enhancement' : 'degradation'"
+      :style="{
+        '--original': `url('${getThumbnailURL(article.thumbnail)}')`,
+        '--avif': `url('${getThumbnailURL(article.thumbnail, 'avif')}')`,
+        '--webp': `url('${getThumbnailURL(article.thumbnail, 'webp')}')`
+      }"
+    ></div>
     <div class="item-content">
       <router-link class="item-thumbnail" :to="getArticleDetailRoute(article.id)">
         <span
@@ -60,13 +67,20 @@
           <i18n :k="LanguageKey.ORIGIN_REPRINT" v-else-if="isReprint" />
           <i18n :k="LanguageKey.ORIGIN_HYBRID" v-else-if="isHybrid" />
         </span>
-        <div
-          class="image"
-          loading="lazy"
-          :style="{ backgroundImage: `url(${getThumbnailURL(article.thumbnail)})` }"
-          :alt="article.title"
-          :title="article.title"
-        />
+        <picture class="picture">
+          <template v-if="isOriginalStaticURL(article.thumbnail)">
+            <source :srcset="getThumbnailURL(article.thumbnail, 'avif')" type="image/avif" />
+            <source :srcset="getThumbnailURL(article.thumbnail, 'webp')" type="image/webp" />
+          </template>
+          <img
+            class="image"
+            loading="lazy"
+            draggable="false"
+            :src="getThumbnailURL(article.thumbnail)"
+            :alt="article.title"
+            :title="article.title"
+          />
+        </picture>
       </router-link>
       <div class="item-body">
         <div class="item-content">
@@ -137,7 +151,18 @@
       z-index: -1;
       background-size: 120%;
       background-position: 0% 50%;
-      opacity: 0.06;
+      opacity: 0.08;
+      &.degradation {
+        background-image: var(--original);
+      }
+      &.enhancement {
+        /* https://stackoverflow.com/a/72582316/6222535 */
+        /* https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/ */
+        /* https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set */
+        background-image: var(--original);
+        background-image: -webkit-image-set(var(--avif) type('image/avif'), var(--webp) type('image/webp'));
+        background-image: image-set(var(--avif) type('image/avif'), var(--webp) type('image/webp'));
+      }
     }
 
     > .item-content {
@@ -208,8 +233,8 @@
           max-width: $width + 3px;
           border-color: transparent;
           background-color: $module-bg-hover;
-          background-size: cover;
-          background-position: center;
+          object-fit: cover;
+          object-position: center;
           opacity: 1;
           transform: translateX(0);
           transition:
diff --git a/src/components/flow/mobile/item.vue b/src/components/flow/mobile/item.vue
index 09729120..dc13baa3 100644
--- a/src/components/flow/mobile/item.vue
+++ b/src/components/flow/mobile/item.vue
@@ -5,8 +5,8 @@
   import { useEnhancer } from '/@/app/enhancer'
   import { useIdentityStore } from '/@/stores/identity'
   import { getArticleDetailRoute } from '/@/transforms/route'
-  import { getImgProxyPath } from '/@/transforms/imgproxy'
-  import { getImgProxyURL } from '/@/transforms/url'
+  import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
+  import { getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
   import { isOriginalType, isHybridType, isReprintType } from '/@/transforms/state'
   import { numberSplit } from '/@/transforms/text'
   import API_CONFIG from '/@/config/api.config'
@@ -26,19 +26,18 @@
     router.push(getArticleDetailRoute(props.article.id))
   }
 
-  const getThumbnailURL = (url?: string) => {
-    if (!url) {
-      return ''
-    }
-    if (!url.startsWith(API_CONFIG.STATIC)) {
+  const getThumbnailURL = (url: string, format?: ImgProxyFormat) => {
+    if (!isOriginalStaticURL(url)) {
       return url
     }
     return getImgProxyURL(
       cdnDomain,
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+        resize: true,
         width: 700,
         height: 247,
-        watermark: `watermark:0.38:sowe:18:16:0.16`
+        watermark: `watermark:0.38:sowe:18:16:0.16`,
+        format
       })
     )
   }
@@ -59,13 +58,20 @@
         <i18n :k="LanguageKey.ORIGIN_REPRINT" v-else-if="isReprint" />
         <i18n :k="LanguageKey.ORIGIN_HYBRID" v-else-if="isHybrid" />
       </span>
-      <div
-        class="image"
-        loading="lazy"
-        :style="{ backgroundImage: `url(${getThumbnailURL(article.thumbnail)})` }"
-        :alt="article.title"
-        :title="article.title"
-      />
+      <picture class="picture">
+        <template v-if="isOriginalStaticURL(article.thumbnail)">
+          <source :srcset="getThumbnailURL(article.thumbnail, 'avif')" type="image/avif" />
+          <source :srcset="getThumbnailURL(article.thumbnail, 'webp')" type="image/webp" />
+        </template>
+        <img
+          class="image"
+          loading="lazy"
+          draggable="false"
+          :src="getThumbnailURL(article.thumbnail)"
+          :alt="article.title"
+          :title="article.title"
+        />
+      </picture>
     </div>
     <div class="content">
       <div class="body">
@@ -145,10 +151,11 @@
       }
 
       .image {
+        width: 100%;
         min-height: calc((100vw - 2rem) * 0.34);
         max-height: 12rem;
-        background-size: cover;
-        background-position: center;
+        object-fit: cover;
+        object-position: center;
       }
     }
 
diff --git a/src/pages/article/related.vue b/src/pages/article/related.vue
index da2c2311..ad529cf9 100644
--- a/src/pages/article/related.vue
+++ b/src/pages/article/related.vue
@@ -2,8 +2,8 @@
   import { computed } from 'vue'
   import { useEnhancer } from '/@/app/enhancer'
   import { getArticleDetailRoute } from '/@/transforms/route'
-  import { getImgProxyPath } from '/@/transforms/imgproxy'
-  import { getImgProxyURL } from '/@/transforms/url'
+  import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
+  import { getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
   import { Article } from '/@/interfaces/article'
   import API_CONFIG from '/@/config/api.config'
 
@@ -20,18 +20,17 @@
   })
 
   const { cdnDomain } = useEnhancer()
-  const getThumbnailURL = (url?: string) => {
-    if (!url) {
+  const getThumbnailURL = (url: string, format?: ImgProxyFormat) => {
+    if (!isOriginalStaticURL(url)) {
       return ''
     }
-    if (!url.startsWith(API_CONFIG.STATIC)) {
-      return url
-    }
     return getImgProxyURL(
       cdnDomain,
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+        resize: true,
         width: 466,
-        height: 168
+        height: 168,
+        format
       })
     )
   }
@@ -59,9 +58,21 @@
     <ul class="articles" :style="{ gridTemplateColumns: `repeat(${columns}, 1fr)` }">
       <li v-for="(article, index) in articleList" :class="{ disabled: !article.id }" :key="index" class="item">
         <router-link class="item-article" :title="article.title" :to="getArticleDetailRoute(article.id)">
-          <div class="thumbnail" :style="{ backgroundImage: `url(${getThumbnailURL(article.thumbnail)})` }"></div>
+          <picture class="thumbnail">
+            <template v-if="isOriginalStaticURL(article.thumbnail)">
+              <source :srcset="getThumbnailURL(article.thumbnail, 'avif')" type="image/avif" />
+              <source :srcset="getThumbnailURL(article.thumbnail, 'webp')" type="image/webp" />
+            </template>
+            <img
+              class="image"
+              loading="lazy"
+              draggable="false"
+              :alt="article.title"
+              :src="getThumbnailURL(article.thumbnail)"
+            />
+          </picture>
           <div class="title">{{ article.title }}</div>
-          <div class="description">{{ article.description }}</div>
+          <div class="description" :title="article.description">{{ article.description }}</div>
         </router-link>
       </li>
     </ul>
@@ -102,25 +113,28 @@
 
           .thumbnail {
             position: relative;
-            opacity: 0.88;
+            display: block;
             width: 100%;
             height: 7rem;
+            opacity: 0.88;
             background-color: $module-bg-darker-2;
-            background-size: cover;
-            background-position: 50% 46%;
             transition: all $transition-time-fast;
-            display: flex;
-            flex-direction: column;
-            justify-content: end;
 
-            &::before {
+            &::after {
               content: '';
               position: absolute;
-              background: linear-gradient(to top, rgba($black, 0.2) 20%, rgba($black, 0.1) 50%, transparent 90%);
               width: 100%;
               height: 100%;
               top: 0;
               left: 0;
+              background: linear-gradient(to top, rgba($black, 0.2) 20%, rgba($black, 0.1) 50%, transparent 90%);
+            }
+
+            .image {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              object-position: center;
             }
           }
 
@@ -150,7 +164,6 @@
           &:hover {
             .thumbnail {
               opacity: 1;
-              background-position: 50% 50%;
             }
 
             .title {
diff --git a/src/pages/index/carrousel.vue b/src/pages/index/carrousel.vue
index 80e074ac..1de2fd8f 100755
--- a/src/pages/index/carrousel.vue
+++ b/src/pages/index/carrousel.vue
@@ -5,8 +5,8 @@
   import { Article } from '/@/interfaces/article'
   import { Swiper, SwiperSlide } from '/@/effects/swiper'
   import { getArticleDetailRoute } from '/@/transforms/route'
-  import { getAssetURL, getImgProxyURL } from '/@/transforms/url'
-  import { getImgProxyPath } from '/@/transforms/imgproxy'
+  import { getAssetURL, getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
+  import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
   import API_CONFIG from '/@/config/api.config'
 
   interface Props {
@@ -28,19 +28,18 @@
   })
 
   const { adConfig, cdnDomain, isDarkTheme } = useEnhancer()
-  const getThumbnailURL = (url?: string) => {
-    if (!url) {
-      return getAssetURL(cdnDomain, '/images/thumbnail/carrousel.jpg')
-    }
-    if (!url.startsWith(API_CONFIG.STATIC)) {
+  const getPictureURL = (url: string, format?: ImgProxyFormat) => {
+    if (!isOriginalStaticURL(url)) {
       return url
     }
     return getImgProxyURL(
       cdnDomain,
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+        resize: true,
         width: 1190,
         height: 420,
-        watermark: `watermark:0.36:sowe:18:18:0.15`
+        watermark: `watermark:0.36:sowe:18:18:0.15`,
+        format
       })
     )
   }
@@ -51,7 +50,7 @@
       ad: false,
       title: article.title,
       route: getArticleDetailRoute(article.id),
-      image: getThumbnailURL(article.thumbnail)
+      image: article.thumbnail || getAssetURL(cdnDomain, '/images/thumbnail/carrousel.jpg')
     }))
     if (!result.length) {
       return []
@@ -109,11 +108,31 @@
           <swiper-slide v-for="(slide, index) in slides.slice(0, 9)" :key="index">
             <div class="content">
               <ulink class="link" :href="slide.url" :to="slide.route">
-                <img :src="slide.image" :alt="slide.title" draggable="false" loading="lazy" />
+                <picture class="picture">
+                  <template v-if="isOriginalStaticURL(slide.image)">
+                    <source :srcset="getPictureURL(slide.image, 'avif')" type="image/avif" />
+                    <source :srcset="getPictureURL(slide.image, 'webp')" type="image/webp" />
+                  </template>
+                  <img
+                    class="image"
+                    loading="lazy"
+                    draggable="false"
+                    :alt="slide.title"
+                    :src="getPictureURL(slide.image)"
+                  />
+                </picture>
                 <div class="title" :title="slide.title">
                   <div class="background"></div>
                   <div class="prospect">
-                    <span class="text" :style="{ backgroundImage: `url('${slide.image}')` }">
+                    <span
+                      class="text"
+                      :class="isOriginalStaticURL(slide.image) ? 'enhancement' : 'degradation'"
+                      :style="{
+                        '--original': `url('${getPictureURL(slide.image)}')`,
+                        '--avif': `url('${getPictureURL(slide.image, 'avif')}')`,
+                        '--webp': `url('${getPictureURL(slide.image, 'webp')}')`
+                      }"
+                    >
                       {{ slide.title }}
                     </span>
                   </div>
@@ -226,11 +245,13 @@
           height: 100%;
         }
 
-        img {
+        .image {
           width: 100%;
-          transform: scale(1);
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
           transition: transform $transition-time-normal;
-
+          transform: scale(1);
           &:hover {
             transform: scale(1.06);
           }
@@ -287,6 +308,14 @@
               background-clip: text;
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
+              &.degradation {
+                background-image: var(--original);
+              }
+              &.enhancement {
+                background-image: var(--original);
+                background-image: -webkit-image-set(var(--avif) type('image/avif'), var(--webp) type('image/webp'));
+                background-image: image-set(var(--avif) type('image/avif'), var(--webp) type('image/webp'));
+              }
             }
           }
 
diff --git a/src/transforms/imgproxy.ts b/src/transforms/imgproxy.ts
index a1b6d401..506bbb41 100644
--- a/src/transforms/imgproxy.ts
+++ b/src/transforms/imgproxy.ts
@@ -6,21 +6,24 @@
 
 import { normalizePath } from '/@/transforms/url'
 
-// AVIF/WebP: https://docs.imgproxy.net/configuration?id=avifwebp-support-detection
-// format: https://docs.imgproxy.net/image_formats_support
-// resize: https://docs.imgproxy.net/generating_the_url?id=resize
-// watermark: https://docs.imgproxy.net/generating_the_url?id=watermark
+export type ImgProxyFormat = 'webp' | 'avif'
 
 export interface ImgProxyOptions {
-  width: number
-  height: number
+  // resize: https://docs.imgproxy.net/generating_the_url?id=resize
+  resize?: boolean
+  width?: number
+  height?: number
+  // watermark: https://docs.imgproxy.net/generating_the_url?id=watermark
   watermark?: string
-  format?: 'webp' | 'avif'
+  // format: https://docs.imgproxy.net/image_formats_support
+  format?: ImgProxyFormat
+  // quality: https://docs.imgproxy.net/generating_the_url?id=quality
+  quality?: number
 }
 
 export const getImgProxyPath = (path: string, options: ImgProxyOptions) => {
-  const resize = `resize:fill:${options.width}:${options.height}:0`
+  const resize = `resize:fill:${options.width || ''}:${options.height || ''}:0`
   const watermark = options.watermark ? `/${options.watermark}` : ''
   const format = options.format ? `@${options.format}` : ''
-  return `/${resize}${watermark}/plain${normalizePath(path)}${format}`
+  return `/${options.resize ? resize : ''}${watermark}/plain${normalizePath(path)}${format}`
 }
diff --git a/src/transforms/url.ts b/src/transforms/url.ts
index 7f7c494b..a0779cc2 100755
--- a/src/transforms/url.ts
+++ b/src/transforms/url.ts
@@ -28,6 +28,10 @@ export const getAssetURL = (domain: string, path: string) => {
   return isDev ? normalizedPath : `${getCDNPrefixURL(domain, CDNPrefix.Assets)}${normalizedPath}`
 }
 
+export const isOriginalStaticURL = (url?: string) => {
+  return url?.startsWith(API_CONFIG.STATIC)
+}
+
 export const getStaticURL = (domain: string, path: string) => {
   return `${getCDNPrefixURL(domain, CDNPrefix.Static)}${normalizePath(path)}`
 }