From 0cfa38f462a97be8ef3741b23591f590174d2ecd Mon Sep 17 00:00:00 2001 From: Dominic DiTaranto Date: Mon, 9 Sep 2024 18:30:35 -0400 Subject: initial commit --- index.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 index.html (limited to 'index.html') diff --git a/index.html b/index.html new file mode 100644 index 0000000..2607088 --- /dev/null +++ b/index.html @@ -0,0 +1,145 @@ + + + + + Title + + +

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> + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2