Uvacoder · December 27, 2021 12:07 · Dec 27, 2021
diff --git a/css-webring-web-component.markdown b/css-webring-web-component.markdown
@@ -0,0 +1,7 @@
+css-webring Web Component
+-------------------------
+
+
+A [Pen](https://codepen.io/uvacoder/pen/rNGpLQJ) by [Uvacoder](https://codepen.io/uvacoder) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/uvacoder/pen/rNGpLQJ/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,6 @@
+<!-- 
+`current` is intended to allow excluding the site the webring is embedded on, and must match the `title` in the webring json
+ 
+If limit is not set, default is `3`
+-->
+<css-webring limit="5" current="CSS-Tricks" random="true"></css-webring>
diff --git a/script.js b/script.js
@@ -0,0 +1,102 @@
+const webringUrl =
+  "https://raw.githubusercontent.com/5t3ph/css-webring/main/webring.json";
+
+class CssWebring extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: "open" });
+
+    const { shadowRoot } = this;
+
+    shadowRoot.innerHTML = `
+<style>
+* {
+  box-sizing: border-box;
+}
+
+.csswr {
+text-align: var(--csswr-text-align, center);
+  color: var(--csswr-text-color, #444);
+  font-family: var(--csswr-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif);
+  font-size: 1rem;
+}
+
+.csswr-title {
+  color: var(--csswr-title-color, #777);
+  font-size: var(--csswr-title-size, 1.5rem);
+  margin: 0 0 0.25em;
+}
+
+.csswr-list {
+  list-style: none;
+  margin: 0.5rem auto 1rem;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--csswr-linkflex-justify, center);
+}
+
+.csswr-list li {
+  flex: 0 1 15ch;
+  padding: 0.5em;
+}
+
+.csswr-list a {
+  color: var(--csswr-link-color, #0370ba);
+}
+
+.csswr-join {
+  text-decoration: none;
+  background-color: var(--csswr-button-bgcolor, #0370ba);
+  color: var(--csswr-button-color, #fff);
+  padding: 0.25em 0.5em;
+  border-radius: 4px;
+  display: inline-flex;
+}
+</style>
+<aside class="csswr">
+  <h2 class="csswr-title">CSS Webring</h2>
+  <strong>Next up:</strong>
+  <ul role="list" class="csswr-list"></ul>
+  <a target="_blank" rel=”noopener noreferrer” href="https://github.com/5t3ph/css-webring" class="csswr-join">Join this Webring</a>
+</aside>
+    `;
+
+    const list = shadowRoot.querySelector(".csswr-list");
+    const limit = this.getAttribute("limit") ? this.getAttribute("limit") : 3;
+    const current = this.getAttribute("current");
+    const random = this.getAttribute("random");
+
+    const getWebring = async () => {
+      const postResp = await fetch(webringUrl);
+      let webring = await postResp.json();
+
+      if (current) {
+        webring = webring.filter((link) => link.title !== current);
+      }
+
+      if (random) {
+        webring = webring.sort(() => Math.random() - 0.5);
+      }
+
+      if (limit) {
+        webring = webring.slice(0, limit);
+      }
+
+      return webring
+        .map((item) => {
+          return `<li><a href="${item.link}">${item.title}</a></li>`;
+        })
+        .join("");
+    };
+
+    getWebring()
+      .then((webring) => {
+        list.innerHTML = webring;
+      })
+      .catch(() => {
+        list.innerHTML = `<li><em>Nothing to see here</em></li>`;
+      });
+  }
+}
+
+window.customElements.define("css-webring", CssWebring);
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://raw.githubusercontent.com/5t3ph/css-webring/main/css-webring.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,11 @@
+css-webring {
+  /* Customize the style */
+  // --csswr-text-align: left;
+  // --csswr-linkflex-justify: flex-start;
+  // --csswr-font-family: system-ui;
+  // --csswr-title-color: #393;
+  // --csswr-title-size: 3rem;
+  // --csswr-link-color: #393;
+  // --csswr-button-bgcolor: #393;
+  // --csswr-button-color: #fff;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://raw.githubusercontent.com/5t3ph/css-webring/main/css-webring.js"></script>