SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

build: 🔧 use externally hosted image service

Browse source 
Build time increases exponentially with more images pulled in by the eleventy-image plugin. This keeps build times low and shifts computational load to an external image hosting service.
This commit is contained in:
Sebin Nyshkim 2025-04-20 16:22:53 +02:00
parent d87c0cbbb8
commit 21cb51f612
19 changed files with 43 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

34
eleventy.config.js
View file

@ -22,9 +22,24 @@ import markdownItDeflist from 'markdown-it-deflist';
import markdownItFootnote from 'markdown-it-footnote';
import markdownItImageFigures from 'markdown-it-image-figures';
const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
Image.concurrency = 4;
const urlFormat = ({ src, width, format }) => {
const baseUrl = `https://img.sebin-nyshkim.net/i`;
const imgUuid = src.match(/\/([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})/);
const imgFormat = format === 'jpeg' ? 'jpg' : format;
return `${baseUrl}/${imgUuid[1]}.${imgFormat}?width=${width}`;
};
const MARKDOWNIT_OPTIONS = { html: true, linkify: true, typographer: true };
const ELEVENTY_IMAGE_DEFAULTS = {
formats: ['webp', 'auto'],
urlPath: '/img/',
outputDir: './public/img/',
urlFormat
};
export default async function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('./src/css/prism.css');
eleventyConfig.addWatchTarget('./src/css/');
@ -32,9 +47,6 @@ export default async function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('./src/fonts/');
eleventyConfig.addWatchTarget('./src/fonts/');
eleventyConfig.addPassthroughCopy('./src/img/sebin.png');
eleventyConfig.addWatchTarget('./src/img/sebin.png');
eleventyConfig.addCollection('posts', (collection) =>
process.env.ELEVENTY_PRODUCTION
? collection.getFilteredByGlob('./src/posts/*.md')
@ -90,13 +102,9 @@ export default async function (eleventyConfig) {
}
});
eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
...ELEVENTY_IMAGE_DEFAULTS,
extensions: 'html',
formats: ['avif', 'webp', 'auto'],
widths: [640, 800, 1280, 1920, 2560, 3840, 'auto'],
sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
sharpPngOptions: { compressionLevel: 9 },
urlPath: '/img/',
outputDir: './public/img/',
defaultAttributes: {
loading: 'lazy',
decoding: 'async',
@ -138,12 +146,8 @@ export default async function (eleventyConfig) {
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
eleventyConfig.addShortcode('bgimgset', async (src) => {
const imgset = await Image(src, {
widths: [1920, 2560, 3840],
sharpJpegOptions: { mozjpeg: true, optimiseScans: true, quality: 95 },
sharpPngOptions: { compressionLevel: 9 },
formats: ['avif', 'webp', 'auto'],
urlPath: '/img/',
outputDir: './public/img/'
...ELEVENTY_IMAGE_DEFAULTS,
widths: [1920, 2560, 3840]
});
const getSets = ({ url, sourceType }, i) => `url(${url}) type('${sourceType}') ${i + 1}x`;