Widgets!!

Leveraging static data in the post-myspace era

Something kinda cool about static blogs is that unlike posts they are relatively fixed in time. i wrote this on a chill sunday that definitely did not feel like 8C (Americans, you also get fahrenheit, I actually scrape those and the have to convert it)

Widgets normally display live stuff but they also work really well for 'hey this is what was going on back then', journal style. Plus I always wanted to have a little music player on my page. It still won't play music but thats hopefully the easy part, songs are youtubes so i can just stick it in that sticky footer. 👇.

The code is really dumb if you are curious. Since fetching the data happens once i wanted to try out npm subpackages, monorepo style. I had to set this up when doing salsa's food scale and it was a terrible time. It was easier this time thanks to the power of copypaste.

It's hecka cool because now i can throw all the scraping and mangling garbage i want in here while keeping the website 'pure'

How does it work?

Very dumb stuff. i got a little command npm run fetch i can run to download all the data the widgets need, this goes through some transformers (here's bsky). After that it saves a timestamped json into the website folder.

When i run the posts I just go through all of them and find the closest one in time then yeet it to the renderer. It's all really silly.

As you may have imagined, the hardest part was getting typescript to cooperate. It did tho and now it can autofill stuff when I am authoring the widgets!!

I also took the chance to improve some stuff around the blog, added descriptions, there's even a secret index page if you can find it! By the way - this is super unrelated but css is getting crazy. See those wavy underlines on the links? see how the color is slightly lighter than the link color? But posts have custom colors right?

text-decoration-color: hsl(from currentcolor h s l / 50%);
/*
lightens whatever color this is inheriting (so text color) 
in real time.
*/

text-decoration-color: hsl(from currentcolor calc(h + 50) s l);
/*
this will hue shift it?? amazing
*/

Wild stuff. It's almost tragic everybody moved to radix and tailwind in time for gpus to do all the frontend because they really are missing out.

Anyway!!! real proud of this one, have a happy sunday, don't judge my steam collection too harshly. ta