Webring Widget and other scripts for the AMV Sashimi 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 it's 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>