feat: rss banner

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "12.7.4",
+  "version": "12.8.4",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/banners/rss.liquid

@@ -0,0 +1,3 @@
+<div class="banner rss">
+  <p>{% tablericon "rss" "RSS feed" %} <a href="{{ url }}">{{ text }}</a>.</p>
+</div>

src/assets/styles/components/banners.css

@@ -9,6 +9,11 @@
     line-height: var(--line-height-sm);
     margin: 0;
 
+    a {
+      color: var(--text-color);
+      text-decoration: underline;
+    }
+
     & > svg {
       display: inline;
       vertical-align: middle;
@@ -25,6 +30,12 @@
   &.npm {
     border-color: var(--brand-npm);
 
+    & p a:hover,
+    & p a:active,
+    & p a:focus {
+      color: var(--brand-npm);
+    }
+
     & svg {
       stroke: var(--brand-npm);
     }
@@ -33,8 +44,28 @@
   &.github {
     border-color: var(--brand-github);
 
+    & p a:hover,
+    & p a:active,
+    & p a:focus {
+      color: var(--brand-github);
+    }
+
     & svg {
       stroke: var(--brand-github);
     }
   }
+
+  &.rss {
+    border-color: var(--brand-rss);
+
+    & p a:hover,
+    & p a:active,
+    & p a:focus {
+      color: var(--brand-rss);
+    }
+
+    & svg {
+      stroke: var(--brand-rss);
+    }
+  }
 }

src/links.html

@@ -5,6 +5,12 @@ pagination:
   data: collections.links
   size: 30
 ---
+{% if pagination.pageNumber == 0 %}
+<h2 class="page-header">Links</h2>
+{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-links", text: "Subscribe to my links feed or follow along on this page" %}
+<p>These are links I've liked or otherwise found interesting.</p>
+<hr class="large-spacing" />
+{% endif %}
 <ul class="link-list reduced-spacing">
   {% for link in pagination.items %}
     {% assign author = link.data.link | stripUtm | authorLookup %}

src/pages/books/index.html

@@ -5,6 +5,7 @@ permalink: "/books/index.html"
 ---
 {%- assign bookData = books | bookStatus: 'started' -%}
 <h2 class="page-header">Currently reading</h2>
+{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-books", text: "Subscribe to my books feed or follow along on this page" %}
 <p>Here's what I'm reading at the moment. <a href="/books/want-to-read/">You can also take a look at what I'm planning to read (eventually).</a></p>
 <hr class="large-spacing" />
 {% for book in bookData %}