LainRing

Monday, May 9, 2022    Post   485 words   3 mins read

A decentralized webring created by the users of lainchan, an image board; initial data was retrieved from Ophanim, if you notice missing images refresh the page.

Please let me know if a link is dead or if you want your website added to the list (don’t forget to specify a website URL, a website title and a 240x60 banner image too). All links have "noopener noreferrer" attributes, order is random, last updated May 2022.

If you want to go to a random website from the LainRing, append ?go=random to this page URL or click here (you might want to open that in a new tab).

... Loading, please wait ...

Developers

You might want to use the JSON file here (download it, has all the data inside) and parse it on your website. The simplest way to consume the JSON using Javascript is this:

<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, buld 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 err
	});
});
</script>

Same thing in basic PHP:

$string = file_get_contents("lainring.json");
if ($string === false) {
	echo 'Err!';
}
$json = json_decode($string, true);
if ($json === null) {
	echo 'Err!';
}
foreach ($json['items'] as $key => $val) {
	echo '<a title="' . $val['title'] . '" ' . 
		'href="' . $val['url'] . '">' . 
		'<img src="' . $val['img'] . '" alt="' . $val['title'] . '" /></a>';
}

Make sure you download the banner images too and modify the paths to your lainring.json file and banner images.

If you want to redirect the visitors to a random page of the LainRing, it’s really easy:

<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 err
});
</script>