So, my last attempt fix a few things around here did not go entirely to plan. There were issues with the footnote rendering (particularly on small screens, and especially when Javascript was not enabled). This weekend, I have gone back to the drawing board, and also gone a lot further (I hope!) with my Webmentions experiments.

Footnotes

The fundamental issue with the footnotes was that the anchors pointing to the footnotes were being rendered on top of the base URL for the site, not the permalink to the single post page that they were on. The littlefoot.js links worked because they were using ‘JavascriptMagic’¹ to display the footnote text. It took a lot of testing of different ways of doing things, but in the end I discovered that I had an incorrect bit of code in the head section of my site which set the base property to .Site.BaseURL. I think I added that ages ago, when I assumed that this was fundamentally necessary to render Permalinks correctly. It turns out that it is not necessary, and actually breaks things.

I decided to revert to fairly plain footnote rendering, with no Javascript necessary. The only nicety I added was to add some CSS so that when you jump down to the footnote, the one you are aiming for is highlighted. The ‘return’ icon will jump you back, and the correct footnote marker should highlight.

I do wish that it was easier in Hugo to add aria properties to the footnote markup to make it more accessible to those using screen readers. At the moment I can’t see an easy way of doing that without marking up footnotes completely manually. I could use Javascript to inject some classes into the HTML, but then we are back at the ‘Javascript Problem’, and I’m not even sure that screen readers work with javascript. I will look around and see if I can find a practical compromise. For now, at least, the footnotes work 🎉.

Webmentions

The more I read about the whole Webmentions system, the more I like the ethos behind it and the way it encourages dialogues between people on their own sites. However, it has to be said that — while things are definitely getting easier — it is still not for the faint-hearted. There are lots of things to set up, and for some parts, you don’t really know whether it has worked until you get some Webmentions. However, the good part is that you can gradually add to the system until you are receiving, sending and displaying Webmentions.

This week, I did a lot of work in the evenings and over this weekend to read up on what is required, and to try to understand how the parts fit together. I am extremely grateful to Keith J. Grant, Christian Engel, Sebastian De Deyne and Jessica Smith for information, example scripts and other vital information. In particular, Alan was super helpful in creating a Webmention on my previous post so that I could test it out, and that has also been really helpful when trying to integrate and style mentions and other kinds of reaction on the page. Thanks Alan! 🫶

You can read more detail on the sites mentioned above about the nitty-gritty details, but basically, I have set up this site with Webmention.io so that when someone mentions this site, Webmention.io pulls in and filters out any invalid mentions. I can then use a Javascript script (based on the ones by Jan Monschke and Sebastian De Deyne) which fetches these and writes a JSON file into the data directory of my Hugo site. A partial file then uses the data in this file to pull in and style the responses and replies, which are then incorporated into the HTML when I build my site. I can do this manually by running the script, but I have tried setting up a GitHub action to run the script every 6 hours and then commit the new data files and push the commit if there is anything new. That should then trigger a build on Netlify and publish the updates. This last part could go horribly wrong! I can’t test it until it runs, so anything could happen. If it doesn’t work, it’s not difficult to run it manually every now and again, so it’s not a big problem. I have also (hopefully) set up brid.gy to pull in mentions, replies and so on from Micro.blog and Mastodon, so that these will be included too. Things get a bit more complex there, so time will tell if I have all the right parts connected.

The final part is that I plan to use the Webmention.app to automate sending webmention from a new post when it is published. I will also set up some shortcodes in Hugo (or an Alfred snippet) to make it easier to add the relevant class to the link in the post Markdown file, but again, adding it manually isn’t hard.

I have not finished with the styling yet, but I will tweak that when I see properly what it looks like with a variety of Webmention types. If this all works out, I might even drop Commento. I can export comments from there as JSON, so I could integrate comments already received in the same way through items in data, but the missing part is enabling people to comment if they don’t have their own blog or are not on either Micro.blog or Mastodon. That’s for the future anyway…