Add taglist page

.eleventy.js

@@ -36,6 +36,15 @@ module.exports = config => {
     return [...collection.getFilteredByGlob('./src/posts/*.md')].reverse();
   });
 
+  // Return all the tags used in a collection
+	config.addFilter("getAllTags", collection => {
+		let tagSet = new Set();
+		for(let item of collection) {
+			(item.data.tags || []).forEach(tag => tagSet.add(tag));
+		}
+		return Array.from(tagSet);
+	});
+
   return {
     markdownTemplateEngine: 'njk',
     dataTemplateEngine: 'njk',

src/_data/Term.json

@@ -3,6 +3,15 @@
     "SkipLink": "Skip to content",
     "ToggleTheme": "Toggle theme",
     "TopLink": "Back to top",
+    "Listing": {
+      "Tags": {
+        "Title": "Tagged",
+        "More": {
+          "See": "See",
+          "All": "all tags"
+        }
+      }
+    },
     "Footer": {
       "lastDeployment": "Dernier déploiement le",
       "createdWith": "Built with"

src/_data/navigation.json

@@ -7,6 +7,14 @@
     {
       "text": "About",
       "url": "/about/"
+    },
+    {
+      "text": "Blog",
+      "url": "/blog/"
+    },
+    {
+      "text": "Demo",
+      "url": "/tags/demo/"
     }
   ]
 }

src/_includes/partials/article-head.html

@@ -12,7 +12,7 @@
         {% if tags %}
           {% for tag in tags %}
             <li>
-              <a href="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
+              <a href="/tags/{{ tag | slug }}/">{{ tag | title }}</a>
             </li>
           {% endfor %}
         {% endif %}

src/_includes/partials/post-list.html

@@ -1,6 +1,6 @@
 <section class="projects">
   <ol reversed class="postlist">
-    {%- asyncEach blog in collections.blog -%}
+    {%- asyncEach blog in postslist -%}
       <li>
         <h2><a href="{{ blog.url }}">{{ blog.data.title }}</a></h2>
         <ul class="list-inline">
@@ -8,7 +8,7 @@
           {%- if blog.data.tags -%}
             {%- for tag in blog.data.tags -%}
               <li>
-                <a href="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
+                <a href="/tags/{{ tag | slug }}/">{{ tag | title }}</a>
               </li>
             {%- endfor -%}
           {%- endif -%}

src/blog.md

@@ -2,9 +2,10 @@
 title: 'Blog'
 layout: 'list'
 ---
-# Blog
+# {{ title }}
 
 The latest articles from around the studio, demonstrating our design
 thinking, strategy and expertise.
 
+{% set postslist = collections.blog %}
 {% include "partials/post-list.html" %}

src/index.md

@@ -7,4 +7,5 @@ metaDesc: 'A made up agency site that you build if you take Learn Eleventy From
 layout: 'home'
 ---
 
+{% set postslist = collections.blog %}
 {% include "partials/post-list.html" %}

src/tags-list.md

@@ -0,0 +1,13 @@
+---
+title: Tags
+permalink: /tags/
+layout: list
+---
+<h1 class="full-bleed">{{ title }}</h1>
+
+<ul>
+{% for tag in collections.all | getAllTags %}
+	{% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
+{% endfor %}
+</ul>

src/tags.md

@@ -1,35 +1,17 @@
 ---
-title: 'Tag Archive'
+eleventyComputed:
-layout: 'list'
+  title: "{{ Term.Site.Listing.Tags.Title }} “{{ tag }}”"
+permalink: '/tags/{{ tag | slug }}/'
 pagination:
   data: collections
   size: 1
   alias: tag
-permalink: '/tag/{{ tag | slug }}/'
+layout: 'list'
 ---
 
-<h1>Tagged “{{ tag }}”</h1>
+<h1 class="full-bleed">{{ Term.Site.Listing.Tags.Title }} “{{ tag }}”</h1>
 
-<section class="projects">
+{% set postslist = collections[ tag ] %}
-  <ol reversed class="postlist">
+{% include "partials/post-list.html" %}
-  {% set taglist = collections[ tag ] %}
+
-    {% for blog in taglist | reverse %}
+<p>{{ Term.Site.Listing.Tags.More.See }} <a href="/tags/">{{ Term.Site.Listing.Tags.More.All }}</a>.</p>
-      <li>
-        <h2><a href="{{ blog.url }}">{{ blog.data.title }}</a></h2>
-        <ul class="list-inline">
-          <li><time datetime="{{ blog.date | getDatetime }}">{{ blog.date | toFullDate }}</time></li>
-          {%- if blog.data.tags -%}
-            {%- for tag in blog.data.tags -%}
-              <li>
-                <a href="/tag/{{ tag | slug }}/">{{ tag | title }}</a>
-              </li>
-            {%- endfor -%}
-          {%- endif -%}
-        </ul>
-        {%- if blog.data.leading -%}
-          <p>{{ blog.data.leading }}</p>
-        {%- endif -%}
-      </li>
-    {%- endfor -%}
-  </ol>
-</section>