feat: improve images

package.json

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

src/components/flow/desktop/item.vue

@@ -5,11 +5,10 @@
   import { useEnhancer } from '/@/app/enhancer'
   import { useIdentityStore } from '/@/stores/identity'
   import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
-  import { getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
+  import { getImgProxyURL, getStaticPath, isOriginalStaticURL } from '/@/transforms/url'
   import { getArticleDetailRoute, getCategoryFlowRoute } from '/@/transforms/route'
   import { isOriginalType, isHybridType, isReprintType } from '/@/transforms/state'
   import { numberSplit } from '/@/transforms/text'
-  import API_CONFIG from '/@/config/api.config'
 
   const props = defineProps<{
     article: Article
@@ -32,7 +31,7 @@
     }
     return getImgProxyURL(
       cdnDomain,
-      getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+      getImgProxyPath(getStaticPath(url), {
         resize: true,
         width: 350,
         height: 238,

src/components/flow/mobile/item.vue

@@ -6,10 +6,9 @@
   import { useIdentityStore } from '/@/stores/identity'
   import { getArticleDetailRoute } from '/@/transforms/route'
   import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
-  import { getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
+  import { getImgProxyURL, getStaticPath, isOriginalStaticURL } from '/@/transforms/url'
   import { isOriginalType, isHybridType, isReprintType } from '/@/transforms/state'
   import { numberSplit } from '/@/transforms/text'
-  import API_CONFIG from '/@/config/api.config'
 
   const props = defineProps<{
     article: Article
@@ -32,7 +31,7 @@
     }
     return getImgProxyURL(
       cdnDomain,
-      getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+      getImgProxyPath(getStaticPath(url), {
         resize: true,
         width: 700,
         height: 247,

src/pages/article/related.vue

@@ -3,9 +3,8 @@
   import { useEnhancer } from '/@/app/enhancer'
   import { getArticleDetailRoute } from '/@/transforms/route'
   import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
-  import { getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
+  import { getImgProxyURL, getStaticPath, isOriginalStaticURL } from '/@/transforms/url'
   import { Article } from '/@/interfaces/article'
-  import API_CONFIG from '/@/config/api.config'
 
   interface Props {
     articles?: Article[]
@@ -26,7 +25,7 @@
     }
     return getImgProxyURL(
       cdnDomain,
-      getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+      getImgProxyPath(getStaticPath(url), {
         resize: true,
         width: 466,
         height: 168,

src/pages/index/carrousel.vue

@@ -5,9 +5,8 @@
   import { Article } from '/@/interfaces/article'
   import { Swiper, SwiperSlide } from '/@/effects/swiper'
   import { getArticleDetailRoute } from '/@/transforms/route'
-  import { getAssetURL, getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
+  import { getAssetURL, getImgProxyURL, getStaticPath, isOriginalStaticURL } from '/@/transforms/url'
   import { getImgProxyPath, ImgProxyFormat } from '/@/transforms/imgproxy'
-  import API_CONFIG from '/@/config/api.config'
 
   interface Props {
     articles: Array<Article>
@@ -34,7 +33,7 @@
     }
     return getImgProxyURL(
       cdnDomain,
-      getImgProxyPath(url.replace(API_CONFIG.STATIC, ''), {
+      getImgProxyPath(getStaticPath(url), {
         resize: true,
         width: 1190,
         height: 420,

src/stores/article.ts

@@ -13,12 +13,12 @@ import { Article } from '/@/interfaces/article'
 import { Pagination, PaginationList } from '/@/interfaces/common'
 import { getArticleContentHeadingElementId } from '/@/constants/anchor'
 import { markdownToHTML, MarkdownRenderOption } from '/@/transforms/markdown'
-import { getCDNPrefixURL, CDNPrefix } from '/@/transforms/url'
+import { getStaticURL, getStaticPath, getImgProxyURL, isOriginalStaticURL } from '/@/transforms/url'
+import { getImgProxyPath } from '/@/transforms/imgproxy'
 import { delayPromise } from '/@/utils/delayer'
 import { isClient } from '/@/app/environment'
 import { LONG_ARTICLE_THRESHOLD } from '/@/config/app.config'
 import nodepress from '/@/services/nodepress'
-import API_CONFIG from '/@/config/api.config'
 
 export const ARTICLE_API_PATH = '/article'
 
@@ -133,11 +133,19 @@ export const useArticleDetailStore = defineStore('articleDetail', () => {
   })
 
   const optimizeImageSource = (src: string) => {
-    if (src.startsWith(API_CONFIG.STATIC)) {
-      return src.replace(API_CONFIG.STATIC, getCDNPrefixURL(useCDNDomain(), CDNPrefix.Static))
-    } else {
+    if (!isOriginalStaticURL(src)) {
       return src
     }
+
+    const cdnDomain = useCDNDomain()
+    const path = getStaticPath(src)
+    return {
+      src: getStaticURL(cdnDomain, path),
+      sources: [
+        { type: 'image/avif', srcset: getImgProxyURL(cdnDomain, getImgProxyPath(path, { format: 'avif' })) },
+        { type: 'image/webp', srcset: getImgProxyURL(cdnDomain, getImgProxyPath(path, { format: 'webp' })) }
+      ]
+    }
   }
 
   const defaultContent = computed(() => {

src/transforms/imgproxy.ts

@@ -22,8 +22,8 @@ export interface ImgProxyOptions {
 }
 
 export const getImgProxyPath = (path: string, options: ImgProxyOptions) => {
-  const resize = `resize:fill:${options.width || ''}:${options.height || ''}:0`
+  const resize = options.resize ? `resize:fill:${options.width || ''}:${options.height || ''}:0` : ''
   const watermark = options.watermark ? `/${options.watermark}` : ''
   const format = options.format ? `@${options.format}` : ''
-  return `/${options.resize ? resize : ''}${watermark}/plain${normalizePath(path)}${format}`
+  return `/${resize}${watermark}/plain${normalizePath(path)}${format}`.replaceAll('//', '/')
 }

src/transforms/markdown.ts

@@ -66,8 +66,8 @@ const trimHTML = (html: string) => html.replace(/\s+/g, ' ').replace(/\n/g, ' ')
 interface RendererCreatorOptions {
   sanitize: boolean
   text: (text: string) => string
-  imageSource: (src: string) => string
   headingId: (html: string, level: number, raw: string) => string
+  imageSource: (src: string) => string | { src: string; sources: Array<{ srcset: string; type: string }> }
 }
 
 const createRenderer = (options?: Partial<RendererCreatorOptions>): Renderer => {
@@ -135,8 +135,12 @@ const createRenderer = (options?: Partial<RendererCreatorOptions>): Renderer =>
     const titleValue = sanitizeHTML(escape(title || alt))
     const altValue = sanitizeHTML(escape(alt!))
     const sanitized = sanitizeUrl(src!)
-    const source = sanitized.startsWith('http://') ? getOriginalProxyURL(sanitized) : sanitized
-    const sourceValue = options?.imageSource ? options.imageSource(source) : source
+    const original = sanitized.startsWith('http://') ? getOriginalProxyURL(sanitized) : sanitized
+    const parsed = options?.imageSource ? options.imageSource(original) : original
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/currentSrc
+    const srcValue = typeof parsed === 'object' ? parsed.src : parsed
+    const sourcesValue = typeof parsed === 'object' ? parsed.sources : []
 
     // figure > alt
     return trimHTML(`
@@ -151,15 +155,19 @@ const createRenderer = (options?: Partial<RendererCreatorOptions>): Renderer =>
             <div></div>
             <div></div>
           </div>
-          <img
-            class="${LOZAD_CLASS_NAME}"
-            data-src="${sourceValue}"
-            ${altValue ? `alt="${altValue}"` : ''}
-            ${titleValue ? `title="${titleValue}"` : ''}
-            onload="this.parentElement.dataset.status = 'loaded'"
-            onerror="this.parentElement.dataset.status = 'error'"
-            onclick="window.$popup.vImage(this.src)"
-          />
+          <picture>
+            ${sourcesValue.map((s) => `<source srcset="${s.srcset}" type="${s.type}" />`).join('\n')}
+            <img
+              class="${LOZAD_CLASS_NAME}"
+              data-src="${srcValue}"
+              draggable="false"
+              ${altValue ? `alt="${altValue}"` : ''}
+              ${titleValue ? `title="${titleValue}"` : ''}
+              onload="this.parentElement.parentElement.dataset.status = 'loaded'"
+              onerror="this.parentElement.parentElement.dataset.status = 'error'"
+              onclick="window.$popup.vImage(this.currentSrc || this.src)"
+            />
+          </picture>
           ${altValue ? `<figcaption>${altValue}</figcaption>` : ''}
         </figure>
       </div>
@@ -217,5 +225,5 @@ export const markdownToHTML = (markdown: string, options?: MarkdownRenderOption)
     imageSource: options?.imageSourceGetter
   }
 
-  return marked.parse(markdown, { renderer: createRenderer(renderOptions) })
+  return marked.parse(markdown, { renderer: createRenderer(renderOptions) }) as string
 }

src/transforms/url.ts

@@ -28,10 +28,6 @@ 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)}`
 }
@@ -40,6 +36,14 @@ export const getImgProxyURL = (domain: string, path: string) => {
   return `${getCDNPrefixURL(domain, CDNPrefix.ImgProxy)}${normalizePath(path)}`
 }
 
+export const isOriginalStaticURL = (url?: string) => {
+  return url?.startsWith(API_CONFIG.STATIC)
+}
+
+export const getStaticPath = (url: string) => {
+  return url.replace(API_CONFIG.STATIC, '')
+}
+
 export const getOriginalProxyURL = (url: string) => {
   return `${BFF_PROXY_PREFIX}/${btoa(url)}`
 }