2 May 2022

A human-readable RSS feed with Jekyll

How I refactored my RSS feed from scratch using Jekyll functionalities, and applying XSLT for presentation to render a human-readable XML feed.

A few days ago, while reading my Mastodon timeline, I stumbled on an article by Wouter Groeneveld, titled Cool Things People Do With Their Blogs. Two things caught my eye:

styled OPML blogrolls that can be imported into an RSS reader, by Ruben Schade;
styled RSS feeds to better explain what a web feed is, by Matt Webb.

I’d forgotten about XSLT with its potential applications, so the above examples inspired me. Also, I didn’t know that OPML, which I’ve been using to import and export my RSS feeds, could be styled and used as a human-readable experience on the web.

After a few more clicks, I landed on the OPML blogroll on Maya’s site — likely the best and most useful blogroll I’ve ever seen. Not only they explain why each link might be interesting to anyone visiting, it’s also beautifully formatted and capable of being imported in my RSS reader.

This prompted me to apply styles to my RSS feed and give a human readable format to it. It was surprisingly easy, and I wonder why didn’t I do it sooner. Since my main motivation for leaving WordPress was to take full control over my code, I should have managed the feed myself rather than relying on a widespread Jekyll plug-in.

Using Jekyll functionality

I wanted to have both blog posts and projects (a Jekyll collection), hence, I created a loop that would exploit the layout type rather than the content type, iterating 20 times (my configuration value for posts_limit) through the resulting variable:

{% assign projects = site.documents | where:"layout", "project" %}
{% assign blog = site.documents | where:"layout", "post" %}
{% assign posts = projects | concat: blog | sort: 'date' | reverse %}
  {% for post in posts limit:site.posts_limit %}
    <item>
      [code here]
    </item>

Finally, I created an XSL file to style the feed page into a human readable format, following the aforementioned example. Since I was rewriting the RSS feed from scratch, I added new features to the .xsl file: