summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html145
1 files changed, 145 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2607088
--- /dev/null
+++ b/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+</head>
+<body>
+<h1>Summary</h1>
+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>Working Example:</h1>
+<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>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
+<xmp>
+ <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>
+
+</xmp>
+
+<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>
+
+<pre>
+
+ 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
+</pre>
+
+<h2>Redirect Page</h2>
+
+<xmp>
+
+ <!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>
+</xmp>
+
+</body>
+</html> \ No newline at end of file