🛟 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 the astro-webrings repository to 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-slug",
  "url": "https://example.com"
}

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

Once your pull request is approved and merged, you can install the astro-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 />

That's it! Welcome on the ring.

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
Build with Astro	built-with-astro