My new theme, is working well enough that I have now republished my website using it. It also means that I have webmentions working as well. I have some rough edges to sort out but its definitely a MVP (minimum viable product).

It feels as if a cast of thousands have been involved in the this new theme. I have so many people to thank.

First there is Aaron Parecki. I had been watching his videos to help me get into doing my video production (for the BusDev@Auckland seminar series) but then I stumbled into his website, and was introduced to the world of IndieWeb and webmentions. Aaron's site webmention.io also provided the glue to get webmentions working here.

Soon after my first foray into webmentions, I got a mention by Robbi Nespu. That was important not just because of the excellent advice Robbi gave me, but it also gave me the impetus to charge ahead with trying to fully implement webmentions. Looking at Robbi's site, I still need to do more work to get things like 'bookmarks', 'rsvps', and other IndieWeb things working here.

That all prompted me to start (re)theme-ing this site to better accommodate webmentions. As I say, it works, but there is still more to be done.

I have now completed step 2 in building the new theme for this site; The IndieWeb tags to support the h-entry, and h-card entities are working again, as is the bits to get rel="me" going.

At the same time, I have made the 'mobile' version of the site, a little less clunky. So, far so very good.

Whilst out walking around Newmarket we went past Gordon Harris, and popped in to have a look. I had been looking elsewhere at the Staedtler Resina fountain pen, and noticed that here it was in a clearance sale. That was too much to resist. The colour choices were limited (hence the black), but they did have the pen with a fine nib (anything broader would have been a too much for me). So, $107 later I have this pen.

As I continue to develop my new template I tackled the issue of responsive design; that is, displaying nicely regardless of the device viewing the site. In my previous themes I made no attempt at making them responsive. They were built to be displayed on a computer screen, and that was about it.

This time, however, I done a little work to make it 'somewhat' responsive.

The modern doctrine around site/web design is that one should do mobile first, and then do whatever magic is needed to make the theme work on other screen sizes. Not so for me. My initial design was for a full-size computer screen, which I then modified to work on a mobile screen.

In 'laying out' the page to be displayed, I have used a variety of techniques. When I first started designing web pages I used tables; that tells you how long ago that was. Then, with the advent of stylesheets (and CSS). CSS saw me starting to use 'floats' to position things on the page. That soon got messy so I started to use other people's framework, and for a sometime I used Foundation.

However, such frameworks (be it Foundation or Bootstrap) seemed to be something of an over kill, and pretty heavyweight. That together with the steep learning curve saw me abandoning other people's frameworks and using my own based on flexboxes.

But things have moved on since flexboxes became popular, and now we have CSS grids. So, I've bitten the bullet and have spent some time learning how to use them.

The first phase creating a new theme is complete. The site renders "ok", and I am pretty pleased with how it looks. It feels clean and elegant.

My current theme, NewPapyrus, looks rather like a page printed on paper; i.e., like this:

When I first saw a site that looked like this, I quite liked it. However, whilst it does the job, it isn't elegant. It's functional, but I have come to think that, aesthetically, it is lacking. After all, what is the point in replicating paper on a screen?

Looking at typographic sites such as The Ministry of Type, I am inspired to do something different to what I have (and maybe more like them).

I did a half-hearted port from Markdown to Orgmode for the underlying text of this site. And I also did a half-hearted port to using Hugo page bundles (in anticipating of getting webmentions working).

But the time has come for me to fix things up properly.

First of all, I need to covert my text files from being formated using markdown to be using Orgmode. Enter pandoc.

