Site Index

Join

This webring is for members and friends of the London Permacomputing Club!

To join, just copy the code for one of the widgets to a page on your site (preferably your homepage), and then input that site here. You'll be manually added asap :).

The widget is fully customisable, and should be usable on neocities sites without the subscription to use external Javascript.

The previous version had a couple of bugs in - if you can see your name on the list but your widget isn't working, just delete the old widget and drop in one of the new ones. Sorry!! If you're still having any problems give me an email - izzy@iso-bel.computer.

...
←
I'm in the London Permacomputing Club!
We meet on Mondays at 6:30, @ SET Social, Peckham
what is this? | wiki | random | index / join 		→ 
                
<div id='londonpermacomputring'>
    <table>
        <tr>
            <td class='webring-prev'><a id='permaPrev'>←</a></td>
            <td class='webring-info'>
                <img src='https://www.iso-bel.computer/static/webring/flower.png'><img src='https://www.iso-bel.computer/static/webring/flower.png'><img src='https://www.iso-bel.computer/static/webring/flower.png'>
                <br>I'm in the <a href='https://london.permacomputing.net/posts/index.html'>London Permacomputing</a> Club!
                <br>We meet on Mondays at 6:30, @ <a href='https://www.openstreetmap.org/way/72032052'>SET Social, Peckham</a><br>
                <span class='webring-links'>
                    <a href='https://garlic.garden/onionring/'>what is this?</a> |
                    <a href='https://permacomputing.net'>wiki</a> |
                    <a href='#' id='permaRandom'>random</a> |
                    <a href='https://www.iso-bel.computer/permacomputingwebring'>index / join</a>
                </span>
            </td>
            <td class='webring-next'><a id='permaNext'>→</a></td>
        </tr>
    </table>

</div>

<script type='module'>
const widget = document.getElementById('londonpermacomputring')
async function getSites() {return await fetch('https://www.iso-bel.computer/static/webring/sites.json');}

const thisSite = window.location.href; //get the url of the site we're currently on
const response = await getSites()
if (!response.ok) {throw new Error(`Response status: ${response.status}`);}
const json = await response.json();
const sites = json.sites
let thisIndex = null;

// go through the site list to see if this site is on it and find its position
for (let i = 0; i < sites.length; i++) {
    if (thisSite.startsWith(sites[i])) { //we use startswith so this will match any subdirectory, users can put the widget on multiple pages
        thisIndex = i;
        break; //when we've found the site, we don't need to search any more, so stop the loop
    }
}

function randomSite() {
    const randomIndex = Math.floor(Math.random() * sites.length);
    widget.querySelector('#permaRandom').href = sites[randomIndex]
}

if (thisIndex == null) {
    widget.innerHTML = `<table><tr><td>This site isn't part of the London Permacomputing webring - yet...</td></tr></table>`;
} else {
    const previousIndex = (thisIndex-1 < 0) ? sites.length-1 : thisIndex-1;
    const nextIndex = (thisIndex+1 >= sites.length) ? 0 : thisIndex+1;
    widget.querySelector('#permaPrev').href = sites[previousIndex]
    widget.querySelector('#permaNext').href = sites[nextIndex]
    widget.querySelector('#permaRandom').addEventListener('click', randomSite)
    randomSite()
}
</script>
<style>
#londonpermacomputring {
    margin: 0 auto;
    padding: 8px;
}

#londonpermacomputring table {
    margin: 0 auto;
    background-color: #ffffff70;
    border: 1px solid #00AA00;
}

#londonpermacomputring img {
    height: 1.5em;
    width: auto;
}

#londonpermacomputring table tr td {
    padding: 10px;
}

#londonpermacomputring.webring-prev {
    text-align:right;
}

#londonpermacomputring.webring-info {
    text-align:center;
}

#londonpermacomputring.webring-next {
    text-align:left;
}

#londonpermacomputring.webring-links {
    font-size:small;
}
</style>

            
                
<div id='londonpermacomputring'>
    <table>
        <tr>
            <td class='webring-prev'><a id='permaPrev'>←</a></td>
            <td class='webring-info'>
                <img src='https://www.iso-bel.computer/static/webring/flower.png'><img src='https://www.iso-bel.computer/static/webring/flower.png'><img src='https://www.iso-bel.computer/static/webring/flower.png'>
                <br><a href='https://london.permacomputing.net'>London Permacomputing</a> Webring<br>
                <span class='webring-links'>
                    <a href='#' id='permaRandom'>random</a> |
                    <a href='https://www.iso-bel.computer/permacomputingwebring'>index / join</a>
                </span>
            </td>
            <td class='webring-next'><a id='permaNext'>→</a></td>
        </tr>
    </table>
