From e7449110c88de811b5f4bede50ba46c6103c90c0 Mon Sep 17 00:00:00 2001 From: MDLeom <2809763-curben@users.noreply.gitlab.com> Date: Tue, 12 Jan 2021 03:32:41 +0000 Subject: [PATCH] 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 | 64 ++++++++++------------------- source/_posts/caddy-nixos-part-3.md | 36 ++++++++-------- source/_redirects | 6 ++- 3 files changed, 44 insertions(+), 62 deletions(-) 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 `${alt}` - 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 `${alt} title=` // embed external image if (!href.startsWith('20')) return `${alt}` - 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 `` + + `` + + `${alt}` } - const modernLink = link + modern - const legacyLink = link + legacy + const fLink = (str, width) => { + if (typeof width === 'number') width = ',w=' + width.toString() + else width = '' - const img = `` + + `${alt}` - - if (href.endsWith('.png') || href.endsWith('.webp')) { - return `` + - '' + - '' + - `${img}` + - '' - } 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