feat: v4.16.0

package.json

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

src/app/state.ts

@@ -15,11 +15,6 @@ export interface RenderError {
   message: string
 }
 
-export enum ImageExt {
-  WebP = 'webp',
-  Jpg = 'jpeg'
-}
-
 export enum LayoutColumn {
   Normal = 0,
   Wide = 1, // 3 column
@@ -102,19 +97,6 @@ export const createGlobalState = (config: GlobalStateConfig) => {
     }
   }
 
-  // MARK: Using `jpg` format on mobile/WeChat/Safari
-  const imageExt = computed(() => {
-    const imageExtValue =
-      userAgent.isMobile && (userAgent.isWechat || userAgent.isSafari)
-        ? (ImageExt.Jpg as ImageExt)
-        : (ImageExt.WebP as ImageExt)
-    return {
-      ext: imageExtValue,
-      isJpg: imageExtValue === ImageExt.Jpg,
-      isWebP: imageExtValue === ImageExt.WebP
-    }
-  })
-
   // Global switchers
   const switcher = reactive({
     sponsor: false,
@@ -146,7 +128,6 @@ export const createGlobalState = (config: GlobalStateConfig) => {
     setLayoutColumn,
     // Device state
     userAgent: readonly(userAgent),
-    imageExt,
     // Global switchers
     switcher: readonly(switcher),
     toggleSwitcher

src/components/flow/desktop/item.vue

@@ -15,7 +15,7 @@
     article: Article
   }>()
 
-  const { gState, cdnDomain } = useEnhancer()
+  const { cdnDomain } = useEnhancer()
   const identity = useIdentityStore()
   const isLiked = computed(() => identity.isLikedPage(props.article.id))
   const isHybrid = computed(() => isHybridType(props.article.origin))
@@ -37,8 +37,7 @@
       cdnDomain,
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
         width: 350,
-        height: 238,
-        webp: gState.imageExt.value.isWebP
+        height: 238
       })
     )
   }

src/components/flow/mobile/item.vue

@@ -15,7 +15,7 @@
     article: Article
   }>()
 
-  const { router, gState, cdnDomain } = useEnhancer()
+  const { router, cdnDomain } = useEnhancer()
   const identityStore = useIdentityStore()
   const isLiked = computed(() => identityStore.isLikedPage(props.article.id))
   const isHybrid = computed(() => isHybridType(props.article.origin))
@@ -38,7 +38,6 @@
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
         width: 700,
         height: 247,
-        webp: gState.imageExt.value.isWebP,
         watermark: `watermark:0.38:sowe:18:16:0.16`
       })
     )

src/components/widget/sponsor/state.ts

@@ -25,35 +25,35 @@ export const PROVIDERS = [
     title: 'PayPal me',
     link: VALUABLE_LINKS.PAYPAL,
     logo: '/images/third-party/paypal-logo.svg',
-    qrcode: '/images/third-party/paypal-qrcode.png'
+    qrcode: '/images/third-party/paypal-qrcode.webp'
   },
   {
     id: ProviderId.Alipay,
     title: '支付宝',
     text: '通过支付宝客户端扫码',
     logo: '/images/third-party/alipay-logo.svg',
-    qrcode: '/images/third-party/alipay-qrcode.png'
+    qrcode: '/images/third-party/alipay-qrcode.webp'
   },
   {
     id: ProviderId.WeChatPay,
     title: '微信赞赏',
     text: '通过微信客户端扫码',
     logo: '/images/third-party/wechat-pay-logo.svg',
-    qrcode: '/images/third-party/wechat-pay-qrcode.jpg'
+    qrcode: '/images/third-party/wechat-pay-qrcode.webp'
   },
   {
     id: ProviderId.BitCoin,
     title: 'BTC',
     address: IDENTITIES.BTC_ADDRESS,
     logo: '/images/third-party/btc-logo.svg',
-    qrcode: '/images/third-party/btc-qrcode.png'
+    qrcode: '/images/third-party/btc-qrcode.webp'
   },
   {
     id: ProviderId.Ethereum,
     title: 'ETH',
     address: IDENTITIES.ETH_ADDRESS,
     logo: '/images/third-party/eth-logo.svg',
-    qrcode: '/images/third-party/eth-qrcode.png'
+    qrcode: '/images/third-party/eth-qrcode.webp'
   }
 ]
 

