Creating a Zonelets Tagging System

Hello! If you are reading this it means I got at least the basics working to set up my new journal section. If you're not reading this then we may have entered some kind of paradox situation. Uh Oh.

Anyway. So. As a rule, I am someone who has to actively remind myself that there are steps available to me inbetween the stages of "nothing" and "perfect," as otherwise this is a thing that I am liable to forget. I am also someone who easily falls down rabbitholes of hubris and hyperfixation, sometimes to great effect. We will come back to these facts in a little bit.

Now, I am having good fun building my shiny new site, and exploring the options available to me through the use of html and javascript. I'm mostly just playing around and setting up the basics for my site. And I decide that the next thing I want to get ready to go is the Journal.
I had heard mentions of a few different pre-set blog scripts that are widely used on neocities and beyond on the indieweb, many of which are based around Zonelets, an excellent little bare-bones engine designed to allow an easy point of access to DIY blogging.

"Thanks to Zonelets, you can create an UNPROFESSIONAL-looking website by writing NUMEROUS lines of code!"

-Marina Kittaka, introducing her blogging engine.

Now that's the kind of tagline I can get behind.

So. Zonelets found, ready-to-go straight out of the box - simple, right?
Wrong- You remember I said we'd come back to those points about me later? Well it's later now-
Anyway I wanted a tagging system to sort my blog posts with - something that Zonelets explicitly does not have. Googling around and checking the neocities subreddit wasn't giving me anything prewritten to use, but Zonelets is set up in a way that allows for additional metadata to be saved alongside the post listing, when you add new posts to the script file. And as someone who doesn't want to implement a step between "no blog" and "taggable blog," and who has just enough memory of coding in C# at college (~2016-17) to not feel the fear of god while eyeing up a language I've never worked in before...
I proceeded to spend several hours picking apart the Zonelets javascript and adding new features to allow tagging and sorting posts.

Now. I definitely don't think this is necessarily the best method of implementing these features that could exist, and it is, so far, largely untested... BUT. following debugging some silly mistakes I seem to have made something that looks like it works! Cool beans!

I'll be honest, I don't know shit about how to do 'proper' documentation or anything like that, but here's a rough run-down of how my system should work:

  • Zonelets works by manually adding new posts to an array of array in the script. Each individual post, therefore, is stored as its own array, with the first two items reserved for the html file name and a version of the post title containing and special characters. This is our entry point to adding the new tagging system.
  • When a new post is added to the script file, after its first two items, the array can be used to store any tags you like, each as separate items in the list. We can add as many tags as we like this way, but they will be case-sensitive and open to human error if you misspell anything. Hopefully those kinds of mistakes should be easy to pick up on later, though.
  • I added three new functions to the script, each to deal with the tags in one way or another when loading pages. Each of these were also given their own html injection line later in the script, in line with how the rest of Zonelets works.
  • The first new function will generate an html list containing links to all posts with a specific tag. A couple of nested for loops allows the script to check through each post array and check for the requested tag, adding the matching posts to yet another array (there are a lot of arrays in play here). This function will be used to populate a page dedicated to that specific tag.
  • The second and third functions work together to generate an html list of links to each of the dedicated tag pages, for easy linking and searching. I'm going to put this section in my sidebar. In retrospect this could have been one onger function but I don't want to accidentally break something by trying to fix that now.
  • Additionally, I added a section that will generate a lists of tags attached to a particular post to be called at the top of that post's page, each again linking back to the tag pages.
  • I also had to make a few minor adjustments to make the new system work alongside the old, including adjusting how the script checks for an alternate post title and tweaking the formatPostLink function to format any array of posts it was given instead of just the master list.

This should now all work, in theory. In the future, I'd love to share this code with others who might be looking for a similar solution, but I want to give it a little bit of a testing period first. Now that I've got the system live on my site, I don't know any better way to do that than just to keep adding new posts with new tags. That should be doable, because I have a lot of disconnected topics I want to talk about.
Once I'm happy that it's not going to break at the slightest sign of stress, I will definitely update this post with a link to where you can access the code! If you're reading this and that hasn't happened yet, or you're impatient and willing to potentially deal with some wonky code acting strangely, then you're welcome to drop me a line on discord or anywhere else linked to the left, and I'll chuck you the files.

Here's to keeping the barrier of entry to the web low.

Edit 26/08/23: Here's a link to download the adjusted script! If you come unstuck, let me know - but it should all work from here!

Welcome to my blog!
This is gonna be a bit of a brain-dump of stuff I like to nerd out about. You can explore by topic (hopefully, if I got the code right!), or just read through whatever strikes your fancy.

Return to Journal Index