Create version 2 of the webring

src/webring/webring-0.2.0.css

@@ -0,0 +1,52 @@
+/* Feel free to style the webring however you like! */
+
+.lavender-webring-container {
+  all: unset;
+
+  /*
+    assuming Linux users will have a preferable sans-serif font set in their browser,
+    everyone else gets a nice default
+  */
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI",
+    "Helvetica Neue", sans-serif;
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: rgb(28, 23, 36);
+  color: rgb(234, 234, 248);
+
+  padding: 1em;
+
+  text-align: center;
+  font-size: 1.125rem;
+}
+
+.lavender-webring-description {
+  margin-block-end: 0.5em;
+}
+
+.lavender-webring-container a {
+  color: hsl(275, 57%, 68%);
+  text-decoration: none;
+  border-bottom: 1px solid hsl(275, 57%, 68%);
+}
+
+.lavender-webring-site-links {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.lavender-webring-prev-site a::before {
+  content: "←";
+  margin-inline-end: 1ch;
+}
+
+.lavender-webring-next-site a::after {
+  content: "→";
+  margin-inline-start: 1ch;
+}

src/webring/webring-0.2.0.js

@@ -0,0 +1,54 @@
+const currentScript = document.currentScript;
+const ctx = currentScript.dataset;
+
+// charlotte's ad-hoc terse javascript framework!
+const CSS_PREFIX = "lavender-webring";
+const e = (tag, props = {}, children = []) => {
+  let element = Object.assign(document.createElement(tag), props);
+  element.append(...children);
+  return element;
+};
+const t = (text) => document.createTextNode(text);
+const c = (className) => ({ className: `${CSS_PREFIX}-${className}` });
+const h = (href) => ({ href });
+
+const createDescriptionContent = () =>
+  ctx.description != null
+    ? [t(ctx.description)]
+    : [
+        t("This site is part of the "),
+        e("a", h("https://lavender.software"), [t("lavender.software")]),
+        t(" webring!"),
+      ];
+
+const renderWebring = (currSite, prevSite, nextSite) => {
+  currentScript.replaceWith(
+    e("aside", c("container"), [
+      e("section", c("description"), createDescriptionContent()),
+      e("ul", c("site-links"), [
+        e("li", c("prev-site"), [e("a", h(prevSite.url), [t(prevSite.name)])]),
+        e("li", c("curr-site"), [e("a", h(currSite.url), [t(currSite.name)])]),
+        e("li", c("next-site"), [e("a", h(nextSite.url), [t(nextSite.name)])]),
+      ]),
+    ])
+  );
+};
+
+(async () => {
+  const data = await fetch("https://lavender.software/webring/data.json").then(
+    (r) => r.json()
+  );
+
+  let thisSiteIdx = data.findIndex((site) => site.id == ctx.siteId);
+  if (thisSiteIdx === -1) {
+    throw new Error(
+      `Could not find site by id '${ctx.siteId}' in the webring!`
+    );
+  }
+
+  let currSite = data[thisSiteIdx];
+  let prevSite = data[(thisSiteIdx + data.length - 1) % data.length];
+  let nextSite = data[(thisSiteIdx + 1) % data.length];
+
+  renderWebring(currSite, prevSite, nextSite);
+})();