This site is built on the ghostwriter template, as ported to HUGO by jbub. Paired with the R package {blogdown} and trusty old RStudio it is a setup that has served me reliably over the years.

And while it is a setup that is simple and well designed, it still requires some attention from time to time, much like the nine hundred years old dwarf axe in Terry Pratchett’s The Fifth Elephant. New blade here, new handle there, a little refreshing of the ornamentation…

A refresh that I recently found necessary was updating the social media ribbon on top to include a link to my Mastodon presence. While I am not a true social media natural I felt a need to hedge my bets given the recent developments on the birdie site.

The ghostwriter template does not support Mastodon out of the box, but at the end it did not require too complex tweaking (did I mention it is both simple and well designed?).

It three steps were necessary:

  • tweaking the <body> part of the header.html partial to recognize & interpret a new parameter mastodon

  • tweaking the <head> part of the header.html partial to use a more current version of Font Awesome icons

  • giving the newly created mastodon parameter a meaning in my config.toml

The header.html partial is located in themes/ghostwriter/layouts/partials directory of your blogdown, and as usual before tweaking it it pays to create a backup copy.

Creating a piece of code handling new parameters is not hard, as you can readily copy-paste the existing implementation of Twitter, LinkedIn or what not. I chose to place the new button between Twitter and GitHub, but it was only an aesthetic choice with little impact on function.

What I found advantageous is including the rel="me" part that Mastodon requires in a backlink to verify a site owner here.

{{ with .Site.Params.mastodon }}
  <a class="button-square button-social hint--top" rel="me" data-hint="Mastodon" title="Mastodon" href="{{ . }}">
  <i class="fa-brands fa-mastodon"></i>
  </a>
{{ end }}

Of course I needed to update the icon class of the button (the fa-mastodon part in code above) to display a nice Mastodon icon, and not some bird or a cat. Which brings us to the second part, which is updating Font Awesome to a more current version.

My template was built on top of 4.7 version of Font Awesome, which is by now somewhat dated. The scope of 4.7 version regarding brands supported is limited, and does not include Mastodon. You will need version 5.0.11 or later for that, the current being 6.2.

Updating to current Font Awesome required some change of logic, as Font Awesome no longer supports a distribution via CDN and I had to set up a kit.

Once I had my kit up & running I swapped the part of <head> of my header partial that linked to CDN of Font Awesome (https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css) for a link to my shiny new kit (you are welcome to copy my code, but note that your kit will have a different name than mine).

<script src="https://kit.fontawesome.com/your_kit.js" crossorigin="anonymous"></script>

This concludes the “tricky” coding part; what remains is setting up a link to Mastodon presence in config.toml. Which in my case means putting

  mastodon = "https://fosstodon.org/@jladata"

in between the other metadata links.

And like that I was done. Two hours of time, including googling (three if I include time spent writing this article and putting it up).