chore: image improvements
This commit is contained in:
parent
77c9a85296
commit
d27fac4b6b
29 changed files with 650 additions and 44 deletions
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -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)`.
|
||||
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
Reference in a new issue