Summary

I wanted the ability to join this webring without having to add javascript to my page or referencing external scripts that I do not have control over, so I coded out this solution. The flow is simple: The links in the webring direct the user/clicker to a page that is hosted on your server called /redirect or /redirect.html. Once they hit that page, javascript runs on your server that redirects the user to the next page in the webring.

the referrer and the "direction" or "type of movement" of the webring (next, prev, random) are handled by query string parameters. so when a user who is currently on www.xyz.com and they click next on a webring link it will first go to: https://christian-webring.nekoweb.org/redirect?referrer=https://www.xyz.com&type=next. the redirect script takes care of the rest by reading the list of sites in the onionring js variables script, and determining the next, previous or random website. once determined the user is redirected to the correct page. this all happens quickly and seamlessly.

Working Example:

-prev-

random

-next-

Code For End Users:

this allows the end users to just put vanilla HTML on their site without having to import packages and using javascript,
If you are interested we can put a form up so that a user can input their url and it will auto generate the code for them <div id="christian-webring" style="margin: 0 auto; font-size: small;"> <table style="background-color: transparent; margin: 0 auto;"> <tr> <td class='webring-prev' style="text-align: right;"> <a href='/redirect.html?type=previous&referrer=https://cocopie.neocities.org/'>-prev-</a> </td> <td class='webring-info' style="text-align: center;"> <a href="https://christian-webring.nekoweb.org/"><img src="https://i.imgur.com/rYx5Gur.png"/></a><br> <span class='webring-links'> <a href='/redirect.html?referrer=https://cocopie.neocities.org/'>random</a> </span> </td> <td class='webring-next' style="text-align: left;"> <a href='/redirect.html?type=next&referrer=https://cocopie.neocities.org/'>-next-</a> </td> </tr> </table> </div>

How To Implement

- Create a page on your site called redirect
- Create a js script to redirect users
- place that script on the redirect page

redirect.js


    function getRandomSite(ignore) {
        // get random index from sites
        var index = Math.floor(Math.random() * sites.length);
        // if random site is referrer, retry
        return (index === ignore) ? generateRandom(ignore) : sites[index];
    }

    var validRedirectTypes = ['next', 'previous', 'random']

    // parse url params
    var params = new URLSearchParams(window.location.search);
    var referrerUrl = params.get('referrer')
    var type = params.get('type') || 'random' // default to random if no type given

    if (!validRedirectTypes.includes(type)) { // default to random is type not valid
        type = 'random'
    }

    if (!sites.includes(referrerUrl)) {
        // referrer url is incorrect, select random referrer from sites list,
        referrerUrl = sites[Math.floor(Math.random() * sites.length)]
        // select random site, and redirect to it
        window.location.href = sites[Math.floor(Math.random() * sites.length)]
    }

    // get index of the referrer url
    var referrerIndex =  sites.indexOf(referrerUrl);

    if (type === 'random') {
        var redirect = getRandomSite(referrerIndex)
    } else if (type === 'next') {
        // get index of next website in list
         var nextIndex = referrerIndex + 1
         console.log(nextIndex)

        // if index is greater than the length of list, loop back to 0 index
        if (nextIndex > sites.length - 1) {
            nextIndex = 0
        }

        var redirect = sites[nextIndex]
    } else { // redirect to previous
        var previousIndex = referrerIndex - 1
        if (previousIndex < 0) { // if previous index is less than 0, loop around to last index
            previousIndex = sites.length - 1
        }

        var redirect = sites[previousIndex]
    }

    window.location.href = redirect

Redirect Page

<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="https://christian-webring.nekoweb.org/onionring-variables.js"></script> <script type="text/javascript" src="static/redirect.js"></script> </head> <body> </body> </html>