fix: update Statically API endpoint

- new endpoint seems easier to cache, especially when cloudflare is configured not to cache query string
  * https://support.cloudflare.com/hc/en-us/articles/218411427#summary-of-page-rules-settings
- Statically doesn't support resizing webp & gif yet
- screenshot API also doesn't support mobile version
  * it was previously working

scripts/image.js

@@ -4,66 +4,44 @@
 /*
 *  Embed an image with responsive images in a post
 *  https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-*  Image is resized on-the-fly using Statically Imgpx
+*  Image is resized on-the-fly using Statically (https://statically.io/)
-*  https://statically.io/imgpx
 *  Usage: ![alt](/path/to/img "title")
 */
 
 hexo.extend.filter.register('marked:renderer', (renderer) => {
   renderer.image = (href, title, alt) => {
-    if (href.endsWith('.svg')) return `<img class="svg" src="${href}" alt="${alt}">`
-
     if (!alt) alt = ''
     if (!title) title = alt
-    let modern = href
+
-    let legacy = href
+    if (href.endsWith('.svg')) return `<img class="svg" src="${href}" alt="${alt} title="${title}">`
-    // /img/ is a reverse proxy to Statically CDN
-    // See source/_redirects
-    const link = '/img/'
 
     // embed external image
     if (!href.startsWith('20')) return `<img src="${href}" alt="${alt}" title="${title}">`
 
-    if (href.endsWith('.png') || href.endsWith('.jpg')) {
+    // Statically doesn't support WebP and GIF
-      modern = href.concat('?format=webp')
+    if (href.endsWith('.webp')) {
-    } else if (href.endsWith('.webp')) {
+      const gif = href.replace(/\.webp$/, '.gif')
-      // Statically has yet to support animated webp
+      return `<a href="/files/${gif}"><picture>` +
-      // https://github.com/marsble/statically/issues/36
+        `<source srcset="/files/${href}" type="image/webp">` +
-      // modern = href.concat('?auto_format=false')
+        `<img src="/files/${gif}" title="${title}" alt="${alt}" loading="lazy"></picture></a>`
-      modern = href.replace(/\.webp$/, '.gif')
-      legacy = href.replace(/\.webp$/, '.gif')
     }
 
-    const modernLink = link + modern
+    const fLink = (str, width) => {
-    const legacyLink = link + legacy
+      if (typeof width === 'number') width = ',w=' + width.toString()
+      else width = ''
 
-    const img = `<img srcset="${legacyLink}&w=320 320w,` +
+      return '/img/gitlab.com/f=auto' + width + '/curben/blog/-/raw/site/' + str
-      `${legacyLink}&w=468 468w,` +
+    }
-      `${legacyLink}&w=768 768w,` +
+
-      `${legacyLink} 800w"` +
+    return `<a href="${fLink(href)}">` +
+      `<img srcset="${fLink(href, 320)} 320w,` +
+      `${fLink(href, 468)} 468w,` +
+      `${fLink(href, 768)} 768w,` +
+      `${fLink(href)} 800w"` +
       ' sizes="(max-width: 320px) 320px,' +
       '(max-width: 468px) 468px,' +
       '(max-width: 768px) 768px,' +
       '800px"' +
-      ` src="${legacyLink}"` +
+      ` src="${fLink(href)}" title="${title}" alt="${alt}" loading="lazy"></a>`
-      ` title="${title}" alt="${alt}" loading="lazy">`
-
-    if (href.endsWith('.png') || href.endsWith('.webp')) {
-      return `<a href="${legacyLink}">` +
-        '<picture>' +
-        '<source type="image/webp"' +
-        ` srcset="${modernLink}&w=320 320w,` +
-        `${modernLink}&w=468 468w,` +
-        `${modernLink}&w=768 768w,` +
-        `${modernLink} 800w"` +
-        ' sizes="(max-width: 320px) 320px,' +
-                '(max-width: 468px) 468px,' +
-                '(max-width: 768px) 768px,' +
-                '800px">' +
-        `${img}` +
-        '</picture></a>'
-    } else {
-      return `<a href="${legacyLink}">${img}</a>`
-    }
   }
 })

source/_posts/caddy-nixos-part-3.md

@@ -234,24 +234,31 @@ If you prefer to redirect apex to www,
 Aside from reverse proxy to curben.netlify.app, I also configured my Netlify website to use Statically CDN for on-the-fly image processing. My current [config](https://gitlab.com/curben/blog) is:
 
 ``` plain source/_redirects https://gitlab.com/curben/blog/-/blob/master/source/_redirects _redirects
-/img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200
+/img/* https://cdn.statically.io/img/:splat 200
-/screenshot/* https://cdn.statically.io/screenshot/mdleom.com/:splat?mobile=true 200
+/screenshot/* https://cdn.statically.io/screenshot/curben.netlify.app/:splat 200
+/files/* https://gitlab.com/curben/blog/-/raw/site/:splat 200
 ```
 
 In Caddyfile, the config can be expressed as:
 
 ``` plain
-  handle_path /img/* {
+  handle /img/* {
-    rewrite * /img/gitlab.com/curben/blog/raw/site{path}
     reverse_proxy https://cdn.statically.io
   }
 
   handle_path /screenshot/* {
-    rewrite * /screenshot/curben.netlify.app{path}?mobile=true
+    # "curben.netlify.app" is updated to "mdleom.com"
+    rewrite * /screenshot/mdleom.com{path}
 
     reverse_proxy https://cdn.statically.io
   }
 
+  handle_path /files/* {
+    rewrite * /curben/blog/-/raw/site{path}
+
+    reverse_proxy https://gitlab.com
+  }
+
   reverse_proxy https://curben.netlify.app
 ```
 
@@ -262,16 +269,14 @@ In Caddyfile, the config can be expressed as:
 To make sure Caddy sends the correct `Host:` header to the upstream/backend locations, I use `header_upstream` option,
 
 {% codeblock mark:5,13,18 %}
-  handle_path /img/* {
+  handle /img/* {
-    rewrite * /img/gitlab.com/curben/blog/raw/site{path}
-
     reverse_proxy https://cdn.statically.io {
       header_up Host cdn.statically.io
     }
   }
 
   handle_path /screenshot/* {
-    rewrite * /screenshot/curben.netlify.app{path}?mobile=true
+    rewrite * /screenshot/mdleom.com{path}
 
     reverse_proxy https://cdn.statically.io {
       header_up Host cdn.statically.io
@@ -308,9 +313,7 @@ To prevent any unnecessary request headers from being sent to the upstreams, I u
 }
 
 mdleom.com {
-  handle_path /img/* {
+  handle /img/* {
-    rewrite * /img/gitlab.com/curben/blog/raw/site{path}
-
     reverse_proxy https://cdn.statically.io {
       import removeHeaders
       header_up Host cdn.statically.io
@@ -318,7 +321,7 @@ mdleom.com {
   }
 
   handle_path /screenshot/* {
-    rewrite * /screenshot/curben.netlify.app{path}?mobile=true
+    rewrite * /screenshot/mdleom.com{path}
 
     reverse_proxy https://cdn.statically.io {
       import removeHeaders
@@ -492,14 +495,12 @@ Since I also set up reverse proxy for {% post_link tor-hidden-onion-nixos 'Tor O
     defer
   }
 
-  handle_path /img/* {
+  handle /img/* {
-    rewrite * /img/gitlab.com/curben/blog/raw/site{path}
-
     import reverseProxy cdn.statically.io
   }
 
   handle_path /screenshot/* {
-    rewrite * /screenshot/curben.netlify.app{path}?mobile=true
+    rewrite * /screenshot/mdleom.com{path}
 
     import reverseProxy cdn.statically.io
   }
@@ -510,6 +511,7 @@ Since I also set up reverse proxy for {% post_link tor-hidden-onion-nixos 'Tor O
     import reverseProxy gitlab.com
   }
 
+  # Multiple mirrors
   reverse_proxy https://curben.netlify.app https://curben.gitlab.io {
     import removeHeaders
     lb_policy first

source/_redirects

@@ -1,4 +1,6 @@
 # Reverse proxy to cdn
-/img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200
+/img/* https://cdn.statically.io/img/:splat 200
-/screenshot/* https://cdn.statically.io/screenshot/mdleom.com/:splat?mobile=true 200
+# https://statically.discourse.group/t/mobile-version-not-working-on-screenshot/225
+# /screenshot/* https://cdn.statically.io/screenshot/device=mobile/curben.netlify.app/:splat 200
+/screenshot/* https://cdn.statically.io/screenshot/curben.netlify.app/:splat 200
 /files/* https://gitlab.com/curben/blog/-/raw/site/:splat 200