feat: add webrings page

src/pages/changelog.md

@@ -1,7 +1,7 @@
 ---
 title: Changelog
 eleventyComputed:
-    description: All of the latest changes on {{ meta.siteName }}.
+  description: All of the latest changes on {{ meta.siteName }}.
 ---
 
 # Changelog
@@ -10,6 +10,10 @@ All the changes that are fit to read!
 
 If preferred, the [commit log is available here][commits].
 
+## June 11th 2024
+
+- Added a [webrings][webrings] page!
+
 ## May 24th 2024
 
 - Improve error handling when env vars are missing, or fetch requests fail.
@@ -73,3 +77,4 @@ If preferred, the [commit log is available here][commits].
 [v3]: /posts/version-3/
 [blogroll]: /blogroll/
 [darkvisitors]: https://darkvisitors.com
+[webrings]: /webrings/

src/pages/webrings.html

@@ -0,0 +1,37 @@
+---
+title: Webrings
+description: What's a webring?
+---
+
+<h1>Webrings</h1>
+<p>
+    You're probably wondering what the <em>heck</em> is a webring? It's a collection of sites banding under a common theme or idea, and it's circular (like a ring). You can read more on <a href="https://en.wikipedia.org/wiki/Webring" target="_blank">Wikipedia</a>!
+</p>
+<p>Here are some I'm a part of! Have fun, explorer!</p>
+<h2>
+    <a href="https://cs.sjoy.lol/" target="_blank">CSS JOY Webring</a>
+</h2>
+<p>For those of us who take join in missing around with CSS :)</p>
+<ul class="[ cluster ][ list-none p-0 ]">
+    <li>
+        <a class="[ button ]"
+           href="https://webri.ng/webring/cssjoy/previous?via=https://wonderfulfrog.com/">
+            {% include "svgs/arrow-left.svg" %}
+            <span class="visually-hidden">Previous website</span>
+        </a>
+    </li>
+    <li>
+        <a class="[ button ]"
+           href="https://webri.ng/webring/cssjoy/random?via=https://wonderfulfrog.com/">
+            {% include "svgs/dice.svg" %}
+            <span class="visually-hidden">Random website</span>
+        </a>
+    </li>
+    <li>
+        <a class="[ button ]"
+           href="https://webri.ng/webring/cssjoy/next?via=https://wonderfulfrog.com/">
+            {% include "svgs/arrow-right.svg" %}
+            <span class="visually-hidden">Next website</span>
+        </a>
+    </li>
+</ul>