Adding posts by tag to Eleventy.js

Showing all the posts for a tag is a fairly common feature of most blogging software and it's fully supported by Eleventy.js as well. In fact, the main code you need to get it working is available in the docs under: Quick Tip #004 — Zero Maintenance Tag Pages For Your Blog. Here’s what the code looks like for my blog:

---
pagination:
  data: collections
  size: 1
  alias: tag
permalink: /tag/{{ tag | slug }}/
layout: base.njk
eleventyComputed:
  title: Posts tagged "{{ tag }}"
---

<header>
  <h2>Tagged “{{ tag }}”</h2>
  <a href="/tag">View all tags</a>
</header>

<ul>
  {% set taglist = collections[ tag ] %} {% for post in taglist | reverse %}
  <li>
    <a href="{{ post.url }}">{{ post.data.title }}</a><br />
    <small class="post-meta"><time>{{ post.data.date | postDate }}</time></small>
  </li>
  {% endfor %}
</ul>

You can see it in action by clicking on any of my post tags, like: Eleventy. Or you can view the source code. While I was converting my blog from Gatsby.js, I did run into a couple issues:

1. The dynamic page title has to be created with computed data, which I discovered thanks to this GitHub comment.
2. The tags are case sensitive; "JavaScript" is different from "javascript". Unfortunately when using slugify, this will create a duplicate tag issue, which I figured out thanks to this GitHub issue. I solved this by making all the tags the same case, but it's something to watch out for.