</div>

<script type='module'>
const widget = document.getElementById('londonpermacomputring')
async function getSites() {return await fetch('https://www.iso-bel.computer/static/webring/sites.json');}

const thisSite = window.location.href; //get the url of the site we're currently on
const response = await getSites()
if (!response.ok) {throw new Error(`Response status: ${response.status}`);}
const json = await response.json();
const sites = json.sites
let thisIndex = null;

// go through the site list to see if this site is on it and find its position
for (let i = 0; i < sites.length; i++) {
    if (thisSite.startsWith(sites[i])) { //we use startswith so this will match any subdirectory, users can put the widget on multiple pages
        thisIndex = i;
        break; //when we've found the site, we don't need to search any more, so stop the loop
    }
}

function randomSite() {
    const randomIndex = Math.floor(Math.random() * sites.length);
    widget.querySelector('#permaRandom').href = sites[randomIndex]
}

if (thisIndex == null) {
    widget.innerHTML = `<table><tr><td>This site isn't part of the London Permacomputing webring - yet...</td></tr></table>`;
} else {
    const previousIndex = (thisIndex-1 < 0) ? sites.length-1 : thisIndex-1;
    const nextIndex = (thisIndex+1 >= sites.length) ? 0 : thisIndex+1;
    widget.querySelector('#permaPrev').href = sites[previousIndex]
    widget.querySelector('#permaNext').href = sites[nextIndex]
    widget.querySelector('#permaRandom').addEventListener('click', randomSite)
    randomSite()
}
</script>
<style>
#londonpermacomputring {
    margin: 0 auto;
    padding: 8px;
}

#londonpermacomputring table {
    margin: 0 auto;
    background-color: #ffffff70;
    border: 1px solid #00AA00;
}

#londonpermacomputring img {
    height: 1.5em;
    width: auto;
}

#londonpermacomputring table tr td {
    padding: 10px;
}

#londonpermacomputring.webring-prev {
    text-align:right;
}

#londonpermacomputring.webring-info {
    text-align:center;
}

#londonpermacomputring.webring-next {
    text-align:left;
}

#londonpermacomputring.webring-links {
    font-size:small;
}
</style>
←
→ 
                
<div id='londonpermacomputring'>
<table style='border: 1px solid #00AA0080;background-color: #ffffff10;'>
    <tr>
        <td class='webring-prev'><a id='permaPrev'>←</a></td>
        <td class='webring-info'>
            <img src='https://www.iso-bel.computer/static/webring/flower.png'><br>
        </td>
        <td class='webring-next'><a id='permaNext'>→</a></td>
    </tr>
</table>
</div>

<script type='module'>
const widget = document.getElementById('londonpermacomputring')
async function getSites() {return await fetch('https://www.iso-bel.computer/static/webring/sites.json');}

const thisSite = window.location.href; //get the url of the site we're currently on
const response = await getSites()
if (!response.ok) {throw new Error(`Response status: ${response.status}`);}
const json = await response.json();
const sites = json.sites
let thisIndex = null;

// go through the site list to see if this site is on it and find its position
for (let i = 0; i < sites.length; i++) {
    if (thisSite.startsWith(sites[i])) { //we use startswith so this will match any subdirectory, users can put the widget on multiple pages
        thisIndex = i;
        break; //when we've found the site, we don't need to search any more, so stop the loop
    }
}

if (thisIndex == null) {
    widget.innerHTML = `<table><tr><td>This site isn't part of the London Permacomputing webring - yet...</td></tr></table>`;
} else {
    const previousIndex = (thisIndex-1 < 0) ? sites.length-1 : thisIndex-1;
    const nextIndex = (thisIndex+1 >= sites.length) ? 0 : thisIndex+1;
    widget.querySelector('#permaPrev').href = sites[previousIndex]
    widget.querySelector('#permaNext').href = sites[nextIndex]
}
</script>
<style>
#londonpermacomputring {
    margin: 0 auto;
    padding: 8px;
}

#londonpermacomputring table {
    margin: 0 auto;
    background-color: #ffffff10;
    border: 1px solid #00AA0080;
}

#londonpermacomputring img {
    height: 1.5em;
    width: auto;
}

#londonpermacomputring table tr td {
    padding: 10px;
}

#londonpermacomputring.webring-prev {
    text-align:right;
}

#londonpermacomputring.webring-info {
    text-align:center;
}

#londonpermacomputring.webring-next {
    text-align:left;
}

#londonpermacomputring.webring-links {
    font-size:small;
}
</style>