fix: slugified URLs for tag links

src/_data/helpers.js

@@ -16,7 +16,7 @@ export function getLinkActiveState(itemUrl, pageUrl) {
     }
 
     if (itemUrl.length > 1 && pageUrl.startsWith(itemUrl.replace('/page-0/', ''))) {
-      response += ' data-state="active"';
+      response += ' aria-current="page" data-state="active"';
     }
   }
 

src/_includes/partials/post-tags.njk

@@ -1,7 +1,7 @@
 {% if tags.size > 1 %}
   <div class="my-s-m cluster">
     {% for tag in tags %}
-      <a href="/tags/{{ tag }}/"> {{ tag }} </a>
+      <a href="/tags/{{ tag | slugify }}/"> {{ tag }} </a>
     {% endfor %}
   </div>
 {% endif %}

src/_layouts/post.njk

@@ -25,7 +25,7 @@ schema: BlogPosting
       %}
         <!-- tags -->
         {% for tag in tags %}{% if tag != "posts" %}
-          <a class="button" href="/tags/{{ tag }}/" data-small-button> {{ tag }} </a>
+          <a class="button" href="/tags/{{ tag | slugify }}/" data-small-button> {{ tag }} </a>
         {% endif %}{% endfor %}
       {% endif %}
     </p>

src/common/tagList.njk

@@ -4,7 +4,7 @@ pagination:
   data: collections.tagList
   size: 1
   alias: tag
-permalink: /tags/{{ tag }}/
+permalink: /tags/{{ tag | slugify }}/
 eleventyComputed:
   title: '{{ meta.blog.tagSingle }}: {{ tag }}'
 ---
@@ -23,10 +23,10 @@ eleventyComputed:
   {% for tag in collections.tagList %}
     <li>
       <a
-        href="/tags/{{ tag }}/"
+        href="/tags/{{ tag | slugify }}/"
         class="button"
         {{
-          helpers.getLinkActiveState('/tags/' + tag,
+          helpers.getLinkActiveState('/tags/' + tag | slugify + '/',
           page.url)
           |
           safe

src/common/tags.njk

@@ -7,7 +7,7 @@ eleventyComputed:
 
 <div class="taglist | mt-s-m cluster">
   {% for tag in collections.tagList %}
-    <a href="/tags/{{ tag }}/" class="button"> {{ tag }} </a>
+    <a href="/tags/{{ tag | slugify }}/" class="button"> {{ tag }} </a>
   {% endfor %}
 </div>