Rebuilding bakaitis.com with VueJS

Shifting from Next to Nuxt

I had been using Next for my site since earlier this year, and while I think it's a solid platform I had not really experimented with other frameworks in a few years. I spent some time making small VueJS apps for my kids, so they could practice letters and typing and similar easy stuff on a local network. But that's different from having a full SSG site hosted in the cloud.

Moving from React/Next to Vue/Nuxt was pretty easy given how little code is needed for this site. The home page and the blog posts are two layout/page combinations. There is no interactivty or client-side feature that needed to be converted. The only thing that needed to change was accessing the content - I had it on SanityCMS but wanted to try moving to Markdown to see how that works (spoiler: it works OK, but I'm not a true believer). The most difficult thing? Remembering to find-and-replace className with class. :)

Moving from SanityCMS to Markdown

SanityCMS is a really great platform. I have enjoyed working with it, professionally, and their approach to building schema and an editor takes a little to get accustomed to it but once you do it's really powerful. Portable Text is pretty cool, again with the caveat that you need to take some time to think through how it's structured, how to parse it, and then how to apply it to a site (especially when using a CSS framework like TailwindCSS).

But, if I'm going to take a moment to reboot the code for the site then this is a good moment to try out a more localized approach to content, using Markdown. I think that tools like Sanity make more sense for content management, but only if you have multiple editors or a large body of work online. I have (at this moment) two articles. I might try one of the other headless CMSs at some future point, but probably not until I have over 50 articles here (should I get there again).

CSS & Tailwind

For both Sanity's Portable Text and nuxt/content converting Markdown to HTML, styling is a pain. The way CSS works is great, but I'm not a designer nor am I well-versed in CSS. Tailwind helps with styling when I'm writing individual components, but I have a few things I'm thinking about as I'm using Tailwind more.

First, I'm thinking about how VueJS's approach to styling in a component might make Tailwind less beneficial. Tailwind helps by creating a styling shorthand that people like me find useful. But, if I'm editing smaller chunks of CSS and VueJS gives me the handy <style> option then maybe Tailwind isn't bringing as much to the table as it could.

Second, using Tailwind Typography is both awesome and annoying. The prose class is really useful but creating a theme for things like Markdown-to-HTML blocks is a hassle. At that point, I might as well be writing plain old CSS which leads back to Vue's approach.

There's more. I don't think Tailwind is a bad idea or anything. I like it, given my experience with CSS and the fact I'm unlikely to do much more with it than absolutely necessary. But there are trade-offs to every solution and I'm starting to get a feel where Tailwind's edges are located.

More to consider, more to write about (later).