iris why did you make the whole site again

just over like 2 years ago i made this blog post  about making a hacky wysiwyg  editor so i could update my blog without ever writing html again. in an incredibly funny turn of events that was the last blog i ever wrote on the original site.

screen shot of the old wysiwyg editor on legacy irisnet

this was likely because in some time between then and (by my evil commit logs) august that year, i went insane and let the demon within take control convincing me i need to rewrite the entire site in vue and astro with a whole payload cms  (content management system) stack. it has been roughly 2 years since then and i feel like i need to talk about it. this will be very lame, nerdy and peak webdev hell, sorry

payload

the root of this insanity is payload - an open source cms that allows me to write site content through a gui without having to touch the code, unless its to add or work on existing features. this makes it nice and accessible for editing sites

screenshot of payload cms editing this blog

however, in the 2 years since i started this rewrite payload updated a whole major version, rebasing their entire stack on nextjs . i dont care about nextjs and react is insane to me so this kind of sucks, but in order to try to keep this system maintainable and secure in the future (i want to reuse this cms for more projects) i needed to migrate. this took 2 weeks of going insane over how nextjs' file routing works but here we are. im sure they had a good reason for this but this kind of made me reconsider payload for a bit, but now that im done migrating its not so bad, and there are still some nice features payload offers like live preview (when i get that working)

vue + astro

vue is a framework i have a fair bit of experience in, it does nice web framework things like data reactivity (rerendering html when data changes) and component templating, allowing reuse of common html and javascript. the problem with web frameworks like vue is that on their own, they run a lot of javascript to do all this, often generating entire pages from nothing on page load, which can be hefty on old hardware or even completely inaccessible if your browser doesnt support javascript.

this is where astro comes in, they dont make it fucking clear on their page but astro is essentially a static site generation (weird code that generates normal html files) and/or server side rendering (computer somewhere that generates html on the fly) framework that has a bunch of adapters for various other frameworks like vue. for my purposes i will only talk about astro as an ssg (static site generation) framework. the benefit of ssg is that it allows you to prerender a lot of the javascript that would run at load, reducing the amount that runs when the user accesses the page and still presenting something where javascript isnt available. where needed, astro allows you to fully hydrate (run javascript on html) to do more advanced logic, like the music player in the sidebar

screenshot of site source showing evil astro code

my only gripe with astro is that when i do actually need to hydrate something, it generates some insane fucked up html with all the data it needs to do it. most people will not notice this, but im on neocities and the knowledge that someone will be curious enough to look at the site source to see this spaghetti makes this feel a bit anti indie web. thankfully there are ways around this by extending astro's hydration logic to actually clean up after itself, but i still need to get to that

was it worth it?

kinda yeah, its really easy to edit the site now without touching html, and having the cms to manage content separate from my code makes the code a lot more maintainable. i think in future projects i might consider something lighter than a framework like astro + alpinejs, which gives me the templating i need with some logic from alpine, but for this site i think i can work with this