diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 145 |
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 |