feat: add tag page

config/collections/index.js

@@ -26,7 +26,24 @@ const getAllPostCategories = (collection) => {
   return categories;
 };
 
+const getPostsByCategory = (collection) => {
+  const posts = getAllPosts(collection);
+  const categories = Object.keys(getAllPostCategories(collection));
+
+  const postsByCategory = {};
+  categories.forEach((category) => {
+    const categoryPosts = posts.filter((post) =>
+      post.data.categories.includes(category),
+    );
+
+    postsByCategory[category] = categoryPosts;
+  });
+
+  return postsByCategory;
+};
+
 module.exports = {
   getAllPosts,
   getAllPostCategories,
+  getPostsByCategory,
 };

eleventy.config.js

@@ -1,6 +1,7 @@
 const {
   getAllPosts,
   getAllPostCategories,
+  getPostsByCategory,
 } = require("./config/collections/index.js");
 const { dir } = require("./config/constants.js");
 const {
@@ -22,6 +23,7 @@ module.exports = (eleventyConfig) => {
 
   eleventyConfig.addCollection("posts", getAllPosts);
   eleventyConfig.addCollection("categories", getAllPostCategories);
+  eleventyConfig.addCollection("postsByCategory", getPostsByCategory);
 
   // 	--------------------- Custom Filters -----------------------
   eleventyConfig.addFilter("entries", entries);

src/_layouts/post.html

@@ -7,7 +7,11 @@ layout: base
         <time class="[ date ]" datetime="{{ date }}">{{ date | formatDate("MMMM D, YYYY") }}</time>
         <h1>{{ title }}</h1>
         <ul class="[ categories ]">
-            {% for category in categories %}<li>{{ category }}</li>{% endfor %}
+            {% for category in categories %}
+                <li>
+                    <a href="/tag/{{ category }}">{{ category }}</a>
+                </li>
+            {% endfor %}
         </ul>
     </header>
     {{ content | safe }}

src/content/pages/posts.html

@@ -3,5 +3,14 @@ permalink: /posts/index.html
 layout: "base"
 ---
 
-{% for post in collections.posts %}{{ post.fileSlug }}{% endfor %}
-Here are all my posts!
+<h1>All posts</h1>
+<p>
+    View all <a href="/tags">tags</a>
+</p>
+<ul>
+    {% for post in collections.posts %}
+        <li>
+            <a href={{ post.url }}>{{ post.data.title }}</a>
+        </li>
+    {% endfor %}
+</ul>

src/content/pages/tag.html

@@ -0,0 +1,17 @@
+---
+pagination:
+    data: collections.postsByCategory
+    size: 1
+    alias: tag
+permalink: /tag/{{ tag }}/index.html
+layout: "base"
+---
+
+{% set posts = collections.postsByCategory[tag] %}
+<h1>Tag: {{ tag }}</h1>
+<ul>
+    {% for post in posts %}
+        <li>
+            <a href="{{ post.url }}">{{ post.data.title }}</a>
+        </li>
+    {% endfor %}