A website for Boba Quest 2025

tl;dr: I've set up a new website for Boba Quest 2025 🧋: https://legoktm.com/bobaquest/.

Now that I have two months of reviews under my belt, I wanted to create a proper website to make it easy to discover them.

Taking inspiration from Everything is Everything, I wanted a similar layout with a big map of all the reviews and then explanations of the project itself.

Creating a static site#

I figured all of this could be built as a static site and a bit of JavaScript. I've had my eye on Zola for a while, since it's written in Rust and by the same author as Tera, my preferred templating library.

It ended up being a great fit, largely because it has builtin support for loading content from a TOML file via a load_data function. I store all of the review metadata in a single file, which drives the entire site.

My main criticism is that Zola doesn't support so-called "ugly URLs" like foo.html (it only supports foo/). I guess I'm weird in that, as this blog demonstrates, I like URLs that end with .html.

The last thing I did was set a Content-Security-Policy. It's relatively strict (I think), except for needing to allow style-src-elem 'unsafe-inline' because Leaflet's popups need it.

Not handwritten#

I started by asking Claude to generate such a website for me (chat transcript), and kept slowly refining with prompts. While normally Claude is really good at letting you preview HTML websites, its own CSP prevented any of the map tiles from loading so I had to copy it locally and preview it that way.

I'm reasonably proficient at HTML/CSS/JS, but this was a much more fun way to design a website. Instead of having to focus on syntax, I could just tell it to shape it how I wanted, plus making my own manual improvements here and there.

People, often rightfully so, criticize AI-generated content as lacking creativity, but I feel that using Claude allowed me to design the website exactly how I, a human, wanted it to look like, and not get bogged down fighting syntax things.

I eventually hit Claude's output limit (since it kept repeating the whole HTML file) and had to start branching off into individual chats, like adding an escape key handler and learning about vh units in CSS (big TIL for me). I hit the limit again when I added the "Recent reviews" sidebar.

That was roughly the point I checked it into Git, so you can browse how the initial version looked like. It's come quite a long way since then.