I refactored how this site generates posts from Markdown and then reverted it because the modern web is annoying

The way this website works is that all my blog posts are written in Markdown which is converted into a web page at build time. At least, that was the original idea.

This is going to get technical, sorry. I'm going to do my best to simplify junk and remove jargon but I have a feeling it's going to get out of hand.

The way it actually works is that the Markdown is converted into React components when a request is made. Then that stuff is converted into HTML on the server, has a little bit of Javascript tacked on and then sent to your computer. This lets me do all the cool flashy Javascript stuff that people both love and hate. The cool thing is that this site mostly works without Javascript, so go ahead and disable it, I don't mind. The exception is my cocktails tool that is in a constant state of being unfinished. Eventually I'll make it work without relying on Javascript, I just haven't put the effort in yet.

So why is my website so complicated?

In my day job I'm a React developer, and I often like to fiddle with new and trendy React stuff on the weekends. This website is the perfect place for me to tinker. And since I know React well, I can move quickly when I need to customize something.

So what's the thing I reverted?

I wrote a custom parser that would read Markdown files that contained metadata in some front matter (a list of data at the top of the file). It assembled all the data into a format that is then used to generate React components on the fly. The reason it's a custom parser is because it also powers my RSS feed which is also fully custom so that I can serve the full content of my posts as RSS so readers don't need to leave their favorite app.

There's a thing called MDX, which is a goofy hybrid of Markdown and React flavored Javascript. I rewrote all of the generated pages so that they used the MDX parser instead of my custom one, which worked really great when the server ran on my computer. Was able to remove a lot of code and simplify how the pages are generated.

Unfortunately Cloudflare (where this site is hosted) threw a fit because of the Javascript runtime it has. I had it nearly working when I realized that my development environment and hosted environment were becoming substantially different and I decided to pull the plug before it became a maintenance nightmare.

I still have other future dreams for this site

It currently uses Tailwind for CSS, but I've decided that I no longer enjoy working with it. It ends up cluttering up the markup with a bunch of cryptic class names. I plan on removing Tailwind and instead using CSS Modules which moves the styles outside of the Javascript but enables me to have cool bitesize chunks of CSS that is far less likely to collide with other styles.

I want to make this site entirely static. All the Javascript stuff that needs to run to generate this site will all be done at build time before I upload the site to wherever it'll be hosted. Being static means it can pretty much exist on anything that serves a website. Won't need all the crazy fancy stuff that Cloudflare offers. I might even make it generate a version of the site that doesn't contain any Javascript. How cool would it be to have an overly complicated Javascript build system that outputs a small website in basic CSS and HTML that I could have just written by hand?

I want to build a nice music player that will persist across pages so that you can navigate around while listening to my music (I'm aware that this is at odds with the Javascript-free version I mentioned above).

What's the tech?

Here's the nerd stuff.

• Modern Font Stacks
• • Why should I make you download a font when you already have some excellent choices?
• Typescript
• • It makes Javascript good
• Node.js
• • If you've read this far, you probably already knew this
• Next.js
• • I use both the app and page routers because I'm easily distracted
• Markdown
• • Plain ol' Markdown with some front matter in the form of YAML
• Tailwind
• • A clever CSS framework that lets you stack up a bunch of classes instead of having to write CSS
• • I don't care for the clutter
• Cloudflare Pages
• • It's free
• • It automatically builds and redeploys my website when I make code changes
• • It can run beta versions of my code so I can test it
• • It caches pages and since my site rarely changes it doesn't need to run my code that often
• • It feels like overkill but it's fun to tinker with it
• Gitlab
• • It's where my code lives and when I went to go grab this link I noticed that they made their front page all about advertising some AI thing they have going on which is annoying