mirror of https://gitlab.com/curben/blog
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
This commit is contained in:
MDLeom
parent
23d5e3a2fc
commit
e7449110c8
|
|
@ -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: 
|
||||
*/
|
||||
|
||||
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
|
||||
// /img/ is a reverse proxy to Statically CDN
|
||||
// See source/_redirects
|
||||
const link = '/img/'
|
||||
|
||||
if (href.endsWith('.svg')) return `<img class="svg" src="${href}" alt="${alt} title="${title}">`
|
||||
|
||||
// embed external image
|
||||
if (!href.startsWith('20')) return `<img src="${href}" alt="${alt}" title="${title}">`
|
||||
|
||||
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 `<a href="/files/${gif}"><picture>` +
|
||||
`<source srcset="/files/${href}" type="image/webp">` +
|
||||
`<img src="/files/${gif}" title="${title}" alt="${alt}" loading="lazy"></picture></a>`
|
||||
}
|
||||
|
||||
const modernLink = link + modern
|
||||
const legacyLink = link + legacy
|
||||
const fLink = (str, width) => {
|
||||
if (typeof width === 'number') width = ',w=' + width.toString()
|
||||
else width = ''
|
||||
|
||||
const img = `<img srcset="${legacyLink}&w=320 320w,` +
|
||||
`${legacyLink}&w=468 468w,` +
|
||||
`${legacyLink}&w=768 768w,` +
|
||||
`${legacyLink} 800w"` +
|
||||
return '/img/gitlab.com/f=auto' + width + '/curben/blog/-/raw/site/' + str
|
||||
}
|
||||
|
||||
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}"` +
|
||||
` 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>`
|
||||
}
|
||||
` src="${fLink(href)}" title="${title}" alt="${alt}" loading="lazy"></a>`
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue