Integrating Openring to a Blog

Published: 2021-12-07 | Last Updated: 2021-12-07 | ~10 Minute Read

Context
What is Openring
A bit of History
Openring is Different
Some Openring Details
How to use Openring
So what are we working with?
How to implement Openring to your Blog

Context

I thought I’d make this post in an attempt to contribute to others the way Drew Devault’s make a blog initiative contributed in helping me finally commit to making my blog a reality. I did get to be one of the lucky people that were awarded the $20 USD cash reward, however that is not why I started my blog, that was merely a bonus.

This post is about another one of his initiatives that I believe provides a way for people to discover each other, that initiative is Openring.

What is Openring

From the sourcehut repository:

tool for generating a webring from RSS feeds, so you can link to other blogs you like on your own blog.

It’s quite self explanatory but in all honesty it always left me a bit confused as to how it worked from just looking at the repository. This doesn’t mean that Openring is hard to use, it just didn’t click for me right away, so I will be creating a post that I wish I had seen back when I first started my blog.

A bit of History

This concept goes back to the earlier days of the web and was originally called Webring. It ran as a centralized type of service (think Facebook) where users that wanted to join the Webring had to be “let in” by the Webring moderators.

Webring.com was later purchased by Yahoo and eventually disbanded.

Openring is Different

As I mentioned the Webring.com service was centralized in it’s operation, with the Openring concept however every user has the power and choice to integrate it into their own blog so that others' work can also be found. I think this is one of the core strengths that Openring ring has, this method of operation makes Openring a decentralized alternative to a very good idea. Openring makes it easier for people to find others' work on similar areas of interest.

The choice that Openring provides also means that the blog authors not only have the option to provide their readers with alternative sources to similar work, but also that the implementation of Openring to their blogs rests solely on their shoulders. This creates blogs (like mine until very recently) that do not include the Openring entries so that blogs may find more readers, which results in potential hidden gems not being found and shared.

Some Openring Details

Basically Openring is a program that generates an HTML <section> element which contains the latest post from three blogs that you provide to it. So you give it three RSS URLs from blogs you enjoy and it outputs an HTML snippet so you can include it in your site for your readers to enjoy knowing that you curated that list of blogs.

The program is written in the Go programming language and the source code is provided in its sourcehut repository.

How to use Openring

This is the part that most are probably weary of, but it’s easier than it seems.

Here is a simple step by step list that describes how to get your first Openring HTML snippet:

Make sure you have the Go programming language installed on your system
Go to the Openring source code repository
Clone the Openring repository to your system by running git clone https://git.sr.ht/~sircmpwn/openring from your command line
Change directory to the openring folder

Now execute the following:

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

That’s it! You’re done!

So what are we working with?

The last command should have provided some output on your terminal that looks like the following:

2021/12/06 18:25:40 Fetching feeds...
2021/12/06 18:25:42 Fetched Drew DeVault's blog
2021/12/06 18:25:42 Fetched emersion
2021/12/06 18:25:43 Warning: feed from danluu.com has no title
2021/12/06 18:25:43 Fetched danluu.com

The created out.html file contains the following:

bash-5.1$ cat out.html
<section class="webring">
  <h3>Articles from blogs I follow around the net</h3>
  <section class="articles">

    <div class="article">
      <h4 class="title">
        <a href="https://danluu.com/latency-pitfalls/" target="_blank" rel="noopener">Some latency measurement pitfalls</a>
      </h4>
      <p class="summary">

