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

chore: image improvements

Browse source
This commit is contained in:
Cory Dransfeldt 2024-05-29 13:04:36 -07:00
parent 77c9a85296
commit d27fac4b6b
No known key found for this signature in database
29 changed files with 650 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "coryd.dev",
"version": "17.5.2",
"version": "17.6.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "coryd.dev",
"version": "17.5.2",
"version": "17.6.2",
"license": "MIT",
"dependencies": {
"@cdransf/api-text": "^1.4.0",
@ -2505,9 +2505,9 @@
"peer": true
},
"node_modules/@types/node": {
"version": "20.12.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
"integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
"version": "20.12.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.13.tgz",
"integrity": "sha512-gBGeanV41c1L171rR7wjbMiEpEI/l5XFQdLLfhr/REwpgDy/4U8y89+i8kRiLzDyZdOkXh+cRaTetUnCYutoXA==",
"dev": true,
"dependencies": {
"undici-types": "~5.26.4"
@ -3124,9 +3124,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.783",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
"integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==",
"version": "1.4.784",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.784.tgz",
"integrity": "sha512-9CZwh+sDrhDAeOEFh8s3PqwduzTyYIeYwZolc1b9ENAUt3ePu7R1sJSCWr/820ISssRxCJUyHI9Wb7j+0Uo1AA==",
"dev": true
},
"node_modules/encodeurl": {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "17.5.2",
"version": "17.6.2",
"description": "The source for my personal site. Built using 11ty.",
"type": "module",
"scripts": {

38
src/_includes/partials/media/grid.liquid
View file

@ -17,9 +17,43 @@
</div>
{% assign loadingStrategy = loading | default: 'lazy' %}
{% if shape == 'square' %}
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=200&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=400&h=400&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=800&h=800&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1200&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 100px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1200&fm=webp&q=85"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="240"
height="240"
/>
{% else %}
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=400&h=614&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=800&h=1228&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1842&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=1200&h=1842&fm=webp&q=85"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="200"
height="307"
/>
{% endif %}
</div>
</a>

19
src/_includes/partials/media/music/recent.liquid
View file

@ -3,7 +3,24 @@
{% capture alt %}{{ item.title | escape }} by {{ item.artist }}{% endcapture %}
<div class="item">
<div class="meta">
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=64&h=64&fm=webp&q=85" alt="{{ alt }}" loading="lazy" decoding="async" width="64" height="64" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=64&h=64&fm=webp&q=85 64w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=128&h=128&fm=webp&q=85 128w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=256&h=256&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=512&h=512&fm=webp&q=85 512w
"
sizes="(max-width: 450px) 64px,
(max-width: 850px) 128px,
(max-width: 1000px) 256px,
512px"
src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=512&h=512&fm=webp&q=85"
alt="{{ alt }}"
loading="lazy"
decoding="async"
width="64"
height="64"
/>
<div class="meta-text">
<div class="title">
<a href="{{ item.url }}">{{ item.title }}</a>

19
src/_includes/partials/media/watching/grid.liquid
View file

@ -21,7 +21,24 @@
{%- capture loadingStrategy -%}
{%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
{%- endcapture -%}
<img src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url={{ item.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
loading="{{ loadingStrategy }}"
decoding="async"
width="256"
height="144"
/>
</div>
</a>
{% endfor %}

19
src/_includes/partials/media/watching/hero.liquid
View file

@ -5,6 +5,23 @@
<div class="header">{{ movie.title }} ({{ movie.year }})</div>
<div class="subheader">Last watched @ {{ movie.dateAdded | date: "%B %e, %Y" }}</div>
</div>
<img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=768&h=432&fm=webp&q=85" alt="{{ alt }}" loading="eager" decoding="async" width="768" height="432" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
loading="eager"
decoding="async"
width="768"
height="432"
/>
</div>
</a>

152
src/_includes/partials/widgets/badge-grid.liquid
View file

@ -1,26 +1,162 @@
<div class="badge-grid">
<a href="https://11ty.dev">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fm=webp&q=85" alt="Made with 11ty" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://social.lol/@cory">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fm=webp&q=85" alt="Follow me on Mastodon" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://www.buymeacoffee.com/cory">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fm=webp&q=85" alt="Buy Me a Coffee" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://github.com/cdransf">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fm=webp&q=85" alt="Check out my GitHub" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://github.com/ai-robots-txt/ai.robots.txt">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fm=webp&q=85" alt="Not a robot" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://validator.w3.org">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fm=webp&q=85" alt="Valid HTML5" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://www.w3.org/Style/CSS/Overview.en.html">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fm=webp&q=85" alt="Valid CSS" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validcss.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
<a href="https://coryd.dev/feeds">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fm=webp&q=85" alt="Valid RSS" loading="lazy" decoding="async" width="88" height="31" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=88&h=31&fm=webp&q=85 88w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=176&h=62&fm=webp&q=85 176w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=352&h=124&fm=webp&q=85 352w,
https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=704&h=248&fm=webp&q=85 704w
"
sizes="(max-width: 450px) 88px,
(max-width: 850px) 176px,
(max-width: 1000px) 352px,
704px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fit=cover&w=704&h=248&fm=webp&q=85"
alt="Made with 11ty"
loading="lazy"
decoding="async"
width="88"
height="31"
/>
</a>
</div>

19
src/_includes/webrings/the-claw.liquid
View file

@ -1,6 +1,23 @@
<div class="webring__wrapper">
<div class="webring__centered flex-centered">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fm=webp&q=85" alt="The Claw Webring" loading="lazy" decoding="async" width="200" height="169" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=200&h=169&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=400&h=338&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=800&h=676&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=1600&h=1352&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fit=cover&w=1600&h=1352&fm=webp&q=85"
alt="The Claw Webring"
loading="lazy"
decoding="async"
width="200"
height="169"
/>
</div>
<h3 class="text-centered">The Claw Webring</h3>
<div class="webring__centered flex-centered">

20
src/pages/errors/404.html
View file

@ -6,7 +6,25 @@ permalink: /404.html
image: /assets/img/404.jpg
---
<div class="four-oh-four-wrapper">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fm=webp&q=85&w=768" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="768" height="432" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
width="768"
height="432"
/>
<div class="text-centered">
<h2 class="page-header">{{ title }}</h2>
What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>

19
src/pages/main/about.md
View file

@ -9,7 +9,24 @@ permalink: /about.html
<div class="avatar-wrapper flex-centered">
<div class="interior">
{%- capture about_alt -%}{{ meta.siteName }} - image by David Neal / @reverentgeek{%- endcapture -%}
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/avatar-transparent.png&w=600" alt="{{ about_alt }}" loading="eager" decoding="async" width="600" height="600" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=/assets/img/avatar-transparent.png&fit=cover&w=200&h=200&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=/assets/img/avatar-transparent.png&fit=cover&w=400&h=400&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=/assets/img/avatar-transparent.png&fit=cover&w=800&h=800&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=/assets/img/avatar-transparent.png&fit=cover&w=1200&h=1200&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url=/assets/img/avatar-transparent.png&fit=cover&w=1200&h=1200&fm=webp&q=85"
alt="{{ about_alt }}"
loading="eager"
decoding="async"
width="600"
height="600"
/>
</div>
</div>
<h2 class="page-header text-centered">Hi, I'm Cory</h2>

19
src/pages/main/books/book.html
View file

@ -14,7 +14,24 @@ schema: book
<a class="back-link-header link-icon flex-centered" href="/books">{% tablericon "arrow-left" "Go back" %} Go back</a>
<article class="book-focus">
<div class="book-display">
<img src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fm=webp&q=85&w=137&h=209&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" width="137" height="209" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=203&h=309&fm=webp&q=85 203w,
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=406&h=618&fm=webp&q=85 406w,
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=812&h=1236&fm=webp&q=85 812w,
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=1624&h=2472&fm=webp&q=85 1624w
"
sizes="(max-width: 450px) 203px,
(max-width: 850px) 406px,
(max-width: 1000px) 812px,
1624px"
src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=1624&h=2472&fm=webp&q=85"
alt="{{ alt }}"
loading="eager"
decoding="async"
width="203"
height="309"
/>
<div class="book-meta">
<p class="title"><strong>{{ book.title }}</strong></p>
{% if book.rating %}<p>{{ book.rating }}</p>{% endif %}

19
src/pages/main/books/index.html
View file

@ -18,7 +18,24 @@ schema: books
{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
<article class="book-entry">
<a href="{{ book.url }}">
<img src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fm=webp&q=85&w=203&h=309&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" width="203" height="309" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=203&h=309&fm=webp&q=85 203w,
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=406&h=618&fm=webp&q=85 406w,
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=812&h=1236&fm=webp&q=85 812w,
https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=1624&h=2472&fm=webp&q=85 1624w
"
sizes="(max-width: 450px) 203px,
(max-width: 850px) 406px,
(max-width: 1000px) 812px,
1624px"
src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fit=cover&w=1624&h=2472&fm=webp&q=85"
alt="{{ alt }}"
loading="eager"
decoding="async"
width="203"
height="309"
/>
</a>
<div class="book-meta">
<a href="{{ book.url }}">

19
src/pages/main/music/artists/artist.html
View file

@ -19,7 +19,24 @@ schema: artist
<a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
<article class="artist-focus">
<div class="artist-display">
<img src="https://coryd.dev/.netlify/images/?url={{ artist.image }}&fm=webp&q=85&w=480&h=480&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" width="480" height="480" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ artist.image }}&fit=cover&w=200&h=200&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url={{ artist.image }}&fit=cover&w=400&h=400&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url={{ artist.image }}&fit=cover&w=800&h=800&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url={{ artist.image }}&fit=cover&w=1200&h=1200&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url={{ artist.image }}&fit=cover&w=1200&h=1200&fm=webp&q=85"
alt="{{ alt }}"
loading="eager"
decoding="async"
width="480"
height="480"
/>
<div class="artist-meta">
<p class="title"><strong>{{ artist.name_string }}</strong></p>
{%- if artist.favorite -%}

20
src/pages/main/watching/movie.html
View file

@ -12,7 +12,25 @@ schema: movie
{%- endcapture -%}
<a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
<article class="watching-focus">
<img src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fm=webp&q=85&w=768&h=432" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="768" height="432" />
<img
srcset="
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url={{ movie.backdrop }}&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
width="768"
height="432"
/>
<div class="watching-meta">
<p class="title"><strong>{{ movie.title }}</strong></p>
{% if movie.rating %}<p class="rating">{{ movie.rating }}</p>{% endif %}

20
src/pages/main/watching/show.html
View file

@ -13,7 +13,25 @@ schema: show
{% assign lastWatched = show | getLastWatched %}
<a class="back-link-header link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a>
<article class="watching-focus">
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fm=webp&q=85&w=768&h=432" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="768" height="432" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fit=cover&w=256&h=144&fm=webp&q=85 256w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fit=cover&w=512&h=288&fm=webp&q=85 512w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fit=cover&w=1024&h=576&fm=webp&q=85 1024w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fit=cover&w=2048&h=1152&fm=webp&q=85 2048w
"
sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px,
(max-width: 1000px) 1024px,
2048px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/shows/backdrops/backdrop-{{ show.tmdb_id }}.jpg&fit=cover&w=2048&h=1152&fm=webp&q=85"
alt="{{ alt }}"
class="image-banner"
loading="eager"
decoding="async"
width="768"
height="432"
/>
<div class="watching-meta">
<p class="title"><strong>{{ show.title }}</strong></p>
{% if lastWatched %}<p class="sub-meta">Last watched on: {{ lastWatched | date: "%B %e, %Y" }}</p>{% endif %}

20
src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
View file

@ -203,7 +203,25 @@ 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.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=768&fm=webp&q=85" class="image-banner" alt="Albums and artists" loading="lazy" decoding="async" width="768" height="869" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&fit=cover&w=200&h=226&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&fit=cover&w=400&h=452&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&fit=cover&w=800&h=904&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&fit=cover&w=1200&h=1356&fm=webp&q=85 1200w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1200px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&fit=cover&w=1200&h=1356&fm=webp&q=85"
alt="Albums and artists"
class="image-banner"
loading="lazy"
decoding="async"
width="768"
height="869"
/>
[^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.

20
src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md
View file

@ -9,7 +9,25 @@ 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.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&w=1000&fm=webp&q=85" class="image-banner" loading="eager" decoding="async" alt="A diagram of my Fastmail workflow" width="1000" height="733" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&fit=cover&w=250&h=183&fm=webp&q=85 250w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&fit=cover&w=500&h=367&fm=webp&q=85 500w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&fit=cover&w=1000&h=733&fm=webp&q=85 1000w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&fit=cover&w=2000&h=1466&fm=webp&q=85 2000w
"
sizes="(max-width: 450px) 250px,
(max-width: 850px) 500px,
(max-width: 1000px) 1000px,
2000px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/fastmail-workflow.jpg&fit=cover&w=2000&h=1466&fm=webp&q=85"
alt="A diagram of my Fastmail workflow"
class="image-banner"
loading="eager"
decoding="async"
width="1000"
height="733"
/>
## Alias-specific rules

20
src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
View file

@ -66,6 +66,24 @@ Rendering the output is as simple as:
Leaving us with:
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&w=768&fm=webp&q=85" class="image-banner" alt="Albums I'm looking forward to" loading="lazy" decoding="async" width="768" height="383" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&fit=cover&w=200&h=100&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&fit=cover&w=400&h=200&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&fit=cover&w=800&h=400&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&fit=cover&w=1600&h=800&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/album-releases.jpg&fit=cover&w=1600&h=800&fm=webp&q=85"
alt="Albums I'm looking forward to"
class="image-banner"
loading="lazy"
decoding="async"
width="768"
height="383"
/>
[^1]: At this point, a dev playground.

18
src/posts/2023/now-page-grouping-episodes-of-same-show.md
View file

@ -12,7 +12,23 @@ 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.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&w=768&fm=webp&q=85" class="image-banner" alt="Grouped TV episodes" width="768" height="286" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=200&h=75&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=400&h=150&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=800&h=300&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=1600&h=600&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/grouped-tv.jpg&fit=cover&w=1600&h=600&fm=webp&q=85"
alt="Grouped TV episodes"
class="image-banner"
width="768"
height="286"
/>
{% raw %}

20
src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md
View file

@ -168,6 +168,24 @@ 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.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&w=768&fm=webp&q=85" class="image-banner" alt="Now playing" loading="lazy" decoding="async" width="768" height="235" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&fit=cover&w=200&h=61&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&fit=cover&w=400&h=122&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&fit=cover&w=800&h=245&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&fit=cover&w=1600&h=490&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/now-playing.jpg&fit=cover&w=1600&h=490&fm=webp&q=85"
alt="Now playing"
class="image-banner"
loading="lazy"
decoding="async"
width="768"
height="235"
/>
[^1]: Plus explicit conditions matching David Bowie and Minor Threat.

20
src/posts/2023/optimizing-for-performance-with-eleventy.md
View file

@ -126,6 +126,24 @@ 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:
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&w=1000&fm=webp&q=85" class="image-banner" alt="Pagespeed scores for coryd.dev/now" loading="lazy" decoding="async" width="1000" height="484" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&fit=cover&w=250&h=121&fm=webp&q=85 250w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&fit=cover&w=500&h=242&fm=webp&q=85 500w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&fit=cover&w=1000&h=484&fm=webp&q=85 1000w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&fit=cover&w=2000&h=968&fm=webp&q=85 2000w
"
sizes="(max-width: 450px) 250px,
(max-width: 850px) 500px,
(max-width: 1000px) 1000px,
2000px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/page-speed.jpg&fit=cover&w=2000&h=968&fm=webp&q=85"
alt="Pagespeed scores for coryd.dev/now"
class="image-banner"
loading="lazy"
decoding="async"
width="1000"
height="484"
/>
[^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines.

20
src/posts/2023/road-to-madness-apple-music-charts.md
View file

@ -132,7 +132,25 @@ _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.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&w=768&fm=webp&q=85" class="image-banner" alt="Charlie Day standing in front of charts" loading="lazy" decoding="async" width="768" height="488" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&fit=cover&w=200&h=127&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&fit=cover&w=400&h=254&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&fit=cover&w=800&h=508&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&fit=cover&w=1600&h=1016&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/charlie.jpg&fit=cover&w=1600&h=1016&fm=webp&q=85"
alt="Charlie Day standing in front of charts"
class="image-banner"
loading="lazy"
decoding="async"
width="768"
height="488"
/>
"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.

20
src/posts/2024/adventures-in-self-hosting-data.md
View file

@ -24,7 +24,25 @@ Trakt's backups are in JSON so I went to work coercing them into CSVs to upload
- For movies I wanted to track when I last watched them, title, year, my play count and whether I'd collected it or considered it a favorite.
- For TV shows I kept a similar data set and linked it to an episodes table via the `tmdb_id`. I used this ID to link out to [TMDB](http://themoviedb.org) and simplify my image URLs.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/watched-media-schema.png&w=768&fm=webp&q=85" class="image-banner" loading="lazy" decoding="async" alt="A diagram of my watched media tables" width="768" height="333" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/watched-media-schema.png&fit=cover&w=200&h=87&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/watched-media-schema.png&fit=cover&w=400&h=174&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/watched-media-schema.png&fit=cover&w=800&h=347&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/watched-media-schema.png&fit=cover&w=1600&h=694&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/watched-media-schema.png&fit=cover&w=1600&h=694&fm=webp&q=85"
alt="A diagram of my watched media tables"
class="image-banner"
loading="lazy"
decoding="async"
width="768"
height="333"
/>
The watched data for [my now page](https://coryd.dev/now) is now sourced from these tables and I've built out [a dedicated watching page](https://coryd.dev/watching/). The hero image is randomly selected from my favorite movies at built time, as are the 6 TV shows and movies in their respective favorite sections.

18
src/posts/2024/building-a-scrobbler-using-plex-webhooks-edge-functions-and-blob-storage.md
View file

@ -9,7 +9,23 @@ I've written before about [embedding music into my site](https://coryd.dev/posts
I could have kept depending on Last.fm and — don't get me wrong — I love Last.fm. It's one of those valuable, legacy services that's hanging on with a rich user base and historical recommendations. I'm going to keep scrobbling data there and to ListenBrainz[^1].
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&w=768&fm=webp&q=85" class="image-banner" alt="A diagram of the scrobbling architecture" width="768" height="384" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&fit=cover&w=200&h=100&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&fit=cover&w=400&h=200&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&fit=cover&w=800&h=400&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&fit=cover&w=1600&h=800&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/scrobbler.png&fit=cover&w=1600&h=800&fm=webp&q=85"
alt="A diagram of the scrobbling architecture"
class="image-banner"
width="768"
height="384"
/>
What I've long wanted is something that sits on infrastructure I control, stores my own data and lets me present roughly the same data. Given that Plex will issue outbound webhooks, I thought I'd set up an edge function over at Netlify and point a webhook at it to see what I could do with the inbound payload. What Plex sends is fairly lightweight and ended up needing to be read in from form data on the `POST`, but it was enough to work with.

18
src/posts/2024/handling-images-with-b2-netlify-image-cdn-hazel-mountain-duck.md
View file

@ -14,7 +14,23 @@ To simplify file uploads to B2, I mount the bucket for my site using [Mountain D
My music charting feature relies on JSON maps of artist and album metadata — if a new artist or album isn't present in either, it assumes that the image it needs is in the format of `artist-name.jpg` or `artist-name-album-name.jpg`. I store the canonical copies of these image files in a separate GitHub repo and have Hazel watch the `artist` and `album` directories contained therein. It renames the files to match the aforementioned format, strips characters that typically break URLs and copies them to my mounted B2 Bucket.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&w=768&fm=webp&q=85" class="image-banner" alt="An example of my album art Hazel workflow" width="786" height="295" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&fit=cover&w=200&h=75&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&fit=cover&w=400&h=150&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&fit=cover&w=800&h=300&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&fit=cover&w=1600&h=600&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-hazel-rule-example.png&fit=cover&w=1600&h=600&fm=webp&q=85"
alt="An example of my album art Hazel workflow"
class="image-banner"
width="786"
height="295"
/>
---

20
src/posts/2024/improving-my-self-hosted-scrobbling-implementation.md
View file

@ -29,7 +29,25 @@ I had data for each, structured as JSON. I wrote some ugly node scripts (I'll sp
I imported those CSVs into their respective tables, and worked my way to connections between the tables that look like this:
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/supabase-schema.png&w=1000&fm=webp&q=85" class="image-banner" loading="eager" decoding="async" alt="A diagram of my scrobbling tables" width="1000" height="886" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/supabase-schema.png&fit=cover&w=250&h=221&fm=webp&q=85 250w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/supabase-schema.png&fit=cover&w=500&h=443&fm=webp&q=85 500w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/supabase-schema.png&fit=cover&w=1000&h=886&fm=webp&q=85 1000w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/supabase-schema.png&fit=cover&w=2000&h=1772&fm=webp&q=85 2000w
"
sizes="(max-width: 450px) 250px,
(max-width: 850px) 500px,
(max-width: 1000px) 1000px,
2000px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/supabase-schema.png&fit=cover&w=2000&h=1772&fm=webp&q=85"
alt="A diagram of my scrobbling tables"
class="image-banner"
loading="eager"
decoding="async"
width="1000"
height="886"
/>
The connections between the tables allow me to query data specific to a given listen's artist or album — data is stored in a given table where it makes the most sense: artist `mbid`s with artists, `genre`s with artists and so forth. I can then retrieve that data, provided I have a valid listen, using Supabase's select syntax: `artists (mbid, image)` or `albums (mbid, image)`.

20
src/posts/2024/on-getting-tattooed.md
View file

@ -28,7 +28,25 @@ Each piece was important to me when I got it and remains important to me now. Th
{% capture fallbackIcon %}{% tablericon "photo" "A photo of the Sturgill Simpson-inspired half sleeve referenced above." %}{% endcapture %}
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&w=768&fm=webp&q=85" class="image-banner" alt="A photo of the Sturgill Simpson-inspired half sleeve referenced above." loading="lazy" decoding="async" width="768" height="686" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&fit=cover&w=200&h=179&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&fit=cover&w=400&h=358&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&fit=cover&w=800&h=715&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&fit=cover&w=1600&h=1430&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/half-sleeve.jpg&fit=cover&w=1600&h=1430&fm=webp&q=85"
alt="A photo of the Sturgill Simpson-inspired half sleeve referenced above."
class="image-banner"
loading="lazy"
decoding="async"
width="768"
height="686"
/>
[^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!

20
src/posts/2024/this-is-my-favorite-band.md
View file

@ -7,7 +7,25 @@ tags:
---
I've called the same band my favorite for a long time and, the older I get, the less likely I feel that designation is to change.<!-- excerpt -->
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/nmn.jpg&w=768&fm=webp&q=85" class="image-banner" alt="Albums and artists" loading="eager" decoding="async" width="768" height="512" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/nmn.jpg&fit=cover&w=200&h=133&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/nmn.jpg&fit=cover&w=400&h=267&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/nmn.jpg&fit=cover&w=800&h=533&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/nmn.jpg&fit=cover&w=1600&h=1067&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/nmn.jpg&fit=cover&w=1600&h=1067&fm=webp&q=85"
alt="Albums and artists"
class="image-banner"
loading="eager"
decoding="async"
width="768"
height="512"
/>
This is my favorite band: [NoMeansNo](https://en.wikipedia.org/wiki/Nomeansno).

20
src/posts/2024/what-song-is-in-your-head.md
View file

@ -6,7 +6,25 @@ tags: ['music']
---
I saw this carved into a table in Austin once and it — like many songs — has been stuck in my head ever since. I'll get hooked on a song and circle back to that roughly carved message.<!-- excerpt -->
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fm=webp&q=85&w=768" alt="What song is in your head?" class="image-banner" loading="eager" decoding="async" width="768" height="256" />
<img
srcset="
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fit=cover&w=200&h=67&fm=webp&q=85 200w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fit=cover&w=400&h=133&fm=webp&q=85 400w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fit=cover&w=800&h=267&fm=webp&q=85 800w,
https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fit=cover&w=1600&h=533&fm=webp&q=85 1600w
"
sizes="(max-width: 450px) 200px,
(max-width: 850px) 400px,
(max-width: 1000px) 800px,
1600px"
src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fit=cover&w=1600&h=533&fm=webp&q=85"
alt="What song is in your head?"
class="image-banner"
loading="eager"
decoding="async"
width="768"
height="256"
/>
I've had songs and albums stuck in my head dating back to my childhood, primarily tracks from [*The Traveling Wilburys Vol. 1*](https://en.wikipedia.org/wiki/Traveling_Wilburys_Vol._1) — Tweeter and the Monkey Man, Handle With Care — they all take turns getting stuck in my head.