🛟 Astro Webrings

Add your site to an Astro webring!

What is this?

A webring, according to Wikipedia, is a collection of websites linked together in a circular structure, usually organized around a specific theme, and often educational or social. This one is about Astro!

Great! How do I join?

Start by making a pull request on theastro-webrings repositoryto add your site. You will need to create a file in the packages/web/src/content/rings/RING_YOU_WANT_TO_JOIN directory, preferrably using the origin of your site as the filename: example.com.json

Inside of this file, place the following information:

{
  "name": "Example Site",
  "id": "a-unique-id",
  "url": "https://example.com"
}

The name can be anything you want it to be. The id should be a unique identifier for your site and should only contain lowercase letters from a-z, numbers, dots, hyphens and underscores. The urlshould be the URL to your site! This is where people will get linked to.

Once your pull request is approved, you should install theastro-webrings package, which allows you to add a badge for the ring to your site. Start by installing the package from the NPM:

# npm
npm install astro-webrings

# pnpm
pnpm add astro-webrings

# yarn
yarn add astro-webrings

After installing, you can import and use the badge like this:

---
import WebringBadge from "astro-webrings/badge";
---
<WebringBadge site="example.com" ring="friends-of-houston" />

Remember to swap out the site and id props to the slug you chose when submitting your PR, and the ring you want to link to.

Additionally, if there is an animated image for the ring you want to link to, you can use the animated prop:

<WebringBadge site="example.com" ring="friends-of-houston" animated />

Once the badge or an equivalent link has been added, your PR will be merged. Welcome on the ring!

Custom Badges

In case you want to make a custom badge, or manually link to the next site on the ring, you can use the following links:

Overriding the Image

If you want to use a different image, you can use the imageOverride prop on the component to pass in either the URL of an image (local or remote) or an imported ImageMetadata object:

---
import WebringBadge from "astro-webrings/badge";
import MyCustomBadge from "./my-custom-badge.png";
---
<WebringBadge site="example.com" ring="friends-of-houston" imageOverride={MyCustomBadge} />
<WebringBadge site="example.com" ring="friends-of-houston" imageOverride={"/path/inside/public/to/my-custom-badge.png"} />
<WebringBadge site="example.com" ring="friends-of-houston" imageOverride={"https://example.com/my-custom-badge.png"} />

Available Webrings

Here's a list of all available Webrings you can join right now by making a PR:

Ringname	Slug	Badge(s)
Friends of Houston	friends-of-houston
Built with Astro	built-with-astro