This is a pseudo-transcript (actual words modified to be more readable than a 100% faithful transcription) of a short lightning talk I did at Twitter a year or two ago, on pitfalls of how we use latency metrics (with the actual service names anonymized pe…</p>
      <small class="source">
        via <a href="https://danluu.com/atom/index.xml">danluu.com</a>
      </small>
      <small class="date">December 6, 2021</small>
    </div>

    <div class="article">
      <h4 class="title">
        <a href="https://drewdevault.com/2021/12/05/How-new-Linux-users-succeed.html" target="_blank" rel="noopener">How new Linux users can increase their odds of success</a>
      </h4>
      <p class="summary">The Linus Tech Tips YouTube channel has been putting out a series of videos
called the Switching to Linux Challenge that has been causing a bit of a stir
in the Linux community. I’ve been keeping an eye on these developments, and
thought it was a good time t…</p>
      <small class="source">
        via <a href="https://drewdevault.com">Drew DeVault&#39;s blog</a>
      </small>
      <small class="date">December 5, 2021</small>
    </div>

    <div class="article">
      <h4 class="title">
        <a href="https://emersion.fr/blog/2021/status-update-35/" target="_blank" rel="noopener">Status update, November 2021</a>
      </h4>
      <p class="summary">Hi again!
This month we’ve migrated wlroots to FreeDesktop’s GitLab instance!
We’ve been preparing the migration for a long time, and finally all the pieces
of the puzzle came together.
The main missing piece was a way to keep our continuous integration syste…</p>
      <small class="source">
        via <a href="https://emersion.fr/blog/">emersion</a>
      </small>
      <small class="date">November 16, 2021</small>
    </div>

  </section>
  <p class="attribution">
    Generated by
    <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
  </p>
</section>
<style>
.webring .articles {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}
.webring .title {
  margin: 0;
}
.webring .article {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  margin: 0.5rem;
  padding: 0.5rem;
  background: #eee;
  min-width: 10rem;
}
.webring .summary {
  font-size: 0.8rem;
  flex: 1 1 0;
}
.webring .attribution {
  text-align: right;
  font-size: 0.8rem;
  color: #555;
}
</style>

As you can see this is plain old HTML with some sane inline styling.

One great thing about Openring is that it takes in a template HTML file to determine its output structure, the included example in the openring folder is in.html. This means that you can customize the output to suit your preferences and/or remove the inline CSS styles and integrate this into your regular CSS files. I did just that and this is what I ended up with:

The contents of my new in.html:

</main>
<section class="webring">
  <p>Have a comment on one of my posts? Start a discussion in my public inbox by sending an email to <a href="mailto:~grokkingnix/blog@lists.sr.ht">~grokkingnix/blog@lists.sr.ht</a> <a href="https://man.sr.ht/lists.sr.ht/etiquette.md">[mailing list etiquette]</a></p>
<hr>
 <h3>Posts from blogs I follow:</h3>
  <section class="articles">
    {{range .Articles}}
    <div class="article">
        <a class="title" href="{{.Link}}" target="_blank" rel="noopener">{{.Title}}</a>
      <p class="summary">{{.Summary}}</p>
      <small class="source">
        via <a href="{{.SourceLink}}">{{.SourceTitle}}</a>
      </small>
      <small class="date">{{.Date | datef "January 2, 2006"}}</small>
    </div>
    {{end}}
  </section>
  <p class="attribution">
    Generated by
    <a href="https://git.sr.ht/~sircmpwn/openring">openring</a>
  </p>
</section>

The updated sections of CSS from my style.css file:

.webring {
  padding-top: 2rem;
}
.webring .articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
.webring .article {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: var(--pre-back-color);
  border-radius: var(--rc);
}
.webring .summary {
  font-size: 1rem;
  flex: 1 1 0;
}
.webring .attribution {
  text-align: right;
  font-size: 0.8rem;
}

To make it responsive:

@media (max-width: 1200px) {
  .webring .articles {
    grid-template-columns: 1fr;
  }
}

With that the output from Openring adapts to my blog’s styling.

How to implement Openring to your Blog

Depending on how you publish the content for your blog this part may vary greatly but in essence you would need to append or include the generated out.html HTML file into your blog post’s HTML.

I will describe how to implement it using Bourne to Blog which is what I use. I have created a module for Bourne to Blog in order to extend it’s base functionality so that users may include the Openring content if they so choose.

The workflow for writing, building and posting to your blog remains the same with the addition of the -o flag. This flag lets Bourne to Blog know that you want to include Openring output in your posts.

Here is a list of steps to start using Openring with Bourne to Blog:

Download the additional openring.sh script file from the Bourne to Blog repository
In /usr/local/bin/blog update the OPENRING_MODULE variable value to the path where openring.sh was downloaded
Update the variable values that are in the openring.sh file
Write posts as you normally do and when you build/post them include the -o flag i.e. blog -bops postfile.md

This will include the Openring output in your posts and it’s a convenient one time setup.

I for one will include Openring in my posts to showcase blogs I follow and now, so can you! I encourage you to use Openring with Bourne to Blog or otherwise so that we can all benefit from it.

Enjoy!