Webring Widget and other scripts for the BentoVid Webring.
Only works on browsers that support JS modules, so most browsers after mid 2018
- Add this snippet in the HTML of your site:
<webring-widget>
<script type="module" src="https://reisir.github.io/webring-widget/scripts/widget.js" defer></script>
</webring-widget>- Add the stylesheet to your
<head>or make your own<style>for the widget
A base stylesheet is available You can include it on your site or use it as a base to write a style for the widget yourself. It's recommended to at least add the base stylesheet as it automatically centers the widget in its container and adds some padding between the elements.
Add the stylesheet to the end of your <head>:
<head>
<!-- the other stuff -->
<link rel="stylesheet" href="https://reisir.github.io/webring-widget/styles/widget.css" />
</head>Edit scripts/sites and create a push request. Or ask me on discord.
You can see all of these in action on the examples page
<ul id="webring-list">
<script type="module" src="https://reisir.github.io/webring-widget/scripts/list.js" defer></script>
</ul>A base stylesheet is available for the list. You can include it on your site or use it as a base to style the list yourself.
<link rel="stylesheet" href="https://reisir.github.io/webring-widget/styles/list.css" /><table id="webring-table">
<script type="module" src="https://reisir.github.io/webring-widget/scripts/table.js" defer></script>
</table>A base stylesheet is available for the table. You can include it on your site or use it as a base to style the table yourself.
<link rel="stylesheet" href="https://reisir.github.io/webring-widget/styles/table.css" /><button id="random-site">Random Site</button>
<script type="module" src="https://reisir.github.io/webring-widget/scripts/random.js" defer></script>Using the webring-widget as plain HTML (for hosts that do not support scripts) (this is the least recommended method of using the widget)
Add this HTML snippet on your site. You need to manually change your sites name in the marked spot.
The /next and /previous links are redirects that can detect the site you're coming from, if the users browser allows it. This is usually the case but some browsers or security freaks may have disabled it. If the widget site can't detect a referrer, it will redirect the user to the webring home.
<webring-widget>
<span id="title">
<a href="https://bentovid.com/webring">BentoVid Webring</a>
</span>
<div id="links">
<a id="previous" href="https://reisir.github.io/webring-widget/previous" class="arrow">←</a>
<span id="current">YOUR SITE NAME HERE</span>
<a id="next" href="https://reisir.github.io/webring-widget/next" class="arrow">→</a>
</div>
</webring-widget>To make the widget look right, copy the contents of widget.css onto your site, either into a stylesheet or if you have no other option, into a <style> tag in your <head>.
Alternatively, if your host allows it, add a <link> to the widget.css stylesheet to get the base style working without having the css taking up space in your html.
<head>
<link
rel="stylesheet"
href="https://reisir.github.io/webring-widget/styles/widget.css"
/>
</head>