Since octothorpes get registered with an Octothorpes Ring, that means you’re automatically on a webring if you’re using octothorpes. So each Ring hosts a web component that lets you put a classic webring browser on your page. You can see it working right now in the footer of this site!

How to Use It

You can get it from your ring by adding the following code to the head of your page:

<script
async=""
defer=""
type="module"
data-register="RING-URL"
src="RING-URL/ring.js"></script>

where RING-URL is the home url of your ring.

Then just put <web-ring /> anywhere you want it to show up. It will automatically generate the links based on the url of the site that you put it on.

Customizing

You can customize the headline on the component like this:

<web-ring><h2>Custom title with fun emojis 💍<h2></web-ring>

And you can easily override some of the styling of the ring by setting any of the following variables in your site’s CSS:

web-ring {
  
  --ring-background: white;
  --ring-anchor: #3c7efb;
  --ring-text-color: #333;
  --ring-font: monospace;
  --ring-width: 30vw;
  --ring-highlight: yellow;
  --ring-rule: 2px dotted var(var(--ring-text-color));
}

Note: Multiple rings on one page are not yet supported, but will be.