Website Post-Mortem

It’s been a few days since I launched this site, and I thought it might be worth documenting what I’ve built here, both for my own reference and for anyone curious about the technical (and often insane) decisions that went into it.

Why Another Website?

Good question. I already had a website. It was… fine? But I’ve always wanted a website I actually like and for now this is that site. It has support for .fountain files which is something I’ve recently started caring about deeply, but nothing anyone else probably cares about.

The Stack

This is, unsurprisingly, another 11ty project. I’ve been using 11ty for our theatre websites and I’ve grown quite fond of it¹1. It’s simple, it’s fast, and it works. Mostly. Usually. The whole things is hosted on Cloudflare Pages, so it just automatically builds and deploys when I push to GitHub. Why Cloudflare Pages and not just GitHub pages? I have designs, I swear—this is not just complication for complication’s sake.

The architecture is fairly straightforward:

• Nunjucks templates for layouts
• Markdown for posts and stories
• A custom Fountain processor for theatre scripts (more on this in a moment)
• Pagefind for search
• A frankly irresponsible amount of custom JavaScript for various features

The Fountain Problem

Here’s where things got interesting. I’ve written a lot of theatre scripts in Fountain format (it’s basically markdown for screenplays), and I wanted to be able to just drop .fountain files into my site and have them render nicely. This meant building a custom Eleventy extension.

The solution involved:

1. Parsing Fountain’s key-value metadata
2. Converting the screenplay syntax to semantic HTML
3. Dealing with smart quotes, scene slugs, and all the little formatting quirks that make or break a script

It works! Mostly! There are probably bugs I haven’t discovered yet²2. It can’t handle characters speaking simultaneously yet, but I guess I just have to keep my scripts minimal for the time being, but for my purposes it’s solid enough.

Fonts, Fonts, Fonts

I have gone slightly overboard with font support. The site has an automated font system that scans src/assets/fonts/ directories and auto-generates @font-face declarations based on the folder structure. This means I can just drop a new font folder in and it immediately becomes available site-wide.

Why? I wanted really good font support, but I hate having to write @font-face declarations and I can easily style different blog posts, stories, and plays differently. Will I do this? Time will tell.

Is this necessary? Absolutely not. Did I spend way too much time on it? Yes. Do I regret it? Ask me again in six months when I decide to change some fonts and forget about how this all works.

The Easter Eggs

I love an easter egg, so there are entirely too many. This proved fairly annoying because I didn’t want to set cookies, so they persist via localStorage, something I have no great understanding of. If you break something, let me know.

The Stats Page

I built a /stats/ page that analyses everything I’ve written on this site:

• Total word count, items, averages
• Writing style evolution over time (lexical diversity, reading grade level, sentence rhythm)
• Seasonal patterns and heatmaps
• Language breakdown
• Punctuation personality (how many em-dashes do I use? Too many)
• Title brevity analysis

I love stats and charts, so if there’s an interesting stat you stumble across, please tell me!

Things I’m Still Not Happy With

• The JavaScript is embarrassingly inefficient (and it’ll never get better because I hate JavaScript)
• The fountain parser is not portable at all and doesn’t handle the full fountain spec (this will only get better if it’s something I personally need)

What’s Next?

I should sit down and write content or, at least, go through my Obsidian vault and upload my entire archive. Will I do this? The stars will tell.