You may notice that now my blog now has a new section near the footer: a list of articles from blogs I follow. This is generated by openring, a tool that read a list of RSS feeds and generate these.

I found out about this when reading Drew DeVault’s blog (who created openring). I think it is a nice way to endorse authors we want to support and share cool things we read to our audience.

In this blog, I will write a tutorial to use this with jekyll.

Install openring

I am not aware of any prebuilt packages for openring, so let’s build it from source.

Install dependencies

Openring depends on golang. This works on go1.14, the latest version on Tumbleweed repository, but I recommend installing the latest version from golang.

You can refer to golang’s installation instruction for details.

Build from source

Firstly, clone the repository:

git clone https://git.sr.ht/~sircmpwn/openring

Next, simply build the packages and link it to /usr/local/bin so that it can be run:

go build -o openring
sudo cp openring /usr/local/bin/

Customize looks

From openring’s README:

This is a tool for generating a webring from RSS feeds, so you can link to other blogs you like on your own blog. It’s designed to be fairly simple and integrate with any static site generator. The basic usage is:

openring \
  -s https://drewdevault.com/feed.xml \
  -s https://emersion.fr/blog/rss.xml \
  -s https://danluu.com/atom.xml \
  < in.html \
  > out.html

The in.html is a template whence openring generate the HTML for the feed.

I copied the template from DeVault’s blog (don’t worry, it’s MIT-licensed), with a little modification:

• I wrap it in a div.wrapper. The wrapper class is a class in minima theme that limit the max width for readability and auto-collapse on smaller devices.
• I use footer-col for each class. Since this is also styled by minima, I don’t have to worry about it.
• I added a thin border around each article with the following sass (also modified from DeVault’s blog)

---
---

.webring {
  margin-bottom: 1rem;
  .attribution {
    float: right;
    font-size: .8rem;
    line-height: 3;
  }

  .footer-col.article {
    padding: 0.5rem;

    margin: 0 0.5rem;
    border: 0.01rem solid #333;
    @media(max-width: 640px) {
      margin: 0.5rem 0;
    }   
  }
}

Future works?

Currently, I generate the feed manually when I update my blog. This probably is not good enough if I want the webring to be updated even when I’m not active? A cronjob could solve this problem, but I’ll left it as an exercise to the reader ;).