src/pages/about/desktop.vue

@@ -28,14 +28,20 @@
   }
 
   const modalState = reactive({
-    wechat: false
+    wechat: false,
+    wechatChannel: false
   })
 
   const handleOpenWechat = () => {
     modalState.wechat = true
     handleGTagEvent('wechat_modal')
   }
 
+  const handleOpenWechatChannel = () => {
+    modalState.wechatChannel = true
+    handleGTagEvent('wechat_channel_modal')
+  }
+
   const handleSponsor = () => {
     sponsor.fetch()
     gState.toggleSwitcher('sponsor', true)
@@ -157,12 +163,11 @@
               <i class="iconfont icon-instagram" />
               <span class="text">Instagram</span>
             </ulink>
+          </span>
+          <span class="mini">
             <ulink class="item youtube" :href="VALUABLE_LINKS.YOUTUBE_CHANNEL">
               <i class="iconfont icon-youtube" />
-              <span class="text">YouTube</span>
             </ulink>
-          </span>
-          <span class="mini">
             <ulink class="item telegram" :href="VALUABLE_LINKS.TELEGRAM">
               <i class="iconfont icon-telegram" />
             </ulink>
@@ -172,7 +177,7 @@
                 <popup v-model:visible="modalState.wechat" :scroll-close="false">
                   <div class="qrcode-modal wechat">
                     <div class="background"></div>
-                    <uimage class="image" cdn src="/images/qrcodes/wechat.jpg" />
+                    <uimage class="image" cdn src="/images/qrcodes/wechat.webp" />
                     <span class="text">
                       👋 &nbsp;
                       <i18n en="Friend me on WeChat" zh="扫码加微，解锁灵魂"></i18n>
@@ -181,6 +186,20 @@
                 </popup>
               </client-only>
             </button>
+            <button class="item wechat-channel" @click="handleOpenWechatChannel">
+              <i class="iconfont icon-wechat-channel" />
+              <client-only>
+                <popup v-model:visible="modalState.wechatChannel" :scroll-close="false">
+                  <div class="qrcode-modal wechat-channel">
+                    <div class="background"></div>
+                    <uimage class="image" cdn src="/images/qrcodes/wechat-channel.webp" />
+                    <span class="text">
+                      <i18n en="Follow me on  WeChat Channel" zh="扫一扫，关注我的微信视频号"></i18n>
+                    </span>
+                  </div>
+                </popup>
+              </client-only>
+            </button>
             <ulink class="item linkedin" :href="VALUABLE_LINKS.LINKEDIN">
               <i class="iconfont icon-linkedin" />
             </ulink>
@@ -270,6 +289,9 @@
     &.wechat {
       --item-primary: #{$wechat-primary};
     }
+    &.wechat-channel {
+      --item-primary: #{$wechat-channel-primary};
+    }
 
     .background {
       position: absolute;
@@ -409,6 +431,9 @@
               border-radius: $sm-radius;
               color: $white;
               transition: all $transition-time-fast;
+              &:last-child {
+                margin: 0;
+              }
 
               .iconfont {
                 font-size: $font-size-h4;
@@ -432,7 +457,6 @@
                 }
               }
               &.youtube {
-                margin: 0;
                 background-color: $youtube-primary;
                 &:hover {
                   background-color: mix($black, $youtube-primary, 8%);
@@ -475,6 +499,12 @@
               &.wechat {
                 background-color: $wechat-primary;
               }
+              &.wechat-channel {
+                background-color: $wechat-channel-primary;
+              }
+              &.youtube {
+                background-color: $youtube-primary;
+              }
               &.telegram {
                 background-color: $telegram-primary;
               }

src/pages/about/mobile.vue

@@ -18,7 +18,7 @@
 
 <template>
   <div class="about-page">
-    <page-banner :is-mobile="true" image="/images/page-about/banner-mobile.jpg" :image-position="70" cdn>
+    <page-banner :is-mobile="true" image="/images/page-about/banner-mobile.webp" :image-position="70" cdn>
       <template #title>
         <i18n :k="LanguageKey.PAGE_ABOUT" />
       </template>
@@ -91,10 +91,10 @@
     </div>
     <div class="qrcodes">
       <div class="item">
-        <uimage cdn class="image" src="/images/qrcodes/wechat.jpg" />
+        <uimage cdn class="image" src="/images/qrcodes/wechat.webp" />
       </div>
       <div class="item">
-        <uimage cdn class="image" src="/images/qrcodes/wechat-channel.png" />
+        <uimage cdn class="image" src="/images/qrcodes/wechat-channel.webp" />
       </div>
     </div>
   </div>

src/pages/article/related.vue

@@ -19,7 +19,7 @@
     count: 8
   })
 
-  const { gState, cdnDomain } = useEnhancer()
+  const { cdnDomain } = useEnhancer()
   const getThumbnailURL = (url?: string) => {
     if (!url) {
       return ''
@@ -31,8 +31,7 @@
       cdnDomain,
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
         width: 466,
-        height: 168,
-        webp: gState.imageExt.value.isWebP
+        height: 168
       })
     )
   }

