So as I usually do I am starting my redesign in CodePen. I love CP! Its amazing for the rapid prototyping/in-the-browser design that I prefer.
However, it is a frontend tool so there's no build step (this is 99% good!) and sometimes you need/want something like that to test static builds or whatnot. This can't really happen in CP but you can fake it, kinda.
Ultimately, my new site design will replace my old hand-rolled, custom HTMX setup with Astro. This is just going to be easier going forward. I've used Astro a lot and I just want something that works.
In the meantime, I have my new design in CodePen and for the sake of speed, I might just deploy the HTML I have now, before templating it all and porting to that new Astro build I mentioned. This will allow me to get the new design out the door before I really formalize it all.
Given that context, there's still some features I'd like to rapidly add - namely some of my Leaflet blog posts. Obviously with Astro, staticly built on new code deploys, this will be easier. It's Astro's bread and butter - original use case almost. Get data in, render to HTML, blammo, done. But I wanna see how that might look and like I said, I might just deploy my CodePen - client-side only - code for now to just get this thing out the door. To integrate Leaflet posts this way, client-side only, is possible of course, I just need to stitch together some API calls and render some preview content then link out to the full real deal blog which is hosted here.
That sounds pretty easy - and the API part, somewhat undocumented, but whatever, is not too tricky. I played around with the Bluesky/AtProto API tools (link later) and figured out which anonymous endpoint I could use to get the 3 most recent standard.site docs belong to my Leaflet blog. Now I have a JSON response that represents a list of posts, another for each post and the weird tree of nested Leaflet blocks that make up each post.
That later bit is where things got dicey. Rendering each type of block is a chore and there are some libraries to do that at build-time, with or without Astro but none for the browser.
Each type of block requires its own rendering, sometimes recursive and I was really hoping someone had done that work for me. Again, the aforementioned libraries did a bunch of this, but I couldn't use them. So I needed to create my own solution.
Basically using those for inspiration I ported the simple rendering functions into my Codepen and so far so good, the blocks render and now I can have a little section of my site that says 'blog' and loads up the 3 most recent posts, all with some vanilla JS. There's no real fallback except a link to the blog itself, but for now that's a compromise I'm willing to accept.
This process is ongoing and I'm tweaking and this post itself is lacking in some details so hopefully when I'm done I'll revisit and share some code, examples and so forth.
Credits:
Nulfrost's Astro loader code really helped guide what I needed to do: