Use the same template for taglists and the blog index. Move the tagposts into a collection to make life easier

config/collections/tags.js

@@ -1,10 +1,30 @@
 module.exports = (eleventyConfig) => {
     eleventyConfig.addCollection('tags', (collectionApi) => {
         const tags = new Set();
-        collectionApi.getAll().forEach((item) => {
+        collectionApi.getFilteredByTag("posts")
+            .filter(p => process.env.DEBUG || !p.data.tags.includes("draft"))
+            .filter(p => process.env.DEBUG || p.date < new Date())
+            .forEach((item) => {
                 if (!item.data.tags) return;
                 item.data.tags.forEach((tag) => tags.add(tag));
             });
         return [...tags];
     });
+
+    eleventyConfig.addCollection('tagPosts', (collectionApi) => {
+        const tagPosts = {};
+        collectionApi.getFilteredByTag("posts")
+            .filter(p => process.env.DEBUG || !p.data.tags.includes("draft"))
+            .filter(p => process.env.DEBUG || p.date < new Date())
+            .forEach((item) => {
+                if (!item.data.tags) return;
+                item.data.tags.forEach((tag) => {
+                    if (!(tag in tagPosts)) {
+                        tagPosts[tag] = [];
+                    }
+                    tagPosts[tag] = [item, ...tagPosts[tag]];
+                });
+            });
+        return tagPosts;
+    });
 }

src/_includes/components/blog.njk

@@ -0,0 +1,30 @@
+<main class="wrapper-lg stack-xl">
+    <h1>{{ title }}</h1>
+
+    <aside class="inverse text-center">
+        <p class="mx-auto">
+            Subscribe via <a href="{{feed.rss}}">RSS</a>, <a href="{{feed.atom}}">Atom</a>, or <a href="{{feed.json}}">JSON</a>.
+        </p>
+    </aside>
+
+    <ol class="stack-xl" role='list'>
+        {% for item in posts %}
+        <li class="stack-xs">
+            <h2><a href="{{ item.url }}">{{ item.data.title | safe }}</a></h2>
+            <time class="block" datetime="{{ item.date | dateToRfc3339 }}">{{ item.date | dateDisplay }}</time>
+            <p class="e-content p-summary">{{ item.content | excerpt }}</p>
+            <a href="{{ item.url }}" class="inline-block">Read more</a>
+        </li>
+        {% endfor %}
+    </ol>
+    {% if not tag %}
+    <nav class="blog-nav row" data-spacing="between" aria-label="View more posts">
+        {% if pagination.href.next %}
+            <a href="{{ pagination.href.next }}">Older</a>
+        {% endif %}
+        {% if pagination.href.previous %}
+            <a href="{{ pagination.href.previous }}">Newer</a>
+        {% endif %}
+    </nav>
+    {% endif %}
+</main>

src/blog/index.html

@@ -1,38 +1,18 @@
 ---
-title: Blog
+title: Blog posts
 layout: base.njk
 pagination:
     data: collections.posts
     size: 5
     reverse: true
+    alias: posts
 eleventyImport:
     collections: ["posts"]
+feeds:
+    rss: "/rss.xml"
+    atom: "/atom.xml"
+    json: "/feed.json"
 ---
-<main class="wrapper-lg stack-xl">
-    <h1>Blog posts</h1>
+{% extends "components/blog.njk" %}
 
-    <aside class="inverse text-center">
-        <p>
-            Subscribe via <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a>, or <a href="/feed.json">JSON</a>.
-        </p>
-    </aside>
-
-    <ol class="stack-xl" role='list'>
-        {% for item in pagination.items %}
-        <li class="stack-xs">
-            <h2><a href="{{ item.url }}">{{ item.data.title | safe }}</a></h2>
-            <time class="block" datetime="{{ item.date | dateToRfc3339 }}">{{ item.date | dateDisplay }}</time>
-            <p class="e-content p-summary">{{ item.content | excerpt }}</p>
-            <a href="{{ item.url }}" class="inline-block">Read more</a>
-        </li>
-        {% endfor %}
-    </ol>
-    <nav class="blog-nav row" data-spacing="between" aria-label="View more posts">
-        {% if pagination.href.next %}
-            <a href="{{ pagination.href.next }}">Older</a>
-        {% endif %}
-        {% if pagination.href.previous %}
-            <a href="{{ pagination.href.previous }}">Newer</a>
-        {% endif %}
-    </nav>
-</main>
+{{ content | safe }}

src/blog/tag.html

@@ -1,6 +1,6 @@
 ---json
 {
-    "title": "Blog",
+    "title": "Tagged posts",
     "layout": "base.njk",
     "pagination": {
         "data": "collections.tags",
@@ -20,25 +20,9 @@
     }
 }
 ---
+{% extends "components/blog.njk" %}
+{% set posts = collections.tagPosts[tag] %}
+{% set title = "Posts tagged with “" ~ tag ~ "”" %}
+{% set feeds = feed %}
 
-<main class="wrapper-lg stack-xl">
-<h1>Posts tagged “{{ tag }}”</h1>
-
-<aside class="text-center">
-    <p>
-        Subscribe via <a href="{{ feed.rss }}">RSS</a>, <a href="{{ feed.atom }}">Atom</a>, or <a href="{{ feed.json }}">JSON</a>.
-    </p>
-</aside>
-
-<ol class="stack-xl" role='list'>
-    {% set posts = collections.posts | filterBy(tag) | reverse %}
-    {% for item in posts %}
-    <li class="stack-xs">
-        <h2><a href="{{ item.url }}">{{ item.data.title | safe }}</a></h2>
-        <time datetime="{{ item.date | dateToRfc3339 }}" class="block">{{ item.date | dateDisplay }}</time>
-        <div class="e-content p-summary">{{ item.content | excerpt }}</div>
-        <a href="{{ item.url }}" class="inline-block">Read more</a>
-    </li>
-    {% endfor %}
-</ol>
-</main>
+{{ content | safe }}

src/feeds/tags/atom.njk

@@ -23,7 +23,7 @@ eleventyImport:
     <uri>{{ metadata.site.url }}</uri>
   </author>
   <category term="{{ tag }}" />
-  {%- for post in collections.posts | filterBy(tag) | reverse %}
+  {%- for post in collections.tagPosts[tag] %}
   {%- set absolutePostUrl = post.url | absoluteUrl(metadata.site.url) %}
   <entry>
     <title>{{ post.data.title }}</title>

src/feeds/tags/json.njk

@@ -21,7 +21,7 @@ eleventyImport:
     "url": "{{ metadata.site.url }}"
   },
   "items": [
-    {%- for post in collections.posts | filterBy(tag) | reverse %}
+    {%- for post in collections.tagPosts[tag] %}
     {%- set absolutePostUrl = post.url | absoluteUrl(metadata.site.url) %}
     {
       "id": "{{ absolutePostUrl }}",

src/feeds/tags/rss.njk

@@ -18,8 +18,7 @@ eleventyImport:
     <atom:link href="{{ permalink | absoluteUrl(metadata.site.url) }}" rel="self" type="application/rss+xml" />
     <description>Posts tagged #{{ tag }}</description>
     <language>{{ metadata.site.language }}</language>
-    {% set posts = collections.posts | filterBy(tag) | reverse %}
-    {%- for post in posts %}
+    {%- for post in collections.tagPosts[tag] %}
     {%- set absolutePostUrl = post.url | absoluteUrl(metadata.site.url) %}
     <item>
       <title>{{ post.data.title }}</title>