1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
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>
|
