Webring Starter Kit

A boilerplate to host your own community of sites, also known as a webring.
Inspired by posts from Tatiana Mac and Charlie Owen.

Uses Eleventy and Netlify to build a central directory for member sites. People can link to /prev, /random and /next and be redirected to members of the ring.

✏️ Explanatory Blog Post

Features

Admins manage the ring on Github
Members are defined in src/data/members.json
Let people add their site through pull request or submit via email form
Publish a code of conduct
Provide an embed code that renders a banner (as a web component)
Publish an index of all member RSS feeds
show a SVG map of the ring and its members

Example

See the Demo Site generated by this code.

How to host a ring

Fork this repo
Edit src/data/meta.json and fill in your community info
Add an avatar image for your ring to src/assets/images
Remove the demo members in src/data/members.json
Deploy your site to Netlify
After you've set a domain, enter that in meta.json as well.

Banner Embed

Members can copy a code snippet and embed it into their sites. It renders a web component (with the bare links as a fallback).

The index site will produce an embed code with your ring URL and title:

<webring-banner>
    <p>Member of <a href="{{ your-url }}">{{ your-title }}</a></p>
    <a href="{{ your-url }}/prev">Previous</a>
    <a href="{{ your-url }}/random">Random</a>
    <a href="{{ your-url }}/next">Next</a>
</webring-banner>
<script async src="{{ your-url }}/embed.js" charset="utf-8"></script>

The design is up to the ring admins. It could look something like this:

Local Development

To build the site locally, run these commands:

# clone this repository
git clone git@github.com:maxboeck/webring.git

# go to the working directory
cd webring

# install dependencies
yarn

# start a local build server and the gulp pipeline
yarn start

2.4 KiB Raw Blame History