/webring

a webring

Primary LanguageHTMLMIT LicenseMIT

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

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

Deploy to Netlify

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:

the banner widget

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