what…

It’s the end of 2023 and I have made a decision. Enough playing chicken with the tech-hiring bubble - I owe to myself to be the best code plumber I can be! This is not the first time i vowed to give up load-testing Netflix every day after work by rewatching the same show over and over… I plan to instead spend some time doing the only thing I enjoy doing - my job…

✨ programming ✨.

patio11 says that i better leave an artefact on the internet of what I get up to. Maybe it’s to give value to others, to make the internet a better place. Or to influence my credibility in the eyes of strangers (you!) increasing my chances of selling best-practices courses when I get to the top of the soft/eng blogosphere. Anyway…

The artefacts should: - be on the internet so that my friends can see why I’ve stopped leaving the house - be on the internet so that i can get them back if i spill grape fanta on my laptop - be mostly markdown for portability - be without any javscript - be version controlled

With the requirements out of the way let’s talk technology.

Following this impartial evaluation html and css are clear winners on the rot front. I am also pleased with the hispter score .

how

We strayed too far from God’s light - I hope I don’t need to convince you to not edit markup directly. With that in mind, we’re going to: 1. take in markdown files 2. convert them into html files 3. host the static files to some provider

A few gotchas with the conversion: 1. <meta> tags need to be populated to leave others with a nonzero chance of landing on this blog from a google search 2. images have to be bundled in

Nice to haves: 1. an RSS feed - for my open web fighters 2. analytics - for me to languish over on the daily 3. 😎 dark mode (i know, i know… but this is my blog not yours)

convert

if (big if) i have already written a post in my local editor of choice i can use the fantastic library that is Pandoc to turn each into a standalone html file I can link to from the index.html.

pandoc "$mdfile" \
       --section-divs \ 
       --toc 
       -s \ 
       --css="../styles.css" \
       -B header.html \
       -A footer.html \ 
       -o "$DEST_DIR/$filename.html"

The different options: - --section-divs will wrap everything into a section i can style - --toc will generate a table of contents with links to the relevant headings (nice) - -s tells pandoc to make a standalone file i.e <!DOCTYPE html> at the top and stuff * —css my styles * --B and —A append an html chunk to before and after the converted markdown

I loop over all my markdown and call this and yay! I’ve got a page to look at. If you care about details I link the source code at the end. Let’s get to the nice to haves

nice to haves

What nicer way to procrastinate on actual complex projects than more plumbing! I want to: 1. parse the content into an RSS feed by hand 2. scrounge a cheap free tier from smart and industrious people offering an analytics product 3. use modern CSS to match the user’s system light/dark mode settings.

RSS feed

Bad news first. Pandoc does not do RSS. People have built workarounds but this is becoming to look more and more like a feature request for my nascent static site generator. Which I would rather not implement in POSIX shell (just the kinda guy I am). I’ll get back to this.

Analytics

GoatCounter is drag and drop - thank god - I never configured any analytics before. Bummer: It gets blocked by one of my ad-blocks. Easy to unblock but the savvy ad-blocking crowd might come and go from the blog without being noticed. Sad!

Dark Mode

One personal takeaway from this project - css is ok now. Dark mode turns out to be simple:

@media screen and (prefers-color-scheme: dark) {
    color: white;
    background-color: black;
}

Confession: user cannot switch modes at will because that means a button and a button means JavaScript and we’re already at the end of this post and cannot give up now.

mostly markdown blog