144 lines
3.9 KiB
HTML
144 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>webring</title>
|
|
<style type="text/css" media="screen">
|
|
body {
|
|
max-width: 70ch;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>a very powerful webring</h1>
|
|
</header>
|
|
<main>
|
|
<section id="about">
|
|
<h2>about</h2>
|
|
<p>
|
|
this is a webring.
|
|
a webring is like an onion ring
|
|
except it is more abstract and intangible and you can't eat it.
|
|
but if you imagine the breading of the onion ring
|
|
as a series of websites instead of fried batter,
|
|
then you will notice that if you follow
|
|
the breadcrumbs, as it were,
|
|
by the time you've gotten to the bottom of the list,
|
|
then you've arrived back at the top!
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h2>members</h2>
|
|
<ul>
|
|
{{#data}}
|
|
<li>
|
|
<a href="{{{url}}}">{{{title}}}</a>
|
|
</li>
|
|
{{/data}}
|
|
</ul>
|
|
</section>
|
|
<section id="feeds">
|
|
<h2>feeds</h2>
|
|
<p>
|
|
here's a special bonus,
|
|
just for you,
|
|
our special friend.
|
|
a special little treat
|
|
for special little you.
|
|
it's an opml file of all webring members
|
|
that have a feed.
|
|
<a href="webring.opml">here you go!</a>
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h2>how it works</h2>
|
|
<p>
|
|
this webring requires no client/member-side javascript.
|
|
it works by navigating to this page
|
|
with certain query parameters. e.g.
|
|
<code>?name=town&dir=next</code>.
|
|
then this page will do some javascript
|
|
and redirect the user to the next (or previous) page in the ring.
|
|
so you can make the whole thing work
|
|
with just a couple of anchor tags on your site.
|
|
</p>
|
|
</section>
|
|
<section id="join">
|
|
<h2>join</h2>
|
|
<p>
|
|
to join this <del>onion</del> webring,
|
|
add your information to <code>db/members.rec</code>
|
|
at <a href="https://git.tilde.town/dozens/webring">https://git.tilde.town/dozens/webring</a>
|
|
</p>
|
|
</section>
|
|
<section id="snippet">
|
|
<h2>snippet</h2>
|
|
<p>
|
|
once you have been added to the database,
|
|
you can include the webring html on your page however you like.
|
|
here's an example:
|
|
</p>
|
|
<code>
|
|
<pre>
|
|
<div>
|
|
<p>this site is a member of a very powerful webring!</p>
|
|
<p>
|
|
<a href="https://tilde.town/~dozens/webring/dozens/index.html?name=yoursitename&dir=prev">previous</a> |
|
|
<a href="https://tilde.town/~dozens/webring/dozens/index.html">all</a> |
|
|
<a href="https://tilde.town/~dozens/webring/dozens/index.html?name=yoursitename&dir=next">next</a> >
|
|
</p>
|
|
</div>
|
|
</pre>
|
|
</code>
|
|
<p>
|
|
that'd look like this:
|
|
</p>
|
|
<blockquote>
|
|
<div>
|
|
<p>this site is a member of a very powerful webring!</p>
|
|
<p>
|
|
< <a href="https://tilde.town/~dozens/webring/dozens/index.html?name=yoursitename&dir=prev">previous</a> |
|
|
<a href="https://tilde.town/~dozens/webring/dozens/index.html">all</a> |
|
|
<a href="https://tilde.town/~dozens/webring/dozens/index.html?name=yoursitename&dir=next">next</a> >
|
|
</p>
|
|
</div>
|
|
</blockquote>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<script>
|
|
const members = [
|
|
{{#data}}
|
|
{
|
|
"id": {{{id}}},
|
|
"name": "{{{name}}}",
|
|
"url": "{{{url}}}",
|
|
},
|
|
{{/data}}
|
|
]
|
|
const last = members.length - 1
|
|
const query = window.location.search
|
|
const params = new URLSearchParams(query)
|
|
const name = params.get('name')
|
|
const dir = params.get('dir')
|
|
if (name && dir) {
|
|
const step = (dir === 'next') ? 1 : (dir === 'prev') ? -1 : 0
|
|
const member = members.filter(member => member.name === name)[0]
|
|
if (!(typeof member === "undefined")) {
|
|
const next = (member.id + step > last)
|
|
? 0
|
|
: (member.id + step < 0)
|
|
? last
|
|
: member.id + step
|
|
const loc = members.filter(m => m.id === next)[0]
|
|
window.location.replace(loc.url)
|
|
}
|
|
}
|
|
</script>
|