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

chore: clean up

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-04 13:00:36 -08:00
parent f0f1c0aaab
commit c8aabb7c2a
No known key found for this signature in database
2 changed files with 32 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
config/shortcodes/index.js
View file

@ -1,15 +1,11 @@
import Image from '@11ty/eleventy-img' import Image from '@11ty/eleventy-img';
import path from 'path' import path from 'path';
import htmlmin from 'html-minifier-terser' import htmlmin from 'html-minifier-terser';
const stringifyAttributes = (attributeMap) => { const stringifyAttributes = (attributeMap) =>
return Object.entries(attributeMap) Object.entries(attributeMap)
.map(([attribute, value]) => { .map(([attribute, value]) => (value === undefined ? '' : `${attribute}="${value}"`))
if (typeof value === 'undefined') return '';
return `${attribute}="${value}"`;
})
.join(' '); .join(' ');
};
export const img = async ( export const img = async (
src, src,
@ -20,13 +16,18 @@ export const img = async (
icon, icon,
maxWidth = 1248, maxWidth = 1248,
sizes = '90vw', sizes = '90vw',
formats = ['avif', 'webp', 'jpeg'], formats = ['avif', 'webp', 'jpeg']
) => { ) => {
const isLocal = src.includes('src/assets') const isLocal = src.includes('src/assets');
const imageExists = async () => { const imageExists = async () => {
const isOk = await fetch(src, { method: 'HEAD' }).then(res => res.ok).catch(() => false) try {
return isOk const isOk = await fetch(src, { method: 'HEAD' }).then((res) => res.ok);
} return isOk;
} catch {
return false;
}
};
const generateImage = async () => { const generateImage = async () => {
const widths = [320, 570, 880, 1024, 1248]; const widths = [320, 570, 880, 1024, 1248];
const metadata = await Image(src, { const metadata = await Image(src, {
@ -35,8 +36,7 @@ export const img = async (
outputDir: './_site/assets/img/cache/', outputDir: './_site/assets/img/cache/',
urlPath: '/assets/img/cache/', urlPath: '/assets/img/cache/',
filenameFormat: (id, src, width, format) => { filenameFormat: (id, src, width, format) => {
const extension = path.extname(src); const { ext, name } = path.parse(src);
const name = path.basename(src, extension);
return `${name}-${width}w.${format}`; return `${name}-${width}w.${format}`;
}, },
}); });
@ -44,13 +44,12 @@ export const img = async (
const lowsrc = metadata.jpeg[metadata.jpeg.length - 1]; const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
const imageSources = Object.values(metadata) const imageSources = Object.values(metadata)
.map((imageFormat) => { .map(
return ` <source type="${ (imageFormat) =>
imageFormat[0].sourceType `<source type="${imageFormat[0].sourceType}" srcset="${imageFormat
}" srcset="${imageFormat .map((entry) => entry.srcset)
.map((entry) => entry.srcset) .join(', ')}" sizes="${sizes}">`
.join(', ')}" sizes="${sizes}">`; )
})
.join('\n'); .join('\n');
const imgageAttributes = stringifyAttributes({ const imgageAttributes = stringifyAttributes({
@ -63,25 +62,15 @@ export const img = async (
decoding: 'async', decoding: 'async',
}); });
const imageElement = `<picture> const imageElement = `<picture>${imageSources}<img ${imgageAttributes} /></picture>`;
${imageSources}
<img ${imgageAttributes} />
</picture>`;
return htmlmin.minify(imageElement, { collapseWhitespace: true }); return htmlmin.minify(imageElement, { collapseWhitespace: true });
} };
const generatePlaceholder = async () => {
const placeholderElement = `<div class="flex--centered image__placeholder ${shape}">
${icon}
</div>`
const generatePlaceholder = async () => {
const placeholderElement = `<div class="flex--centered image__placeholder ${shape}">${icon}</div>`;
return htmlmin.minify(placeholderElement, { collapseWhitespace: true }); return htmlmin.minify(placeholderElement, { collapseWhitespace: true });
} };
if (isLocal) return await generateImage();
if (!isLocal) { return isLocal ? await generateImage() : await imageExists().then(async (exists) => (exists ? await generateImage() : await generatePlaceholder()));
return await imageExists().then(async exists => { };
if (exists) return await generateImage();
if (!exists) return await generatePlaceholder();
})
}
};

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "5.3.10", "version": "5.3.11",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {