Archived
I think the way this was done with each website in a json file hosted at Github was cool and it worked well. But, I don’t think I'm going to get a lot of interest and so this webring is no longer active. It was a fun experiment. 🤓
I'll leave this thread in tact and the code at GitHub in case anyone is ever curious about how to make a webring (or, at least one way to do it).
Flaring - A webring (and an alternative to nasty social media monopolies)
Introduction
Webrings were cool in the 90s and it’s things like webrings that helped small websites out a lot. Now, everyone relies too much on promoting their projects via social media. But, social media is over crowded. A webring connects like websites together, promoting each other, in a simple way.
Flaring is a webring for webmasters who use the forum software Flarum. You just submit a few details about your site, copy and paste some code into your Flarum's custom footer, and now you are connected with other passionate Flarum communities.
When this webring was active there were instructions here about how to sign up.
Widget code:
All you need to change is the url near the top (after the CSS) which says "www.YOUR_SITE.com." Please leave the ending slash and UTM code. Also, the code includes HTML comments to help with this part. Copy/paste all of the code below at the end of your custom footer code. Do this just before or just after you submit your site for consideration since you will only be added to the webring if you have this in place either in your footer, or on a page that is easy to find with the link text being "Explore."
<!-- Start of webring code -->
<!-- Appearance for the spoiler (show/hide) -->
<style>
.webring-spoiler {
padding: 20px;
background: transparent;
}
.webring-spoiler-btn:hover {
cursor: pointer;
color: #555;
}
.webring-spoiler-btn-bottom {
width: 100%;
text-align: left;
}
.webring-spoiler-body {
display: none;
}
.webring-spoiler.instant.expanded .webring-spoiler-body {
display: block;
}
</style>
<!-- End of appearance for spoiler -->
<!-- Bulk of webring code below - Unless you know what you are doing only edit the webring-flaring site URL just after the spoiler body below.
Always leave the "/?utm_source=flaring-surfer" part at the end of the URL. -->
<div class="webring-spoiler">
<div class="webring-spoiler-body">
<!-- EDIT THIS URL to match the URL you submitted to the webring - leave UTM code at end -->
<webring-flaring site="https://www.YOUR_SITE.com/?utm_source=flaring-surfer">
<!-- STOP editing going forward (unless you know what you are doing) -->
</webring-flaring>
</div>
<div class="webring-spoiler-btn webring-spoiler-btn-bottom"><i class="fas fa-arrow-alt-circle-up"></i> Explore</div>
</div>
<script>
const DATA_FOR_WEBRING = `https://raw.githubusercontent.com/zerosonesfun/Flaring/main/webring.json`;
const template = document.createElement("template");
template.innerHTML = `
<style>
#webring, #webring-nav a {
color: #555;
}
</style>
<div id="webring">
<div id="webring-nav">
</div>
</div>`;
class WebRing extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
// e.g. https://www.wilcosky.com
const thisSite = this.getAttribute("site");
fetch(DATA_FOR_WEBRING)
.then((response) => response.json())
.then((sites) => {
// Find the current site in the data
const matchedSiteIndex = sites.findIndex(
(site) => site.url === thisSite
);
const matchedSite = sites[matchedSiteIndex];
let prevSiteIndex = matchedSiteIndex - 1;
if (prevSiteIndex === -1) prevSiteIndex = sites.length - 1;
let nextSiteIndex = matchedSiteIndex + 1;
if (nextSiteIndex > sites.length) nextSiteIndex = 0;
const randomSiteIndex = this.getRandomInt(0, sites.length - 1);
const cp = `
<p>
<a href="${matchedSite.url}">${matchedSite.name}</a> is a member of <a href="https://zerosonesfun.github.io/Flaring/" title="Learn More...">Flaring</a>.<br>
Flaring is a group of <em>quality</em> online communities.
</p>
<p>
<a href="${sites[prevSiteIndex].url}">[Prev]</a>
<a href="${sites[nextSiteIndex].url}">[Next]</a>
<a href="${sites[randomSiteIndex].url}">[Random]</a>
</p>
`;
this.shadowRoot
.querySelector("#webring-nav")
.insertAdjacentHTML("afterbegin", cp);
});
}
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
window.customElements.define("webring-flaring", WebRing);
function toggleSpoiler(spoilerElement, isInvertedCollapse, isInvertedExpand) {
let isCollapsing = spoilerElement.classList.contains('expanded');
let heightBefore = spoilerElement.offsetHeight;
let offsetBefore = window.pageYOffset;
spoilerElement.classList.toggle('instant', true);
spoilerElement.classList.toggle('expanded', !isCollapsing);
let isScrollRequired = ( isCollapsing && isInvertedCollapse) ||
(!isCollapsing && isInvertedExpand );
if (isScrollRequired) {
let heightAfter = spoilerElement.offsetHeight;
let heightDelta = heightAfter - heightBefore;
window.scrollTo(0, offsetBefore + heightDelta);
}
}
for (let el of document.querySelectorAll('.webring-spoiler-btn-top')) {
el.addEventListener('click', e => toggleSpoiler(el.parentNode));
}
for (let el of document.querySelectorAll('.webring-spoiler-btn-bottom')) {
el.addEventListener('click', e => toggleSpoiler(el.parentNode, true, true));
}
<!-- The final script below is what gives visitors extra instruction as they navigate from site to site. -->
if(window.location.href.indexOf("flaring-surfer") > -1) {
alert("Thanks for exploring and supporting the small communities within the Flaring webring. Look for an \"Explore\" link on this site when you're ready to check out the next community.");
}
</script>
<!-- End of webring code -->
Welcome back to the 90s.
