Creating an Alphabetical Tag Page feat. Nunjucks Pitfalls

When I originally made my blog, I barely skimmed [the docs](https://www.11ty.dev/docs/quicktips/tag-pages/) and I quickly wrote the tags page to simply have them all dumped into a single, unordered list. After writing and importing so many posts, it ended up being seventy-five tags in a messy pile. You'd have to parse through the wall of hashtags like `#academic-writing`, `#accessibility`, `#ai`, `#blogging`, `#chronic-illness` all jumbled together without any rhyme or reason.

What I envisioned instead was something with form and function, with tags starting with the same letter being grouped together, and as a bonus, a navigation bar to jump to each letter. That sounds easy, right?

Famous last words. Instead, spend a good couple hours ~~being confused~~ learning about the limitations of Nunjucks templating and implementing JavaScript filters for Eleventy collections.

## A Simple Start

My first instinct was to modify the existing `tags.njk` template. What I originally had was short and simple.

{% raw %} ```njk <div class="tag-cloud"> {% for tag in collections.tagList %} {% set tagUrl %}/tag/{{ tag | slugify }}/{% endset %} {% set postsWithTag = collections.posts | filterByTag(tag) %} <a href="{{ tagUrl }}" class="tag-link">#{{ tag }} <span class="tag-count">({{ postsWithTag.length }})</span></a> {% endfor %} </div> ``` {% endraw %}

My idea was to use a Nunjunks macro to group tags by their first letter.

{% raw %} ```njk {% macro groupTagsByLetter(tags) %} {% set groupedTags = {} %} {% for tag in tags %} {% set firstLetter = tag | first | upper %} {% if groupedTags[firstLetter] %} {% set groupedTags[firstLetter] = groupedTags[firstLetter] + [tag] %} {% else %} {% set groupedTags[firstLetter] = [tag] %} {% endif %} {% endfor %} {{ groupedTags | sort }} {% endmacro %} ``` {% endraw %}

Perhaps the more seasoned among you can already see what's wrong here.

### Single Characters Everywhere

Instead of seeing `#academic-writing (5)` under the "A" section, there was: - `#a (0) · #a (0) · #a (0) · #a (0) · #a (0) · #a (0) · #a (0) · #a (0)` - `#b (0) · #c (0) · #c (0) · #c (0) · #c (0) · #d (0) · #e (0) · #e (0)`

Every tag was being split into individual characters, and every count was zero.

## What's Actually in the Collection?

My first thought was that something was wrong with the `collections.tagList` itself. I added debug output:

{% raw %} ```njk <!-- DEBUG: Show first 10 tags from tagList --> <div style="background: #f0f0f0; padding: 1rem; margin-bottom: 2rem; font-family: monospace;"> <h3>DEBUG: First 10 tags from collections.tagList:</h3> <ul> {% set counter = 0 %} {% for tag in collections.tagList %} {% if counter < 10 %} <li>{{ tag }} (first char: "{{ tag | first | uppe