cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: check if image exists before caching optimized version

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-04 12:49:23 -08:00
parent cb6b5dbd8e
commit f0f1c0aaab
No known key found for this signature in database
9 changed files with 101 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

101
config/shortcodes/index.js
View file

@ -16,49 +16,72 @@ export const img = async (
alt = '',
className,
loading = 'lazy',
shape = 'square',
icon,
maxWidth = 1248,
sizes = '90vw',
formats = ['avif', 'webp', 'jpeg']
formats = ['avif', 'webp', 'jpeg'],
) => {
const widths = [320, 570, 880, 1024, 1248];
const metadata = await Image(src, {
widths: widths.filter((width) => width <= maxWidth),
formats: [...formats],
outputDir: './_site/assets/img/cache/',
urlPath: '/assets/img/cache/',
filenameFormat: (id, src, width, format, options) => {
const extension = path.extname(src);
const name = path.basename(src, extension);
return `${name}-${width}w.${format}`;
},
});
const isLocal = src.includes('src/assets')
const imageExists = async () => {
const isOk = await fetch(src, { method: 'HEAD' }).then(res => res.ok).catch(() => false)
return isOk
}
const generateImage = async () => {
const widths = [320, 570, 880, 1024, 1248];
const metadata = await Image(src, {
widths: widths.filter((width) => width <= maxWidth),
formats: [...formats],
outputDir: './_site/assets/img/cache/',
urlPath: '/assets/img/cache/',
filenameFormat: (id, src, width, format) => {
const extension = path.extname(src);
const name = path.basename(src, extension);
return `${name}-${width}w.${format}`;
},
});
const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
const imageSources = Object.values(metadata)
.map((imageFormat) => {
return ` <source type="${
imageFormat[0].sourceType
}" srcset="${imageFormat
.map((entry) => entry.srcset)
.join(', ')}" sizes="${sizes}">`;
const imageSources = Object.values(metadata)
.map((imageFormat) => {
return ` <source type="${
imageFormat[0].sourceType
}" srcset="${imageFormat
.map((entry) => entry.srcset)
.join(', ')}" sizes="${sizes}">`;
})
.join('\n');
const imgageAttributes = stringifyAttributes({
src: lowsrc.url,
width: lowsrc.width,
height: lowsrc.height,
alt,
class: className,
loading,
decoding: 'async',
});
const imageElement = `<picture>
${imageSources}
<img ${imgageAttributes} />
</picture>`;
return htmlmin.minify(imageElement, { collapseWhitespace: true });
}
const generatePlaceholder = async () => {
const placeholderElement = `<div class="flex--centered image__placeholder ${shape}">
${icon}
</div>`
return htmlmin.minify(placeholderElement, { collapseWhitespace: true });
}
if (isLocal) return await generateImage();
if (!isLocal) {
return await imageExists().then(async exists => {
if (exists) return await generateImage();
if (!exists) return await generatePlaceholder();
})
.join('\n');
const imgageAttributes = stringifyAttributes({
src: lowsrc.url,
width: lowsrc.width,
height: lowsrc.height,
alt,
class: className,
loading,
decoding: 'async',
});
const imageElement = `<picture>
${imageSources}
<img ${imgageAttributes} />
</picture>`;
return htmlmin.minify(imageElement, { collapseWhitespace: true });
}
};