Probably Logo

A Hugo render hook for a terminal in CSS

395 words, 2 minutes.

Over the 28 years this website has existed, it’s gone through various iterations with many tools to build it. Static HTML, WordPress, Jekyll, Hugo. Given that my engineering career was grounded in infrastructure, frontend development was mostly a mystery to me. So I’ve often used the excuse of rebuilding this site to learn something the day jobs never exposed me to.

A few years ago I decided I needed to understand CSS, and built a Hugo theme using SimpleCSS. That got morphed into MVP.css, then finally, only last weekend, I swapped it out for TailwindCSS.

There are many positive aspects to using a framework to build software, but these days I think that almost everything in tech is overcomplicated, mainly because of using frameworks for everything. People have lost the art of understanding what they are building. That’s a disadvantage when things go wrong.

To satisfy my curiosity, I ended up doing a frontend web development course last year. Of the many horror show things I was introduced to (in what world is React a good idea?) Tailwind was a balancing act I could get behind.

The trouble with CSS frameworks like Bootstrap and Bulma is they’re massive. Circa 13,000 lines of CSS 😱 If one is trying to build a lean site that is far from the problems of the modern web, that simply won’t do.

So I kept the same look, but moved the highly customised MVP.css theme I had, to Tailwind.

One thing I quite liked the idea of doing was making code blocks look like a terminal. With a smidgeon of help from Claude I came up with this render hook in Hugo:

<div class="overflow-hidden rounded-sm shadow-lg">
  <!-- Mac window header -->
  <div class="flex items-center gap-2 bg-gray-200 px-4 py-2 dark:bg-gray-700">
    <div class="size-3 rounded-full bg-red-500"></div>
    <div class="size-3 rounded-full bg-yellow-500"></div>
    <div class="size-3 rounded-full bg-green-500"></div>
  </div>
  <!-- Code content -->
  <div class="bg-white px-8 py-2 dark:bg-gray-900">
    <pre
      class="overflow-x-auto whitespace-pre-wrap break-words"
    ><code>{{ .Inner }}</code></pre>
  </div>
</div>

Even with Tailwind, this site is still around 70kb for first load. The CSS itself is just under 1,000 lines — actually smaller than it was as bespoke CSS. I can imagine some people will argue HTML ends up looking messy with Tailwind’s utility classes; but I don’t mind that approach here. It’s Hugo templates anyway, and looking at all the ‘control’ of layouts in one file has its advantages.

✍️ Comment by email