Mastodon doesn’t support “Article” posts and only shows the summary from them. But not only that, it doesn’t seem to unescape escaped HTML and that’s why articles from my blog looked so weird on Mastodon, while they worked fine on Pleroma and Microblog.pub. I now fixed the escaping. My Hugo module for ActivityStreams representation is available on Codeberg.
Tags: Hugo
Pure CSS Lightbox in Hugo theme
Hugo themes have the option to override the default rendering of Markdown images by using “Markdown Render Hooks” since version 0.62.0. By creating a file in layouts/_default/_markup named render-image.html it is possible to use a custom template for rendered images. This gives a lot of flexibility. I just used that flexibility to create a lightbox with pure CSS (without using JavaScript, like many lightbox implementations do). After clicking (or tapping) on an content image, you will see it filling the browser view. Another click brings you back to the content.
Adding ActivityStreams representations to Hugo
I promised and people already asked, so here is the first part of the documentation about how I enabled ActivityPub support on my Hugo-based blog:
How I automatically create my blogroll
I just updated my blogroll and thought that it might be a great idea to share my workflow to do exactly that. I use Miniflux a lot. Using Miniflux, I read all the blogs and get all the news, get updates from all the YouTubers and even subscribe to some Mastodon accounts (fediverse microblogs). I use multiple categories to sort the feeds. One of those categories is “Blogs” with all the blogs, which I also list on my blogroll.
Updated Hugo build workflow
After getting inspired by Kevin C. Coram, the blog is now generated by Hugo on a private Drone CI instance. Using a custom Docker image with Hugo, the site gets generated and the output is then uploaded to the server using rsync. Because this approach is much cleaner than my previous one, I could now also setup things like a preview page and I can update Hugo versions for my sites independently.
IndieWeb dream
My IndieWeb setup is continuing to evolve. I just added support for syndication (this post should appear on IndieNews) and JSON-posting to my Hugo backend and theme. Unfortunately, adding support for more IndieWeb features to this setup requires a lot of documentation reading, reverse engineering and looking at how other people have done that (of course in other programming languages, one has not much knowledge in).
More thoughts about ActivityPub support for this Hugo blog
I plan to add a bit of ActivityPub to my blog to be able to interact with the fediverse, without the need to use Mastodon, Pleroma or my current microblog. Just my static Hugo blog with it’s dynamic Go-backend. Because I don’t want to implement everything from scratch - I haven’t yet added media support for MicroPub - I am in search for libraries that help implementing ActivityPub, or at least give me a starting point. I discovered the library activityserver, which is used by a tool called pherephone by write.as, maybe that can help me.
What I still have to think about though, is how I’m going to connect it with the rest of the system. And what’s also still missing: The media endpoint and update support for MicroPub (I should do this first).
Or should I just cancel my plans with ActivityPub and wait until Fediverse software supports IndieWeb technologies? :thinking_face:
My blog went viral and did just fine
Yesterday, I posted a link to a tweet by DHH on my blog. It’s about “Google tax”. Companies nowadays have to buy ads to appear on top for searches for their brand name.
Webmention update
I’m now receiving webmentions myself and also show them as “interactions” on this blog.
I implemented webmention receiving into my Hugo backend. Mentions are stored as a simple json file per webmention in the “data” folder of my blog and then I’m using some Hugo magic (data templates) to render them in my theme.
By doing it this way, I don’t need any JavaScript to show interactions and I don’t need to rely on a 3rd party service (I used webmention.io) for receiving anymore.
A new “Share” option
Thanks to AddToAny, there’s now a “Share” option on my blog. If you find an article share-worthy, simply click on that link and select how to share this article. It should be pretty simple.
In Hugo I use the following line of code to create a share link:
<a href="https://www.addtoany.com/share#url={{ .Permalink }}{{ with .Title }}&title={{ . }}{{ end }}" target="_blank" rel="nofollow noopener">{{ T "share" }}</a>
{{ T "share" }}
is a translation string, but if you don’t care about translations, simply replace this with your preferred string.