feat: refactor blogroll

src/pages/blogroll.html

@@ -0,0 +1,28 @@
+---
+title: Blogroll
+layout: default
+permalink: /blogroll.html
+image: /assets/img/ogi/blogroll.jpg
+description: 'These are awesome blogs that I enjoy and you may enjoy too.'
+---
+{% capture css %}
+  {% render "../assets/styles/pages/blogroll.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<h2 class="page__header">{{ title }}</h2>
+<p>You can <a href="/blogroll.opml">download an OPML file</a> containing all of these feeds and import them into your RSS reader.</p>
+<div class="blog__banner--grid">
+  {% for blog in blogroll %}
+  <div class="blog__banner">
+    <h4>{{ blog.name }}</h4>
+    <div class="meta">
+      <a class="no-underline" href="{{blog.url}}">Website</a>
+      {% if blog.feed %} • <a class="no-underline" href="{{ blog.feed }}">Feed</a>{% endif %}
+    </div>
+    {%- if blog.description %}
+    <p>{{ blog.description }}</p>
+    {% endif -%}
+  </div>
+  {% endfor %}
+</div>
+<p>Head on over to <a href="https://blogroll.org">blogroll.org</a> to find more blogs to follow or search for feeds using <a href="https://feedle.world">feedle</a>.</p>