The 2022 Redesign

... and here is a quick summary.

... why?

This site, once upon a time, started out as a Hugo one; the title page mostly consisted of a list of posts, in tiny boxes, with a picture added. Later, as it ended up being written by hand instead, I concluded that doing this by hand is complicated, so I started writing a generator in Lisp that does it, together with image thumbnailing.

I did actually make it work (... the front page was a generated one for the longest time); this being Lisp though, getting to run one time wasn't really equivalent to having a piece of code that you can run from the command line in a simple way. Thus, it wasn't really being run. Instead, there was an ugly iframe that also served as a "recommended articles" box (see below); this I just updated by hand. Along the (hand-written) RSS feed.

Eventually though, the site got a proper RSS feed generator... so... we might just as well fix up the title page automatically?

Which is an excellent opportunity to just change up everything again.

CSS

First, I was aiming at something simpler than the "tiny squares" I had; they do look good when there is text and images both (and I was kinda proud of the multi-column grid that regroups itself into a single one on mobile), but... just titles with text only look less pretty. So, similarly to the RSS case, I decided to take a look at Joelchrono12's site (as it had something similar going on to what I had in mind).

The CSS in there did remind me of one of Kev Quirk's projects though: ... a CSS framework that makes things look reasonable by default?

And thus, enter Simple.css, which, as of the writing of this article, is being used with zero changes, essentially. I did fit in the famous rotating GL cube, too! Otherwise though... the site is definitely not going to stand out design-wise, but it's actually readable and it can switch between light and dark mode! And I get to not think about design for a while. Thanks Kev!

Templating

This is the fun part. Namely... finally, things work as described in HTML in HTML Extreme Edition": the front page template is just a HTML file. Like, seriously, it's just a random file in the actual site directory; there isn't even a "source" and "target" for generation. Then, here comes the entire generator code:

(defun generate-title-page ()
  (let ((template-path (merge-pathnames *the-root*
                                        (make-pathname :name "index_2022" :type "html")))
        (output-path (merge-pathnames *the-root*
                                        (make-pathname :name "index" :type "html"))))
   (with-open-file (template-file template-path)
     (let* ((html (plump:parse template-file))
            (lquery:*lquery-master-document* html)
            (spinneret:*html-style* :tree)
            (article-list
              (with-html-string (loop for article in *all-articles*
                                      do (progn
                                           (:span (:a :href (slot-value article 'relpath)
                                                (slot-value article 'title))
                                                  "(" (slot-value article 'date-string) ")"
                                                  (:br)))))))

       (lquery:$ "#articles"
         (html article-list))

       (with-open-file
           (output-file output-path
                        :direction :output
                        :if-does-not-exist :create
                        :if-exists :supersede
                        :external-format :utf-8)
         (plump:serialize html output-file))))))
          

We just read it in as a HTML file, replace the article list, and write it out again. We could even do it in-place, but... maybe test it out first.

Of course, there is the code to extract data from the articles themselves, but we had that for RSS feeds already.

... comments welcome, either in email or on the (eventual) Mastodon post on Fosstodon.