A webring for Canadian builders — developers, designers, and founders sharing their work on the open web. Members link their personal sites together in a ring that visitors can navigate, discovering new Canadian creators along the way.
- Add the webring widget to your site (see below)
- Fork this repo and create
members/your-slug.json:The filename is your slug (e.g.,{ "name": "Your Name", "url": "https://yoursite.ca", "city": "Toronto", "active": true }jane-doe.json). Lowercase, hyphens only. - Open a pull request -- CI will verify your site and we'll merge you in
Requirements: A personal site or project by a Canadian builder, with real content and the webring widget installed.
The widget renders a minimal ← 🍁 → nav that links your site into the ring.
Copy and paste into your site:
<div data-webring="ca" data-member="your-slug"></div>
<script src="https://webring.ca/embed.js" defer></script>Replace your-slug with your filename (without .json).
If your site is a single-page app, always use this option. The plain HTML option may not be detectable by our health check on client-rendered sites.
For simple static sites that don't load external scripts. Style however you want -- just keep the three links:
<a href="https://webring.ca/prev/your-slug">←</a>
<a href="https://webring.ca">🍁</a>
<a href="https://webring.ca/next/your-slug">→</a>Style the widget with CSS variables on the container div:
| Variable | Default | Description |
|---|---|---|
--webring-size |
1rem |
Overall widget size |
--webring-color |
inherit |
Arrow and leaf color |
--webring-accent |
#AF272F |
Hover color |
Example:
<div data-webring="ca" data-member="your-slug"
style="--webring-color: #666; --webring-accent: #e63946;"></div>
<script src="https://webring.ca/embed.js" defer></script>The script embed works with any framework. Place the snippet in your site's shared layout:
- Next.js --
app/layout.tsx(in the<body>, before the closing tag) - Astro --
src/layouts/Layout.astro(in the<body>) - SvelteKit --
src/app.html(in the<body>) - Hugo --
layouts/partials/footer.html - Jekyll --
_includes/footer.html
GET /api/members — returns the active member list as JSON.
npm install
npm run dev # starts wrangler dev server at localhost:8787After creating a KV namespace, seed it with the member list:
npm run seed # prints wrangler commands to runThe seed step now uses committed repo data only. Every member must already have resolvable coordinates from either:
- explicit
lat/lngin the member's JSON file, or - a city covered by the committed city map
If a contributor adds a city that is not yet covered, a maintainer can enrich coordinates locally before merge:
npm run enrich:coordsnpm run deploy # deploys via wranglerMIT