Make webring static

src/_components/twitchInfo.js

@@ -8,11 +8,11 @@ function TwitchInfo({ isLive, vodData }) {
       ? /* html */ `<div class="twitchInfo">
         <a href="${vodData.link}" class="twitchInfo__link">
           <div class="twitchInfo__deets">
-            <span class="twitchInfo__streamTitleContainer">
+            <div class="twitchInfo__streamTitleContainer">
               <p class="twitchInfo__streamTitle">
                 ${vodData.title}
               </p>
-            </span>
+            </div>
             <p class="twitchInfo__live">
               ${vodData.subtitle} ${PlayIcon()}
             </p>

src/_components/webring.js

@@ -0,0 +1,46 @@
+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,112 @@
+.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;
+  max-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;
+  color: var(--color-fg-copy);
+  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";

src/index.11ty.js

@@ -3,6 +3,7 @@ const OpenGraph = require("../lib/openGraph");
 const TwitchInfo = require("./_components/twitchInfo");
 const ActivityFeedItem = require("./_components/card");
 const NewsletterSignup = require("./_components/newsletterSignup");
+const Webring = require("./_components/webring");
 const pageTitle =
   "Salma Alam-Naylor — live streamer, software engineer and developer educator ";
 
@@ -23,7 +24,7 @@ exports.data = {
 };
 
 exports.render = function (data) {
-  const { activityFeed, person, newsletter, twitch } = data;
+  const { activityFeed, person, newsletter, twitch, webring } = data;
   const feedItems = activityFeed.slice(0, 8);
 
   return /*html*/ `
@@ -63,14 +64,16 @@ exports.render = function (data) {
           <span class="card__metaLabel">Newsletter</span>
         </div>
       </div>
-       <div class="card">
+      <div class="card">
+        <div class="card__imageContainer">
+          <img src="/img/theclaw_webring_logo.svg" class="card__image tcwr__logo" alt="The panther moth with a tattoo style banner that reads The Claw" />
+        </div>
         <div class="card__inner">
-          <script
-          src="https://the-claw-webring-widget.netlify.app/the-claw-webring-widget.mjs"
-          type="module"
-        ></script>
-
-        <the-claw-webring-widget fullWidth="true" hideMembers="true"></the-claw-webring-widget>
+          ${Webring({
+            members: webring.members,
+            prevUrl: webring.prevUrl,
+            nextUrl: webring.nextUrl,
+          })}
           <span class="card__metaLabel">Webring</span>
         </div>
       </div>