From 84e5c844f5a036b77d6cefad7766dcf602fddbbe Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 5 Feb 2024 13:18:51 -0800 Subject: [PATCH] Revert "feat: crop images before optimizing them to ensure proper aspect ratio" This reverts commit 605baf5836cba5e5b6dc5379b54a2b3035d48fab. --- config/shortcodes/index.js | 116 ++++-------------- package.json | 2 +- .../partials/webmentions/comments.liquid | 2 +- .../partials/webmentions/interaction.liquid | 2 +- 4 files changed, 28 insertions(+), 94 deletions(-) diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js index d41d1f92..fd770162 100644 --- a/config/shortcodes/index.js +++ b/config/shortcodes/index.js @@ -1,59 +1,18 @@ import Image from '@11ty/eleventy-img'; import path from 'path'; -import Sharp from 'sharp'; import htmlmin from 'html-minifier-terser'; -const stringifyAttributes = attributeMap => +const stringifyAttributes = (attributeMap) => Object.entries(attributeMap) - .map(([attribute, value]) => - value === undefined - ? '' - : `${attribute}="${typeof value === 'object' ? value.value : value}"` - ) + .map(([attribute, value]) => (value === undefined ? '' : `${attribute}="${value}"`)) .join(' '); -const resizeImage = async (src, width, height, mode, shape) => { - const commonOptions = { - fit: mode, - position: 'center', - background: { r: 255, g: 255, b: 255, alpha: 1 }, - }; - - if (shape === 'square') { - const buffer = await Sharp(src) - .resize({ - width: Math.min(width, height), - height: Math.min(width, height), - ...commonOptions, - }) - .toBuffer(); - - return { buffer, width: Math.min(width, height), height: Math.min(width, height) }; - } else if (shape === 'vertical') { - const aspectRatio = 2 / 3; - const targetWidth = Math.min(Math.floor(height * aspectRatio), width); - const buffer = await Sharp(src) - .resize({ - width: targetWidth, - height: Math.floor(targetWidth / aspectRatio), - ...commonOptions, - }) - .toBuffer(); - - return { buffer, width: targetWidth, height: Math.floor(targetWidth / aspectRatio) }; - } else { - const buffer = await Sharp(src).toBuffer(); - - return { buffer, width, height }; - } -}; - export const img = async ( src, alt = '', className, loading = 'lazy', - shape = '', + shape = 'square', icon, maxWidth = 1248, sizes = '90vw', @@ -62,11 +21,13 @@ export const img = async ( const isLocal = src.includes('src/assets'); const imageExists = async () => { try { - return await fetch(src, { method: 'HEAD' }).then(res => res.ok); + const isOk = await fetch(src, { method: 'HEAD' }).then((res) => res.ok); + return isOk; } catch { return false; } }; + const generateImage = async () => { const widths = [320, 570, 880, 1024, 1248]; const metadata = await Image(src, { @@ -79,58 +40,31 @@ export const img = async ( return `${name}-${width}w.${format}`; }, }); + const lowsrc = metadata.jpeg[metadata.jpeg.length - 1]; - if (shape === 'square' || shape === 'vertical') { - const { buffer, width: resizedWidth, height: resizedHeight } = await resizeImage( - `./_site/${lowsrc.url}`, - lowsrc.width, - lowsrc.height, - 'cover', - shape - ); - const resizedImageBase64 = buffer.toString('base64'); - const resizedImageSrc = `data:image/${lowsrc.format};base64,${resizedImageBase64}`; - const imageSources = Object.values(metadata) - .map((imageFormat) => + const imageSources = Object.values(metadata) + .map( + (imageFormat) => `` - ) - .join('\n'); - const imageAttributes = stringifyAttributes({ - src: resizedImageSrc, - width: resizedWidth, - height: resizedHeight, - alt, - class: className, - loading, - decoding: 'async', - }); - const imageElement = `${imageSources}`; + ) + .join('\n'); - return htmlmin.minify(imageElement, { collapseWhitespace: true }); - } else { - const imageSources = Object.values(metadata) - .map((imageFormat) => - `` - ) - .join('\n'); - const imgageAttributes = stringifyAttributes({ - src: lowsrc.url, - width: lowsrc.width, - height: lowsrc.height, - alt, - class: className, - loading, - decoding: 'async', - }); - const imageElement = `${imageSources}`; + const imgageAttributes = stringifyAttributes({ + src: lowsrc.url, + width: lowsrc.width, + height: lowsrc.height, + alt, + class: className, + loading, + decoding: 'async', + }); - return htmlmin.minify(imageElement, { collapseWhitespace: true }); - } + const imageElement = `${imageSources}`; + + return htmlmin.minify(imageElement, { collapseWhitespace: true }); }; const generatePlaceholder = async () => { @@ -138,5 +72,5 @@ export const img = async ( return htmlmin.minify(placeholderElement, { collapseWhitespace: true }); }; - return isLocal ? await generateImage() : await imageExists().then(async exists => (exists ? await generateImage() : await generatePlaceholder())); + return isLocal ? await generateImage() : await imageExists().then(async (exists) => (exists ? await generateImage() : await generatePlaceholder())); }; \ No newline at end of file diff --git a/package.json b/package.json index 69f6dbad..ec228315 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "5.4.13", + "version": "5.3.13", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { diff --git a/src/_includes/partials/webmentions/comments.liquid b/src/_includes/partials/webmentions/comments.liquid index 5c76ab51..8d1b853c 100644 --- a/src/_includes/partials/webmentions/comments.liquid +++ b/src/_includes/partials/webmentions/comments.liquid @@ -8,7 +8,7 @@
{% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %} {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %} - {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %} + {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
diff --git a/src/_includes/partials/webmentions/interaction.liquid b/src/_includes/partials/webmentions/interaction.liquid index fff52b47..8c13fc3f 100644 --- a/src/_includes/partials/webmentions/interaction.liquid +++ b/src/_includes/partials/webmentions/interaction.liquid @@ -13,7 +13,7 @@
{% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %} {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %} - {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %} + {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
{% endfor %}