want to make a webring? don't know javascript? this is my webring template slash super-simple alternative to garlic.garden's excellent onionring

how is this different from onionring?

• a single file, for ease of editing & use
• allows multiple widgets
• compact. not counting the settings object, the code's only five lines long

setting up a webring

create a copy of the script for yourself. this is the only part you need to worry about:

// sites in the ring
let sites = [
	"https://example.com",
	"https://example.com",
];
// widget html
// PREV and NEXT are replaced with neighbors' urls
let widgets = {
	default: `<div id="my-webring" style="display: flex; gap: 8px">
		<a href="PREV">prev</a>
		<div>webring</div>
		<a href="NEXT">next</a>
	</div>`,
	error: `<div>this site isn't part of the webring yet</div>`,
};

you add sites to the ring under sites, and edit its widgets under widgets. the "default" widget is used by, ha, default, but you can add as many widgets as you like. the "error" widget is displayed when a site that isn't in the ring tries to embed a widget.

i highly recommend giving widgets an id with the name of your webring, otherwise it's difficult for members to add custom styling to their widgets.

embedding a widget

wherever you'd like the widget to be, link the script like so (don't forget to replace the src!)

<script defer src="replaceme">

to switch widgets, use the data-widget attribute

<script defer data-widget="name" src="replaceme">

ok that's all. happy webringing