divsel

家 / neorings.org /

Neorings - Modern Webrings

A couple weeks ago I launched a webring hosting platform called neorings.org where users can make accounts, create webrings, register their pages, add their pages to webrings, and manage which pages are in their webrings. It's a backend that handles figuring out which pages to direct to and simplifies maintaining a ring. I made it in my spare time.

One of the things people have asked me for a lot is the ability to do custom CSS, which is a feature I've got on the roadmap, but it occured to me that there is already an API endpoint with all the information about your webring that you can use to build completely custom webring home pages that dynamically change with the data on neorings.org.

You can use this to make your webring page appear however you like. I'm going to show you an example of mine.

If you'd like to join Neoring, make an account at neorings.org and register your page using the Add Page button. Once you are logged in and have registered your page, you can add it on the neoring page at neorings.org. The webring is configured to automatically accept. If you return this page, you will see that your link is added. When you see your link, use the "Show HTML" button to see what HTML to copy into your page.

How did I do this?

Let's look at the parts that make the magic happen. We are fetching data from the API endpoint and inserting it into the page.

<h3 id="webring-title"></h3>
<ul id="webring-links"></ul>

<script>
const endpoint = "https://neorings.org/api/webring/1/";

const titleElem = document.getElementById('webring-title');
const linksElem = document.getElementById('webring-links');

fetch(endpoint)
    .then(response => response.json())
    .then(data => {
        const webring = data.webring;
        const pages = data.pages;

        titleElem.textContent = webring.title;

        pages.forEach(page => {
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = page.url;

            const pageTitle = document.createTextNode(`${page.title} by ${page.account.name}`);
            a.appendChild(pageTitle);
            li.appendChild(a);
            linksElem.appendChild(li);
        });
    })
    .catch(error => console.error('Error fetching data:', error));
</script>
    

Making your Own Custom Page

I'm sure you can come up with a much snazzier design for your ring than this, but that's about how it works.

Why don't you also have a look at the data returned from the API endpoint so you can see what's possible. You probably notice that your webring on neorings has a number in the URL. You will use that number instead of 1 for yours.

You'll notice there is a lot of information there. Not only do we also have access to the webring description on the site, we also have access to the description of every page on the ring. We could make the descriptions appear on hover or anything else you can think of.