Adding a blogroll from my RSS reader

Following my list of ideas, I added a More page that has link to some webrings / blogroll (like is the early 2000s again!) and a list of all the personal sites I’m following in my RSS reader (Miniflux). I added the link in the footer as I thought the header menu was large enough, but I know it makes the page a bit hidden. I’ve also added a link to that page in the about page.

The list is a simple extract of my feeds in Miniflux (exported in opml), in which I removed unwanted categories (eg: news, youtube, aggregators, …) to keep only personal websites. Most are in English but some are in French (in 2 separated lists).

This short blog post is about the setup of such a page.

To create this page, the summary is:

• Export OPML file from Miniflux
• Remove unwanted sections in OPML file
• Convert OPML file in JSON - For this I used the online service BeautifyTools
• Add the json file within the data directory in hugo
• Leverage hugo data template capability that can read files like json (or yaml, toml, csv) and use them directory in template as data
• Use hugo shortcodes to include the blog list from a markdown file

Export and conversion are manual steps at this stage that I’d like to automate at some point. Because it is manual, I don’t intend to update the page more than a few time a year. If I can find a cool way to automate this, I may have an always up to date page. Yet another task in my todolist…

To give an idea, a summarized version of the json file looks like this:

{
    "opml": {
        "head": {
            "title": "Miniflux",
            "dateCreated": "Sat, 02 Mar 2024 23:20:48 UTC"
        },
        "body": {
            "outline": [
                {
                    "outline": [
                        {
                            "_title": "11d.im",
                            "_text": "11d.im",
                            "_xmlUrl": "https://11d.im/feed.xml",
                            "_htmlUrl": "https://11d.im/",
                            "_type": "rss"
                        },
                        […]
                        {
                            "_title": "Zwindler",
                            "_text": "Zwindler",
                            "_xmlUrl": "https://blog.zwindler.fr/index.xml",
                            "_htmlUrl": "https://blog.zwindler.fr",
                            "_type": "rss"
                        }
                    ],
                    "_text": "English Blogger"
                },
                {
                    "outline": [
                        {
                            "_title": "Aeris",
                            "_text": "Aeris",
                            "_xmlUrl": "https://blog.imirhil.fr/feed.xml",
                            "_htmlUrl": "https://blog.imirhil.fr/",
                            "_type": "rss"
                        },
                        […]
                        {
                            "_title": "Vincent Mérat",
                            "_text": "Vincent Mérat",
                            "_xmlUrl": "https://www.pofilo.fr/index.xml",
                            "_htmlUrl": "https://www.pofilo.fr/",
                            "_type": "rss"
                        }
                    ],
                    "_text": "French Blogger"
                }
            ]
        },
        "_version": "2.0"
    }
}

Anyway, to create this page, I started as usual, by added a more.md in the content/pages/ folder. At the time of writing this post, the file looks like this:

---
title: "More"
description: "More links outside of this website"
date: 2024-03-03
---

This page provides links to find new cool personal websites.

## WebRings / BlogRoll

- [IndieWeb Webring](https://xn–sr8hvo.ws/terms)
- [BlogRoll](https://blogroll.org/)
- [Ooh Directory](https://ooh.directory/)
- [Bukmark Club](https://bukmark.club)


## My blog roll
This is an extract of my feed reader where I only selected links to personal websites. If you know other links that would fit in this list (an#

{{< blogroll "blogs" >}}

Nothing unsual, except the {{< blogroll "blogs" >}} part. This is a hugo shortcode, that allows to include an html file from the markdown file (normally you would include a partial from a template, but you can’t from a content/markdown file).

I then created a file named blogroll.html within the layouts/shortcodes/ directory with the following content:

{{ $filename := $.Get 0 }}
{{ $data := index .Site.Data $filename }}
{{ with $data.opml.body.outline }}
    {{ range . }}
        <div>
            <h3>{{ ._text }}</h3>
            <ul>
                {{ range .outline }}
                    <li><a href="{{ ._htmlUrl }}">{{ ._title }}</a></li>
                {{ end }}
            </ul>
        </div>
    {{ end }}
{{ end }}

This shortcode receive a string, the name of the json file located in the data/ directory, as input. In my case “blogs” (as the file is data/blogs.json).

This code will simply iterate on the json file, on the first level for language, then on the list of feeds per language. Nothing too fancy but it works well.

And that’s it! I just added a link in the footer via the config.toml and that was done.

Of course, the important part was the export / cleaning / conversion of the feeds list to a usable JSON file, and it is still a manual task to do. From what I could find online, nothing really out of the box exists for that, so I may need to roll up my sleeves and code a small python or golang utility to automate this process. But in all honesty, I didn’t have the motivation to work on that for this first iteration. It of course means that another post will be published if and when I automate this… But in the meantime, as this is still manual, updates to the blog roll list won’t happen often :). But the list is already long enough to be a good start for anyone!