Nothing like writing how your site is built (and a little free time) to make you want to completely redo everything. So, let's dig into what's new.
This site is an infinite grid. In the original new site, who dis post from nearly 3 years ago, I mention how that works.
The approach to rendering today hasn't changed too much. However, while I originally left all the panels offscreen in the DOM, it turns out some browsers don't like that too much (I'm looking at you mobile safari).
So instead, I schedule panels for deletion that are no longer visible, taking into account the zoom level (which may mean that multiple panels are visible at any given time).
In that new site, who dis post, I mentioned:
I load the whole site on every page load which isn't ideal. If I stick at this blogging thing for a while, I will probably write a small server to better handle loading panels as needed.
Well, nearly 3 years later, I haven't written all that much (<50 kB of gzip'd text). Turns out loading the whole site on every page load will still work well for awhile.
But the ability to load individual panels is still useful for supporting nojs visitors that otherwise had a broken experience.
So instead of having a codegen step that generates a static version of the site and picking the appropriate panel client-side, I now use the Deno JS runtime and package manager (with Oak middleware) to render the appropriate panel server-side.
Previously, my blog posts were written in html and I used nginx's server side includes to add them to the page.
But with my recent switch to using Obsidian during week 0 for my private notes, I found that I wanted to use markdown for my public journal, as well.
After building my own format to support a metadata-embedded version of markdown (with different emojis for different categories (e.g. 📍 for coordinates, 🎨 for panel type, etc)), I learned about about YAML Front Matter and just went with that instead.
As part of the build step for the site, the YAML is stripped and parsed using the jonschlinkert/gray-matter library. The remaining markdown content is rendered with the markedjs/marked library.
A minor feature I've wanted for awhile (but never got around to) are links back to the panels that linked to the panel you're on. So yep, added those too.