Exploring tags

Update Jan 2022: I've decided to remove this exploration from the site, but still it's an interesting thought exercise.

I'm stuck on a train for a couple of hours, so I might as well code a bit on one of the things I wanted to explore in this new blog.

Since I have different topics and themes throughout my posts, and I want to document the way I iterate on this site and new things I'm building for Otter, the number of categories keeps expanding.

If you were following my newsletter (or checking most of the posts in the blog), you'd know I also write heavily about mindset, habits, productivity, or leadership. Now I’m adding at least two more to those categories, website redesign and code – hopefully, they’re self-explanatory.

Adding them to each post

It’s been straightforward to add these to any post. Since I’m writing using markdown, each post contains a YAML front matter section at the top of the document, something like this:

---
title: "Exploring tags"
date: "2021-09-05"
---

---
title: "Exploring tags"
date: "2021-09-05"
---

Now, I can represent a tag as an array of strings like so:

---
title: "Exploring tags"
date: "2021-09-05"
tags:
	- website redesign
	- code
---

---
title: "Exploring tags"
date: "2021-09-05"
tags:
	- website redesign
	- code
---

And with that, I’m able to parse quickly those as I would with any other metadata!

Styling tags

Since I want them to be easily parseable in the post list, I decided to give each of them a different color. This idea gives me a good reason to use one thing I love about Stitches: variants.

I can define the tag base styles, and then, based on a variant specification, I can define the different colours in a very simple way:

const postTag = css({
  color: "$mauve11",
  fontSize: "$1",
  fontFamily: "$mono",
  textTransform: "uppercase",
  px: 8,
  py: 4,
  lineHeight: 1,
 
  variants: {
    color: {
      'websiteredesign': {
        backgroundColor: "$gold3",
        color: "$gold11",
      },
      'code': {
        backgroundColor: "$mauve3",
        color: "$mauve11",
      },
    }
  },
  defaultVariants: {
    color: 'code',
  }
})

const postTag = css({
  color: "$mauve11",
  fontSize: "$1",
  fontFamily: "$mono",
  textTransform: "uppercase",
  px: 8,
  py: 4,
  lineHeight: 1,
 
  variants: {
    color: {
      'websiteredesign': {
        backgroundColor: "$gold3",
        color: "$gold11",
      },
      'code': {
        backgroundColor: "$mauve3",
        color: "$mauve11",
      },
    }
  },
  defaultVariants: {
    color: 'code',
  }
})

This means that I can then render my tags in the following way:

post.tags.map((tag: PostTag) =>
  <span className={postTag({ color: tag.replace(' ', '') })}>{tag}</span>)

post.tags.map((tag: PostTag) =>
  <span className={postTag({ color: tag.replace(' ', '') })}>{tag}</span>)

Each tag gets matched to its variant definition, applying the colours, and if there is no variant to apply, I can default to one so that they’re always at least styled.

What’s next

With this post, I've also realized I need to explore adding syntax highlighting to code snippets. So that's going to be a likely overall next step for the site.

And well, I’ll jump now on adding tags to every post, of course, but also I might want to explore in the future a way to use those tags as not only visual indicators but also as an active way of filtering the post list. Who knows!

If you’ve enjoyed this post, or you have any suggestions or questions about anything on the above, feel free to send me over a message at @msanromanv on Twitter! I’d love to hear from you.