Ring-amajig documentation

note

Suggestions and general feedback are greatly appreciated, so don't be shy to share your thoughts about this project!

Webring guidelines

Have an accessible web page (semi accessible on mobile at the very least)

Have the required meta tags and iframe in your page (see below)

The webring widget should be visible or easily accessible on your page (maximum 1 click/scroll away from the top of the page)

Don't promote hate speech, racism, sexism, homophobia or any other form of discrimination (this should be pretty obvious, but I'm adding it anyway)

Don't promote the use of generative image AI tools (using AI images and artwork on your site falls under this rule)

NSFW content is strictly prohibited, lewd implications are allowed to a degree if not taken too far

Don't use the webring to promote your own products or services (unless it's a non-profit/open source project and/or not the main focus of your site)

"How do I join?" - You, supposedly

Fret not my fellow indie dev enthusiast! I have written this guide to my best ability to explain how you can become part of this niche internet community

read first

Please please first let me know that you'd like to join the webring by sending me an email on [email protected] or dming me on discord (this will probably work better if I've already talked with you previously) - @pre1ude0!

This webring has manual approval to keep the webring clean and sfw for everyone

Meta tags

Ring-amajig requires your site to have a set of meta tags, which will be used to generate your site card on the list of pages

Meta tags handled by the ringamajig api:

Meta Tag	Type	Description
`og:title`	property	The title of your site
`og:description`	property	A short description/fragment of the contents from your site
`og:image`	property	An absolute URL to a thumbnail image
`og:url`	property	The absolute URL of your site
`og:site_name`	property	The name of your site (usually the same as the URL without the protocol)
`theme-color`	name	The theme color of your site in hex, which can also be seen on some browsers
`pride-flag`	name	The pride flag that'll appear on the index number of your tile. For a list of available flags, see the full list

note

The og prefix in the meta tags stands for the Open Graph protocol, which is a standard used by many social media platforms like bluesky and discord to display rich content about sites!

Example:

These are the meta tags of the ring-amajig webring

            <!-- Required tags -->
            <meta property="og:title" content="Ring-amajig" />
            <meta property="og:description" content="Yet another webring on the www" />
            <meta property="og:image" content="https://ring.pre1ude.dev/favicon.png" />
            <meta property="og:url" content="https://ring.pre1ude.dev" />

            <!-- Optional tags -->
            <meta property="og:site_name" content="ring.pre1ude.dev" />
            <meta name="theme-color" content="#ffffff" />
            <meta name="pride-flag" content="progress-pride" />

Webring iframe

To embed the actual webring widget on your site, you need to use an iframe pointing to the /ring route of the ringamajig page with the url of your site in the url query parameter like so:

            <iframe
                src="https://ring.pre1ude.dev/ring?url=https://your-site.com"
                width="230px"
                height="100px"
                frameborder="0"
                scrolling="no"
            ></iframe>

There are also some optional parameters you can use to customize the look of the contents of the iframe on your page via querying them together like so:

            https://ring.pre1ude.dev/ring?url=https://your-site.com&fgcolor=ffffff&bgcolor=000000

note

iframe not showing up even though you've set url like shown? Thats intended, not a bug - if you're not verified/approved yet, the iframe won't show any content, eliminating that awkward phase of having a widget on your site that doesn't work!

Still want to customize your widget? No problem! Just add test=true to your query and configure your iframe that way for the time being! Just remember to remove it when pushing your site live

Query parameters handled by the ring-amajig iframe:

Parameter	Description	Default
`url`	The absolute URL of your site, which should match the `og:url` meta tag	None
`test`	If set to `true`, the iframe will display a test format of the webring that doesn't check for validity of the `url` value (mainly for people are yet to be verified and want to experiment with how the widget would look on their site)	`false`
`fgcolor`	The foreground color of the webring widget, in hex or html color (e.g. `red`) format
`bgcolor`	The background color of the webring widget, in hex or html color (e.g. `red`) format
`animdur`	The duration of the appearing animation of the iframe widget in ms	`500`

defining hex colors

The hex color codes should be passed without the # character as it will start a hash in the query string (e.g. ff0000 for red, not #ff0000)

What next?

Added all of the required meta tags and the iframe? Great! Your work here is done!

Now you just have to wait for me to approve your site and you'll be able to see it on the main page!

List of available pride flag gradients

Flag name	Gradient
`pride`
`progress-pride`
`transgender`
`nonbinary`
`agender`
`genderqueer`
`demigirl`
`demiboy`
`genderfluid`
`bigender`
`intersex`

Flag name	Gradient
`bisexual`
`pansexual`
`lesbian`
`gay`
`asexual`
`aromantic`
`aroace`
`abrosexual`
`omnisexual`
`polysexual`

How to join

Docs

Why?

Source code