diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 4899c41f..771f6a67 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -400,7 +400,8 @@ li { } /* images */ -.image__banner { +.image__banner, +.image__placeholder.banner { border: 1px solid var(--accent-color); border-radius: var(--rounded-lg); height: auto; @@ -425,6 +426,11 @@ li { border-radius: var(--rounded-full); } +.image__placeholder.banner { + padding: 6rem 0; + margin: 1rem 0; +} + /* pages */ .page__header { font-size: var(--font-size-2xl); @@ -518,4 +524,4 @@ footer nav { footer nav:first-child { gap: .75rem; } -} \ No newline at end of file +} diff --git a/src/pages/404.html b/src/pages/404.html index 76c2e2a0..f55adbf9 100644 --- a/src/pages/404.html +++ b/src/pages/404.html @@ -9,7 +9,8 @@ image: /assets/img/404.jpg {% endcapture %}
- {% image './src/assets/img/404.jpg', title, 'image__banner' %} + {% capture fallbackIcon %}{% tablericon "photo" title %}{% endcapture %} + {% image './src/assets/img/404.jpg', title, 'image__banner', 'eager', 'banner', fallbackIcon %}

{{ title }}

What kind of idiots do you have working here?

@@ -26,4 +27,4 @@ image: /assets/img/404.jpg document.addEventListener('DOMContentLoaded', function () { plausible('404', { props: { path: document.location.pathname } }) }) - \ No newline at end of file + diff --git a/src/pages/about.md b/src/pages/about.md index c41a4b0d..3f06f5a4 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -10,7 +10,8 @@ image: /assets/img/ogi/about.jpg
{% capture about_alt %}{{ meta.siteName }} - image by David Neal / @reverentgeek{% endcapture %} - {% image './src/assets/img/avatar.webp', about_alt, '', 'eager' %} + {% capture fallbackIcon %}{% tablericon "photo" about_alt %}{% endcapture %} + {% image './src/assets/img/avatar.webp', about_alt, '', 'eager', 'banner', fallbackIcon %}

Hi, I'm Cory

diff --git a/src/pages/uses.md b/src/pages/uses.md index 1e8f53b5..55f860d9 100644 --- a/src/pages/uses.md +++ b/src/pages/uses.md @@ -9,7 +9,8 @@ image: /assets/img/pages/uses.jpg Software and services that I use for work and my own enjoyment. -{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image__banner', 'eager' %} +{% capture fallbackIcon %}{% tablericon "photo" "My desk" %}{% endcapture %} +{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'image__banner', 'eager', 'banner', fallbackIcon %}

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 7245027e..89af0cd2 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,8 @@ 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. -{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'image__banner' %} +{% capture fallbackIcon %}{% tablericon "photo" "Albums and artists" %}{% endcapture %} +{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'image__banner', 'lazy', 'banner', fallbackIcon %} [^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 7048d3a0..6d93be24 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,8 @@ 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. -{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'image__banner' %} +{% capture fallbackIcon %}{% tablericon "photo" "A diagram of my Fastmail workflow" %}{% endcapture %} +{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'image__banner', 'eager', 'banner', fallbackIcon %} ## 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 524263d5..84bde008 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,7 @@ Rendering the output is as simple as: {% endraw %} Leaving us with: -{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'image__banner' %} +{% capture fallbackIcon %}{% tablericon "photo" "Albums I'm looking forward to" %}{% endcapture %} +{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'image__banner', 'eager', 'banner', fallbackIcon %} [^1]: At this point, a dev playground. 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 03702c40..97f20511 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,7 @@ 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. -{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'image__banner' %} +{% capture fallbackIcon %}{% tablericon "photo" "Now playing" %}{% endcapture %} +{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'image__banner', 'lazy', 'banner', fallbackIcon %} [^1]: Plus explicit conditions matching David Bowie and Minor Threat. 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 a4dafcc8..992e95f4 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. -{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of charts', 'image__banner' %} +{% 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', 'banner', fallbackIcon %} "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 49d10a18..d1e9d746 100644 --- a/src/posts/2024/on-getting-tattooed.md +++ b/src/posts/2024/on-getting-tattooed.md @@ -26,11 +26,12 @@ 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. -{% image 'https://cdn.coryd.dev/blog/half-sleeve.jpg', 'A photo of the Sturgill Simpson-inspired half sleeve referenced above.', 'image__banner' %} +{% 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', 'banner', fallbackIcon %} [^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! [^3]: She was at the same local shop (and now at her own) but her style was perfect for what I had in mind. [^4]: Hopefully she continues to enjoy the short, but I've got no regrets. [^5]: My grandparents bought stock during Apple's IPO and were lifelong Mac users. -[^6]: It's definitely better than going to the dentist. \ No newline at end of file +[^6]: It's definitely better than going to the dentist.