diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js index cbe16de0..8fb9f283 100644 --- a/config/shortcodes/index.js +++ b/config/shortcodes/index.js @@ -1,69 +1,64 @@ -import outdent from 'outdent' import Image from '@11ty/eleventy-img' +import path from 'path' +import htmlmin from 'html-minifier-terser' + +const stringifyAttributes = (attributeMap) => { + return Object.entries(attributeMap) + .map(([attribute, value]) => { + if (typeof value === 'undefined') return ''; + return `${attribute}="${value}"`; + }) + .join(' '); +}; export const img = async ( src, - alt, - className = undefined, + alt = '', + className, loading = 'lazy', - widths = [75, 150, 300, 600, 900, 1200], - formats = ['webp', 'jpeg'], - sizes = '100vw' + maxWidth = 1248, + sizes = '90vw', + formats = ['avif', 'webp', 'jpeg'] ) => { - if (!src) return; - const imageMetadata = await Image(src, { - widths: [...widths, null], - formats: [...formats, null], + 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 stringifyAttributes = (attributeMap) => { - return Object.entries(attributeMap) - .map(([attribute, value]) => { - if (typeof value === 'undefined') return '' - return `${attribute}="${value}"` - }) - .join(' ') - } + const lowsrc = metadata.jpeg[metadata.jpeg.length - 1]; - const sourceHtmlString = Object.values(imageMetadata) - .map((images) => { - const { sourceType } = images[0] - const sourceAttributes = stringifyAttributes({ - type: sourceType, - srcset: images.map((image) => image.srcset).join(', '), - sizes, - }) - - return `` + const imageSources = Object.values(metadata) + .map((imageFormat) => { + return ` `; }) - .join('\n') + .join('\n'); - const getLargestImage = (format) => { - const images = imageMetadata[format] - return images[images.length - 1] - } - - const largestUnoptimizedImg = getLargestImage(formats[0]) - const imgAttributes = stringifyAttributes({ - src: largestUnoptimizedImg.url, - width: largestUnoptimizedImg.width, - height: largestUnoptimizedImg.height, + const imgageAttributes = stringifyAttributes({ + src: lowsrc.url, + width: lowsrc.width, + height: lowsrc.height, alt, + class: className, loading, decoding: 'async', - }) + }); - const imgHtmlString = `` - const pictureAttributes = stringifyAttributes({ - class: className, - }) + const imageElement = ` + ${imageSources} + + `; - const picture = ` - ${sourceHtmlString} - ${imgHtmlString} - ` - - return outdent`${picture}` -} + return htmlmin.minify(imageElement, { collapseWhitespace: true }); +}; diff --git a/package-lock.json b/package-lock.json index f9aea0dc..63d7523d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "4.14.0", + "version": "5.0.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "4.14.0", + "version": "5.0.4", "license": "ISC", "dependencies": { "@remy/webmention": "^1.5.0", @@ -32,7 +32,6 @@ "markdown-it": "^14.0.0", "markdown-it-anchor": "^8.4.1", "markdown-it-footnote": "^4.0.0", - "outdent": "^0.8.0", "sanitize-html": "^2.11.0", "slugify": "^1.6.6", "writing-stats": "^1.0.6" @@ -3598,12 +3597,6 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "integrity": "sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw==" }, - "node_modules/outdent": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/outdent/-/outdent-0.8.0.tgz", - "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==", - "dev": true - }, "node_modules/p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", diff --git a/package.json b/package.json index 95d784bb..01962a87 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "5.0.4", + "version": "5.1.4", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { @@ -43,7 +43,6 @@ "markdown-it": "^14.0.0", "markdown-it-anchor": "^8.4.1", "markdown-it-footnote": "^4.0.0", - "outdent": "^0.8.0", "sanitize-html": "^2.11.0", "slugify": "^1.6.6", "writing-stats": "^1.0.6" diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid index 8a3e5939..accaf1d6 100644 --- a/src/_includes/now.liquid +++ b/src/_includes/now.liquid @@ -8,13 +8,13 @@ layout: default {% endcapture %} {{ content }} -{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %} -{% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %} +{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager', imageMaxWidth: 320 %} +{% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8, imageMaxWidth: 320 %} {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %} -{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %} +{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6, imageMaxWidth: 320 %} {% render "partials/now/links.liquid", links:links %} -{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %} -{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %} +{% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, imageMaxWidth: 320 %} +{% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6, imageMaxWidth: 320 %}

This is a now page, and if you have your own site, you should make one too.

diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid index 2314fb3d..81933c74 100644 --- a/src/_includes/partials/now/media-grid.liquid +++ b/src/_includes/partials/now/media-grid.liquid @@ -37,7 +37,11 @@ 'lazy' {%- endif -%} {%- endcapture -%} - {% image item.image, alt, 'item__image', loadingStrategy %} + {% if imageMaxWidth %} + {% image item.image, alt, '', loadingStrategy, imageMaxWidth %} + {% else %} + {% image item.image, alt, '', loadingStrategy %} + {% endif %} {% endfor %} diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index b058e982..82cd61e0 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -403,17 +403,8 @@ li { .image__banner { border: 1px solid var(--accent-color); border-radius: var(--rounded-lg); - overflow: hidden; -} - -.image__banner, -.image__banner > * { - display: block; - width: 100%; -} - -.image__banner > * { height: auto; + width: 100%; } /* pages */ diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css index 2a732381..b6b226ee 100644 --- a/src/assets/styles/pages/about.css +++ b/src/assets/styles/pages/about.css @@ -4,30 +4,18 @@ .avatar__wrapper { width: 100%; - margin-bottom: 1.5rem; + justify-content: center; } -.avatar__wrapper .avatar__wrapper--interior { +.avatar__wrapper img { + border-radius: var(--rounded-full); + border: 1px solid var(--accent-color); width: var(--avatar-size); height: var(--avatar-size); - border: 1px solid var(--accent-color); - border-radius: var(--rounded-full); - display: flex; padding: 1rem; background-color: var(--color-lightest); } -.avatar__wrapper, -.avatar__wrapper .avatar__wrapper--interior { - justify-content: center; - overflow: hidden; -} - -.avatar__wrapper .avatar__wrapper--interior > * { - width: 100%; - height: 100%; -} - @media screen and (min-width: 768px) { :root { --avatar-size: 24rem; diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css index 02d0f490..0744f8f6 100644 --- a/src/assets/styles/widgets/media-grid.css +++ b/src/assets/styles/widgets/media-grid.css @@ -76,8 +76,7 @@ font-weight: 700; } -.media__grid .item__image, -.media__grid .item__image > * { +.media__grid img { width: 100%; height: 100%; } diff --git a/src/pages/about.md b/src/pages/about.md index 6353fe48..39b0f4b4 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -9,10 +9,8 @@ image: /assets/img/ogi/about.jpg {% endcapture %}
-
- {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %} - {% image './src/assets/img/avatar.webp', about_alt %} -
+ {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %} + {% image './src/assets/img/avatar.webp', about_alt %}

Hi, I'm Cory

diff --git a/src/posts/2023/2023-in-review.html b/src/posts/2023/2023-in-review.html index 1d7ddbf0..4dd9daf5 100644 --- a/src/posts/2023/2023-in-review.html +++ b/src/posts/2023/2023-in-review.html @@ -14,9 +14,8 @@ tags: ['books', 'music', 'development', 'Eleventy']
  • I listened to a bunch of music
  • I watched a bunch of movies and TV, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.
    • - -{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true %} -{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8 %} +{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true, imageMaxWidth: 320 %} +{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8, imageMaxWidth: 320 %}

    I wrote some things: