No description
Find a file
2021-04-02 08:42:04 +02:00
.github add pull request template 2019-04-13 20:28:47 +02:00
_lambda fix bug in index lookup 2019-04-15 22:05:19 +02:00
src Please add my site? 2021-03-29 11:10:06 -05:00
.eleventy.js update build process, #4 2020-06-21 13:56:18 +02:00
.gitignore add webpack 2019-04-15 14:13:21 +02:00
LICENSE add mit lecense 2019-04-13 17:41:04 +02:00
netlify.toml switch build cmd to npm 2020-06-21 13:59:06 +02:00
package-lock.json update build process, #4 2020-06-21 13:56:18 +02:00
package.json update build process, #4 2020-06-21 13:56:18 +02:00
README.md update README 2019-04-16 11:18:09 +02:00

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