about summary refs log tree commit diff
path: root/content/posts/2021-01-11-openring.md
blob: fcd5df4a918dbd6ebebb72f2f1f2cff3ba06fc5f (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
categories: [blog, meta]
date:   2021-01-11 15:51:31 +0700
lang: en
translationKey: "openring-tutor"
tags: [rss, blog, openring, tutorial]
title:  "Using openring to add blogs you follow"
---

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][ddvault]
(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:

```bash
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:

```bash
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:
> 
> ```bash
> 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][ring-tmpl] (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)

```scss
---
---

.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 ;).

[openring]: https://git.sr.ht/~sircmpwn/openring
[ddvault]: https://drewdevault.com/
[golang]: https://golang.org/doc/install
[ring-tmpl]: https://git.sr.ht/~sircmpwn/drewdevault.com/tree/master/item/webring-in.template
[whence]: /menglish/