Build webring as static

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",
@@ -9,9 +9,7 @@
     "build:eleventy": "npx @11ty/eleventy",
     "build:search": "node ./src/_scripts/build-search.js",
     "dev": "npm-run-all build:sass --parallel watch:*",
-    "build": "npm-run-all build:*",
-    "debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve",
-    "debughard": "DEBUG=Dev:Eleventy* npx @11ty/eleventy --serve"
+    "build": "npm-run-all build:*"
   },
   "author": "whitep4nth3r",
   "license": "MIT",

src/_components/webring.js

@@ -0,0 +1,44 @@
+function Webring({ members, prevUrl, nextUrl }) {
+  return /* html */ `
+  <h2 class="tcwr__title">The Claw <span>webring</span></h2>
+  <div class="tcwr__nav">
+    <a href=${prevUrl} class="tcwr__navItem">Previous</a>
+    <button class="tcwr__navItem--random" data-webring-random>Random</button>
+    <a href="${nextUrl}" class="tcwr__navItem">Next</a>
+  </div>
+  <ul class="tcwr__membersList">
+    ${members
+      .map(
+        (member) => `
+        <li class="tcwr__membersListItem">
+          <a href="${member.url}" class="tcwr__membersListItemLink">
+            ${member.name}
+          </a>
+        </li>`,
+      )
+      .join("")}
+  </ul>
+  <a href="https://github.com/whitep4nth3r/the-claw-webring#join-the-claw-webring" class="tcwr__join">Join</a>
+  <script type="text/json" id="members">
+    ${JSON.stringify(members)}
+  </script>
+  <script type="module">
+    function getRandomInt(min, max) {
+      return Math.round(Math.random() * (max - min) + min);
+    }
+
+    export function getRandomEntry(array) {
+      return array[getRandomInt(0, array.length - 1)];
+    }
+
+    const members = JSON.parse(document.getElementById("members").textContent);
+    const randomButton = document.querySelector("[data-webring-random]");
+
+    randomButton.addEventListener("click", () => {
+      window.location.href = getRandomEntry(members).url;
+    })
+  </script>
+  `;
+}
+
+module.exports = Webring;

src/_data/webring.js

@@ -0,0 +1,11 @@
+module.exports = async function () {
+  const members = await fetch(
+    "https://the-claw-webring.netlify.app/data/members.json",
+  ).then((res) => res.json());
+
+  return {
+    members,
+    prevUrl: members[members.length - 1].url, // can be static because I know my position in the webring as index 0
+    nextUrl: members[1].url, // can be static because I know my position in the webring as index 0
+  };
+};

src/_sass/_webring.scss

@@ -0,0 +1,111 @@
+.tcwr__title {
+  @include font_bold;
+  color: var(--color-link);
+  font-size: 1.2rem;
+  line-height: 1.6;
+  margin-bottom: 0.5rem;
+
+  span {
+    font-family: "Atomic Marker";
+    color: var(--orange);
+  }
+}
+
+@keyframes funky {
+  0% {
+    filter: saturate(100%);
+    transform: rotate(-8deg);
+  }
+  50% {
+    filter: saturate(0);
+    transform: rotate(-2deg);
+  }
+  100% {
+    filter: saturate(100%);
+    transform: rotate(-8deg);
+  }
+}
+
+.tcwr__logo {
+  animation: funky infinite 4s;
+  height: 100%;
+  margin: auto;
+  transform: rotate(-8deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tcwr__logo {
+    animation: unset;
+  }
+}
+
+.tcwr__nav {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  justify-content: space-around;
+}
+
+.tcwr__navItem {
+  font-style: italic;
+  line-height: 1.2;
+  color: var(--color-fg-copy);
+  display: block;
+  font-size: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--border-radius-base);
+}
+
+.tcwr__navItem--random {
+  @include font_bold;
+  font-style: normal;
+  border-radius: var(--border-radius-base);
+  background-color: var(--input-bg);
+  padding: 0.6rem 1rem;
+  border: var(--input-border);
+}
+
+.tcwr__navItem:focus,
+.tcwr__navItem:focus-visible {
+  @include input_focus;
+}
+
+.tcwr__membersList {
+  padding-inline-start: 0;
+  list-style: none;
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.tcwr__membersListItemLink {
+  color: var(--color-fg-copy);
+  margin-bottom: 0.25rem;
+  display: block;
+}
+
+.tcwr__membersListItemLink:focus-visible,
+.tcwr__membersListItemLink:focus-visible:focus {
+  @include input_focus;
+}
+
+.tcwr__join {
+  background-color: var(--orange);
+  display: block;
+  border-width: 0;
+  border-radius: var(--border-radius-base);
+  width: 100%;
+  color: var(--black);
+  font-family: "Atomic Marker";
+  font-size: 1.5rem;
+  text-align: center;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  margin: 1rem auto 0.5rem auto;
+}
+
+.tcwr__join:focus-visible,
+.tcwr__join:focus-visible:focus {
+  @include input_focus;
+}

src/_sass/main.scss

@@ -40,3 +40,4 @@
 @import "sponsorships";
 @import "stream-package";
 @import "newsletter-signup";
+@import "webring";