diff --git a/.eleventy.js b/.eleventy.js index ba912a75..48086668 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -3,18 +3,17 @@ import tablerIcons from 'eleventy-plugin-tabler-icons' import pluginRss from '@11ty/eleventy-plugin-rss' import postGraph from '@rknightuk/eleventy-plugin-post-graph' import embedEverything from 'eleventy-plugin-embed-everything' -import { eleventyImageTransformPlugin } from '@11ty/eleventy-img' import markdownIt from 'markdown-it' import markdownItAnchor from 'markdown-it-anchor' import markdownItFootnote from 'markdown-it-footnote' import htmlmin from 'html-minifier-terser' -import path from 'path'; import filters from './config/filters/index.js' import { slugifyString } from './config/utils/index.js' import { svgToJpeg } from './config/events/index.js' import { tagList, tagMap, postStats } from './config/collections/index.js' +import { img } from './config/shortcodes/index.js' import { execSync } from 'child_process' @@ -43,22 +42,6 @@ export default async function (eleventyConfig) { textColorDark: '#fff', }) eleventyConfig.addPlugin(embedEverything); - eleventyConfig.addPlugin(eleventyImageTransformPlugin, { - extensions: 'html', - formats: ['avif', 'webp', 'jpeg'], - widths: [320, 570, 880, 1024, 1248], - defaultAttributes: { - loading: 'lazy', - decoding: 'async', - sizes: '90vw', - }, - outputDir: './_site/assets/img/cache/', - urlPath: '/assets/img/cache/', - filenameFormat: (id, src, width, format) => { - const { name } = path.parse(src); - return `${name}-${width}w.${format}`; - }, - }); // quiet build output eleventyConfig.setQuietMode(true) @@ -117,6 +100,7 @@ export default async function (eleventyConfig) { eleventyConfig.addFilter('slugify', slugifyString) // shortcodes + eleventyConfig.addShortcode('image', img) eleventyConfig.addShortcode('appVersion', () => appVersion) // transforms diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js new file mode 100644 index 00000000..74776bda --- /dev/null +++ b/config/shortcodes/index.js @@ -0,0 +1,63 @@ +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, + loading = 'lazy', + sizes = '90vw', + formats = ['avif', 'webp', 'jpeg'] +) => { + const widths = [320, 570, 880, 1024, 1248]; + const metadata = await Image(src, { + widths: [...widths], + 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 lowsrc = metadata.jpeg[metadata.jpeg.length - 1]; + + const imageSources = Object.values(metadata) + .map((imageFormat) => { + return ` `; + }) + .join('\n'); + + const imgageAttributes = stringifyAttributes({ + src: lowsrc.url, + width: lowsrc.width, + height: lowsrc.height, + alt, + class: className, + loading, + decoding: 'async', + }); + + const imageElement = ` + ${imageSources} + + `; + + return htmlmin.minify(imageElement, { collapseWhitespace: true }); +}; \ No newline at end of file diff --git a/package.json b/package.json index 38270de2..d89f7950 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "6.5.5", + "version": "6.5.6", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid index 517d4286..031cdd62 100644 --- a/src/_includes/partials/now/media-grid.liquid +++ b/src/_includes/partials/now/media-grid.liquid @@ -37,7 +37,7 @@ 'lazy' {%- endif -%} {%- endcapture -%} - {{ alt }} + {% image item.image, alt, '', loadingStrategy %} {% endfor %} diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid index d8f58315..d953fd7f 100644 --- a/src/_includes/webrings/the-claw.liquid +++ b/src/_includes/webrings/the-claw.liquid @@ -1,6 +1,6 @@
- The Claw Webring + {% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring' %}

The Claw Webring

diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index a8de24fe..333b054e 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -412,35 +412,21 @@ li { } /* images */ -.image__banner, -.image__placeholder.banner { +.image__banner { border: 1px solid var(--accent-color); border-radius: var(--rounded-lg); height: auto; width: 100%; } -.image__placeholder { - background-color: var(--color-darkest); - justify-content: center; +.image__banner, +.image__banner > * { + display: block; width: 100%; - height: 100%; } -.image__placeholder > svg { - stroke: var(--color-lightest) !important; - stroke-width: var(--stroke-width-bold); - height: 1.75rem; - width: 1.75rem; -} - -.image__placeholder.round { - border-radius: var(--rounded-full); -} - -.image__placeholder.banner { - padding: 6rem 0; - margin: 1rem 0; +.image__banner > * { + height: auto; } /* pages */ diff --git a/src/assets/styles/pages/about.css b/src/assets/styles/pages/about.css index 05f6a7cb..6a8d5b9c 100644 --- a/src/assets/styles/pages/about.css +++ b/src/assets/styles/pages/about.css @@ -4,19 +4,31 @@ .avatar__wrapper { width: 100%; - justify-content: center; - margin-bottom: 1rem; + margin-bottom: 1.5rem; } -.avatar__wrapper img { - border-radius: var(--rounded-full); - border: 1px solid var(--accent-color); +.avatar__wrapper .avatar__wrapper--interior { 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 picture > *, +.avatar__wrapper .avatar__wrapper--interior img { + width: 100%; + height: 100%; +} + @media screen and (min-width: 768px) { :root { --avatar-size: 24rem; diff --git a/src/pages/404.html b/src/pages/404.html index 5bf51e67..d82e8a33 100644 --- a/src/pages/404.html +++ b/src/pages/404.html @@ -9,7 +9,7 @@ image: /assets/img/404.jpg {% endcapture %}
- 404 — oops! + {% image './src/assets/img/404.jpg', title, 'image__banner', 'eager' %}

{{ title }}

What kind of idiots do you have working here?

diff --git a/src/pages/about.md b/src/pages/about.md index e0de1294..100d3e88 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -9,8 +9,10 @@ image: /assets/img/ogi/about.jpg {% endcapture %}
- {% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %} - {{ 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/pages/uses.md b/src/pages/uses.md index 4ea956f8..c6919b56 100644 --- a/src/pages/uses.md +++ b/src/pages/uses.md @@ -9,7 +9,7 @@ image: /assets/img/pages/uses.jpg Software and services that I use for work and my own enjoyment. -My desk +{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image__banner', 'eager' %}

Computer setup

diff --git a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md index edd5b196..35eac9e8 100644 --- a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md +++ b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md @@ -204,7 +204,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity. -Albums and artists +{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'image__banner', 'lazy' %} [^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here. [^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file. diff --git a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md index eb4f71e6..719c1ac7 100644 --- a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md +++ b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md @@ -10,7 +10,7 @@ I've been using Fastmail for years now and have explored a number of different a For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis. -A diagram of my Fastmail workflow +{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'image__banner', 'eager' %} ## Alias-specific rules diff --git a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md index b93c3c21..3739b5a5 100644 --- a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md +++ b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md @@ -65,6 +65,6 @@ Rendering the output is as simple as: {% endraw %} Leaving us with: -Albums I'm looking forward to +{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'image__banner', 'eager' %} [^1]: At this point, a dev playground. diff --git a/src/posts/2023/now-page-grouping-episodes-of-same-show.md b/src/posts/2023/now-page-grouping-episodes-of-same-show.md index 6897c45a..9791fd41 100644 --- a/src/posts/2023/now-page-grouping-episodes-of-same-show.md +++ b/src/posts/2023/now-page-grouping-episodes-of-same-show.md @@ -13,7 +13,7 @@ I made a minor update to how I'm normalizing TV data for display on my now page. By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show. -Grouped TV episodes +{% image 'https://cdn.coryd.dev/blog/grouped-tv.jpg', 'Grouped TV episodes', 'image__banner' %} {% raw %} diff --git a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md index f6fab1bf..61790aeb 100644 --- a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md +++ b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md @@ -168,6 +168,6 @@ Finally, if the page this all lives on is loaded by a client without JavaScript All of this, yields the single line at the bottom of this image — updated on each visit. -Now playing +{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'image__banner', 'lazy' %} [^1]: Plus explicit conditions matching David Bowie and Minor Threat. diff --git a/src/posts/2023/optimizing-for-performance-with-eleventy.md b/src/posts/2023/optimizing-for-performance-with-eleventy.md index ad8e5666..8b2e82a8 100644 --- a/src/posts/2023/optimizing-for-performance-with-eleventy.md +++ b/src/posts/2023/optimizing-for-performance-with-eleventy.md @@ -138,6 +138,6 @@ For this page in particular, the images that are rendered above the fold are set All of these boilerplate steps leave us with a quick to load, accessible and resilient site: -Pagespeed scores for coryd.dev/now +{% image 'https://cdn.coryd.dev/blog/page-speed.jpg', 'Pagespeed scores for coryd.dev/now', 'image__banner' %} [^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines. diff --git a/src/posts/2023/road-to-madness-apple-music-charts.md b/src/posts/2023/road-to-madness-apple-music-charts.md index 56d4c9ce..cf6a3ee1 100644 --- a/src/posts/2023/road-to-madness-apple-music-charts.md +++ b/src/posts/2023/road-to-madness-apple-music-charts.md @@ -133,7 +133,8 @@ _Cool_[^4]. GitHub triggers a rebuild of the site every hour, Netlify builds it, There are some significant issues with this approach: it doesn't capture listens to an album in a loop (like me playing the new Outer Heaven record today — hails 🤘). It can get wonky when my diff function hits a track order that elicits a false positive return value. -Charlie Day standing in front of charts +{% capture fallbackIcon %}{% tablericon "photo" "Charlie Day standing in front of charts" %}{% endcapture %} +{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of charts', 'image__banner', 'lazy' %} "But Cory there's last.fm." I hear this, I love last.fm, but I've got concerns about its age, ownership and maintenance. I don't want to be on the wrong end of a scream test when the wrong (right?) server rack gets decommissioned. diff --git a/src/posts/2024/on-getting-tattooed.md b/src/posts/2024/on-getting-tattooed.md index 66e82a0e..cdd443a9 100644 --- a/src/posts/2024/on-getting-tattooed.md +++ b/src/posts/2024/on-getting-tattooed.md @@ -27,7 +27,8 @@ My parents started getting tattooed in their 50s, thinking it would be a cheaper Each piece was important to me when I got it and remains important to me now. They're references to and reminders of important moments and I enjoy every session[^6]. But, for now, my shoulder is sore. -A photo of the Sturgill Simpson-inspired half sleeve referenced above. +{% capture fallbackIcon %}{% tablericon "photo" "A photo of the Sturgill Simpson-inspired half sleeve referenced above." %}{% endcapture %} +{% image 'https://cdn.coryd.dev/blog/half-sleeve.jpg', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image__banner', 'eager' %} [^1]: My wife got the same piece done — there was one pointing to the driveway of the house we got married at. It burned down in the Butte fire. [^2]: She got elected!