Some HarpJS experiments involving categories

A few weeks ago I blogged about HarpJS, a static site builder that lets you have the benefits of a dynamic web app during development and the simplicity of a static site for deployment. I've been thinking about Harp, and tools like it, quite a bit since then (see my recent article for flippin' awesome) and I decided to try a few things during the break. What follows is a proof of concept, an experiment, please note that there are probably far better ways to do what I did, but on the off chance this may help others, I thought I'd share.

If you know the basics of how HarpJS works (and if you do not, be sure to check their documentation or my article linked to above), then you know that data is stored in a JSON file. This JSON file can create a basic index of data for your site. (It can do a lot more, but let's keep things simple for now.) So a simple blog may have something like this:

{
	"art1": {
		"title":"This is a test"
	},
	"art2": {
		"title":"This is a test 2"
	},
	"art3": {
		"title":"This is a test 3"
	},
	"art6": {
		"title":"This is a test 6"
	}
	
}

This JSON file creates a link between 4 HTML files (or EJS, or Jade, or Markdown) represented by the keys of the data structure. So in my case, Harp would expect to find art1.html, art2.html, etc. (Or art1.ejs, or art1.jade, etc.) The data inside each of these elements is available to the page, and other pages, and can be used dynamically. For example, the home page could list out all blog entries using this:

for article, slug in public.articles._data
  a(href="/articles/#{ slug }")
    h2= article.title

By the way, that example uses Jade, which I absolutely hate, but I was able to quickly copy it from the docs. Ok, so hopefully now you get what's going on here. The thing that I was mulling over was how to handle categories. Again, imagine a basic blog. Your articles typically belong to one or more categories (or tags). While you can simply use these categories in the blog entry render template, you probably also want to provide a way for users to browser content related to that category. So I began by simply adding a category field to my entry data. (For my experiments I used one category only, but obviously you would want to support multiple.)

{
	"art1": {
		"title":"This is a test",
		"category":"aaa"
	},
	"art2": {
		"title":"This is a test 2",
		"category":"bbb"
	},
	"art3": {
		"title":"This is a test 3",
		"category":"bbb"
	},
	"art4": {
		"title":"This is a test 4",
		"category":"aaa"
	},
	"art5": {
		"title":"This is a test 5",
		"category":"aaa"
	},
	"art6": {
		"title":"This is a test 6",
		"category":"aaa"
	}
	
}

In the data above I've got two unique categories, aaa and bbb. If I wanted to build an "aaa" and "bbb" category page, one simple way would be to just create new directories with their own JSON files and duplicate the data. That would work, but the duplication bugged me. If I ever edited a title or decided to remove a category from a blog entry, I'd have to remember to update the corresponding JSON file. That's not a lot of work of course, but it is an opportunity to screw up. I'm really good at screwing up so I try to avoid these opportunities when I can.

For my first experiment, I thought I'd build a page that listed out my categories and the corresponding entries related to those categories. HarpJS supports EJS and Jade, but I greatly prefer EJS as it lets me build more complex templating. I built the following file, called categories.ejs,