src/pages/index/carrousel.vue

@@ -27,7 +27,7 @@
     count: 9
   })
 
-  const { gState, adConfig, cdnDomain, isDarkTheme } = useEnhancer()
+  const { adConfig, cdnDomain, isDarkTheme } = useEnhancer()
   const getThumbnailURL = (url?: string) => {
     if (!url) {
       return getAssetURL(cdnDomain, '/images/thumbnail/carrousel.jpg')
@@ -40,7 +40,6 @@
       getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
         width: 1190,
         height: 420,
-        webp: gState.imageExt.value.isWebP,
         watermark: `watermark:0.36:sowe:18:18:0.15`
       })
     )

src/transforms/imgproxy.ts

@@ -6,21 +6,19 @@
 
 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
-const WebPFormat = `@webp`
 
 export interface ImgProxyOptions {
   width: number
   height: number
   watermark?: string
-  webp?: boolean
 }
 
 export const getImgProxyPath = (path: string, options: ImgProxyOptions) => {
   const resize = `resize:fill:${options.width}:${options.height}:0`
-  const format = options.webp ? WebPFormat : ''
   const watermark = options.watermark ? `/${options.watermark}` : ''
-  return `/${resize}${watermark}/plain${normalizePath(path)}${format}`
+  return `/${resize}${watermark}/plain${normalizePath(path)}`
 }

src/utils/webp.ts

@@ -0,0 +1,27 @@
+/**
+ * @file WebP Checker
+ * @module util.webp
+ * @author Surmon <https://github.com/surmon-china>
+ * @link https://developers.google.com/speed/webp/faq?hl=zh-cn
+ */
+
+// check_webp_feature:
+//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
+//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
+export const checkWebPFeature = (feature: 'lossy' | 'lossless' | 'alpha' | 'animation', callback) => {
+  const kTestImages = {
+    lossy: `UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA`,
+    lossless: `UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==`,
+    alpha: `UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==`,
+    animation: `UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA`
+  }
+  const img = new Image()
+  img.onload = function () {
+    const result = img.width > 0 && img.height > 0
+    callback(feature, result)
+  }
+  img.onerror = function () {
+    callback(feature, false)
+  }
+  img.src = 'data:image/webp;base64,' + kTestImages[feature]
+}