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
- 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
See the Demo Site generated by this code.
- Fork this repo
- Edit
src/data/meta.jsonand 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.jsonas well.
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 [email protected]:maxboeck/webring.git
# go to the working directory
cd webring
# install dependencies
yarn
# start a local build server and the gulp pipeline
yarn start
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent