diff options
Diffstat (limited to 'posts')
| -rw-r--r-- | posts/openring.md | 144 |
1 files changed, 70 insertions, 74 deletions
diff --git a/posts/openring.md b/posts/openring.md index 8c1c6c6..39c9d00 100644 --- a/posts/openring.md +++ b/posts/openring.md @@ -1,6 +1,5 @@ -# Building openring with Jekyll Build - -2022-12-02 +[[!meta title="Building openring with Jekyll Build"]] +[[!meta date="2022-12-02"]] I think it's great when bloggers post their own personal "reading list" of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the "indie" web. This isn't a new concept by any means, but I wanted something a little more "dynamic"[^1] for my own blog. @@ -24,58 +23,58 @@ You *could* setup a whole new directory specifically for your openring files, bu ### openring-in.html Contents -``` -<!-- License-Id: CC0-1.0 --> -<section class="webring"> - <h3>Articles from blogs I follow around the world wide web</h3> - <section class="articles"> - {{range .Articles}} - <div class="article"> - <h4 class="title"> - <a href="{{.Link}}" rel="noopener">{{.Title}}</a> - </h4> - <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> -<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> -``` + + <!-- License-Id: CC0-1.0 --> + <section class="webring"> + <h3>Articles from blogs I follow around the world wide web</h3> + <section class="articles"> + {{range .Articles}} + <div class="article"> + <h4 class="title"> + <a href="{{.Link}}" rel="noopener">{{.Title}}</a> + </h4> + <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> + <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> + > Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via `serve` or `build`. I don't really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder. @@ -89,33 +88,31 @@ To simplify things, we are going to place our main commands in a single build sc Place the following inside that file: -``` -openring \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - < _includes/openring-in.html \ - > _includes/openring-out.html -bundle exec jekyll build -``` + + openring \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + < _includes/openring-in.html \ + > _includes/openring-out.html + bundle exec jekyll build + ## Edit `_config.yml` Next we need to make sure we exclude our new `build-site` script file, since we really don't need that pushed up to the main server: -``` -# Includes / Excludes -exclude: - - build-site.sh -``` + # Includes / Excludes + exclude: + - build-site.sh ## Almost Done... Now you just need to decide where you want your `openring` feed outputs to render. For this example, we will place them at the bottom of every blog post inside the `_layouts/post.html` file, like so: -``` -{% raw %}{% include openring-out.html %}{% endraw %} -``` + + {% raw %}{% include openring-out.html %}{% endraw %} + ## Build It & They Will Come @@ -127,6 +124,5 @@ I won't go into great detail about build script for SourceHut Pages, but feel fr Happy sharing! -## Refs -1. Well, as dynamic as a static website can be!
\ No newline at end of file +[^1]: Well, as dynamic as a static website can be! |