feat: add webrings page

src/_includes/partials/footer.html

@@ -36,6 +36,9 @@
                 </ul>
             </nav>
             <ul class="[ cluster p-0 m-0 ]" role="list">
+                <li>
+                    <a href="/webrings">Webrings</a>
+                </li>
                 <li>
                     <a href="/changelog">Changelog</a>
                 </li>

src/_includes/svgs/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 10L8 14L6 14L-2.62268e-07 8L6 2L8 2L8 6L16 6L16 10L8 10Z" fill="currentColor"/>
+</svg>

src/_includes/svgs/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 6L8 2L10 2L16 8L10 14L8 14L8 10L-1.74845e-07 10L-3.01991e-07 6L8 6Z" fill="currentColor"/>
+</svg>

src/_includes/svgs/dice.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H0V10H10V0ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7C6 6.44772 6.44772 6 7 6C7.55228 6 8 6.44772 8 7Z" fill="currentColor" />
+<path d="M6 16V12H12V6H16V16H6Z" fill="currentColor"/>
+</svg>

src/pages/changelog.md

@@ -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>