But that mucks up my frontmatter (that's really important to Hugo). So, enter sed.

The two scripts that do the heavy lifting, are a shell script ConvertToOrg.sh

for INFILE in $(grep -L "^#+date" */*.org)
do
 echo "Covertingt from Markdown: " $INFILE
 export OUTFILE=$INFILE.txt
 pandoc -f markdown -t org -o $OUTFILE $INFILE

 echo "Fixing frontmatter in: " $OUTFILE
 sed -f fixFrontmatter.sed  $OUTFILE > $INFILE
done

and the sed script, fixFrontmatter.sed, looks like this:

Now that I am writing all my blog posts using orgmode, I wanted a way to create the file I need for a new post automatically. I couldn't find quite what I wanted, so here is my attempt and writing some elisp to make it happen.

  (defun s-dashed-words (words)
    (downcase
     (replace-regexp-in-string "[^a-z0-9]+" "-" words)))

  (defun ps/new-hugo-post (title &optional)
    "Create and visit a new draft blog post for the prompted TITLE.

     The file for the blog post conforms to the path schema of posts
     for petersmith.org"
    (interactive "sTitle: ")

    (let* ((post-dir (concat ps/data "Code/Websites-source/petersmith/content/blog/"
                               (format-time-string "%Y%m%d-") (s-dashed-words title) "/"))
           (post-fpath (concat post-dir "index.org"))
           (post-slug (s-dashed-words title))
           (post-date (format-time-string "%+4Y-%m-%dT%H:%M:%S%:z")))

      (make-directory post-dir t)

      (write-region (concat
                 "\n#+title: " title
                 "\n#+date: " post-date
                 "\n#+lastmod: " post-date
                 "\n#+categories[]: Tech"
                 "\n#+tags[]: "
                 "\n#+slug: " post-slug
                 "\n#+draft: False"
                 "\n\n")
                nil (expand-file-name post-fpath) nil nil nil t)

  (find-file (expand-file-name post-fpath))))

A good chunk of the code came from a post by Jeremy Friesen at Take on Rules. Thanks! (And that reminds me, I still have to get webmentions working).

I modified Jeremy's code a bit to allow for the fact that I use Hugo's page bundles.

I have been using a Confluence wiki space in my teaching of MGMT300 since at least 2013.

Before that I used a self-host version of Mediawiki. That worked really well, and I had it integrated with our SSO (Single Sign On) which was Shibboleth at that time. I only stopped using Mediawiki when they discontinued the blogging component; I guess it wasn't really needed for Wikipedia (which runs on Mediawiki).

Before that I used self-hosted MovableType blogs.

It all came about because I got one or two students in the class to start blogging about what they were doing with Mikesbikes (which was the central experiential component of MGMT300). This grew into me having the whole class do it and framing it as a learning journal.

Anyway, tens of thousands of student posts later (say 10 years, of 10 posts per semester, across 100 students is about 10,000 posts plus double that amount of comments makes it 30,000 contributions to the wiki), I'm finally moving away from the course that Darl Kolb, Joline Francoeur, and I first re-invented in 1999. That's a long time to be teaching a course (especially as it has remained largely unchanged – the basic formula worked so well).

The new folk taking over the course—who should do an excellent job—won't be using the wiki. So, I have backed up the wiki, and kicked of the deletion of the MGMT300 wiki space.

I guess it's the end of an era.

I use a feature of Hugo called page bundles.

With pages bundles, resources such as images are kept in the same directory as the content of a post. This keeps things a little more simple, but it does mean that OrgMode's linking system is broken.

Until now, to include an image I've been using a shortcode such as this:

{ {< img src="AaronParecki-Sparklines.png"
   title="Screenshot of sparklines from Aaron Parecki"
   width="50%" >}}

Which calls themes/NewPapyrus/layouts/shortcodes/img.html

{{ $image := .Page.Resources.GetMatch (.Get "src" )}}
{{ $title := .Get "title" }}
{{ $class := .Get "class" }}
{{ $alt   := .Get "alt" }}
{{ $width := .Get "width" }}
<figure>
  <img src="{{ $image.RelPermalink }}" alt="{{ $alt }}" class="{{ $class }}" width="{{ $width }}" />
  <figcaption><h4>{{ $title }}</h4></figcaption>
</figure>

That does the job.