From 0cfa38f462a97be8ef3741b23591f590174d2ecd Mon Sep 17 00:00:00 2001
From: Dominic DiTaranto <domdit@gmail.com>
Date: Mon, 9 Sep 2024 18:30:35 -0400
Subject: initial commit

---
 README.md | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 README.md

(limited to 'README.md')

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..14c0313
--- /dev/null
+++ b/README.md
@@ -0,0 +1,118 @@
+# 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.
+<br><br>
+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.
+
+
+<h1>Code For End Users:</h1>
+this allows the end users to just put vanilla HTML on their site without having to import packages and using javascript,<br>
+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>
+
+```
+
+<h1>How To Implement</h1>
+- Create a page on your site called redirect <br>
+- Create a js script to redirect users <br>
+- place that script on the redirect page <br>
+
+<h2>redirect.js</h2>
+
+```
+
+    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
+```
+
+<h2>Redirect Page</h2>
+
+```
+
+    <!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