Lainring

{
	"updated": "2023-02-05T10:46:17",
	"items": [{
		"url": "website URL, prefixed with http(s)://",
		"tor": "Tor hidden service URL",
		"i2p": "website I2P URL",
		"img": "website banner image, can be PNG, JPEG or GIF",
		"title": "website title",
		"feed": "website feed URL, can be RSS, JSON, ATOM or OPML",
		"offline": true
	}, 
	...
	]
}

<div id="lainring">... Loading, please wait ...</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
	/* Try to retrieve the json file */
	fetch('lainring.json').then(res => res.json()).then((data) => {
		let out = '';
		/* For each element in the JSON, build an anchor-image DOM structure */
		data.items.forEach(element => {
			/* This string is split in multiple lines for readability */
			out += '<a title="' + element.title + '" ' +
				'href="' + element.url + '">' +
				'<img src="' + element.img + '" alt="' + element.title + '" /></a>';
		});
		/* Inject the DOM structure into the element with the id 'lainring' */
		document.getElementById('lainring').innerHTML = out;
	}).catch(err => {
		/* throw an error */
		throw err
	});
});
</script>

/* Try to retrieve the json file */
$string = file_get_contents("lainring.json");
if ($string === false) {
	/* File doesn't exist, throw an error */
	echo 'Err!';
}
/* Decode the json string into an array */
$json = json_decode($string, true);
if ($json === null) {
	/* File is gibberish, throw an error */
	echo 'Err!';
}
/* For each element in the JSON, build an anchor-image DOM structure
   and echo it */
foreach ($json['items'] as $key => $val) {
	echo '<a title="' . $val['title'] . '" ' . 
		'href="' . $val['url'] . '">' . 
		'<img src="' . $val['img'] . '" alt="' . $val['title'] . '" /></a>';
}

<script>
/* Try to retrieve the json file */
fetch('lainring.json').then(res => res.json()).then((data) => {
	/* Get a random element from the JSON */
	let random = Math.floor(Math.random() * data.items.length);
	/* And redirect the browser to its URL */
	window.location.replace(data.items[random].url);
}).catch(err => {
	/* throw an error */
	throw err
});
</script>

<div id="lainring">... Loading, please wait ...</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
	/* Try to retrieve the json file */
	fetch('lainring.json').then(res => res.json()).then((data) => {
		/* Get a random element from the JSON */
		let random = Math.floor(Math.random() * data.items.length);
		/* And build the DOM structure for the image and its anchor link */
		document.getElementById('lainring').innerHTML =
			'<a href="' + data.items[random].url + '">' +
			'<img src="' + data.items[random].img +
			'" alt="' + data.items[random].title + '" /></a>';
	}).catch(err => {
		/* throw an error */
		throw err
	});
});
</script>

<div id="lainring">... Loading, please wait ...</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
	/* Try to retrieve the json file */
	fetch('lainring.json').then(res => res.json()).then((data) => {
		function refresh_banner() {
			/* Get a random element from the JSON */
			let random = Math.floor(Math.random() * data.items.length);
			/* Build the DOM structure for the image and its anchor link */
			document.getElementById('lainring').innerHTML = 
				'<a href="' + data.items[random].url + '">' +
				'<img src="' + data.items[random].img +
				'" alt="' + data.items[random].title + '" /></a>';
		}
		/* Show the initial banner image */
		refresh_banner();
		/* Refresh the banner image every 10000 milliseconds (10 seconds) */
		setInterval(refresh_banner, 10000);
	}).catch(err => {
		/* throw an error */
		throw err
	});
});
</script>

<div id="lainring">... Loading, please wait ...</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
	/* Try to retrieve the json file */
	fetch('lainring.json').then(res => res.json()).then((data) => {
		/* Get a random element from the JSON */
		let random = Math.floor(Math.random() * data.items.length);
		/* And build the DOM structure for the anchor link */
		document.getElementById('lainring').innerHTML =
			'<a href="' + data.items[random].url + '">' + data.items[random].title + '</a>';
	}).catch(err => {
		/* throw an error */
		throw err
	});
});
</script>

<div id="lainring">
	<a title="previous website" class="prev" href="#">←</a> 
	part of <a href="https://sizeof.cat/post/lainring/">Lainring</a> 
	<a title="random website" class="random" href="#">↻</a> 
	<a title="next website" class="next" href="#">→</a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
	/* Try to retrieve the json file */
	fetch('lainring.json').then(res => res.json()).then((data) => {
		let next;
		let prev;
		let found = false;
		/* Cycle through all the elements in the array searching for the
		website we're currently on */
		data.items.forEach((element, index) => {
			let url = new URL(element.url);
			if (url.origin == window.location.origin) {
				/* This ugly part is so we don't get out of array bounds. Array index
				should not get lower than 0 or higher than the array length. */
				prev = (index - 1 < 0) ? 
					json_data.items[json_data.items.length - 1] :
					json_data.items[index - 1];
				next = (index + 1 > json_data.items.length - 1) ? 
					json_data.items[0] : 
					json_data.items[index + 1];
				found = true;
			}
		});
		if (found) {
			/* Website we're currently on is part of the webring, we change the
			URLs of the previous and next links. */
			document.querySelector("#lainring .next").href = next.url;
			document.querySelector("#lainring .prev").href = prev.url;
		} else {
			/* Website we're currently on is not part of the webring, so
			we hide the previous and next links, leaving the random link. */
			document.querySelector("#lainring .next").style.display = "none";
			document.querySelector("#lainring .prev").style.display = "none";
		}
		/* Add a click event for the random website button */
		document.querySelector("#lainring .random").addEventListener("click", function() {
			let random = Math.floor(Math.random() * data.items.length);
			window.location.replace(data.items[random].url);
		}, false);
	}).catch(err => {
		throw err
	});
});
</script>