From 5b251b5639e47bfb71f45ae88cc3f912441a596e Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Mon, 17 Jul 2023 11:17:05 -0700
Subject: [PATCH] feat: add webrings

---
 src/_includes/icons/webrings.liquid    |  3 +++
 src/_includes/partials/nav.liquid      |  5 ++++-
 src/_includes/webrings/css-joy.liquid  |  8 +++++++
 src/_includes/webrings/the-claw.liquid | 26 ++++++++++++++++++++++
 src/about.md                           |  2 +-
 src/webrings.md                        | 30 ++++++++++++++++++++++++++
 6 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/_includes/icons/webrings.liquid
 create mode 100644 src/_includes/webrings/css-joy.liquid
 create mode 100644 src/_includes/webrings/the-claw.liquid
 create mode 100644 src/webrings.md

diff --git a/src/_includes/icons/webrings.liquid b/src/_includes/icons/webrings.liquid
new file mode 100644
index 00000000..0cacbc4a
--- /dev/null
+++ b/src/_includes/icons/webrings.liquid
@@ -0,0 +1,3 @@
+<a href="/webrings" title="RSS" class="link--icon{% if page.url == '/webrings/' %} active{% endif %}">
+  {% tablericon "heart-handshake" "Webrings" "height=24" %}
+</a>
\ No newline at end of file
diff --git a/src/_includes/partials/nav.liquid b/src/_includes/partials/nav.liquid
index 2686313c..cfa7bd25 100644
--- a/src/_includes/partials/nav.liquid
+++ b/src/_includes/partials/nav.liquid
@@ -12,8 +12,11 @@
     <li class="mr-6 client-side">
       {% render "icons/search.liquid", page: page %}
     </li>
-    <li>
+    <li class="mr-6">
       {% render "icons/rss.liquid", page: page %}
     </li>
+    <li>
+      {% render "icons/webrings.liquid", page: page %}
+    </li>
   </ul>
 </nav>
\ No newline at end of file
diff --git a/src/_includes/webrings/css-joy.liquid b/src/_includes/webrings/css-joy.liquid
new file mode 100644
index 00000000..f392e510
--- /dev/null
+++ b/src/_includes/webrings/css-joy.liquid
@@ -0,0 +1,8 @@
+<div class="mb-4" style="border: 2px outset; text-align:center">
+  <p style="margin: 0; padding: 0.1em; border: 2px inset">CSS JOY Webring</p>
+  <div style="display: flex">
+    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/previous?via=https://example.com/path">Previous Site</a>
+    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/random?via=https://example.com/path">Random Site</a>
+    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/next?via=https://example.com/path">Next Site</a>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/_includes/webrings/the-claw.liquid b/src/_includes/webrings/the-claw.liquid
new file mode 100644
index 00000000..6e54eb2c
--- /dev/null
+++ b/src/_includes/webrings/the-claw.liquid
@@ -0,0 +1,26 @@
+<script
+  src="https://the-claw-webring-widget.netlify.app/the-claw-webring-widget.mjs"
+  type="module"
+></script>
+<div class="mb-4">
+  <the-claw-webring-widget fullWidth="true">
+    <div style="color: inherit; font-family: system-ui; padding: 1rem; font-size: 1rem;">
+      <div
+        style="display: grid; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; justify-content: flex-start; grid-template-areas: 'image title' 'image view';"
+      >
+        <img
+          src="https://the-claw-webring.netlify.app/img/theclaw.png"
+          alt="The Claw Webring"
+          style="grid-area: image; height: 4rem; transform: rotate(-8deg);"
+        />
+        <h2 style="grid-area: title; font-size: 1.4rem; margin: 0;">The Claw Webring</h2>
+        <a
+          href="https://github.com/whitep4nth3r/the-claw-webring"
+          style="grid-area: view; margin: 0; color: inherit;"
+        >
+          View on GitHub
+        </a>
+      </div>
+    </div>
+  </the-claw-webring-widget>
+</div>
diff --git a/src/about.md b/src/about.md
index 000be758..bb58f87b 100644
--- a/src/about.md
+++ b/src/about.md
@@ -28,4 +28,4 @@ I build, maintain and design web applications. I've been coding professionally s
 
 I tend to write about whatever strikes me, with a focus on development, technology, automation or issues I run into with these things. This is all typically light on editing with and heavy on spur of the moment thoughts.
 
-[You can also see what I'm doing now](/now).
+[You can also see what I'm doing now](/now) or [check out the webrings I'm a member of](/webrings).
diff --git a/src/webrings.md b/src/webrings.md
new file mode 100644
index 00000000..1c9178b8
--- /dev/null
+++ b/src/webrings.md
@@ -0,0 +1,30 @@
+---
+layout: default
+title: Webrings
+meta:
+  site:
+    name: 'Cory Dransfeldt'
+    description: "I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies."
+    url: https://coryd.dev
+    logo:
+      src: https://coryd.dev/assets/img/logo.webp
+      width: 2000
+      height: 2000
+  language: en-US
+  title: 'Cory Dransfeldt • Webrings'
+  description: 'Content feeds exposed by and generated from my site.'
+  url: https://coryd.dev/webrings
+  image:
+    src: https://coryd.dev/assets/img/avatar.webp
+---
+
+<h2
+class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-2"
+>
+{{ title }}
+</h2>
+
+[Webrings](https://en.wikipedia.org/wiki/Webring) are _awesome_. I'm a member of a few that follow. Check them out!
+
+{% render "webrings/the-claw.liquid" %}
+{% render "webrings/css-joy.liquid" %}