Add your site to an Astro webring!
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!
Start by making a pull request on this 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-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 url should be the URL to your site! This is where people will get linked to.
Once your pull request is approved, you should 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-webringsAfter 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 ring props to the id 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!
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. If you're making a custom badge, consider linking to the previous site as well!
| Description | Link |
|---|---|
| Next Site | https://astro-webrings.lou.gg/next?site=YOUR_SITE_ID&ring=RING_NAME |
| Previous Site | https://astro-webrings.lou.gg/prev?site=YOUR_SITE_ID&ring=RING_NAME |
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"} />A list of all webrings is available on the webpage!