feat: v4.16.2

surmon-china · Aug 11, 2023 · c32cdf8 · c32cdf8
1 parent b921a1e
commit c32cdf8
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 79 deletions.
diff --git 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
@@ -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,26 +26,33 @@
     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
       })
     )
   }
 </script>
 
 <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
@@ -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
@@ -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 {