feat: refactor blogroll

netlify.toml

@@ -58,6 +58,11 @@ for = "/contribute.json"
   [headers.values]
   Content-Type = "application/json"
 
+[[headers]]
+for = "/blogroll.opml"
+  [headers.values]
+  Content-Disposition = "attachment; filename=cory-dransfeldt-blogroll.opml"
+
 [[headers]]
     for = "/*"
     [headers.values]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.11.1",
+  "version": "4.12.1",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_data/json/blogroll.js

@@ -1,16 +1,16 @@
 export default [
-  { "name": "Ashur Cabrera", "url": "https://multiline.co/mment" },
+  { "name": "Ashur Cabrera", "url": "https://multiline.co/mment", "feed": "https://multiline.co/mment/feed.xml", "description": "An excellent writer and a must follow for content both technical and otherwise." },
-  { "name": "Chris Burnell", "url": "https://chrisburnell.com" },
+  { "name": "Chris Burnell", "url": "https://chrisburnell.com", "feed": "https://chrisburnell.com/feed.xml", "description": "A whole host of useful posts on CSS, JavaScript and other technical topics." },
-  { "name": "fLaMEd", "url": "https://flamedfury.com/" },
+  { "name": "fLaMEd", "url": "https://flamedfury.com", "feed": "https://flamedfury.com/feed.xml", "description": "Awesome retro and small web content — plus the design of the is awesome." },
-  { "name": "Joe Steel", "url": "https://joe-steel.com" },
+  { "name": "Joe Steel", "url": "https://joe-steel.com", "feed": "https://joe-steel.com/feed.xml", "description": "Joe blogs about tech, the perpetually abysmal state of Apple's TV and movie products and numerous other things." },
-  { "name": "Keenan", "url": "https://gkeenan.co/avgb" },
+  { "name": "Keenan", "url": "https://gkeenan.co/avgb", "feed": "https://gkeenan.co/avglb?format=rss", "description": "If you don't love them it's because you don't yet know them — a fantastic writer too." },
-  { "name": "Łukasz Wójcik", "url": "https://lukaszwojcik.net" },
+  { "name": "Łukasz Wójcik", "url": "https://lukaszwojcik.net", "feed": "https://blog.lukaszwojcik.net/full.xml", "description": "Posts about tech, web development and Eleventy. Łukasz is a talented and kind engineer." },
-  { "name": "Matt Birchler", "url": "https://birchtree.me" },
+  { "name": "Matt Birchler", "url": "https://birchtree.me", "feed": "https://birchtree.me/rss/", "description": "Matt is exceedingly kind and also posts about Apple, tech and other topics." },
-  { "name": "Mike Haynes", "url": "https://mikehaynes.blog" },
+  { "name": "Mike Haynes", "url": "https://crashthearcade.com", "feed": "https://crashthearcade.com/feed/rss", "description": "A beautifully-designed site and I enjoy Mike's commentary and writing." },
-  { "name": "Paul Anthony Webb", "url": "https://webb.page" },
+  { "name": "Paul Anthony Webb", "url": "https://webb.page", "description": "One of the coolest, most unique personal sites around." },
-  { "name": "Raymond Camden", "url": "https://raymondcamden.com" },
+  { "name": "Raymond Camden", "url": "https://raymondcamden.com", "feed": "https://www.raymondcamden.com/feed.xml", "description": "Raymond covers a wide, wide range of web development topics and never fails to provide both insight and clarity." },
-  { "name": "Robb Knight", "url": "https://rknight.me" },
+  { "name": "Robb Knight", "url": "https://rknight.me", "feed": "https://rknight.me/subscribe/posts/rss.xml", "description": "Robb has the coolest site on the web and is an all around awesome dude." },
-  { "name": "Sia Karamalegos", "url": "https://sia.codes" },
+  { "name": "Sia Karamalegos", "url": "https://sia.codes", "feed": "https://sia.codes/feed/feed.xml", "description": "An accomplished speaker and writer, Sia's blog is full of useful posts on a wide array of development topics." },
-  { "name": "Stephanie Eckles", "url": "https://thinkdobecreate.com" },
+  { "name": "Stephanie Eckles", "url": "https://thinkdobecreate.com", "feed": "https://thinkdobecreate.com/feed", "description": "Myriad helpful and easy to understand resources to learn CSS and numerous other web development topics." },
-  { "name": "Zach Leatherman", "url": "https://www.zachleat.com" }
+  { "name": "Zach Leatherman", "url": "https://www.zachleat.com", "feed": "https://www.zachleat.com/web/feed/", "description": "Eleventy's creator who posts handy content about the framework, web components and web development writ large." }
 ]

src/assets/styles/pages/blogroll.css

@@ -0,0 +1,32 @@
+:root {
+  --grid: repeat(2,minmax(0,1fr));
+  --blog-roll-spacing: .75rem;
+}
+
+.blog__banner--grid {
+  display: grid;
+  gap: .5rem;
+  grid-template-columns: var(--grid);
+}
+
+.blog__banner {
+  padding: var(--blog-roll-spacing);
+  border: 1px solid var(--gray-light);
+  border-radius: var(--rounded-lg);
+  background-color: var(--gray-lighter);
+  display: flex;
+  flex-direction: column;
+}
+
+.blog__banner > h4,
+.blog__banner > p,
+.blog__banner .meta {
+  margin-top: 0;
+  margin-bottom: var(--blog-roll-spacing);
+}
+
+@media screen and (min-width: 768px) {
+  :root {
+    --grid: repeat(3,minmax(0,1fr));
+  }
+}

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>

src/pages/blogroll.md

@@ -1,17 +0,0 @@
----
-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.'
----
-<h2 class="page__header">{{ title }}</h2>
-<ul class="link__list">
-  {% for blog in blogroll %}
-  <li>
-    <a class="no-underline" href="{{blog.url}}">
-      {{ blog.name }}
-    </a>
-  </li>
-  {% endfor %}
-</ul>

src/pages/opml.liquid

@@ -0,0 +1,16 @@
+---
+permalink: /blogroll.opml
+eleventyExcludeFromCollections: true
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<opml version="1.0">
+    <head>
+        <title>OPML for all feeds in Cory Dransfeldt's blogroll</title>
+        <dateCreated>{{ page.date | dateToRfc822 }}</dateCreated>
+    </head>
+    <body>
+        {%- for blog in blogroll -%}
+            <outline text="{{ blog.name }}" title="{{ blog.name }}" type="rss" xmlUrl="{{ blog.feed }}" htmlUrl="{{ blog.url }}"/>
+        {% endfor %}
+    </body>
+</opml>