Mike MJ Harris

Adding tags and talks

Share

My blog needed updating - I wanted to split out all posts that referenced talks I've done. To do so I decided to add tags to posts - initially this project only supported having a category for each post. Being a side project it was up to me to add this.

Page meta data

Each post in the blog has a bunch of meta data fields that are parsed and converted into page attributes. For example the meta data for this page consists of the following:


      <!-- meta-data title: Adding tags and talks -->
      <!-- meta-data searchtitle: adding-tags-and-talks  -->
      <!-- meta-data date: 21 July 2019 -->
      <!-- meta-data intro: New functionality for my blog -->
      <!-- meta-data author: Mike Harris  -->
      <!-- meta-data category: tech -->
    

It was built to be extendable so to add tags was initially a case of including the following line:


        <!-- meta-data tags: talk, code -->
    

The main different here is that the values are an array. For all the other fields they are key value pairs so there were a few other changes to make.

Viewing the code

All the code changes can be seen in full in this PR on github.

Parsing tags

The server reads all the files in the content folder, it then parses each page using a regex pattern to convert the meta field attributes to values. In this case I added an if statement that checks if it's the 'tags' field and if so convert the value into an array by splitting on commas.

Filtering by tags

This blog uses handlebars as the templating engine. For the categories functionality I wrote a `compares` function to check if a post matched the category. As tags are arrays this time we needed an `includes` function.

Adding and viewing the tags

Once the core functionality was done I needed to go back and update previous posts to include relevant tags. My main initial need was to be able to collect all the talks I've done. In the future I will add a more dynamic tags page where you can see all the tags and select the ones you want but for now I've built a fixed template for posts tagged as talks. There's a new link on the main menu and you can see the result of all the work on the talks page

Summary

Adding new functionality was fairly quick and smooth. Given this is a four year old side project happy to get what I wanted with minimal effort.