ℹ️ Mostly coded by Max Böck - modified by An in order to bring it to Glitch.
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 Glitch 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
- Admins manage the ring on Glitch
- 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
See the Demo Site generated by this code.
- Remix this project
- Edit
src/data/meta.jsonand fill in your community info as well as the Glitch URL (https://PROJECTNAME.glitch.me) - An avatar image can be uploaded to Glitch Assets CDN of your project (don't forget to put its link in
src/data/meta.json) - Remove the demo members in
src/data/members.json - You're done! Congratulations on your brand new webring! Share it with the world
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:
To build the site locally, run these commands:
# clone this repository
git clone https://api.glitch.com/ring-of-pets/git
# go to the working directory
cd webring
# install dependencies
yarn
# start a local build server and the gulp pipeline
yarn start