june's super cool super easy webring template ꔛ

hey you! are you interested in making a webring? do you not know anything about coding? well boy howdy are you in luck.

introducing: webstring.js! this script is a super-simple alternative to garlic.garden's excellent onionring.

how is this different from onionring?

• absolutely everything is contained within a single file, for ease of editing & use.
• it's compact—not counting the settings object, the code is only 8 lines long.
• there's customization options! want to use a stylesheet? add multiple widgets? scroll down and ask the wizard.

how do i start a webring with this?

you can view the script here. copy it into a new javascript file (ending with ".js") somewhere on your site.

this is the settings object, the only part you need to worry about:

// webring settings
webring = {

  // list of sites in the ring
  sites: [
    "https://your_site_here.neocities.org",
    "https://another_site.neocities.org",
  ],

  // html inserted as your widget
  // PREV and NEXT get replaced with neighboring site urls
  widget: `
    <div id="my-webring" style="display: flex; gap: 8px">
      <a href="PREV">prev</a>
      <div>webring</div>
      <a href="NEXT">next</a>
    </div>
  `,

  // html inserted instead of your widget on sites that aren't in the ring
  error: "<div>This site isn't part of the webring yet.</div>",

};

the settings object is where all the information about your webring is kept.

i highly recommend giving your widget html an id="" with the name of your webring, otherwise it's really difficult for webring members to add custom styling to their widgets.

how do i use my widget?

wherever you'd like the widget to be, just link the script! like so:

<script src="https://your_site_here.neocities.org/folder/webstring.js"></script>

don't forget to replace the src with the path your version of the script is stored at!

OK that's all. happy webringing

← home