The SOC Webring

A webring for people who graduated from School of Code, a free coding bootcamp based in the UK.

Members

Join

  1. Open a pull request adding yourself to members.json: 
{ "url": "https://yoursite.example", "name": "Site name" }
  1. Add the widget to your site.
<script src="https://soc-webring.netlify.app/webring.js" crossorigin></script>
<soc-webring-widget src="https://soc-webring.netlify.app/members.json"></soc-webring-widget>

Preview

For the widget, you can pick a style with the variant attribute — here's how each one looks: 

<soc-webring-widget src="https://soc-webring.netlify.app/members.json"></soc-webring-widget>

FAQ

What is a webring?

A webring is a collection of websites linked together in a loop. Each site shows a small widget with links to the next and previous sites in the ring, so visitors can hop from one member to the next and eventually come back round to where they started. It's an old corner of the web, from before search engines — a way to discover sites by wandering rather than searching.

Who can join?

Anyone who graduated from School of Code. Your site can be a portfolio, a blog, a project — anything that's yours and online.

How do I join?

Open a pull request adding your site to members.json (see the Join section above), then add the widget snippet to your site. Once your PR is merged you'll appear in the ring.

Do I need to put the widget on my site?

Yes, that's what makes it a ring. The widget is how visitors travel between members, so each site needs to carry it. It's a single script tag and one element; it loads asynchronously and won't block or break your page if the ring is ever offline. You don't need to put it on your homepage, as long as it's somewhere easily findable on your site for those exploring the ring.

How do I customise the widget?

Two ways. First, pick a layout with the variant attribute — bar (default), compact, minimal, or vertical (see Preview above). Second, style it with CSS custom properties on the <soc-webring-widget> element: --wr-fg, --wr-accent, --wr-muted, --wr-border, --wr-radius, and --wr-font. Anything you leave unset inherits your page's own text colour, so it blends in by default.

My site isn't showing in the ring — why?

The widget matches your site by its hostname. Make sure the url in members.json matches the domain you actually serve the widget from (www. is ignored). If you're testing locally, the widget detects localhost automatically.