Garden of Learning

Simplest single file webring implementation

(modified: )3 min read

Webring is a collection of websites that you can traverse in a ring-like fashion: moving forward or backwards and eventually ending up back to the starting point.

To show that it’s not technically complex to build, here’s a very simple example of a single HTML file that can be used to host a full webring implementation.

All you need to do as a manager of the webring is to add and remove URLs in the ring array, host the file somewhere in the web and ask people in your ring to add links like (<...> marks things you need to change; leave out the angle bracket from the finished string):

<a href="<your-domain>?host=<their website url>&dir=prev">Previous</a>
<a href="<your-domain>?host=<their website url>&dir=next">Next</a>

When a user clicks such link, they are directed to Webring page and then redirected to the corresponding page in the webring.

Implementation

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Super Simple Static Webring</title>
  </head>
  <body>
    <h1>Super Simple Static Webring</h1>
    <p id="redir-message">Redirecting...</p>
    <div id="error"></div>
    <script>
      function webring(location) {
        // Add links to all members of the webring here, one per line.
        // Sites will be traversed in this order
        // Remove these example ones.
        let ring = [
          "https://hamatti.org",
          "https://notes.hamatti.org",
          "https://zine.hamatti.org",
        ];
 
        // When this page is called with ?host=<site>&dir=<next|prev>
        // It will redirect user to the corresponding page in the webring
        let url = new URL(location);
        let searchParams = new URLSearchParams(url.search);
 
        let host = searchParams.get("host");
        let dir = searchParams.get("dir") || "next";
 
        // Find host site's position in the ring
        let index = ring.indexOf(host);
 
        // If host is not defined, show error.
        if (host === null) {
          throw Error(
            `<p class="warning">You need to provide host=<host> parameter to the URL.</p>`,
          );
        }
 
        // If host not found, show error.
        if (index === -1) {
          throw Error(
            `<p class="warning">Page "${host}" not found in the webring</p>`,
          );
        }
 
        // If dir parameter is next (or empty), find next in ring.
        if (dir === "next") {
          // If host is the last in list, loop to start
          if (index === ring.length - 1) {
            return ring[0];
          } else {
            return ring[index + 1];
          }
        }
 
        // If dir is prev, find previous in ring
        else if (dir === "prev") {
          if (index === 0) {
            return ring[ring.length - 1];
          } else {
            return ring[index - 1];
          }
        }
      }
 
      // When page is loaded, look for the URL to redirect to
      // The link to this page should look like this:
      // https://<this-pages-url/?host=https://hamatti.org&dir=next
      try {
        let redirectURL = webring(window.location);
        window.location.href = redirectURL;
      } catch (error) {
        // If it fails, show error on page.
        document.querySelector("#redir-message").remove();
        document.querySelector("#error").innerHTML = error.message;
      }
    </script>
  </body>
</html>

Code is also available at https://github.com/hamatti/barebones-webring-implementation and is licensed with MIT license.

Recent Notes

Backlinks

Recent Notes