Webring "How To" Guide

To join the webring, you need to follow two steps:

  1. Add links to the webring on your website
  2. Create a PR adding a link to your website to the members list

To add your webiste to the webring, you simply need to add some links pointing to the webring.

We provide a sample code, but feel free to implement it yourself, if you like.

We only ask you to include it in an accessible place on your webiste that is not hidden away.

Important: We use the Referer HTTP header to figure out the previous and next page.

To allow us to redirect correctly to the previous or next pages, we ask that you set the referrerpolicy attribute on the links to either strict-origin or strict-origin-when-cross-origin.

Sample code

Here is a sample code for a react component for the webring:

<tojs-webring>
	<!-- The styles here are only removing the list bullets, making the list a flex container and centering the text. -->
	<style>
		@scope {
			header { text-align: center; }
			ul {
				display: flex;
				flex-wrap: wrap;
				list-style: none;
				padding: 0;
				gap: 1em;
				justify-content: center;
			}
		}
	</style>
	<!-- The article element creates a section on the page and the "aria-labelledby" attribute adds an accesible name to it. -->
	<!-- Note: all links have the "referrerpolicy" and "rel" attributes set to allow the origin to be sent in a privacy preserving way. -->
	<article id="tojs-webring" aria-labelledby="tojs-webring-header">
		<header>
			<a
				href="https://webring.torontojs.com/"
				referrerpolicy="strict-origin"
				rel="external noopener"
				id="tojs-webring-header"
			>Toronto JS Webring</a>
		</header>

		<!-- The links are part of a list as this is a list of links. -->
		<!-- The spans with the "aria-hidden" attribute hide the characters from screen readers. -->
		<ul>
			<li>
				<a
					href="https://webring.torontojs.com/prev"
					referrerpolicy="strict-origin"
					rel="external noopener"
				>
					<span aria-hidden="true">&#x23ea;&#xfe0e;</span>
					<span>Previous Website</span>
				</a>
			</li>
			<li>
				<a
					href="https://webring.torontojs.com/random"
					referrerpolicy="strict-origin"
					rel="external noopener"
				>
					<span>Random Website</span>
				</a>
			</li>
			<li>
				<a
					href="https://webring.torontojs.com/next"
					referrerpolicy="strict-origin"
					rel="external noopener"
				>
					<span>Next Website</span>
					<span aria-hidden="true">&#x23e9;&#xfe0e;</span>
				</a>
			</li>
		</ul>
	</article>
</tojs-webring>

It will look like this:

DIY

To add the webring to your webite you need to add a few links:

  1. A link to the webring itself.
  2. A link to the previous page.
  3. A link to the next page.
  4. (Optional) A link to a random page.

A suggestion for the structure is to add the link to the webring in one line, and the other links on a second line in the following order: previous, random, next.

Create a PR

Remove my website from the webring

  1. Fork the repo (GitHub Help on forks)
  2. Edit members.json to remove your website to the list.
  3. Create a pull request (GitHub help on Pull Requests)