diff --git a/scripts/image.js b/scripts/image.js
index 84636c2..faf35d3 100644
--- a/scripts/image.js
+++ b/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
-* https://statically.io/imgpx
+* Image is resized on-the-fly using Statically (https://statically.io/)
* Usage: ![alt](/path/to/img "title")
*/
hexo.extend.filter.register('marked:renderer', (renderer) => {
renderer.image = (href, title, alt) => {
- if (href.endsWith('.svg')) return ``
-
if (!alt) alt = ''
if (!title) title = alt
- let modern = href
- let legacy = href
- // /img/ is a reverse proxy to Statically CDN
- // See source/_redirects
- const link = '/img/'
+
+ if (href.endsWith('.svg')) return ``
// embed external image
if (!href.startsWith('20')) return ``
- if (href.endsWith('.png') || href.endsWith('.jpg')) {
- modern = href.concat('?format=webp')
- } else if (href.endsWith('.webp')) {
- // Statically has yet to support animated webp
- // https://github.com/marsble/statically/issues/36
- // modern = href.concat('?auto_format=false')
- modern = href.replace(/\.webp$/, '.gif')
- legacy = href.replace(/\.webp$/, '.gif')
+ // Statically doesn't support WebP and GIF
+ if (href.endsWith('.webp')) {
+ const gif = href.replace(/\.webp$/, '.gif')
+ return ``
}
- const modernLink = link + modern
- const legacyLink = link + legacy
+ const fLink = (str, width) => {
+ if (typeof width === 'number') width = ',w=' + width.toString()
+ else width = ''
- const img = `` +
+ ``
-
- if (href.endsWith('.png') || href.endsWith('.webp')) {
- return `` +
- ''
- } else {
- return `${img}`
- }
+ ` src="${fLink(href)}" title="${title}" alt="${alt}" loading="lazy">`
}
})
diff --git a/source/_posts/caddy-nixos-part-3.md b/source/_posts/caddy-nixos-part-3.md
index ebf385d..a14da69 100644
--- a/source/_posts/caddy-nixos-part-3.md
+++ b/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
-/screenshot/* https://cdn.statically.io/screenshot/mdleom.com/:splat?mobile=true 200
+/img/* https://cdn.statically.io/img/:splat 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/* {
- rewrite * /img/gitlab.com/curben/blog/raw/site{path}
+ handle /img/* {
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/* {
- rewrite * /img/gitlab.com/curben/blog/raw/site{path}
-
+ handle /img/* {
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/* {
- rewrite * /img/gitlab.com/curben/blog/raw/site{path}
-
+ handle /img/* {
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/* {
- rewrite * /img/gitlab.com/curben/blog/raw/site{path}
-
+ handle /img/* {
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
diff --git a/source/_redirects b/source/_redirects
index 6628e52..8cd470e 100644
--- a/source/_redirects
+++ b/source/_redirects
@@ -1,4 +1,6 @@
# Reverse proxy to cdn
-/img/* https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/:splat 200
-/screenshot/* https://cdn.statically.io/screenshot/mdleom.com/:splat?mobile=true 200
+/img/* https://cdn.statically.io/img/:splat 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