adding tags functionality

.eleventy.js

@@ -1,13 +1,38 @@
-const {
-  DateTime
-} = require("luxon");
+const { DateTime } = require("luxon");
+const navigationPlugin = require('@11ty/eleventy-navigation')
+const rssPlugin = require('@11ty/eleventy-plugin-rss')
 
 module.exports = function(eleventyConfig) {
+
+
+  function filterTagList(tags) {
+    return (tags || []).filter(tag => ["all", "nav"].indexOf(tag) === -1);
+  }
+  eleventyConfig.setDataDeepMerge(true);
+
+  function filterTagList(tags) {
+    return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
+  }
+
+  eleventyConfig.addFilter("filterTagList", filterTagList)
+
+  // Create an array of all tags
+  eleventyConfig.addCollection("tagList", function(collection) {
+    let tagSet = new Set();
+    collection.getAll().forEach(item => {
+      (item.data.tags || []).forEach(tag => tagSet.add(tag));
+    });
+
+    return filterTagList([...tagSet]);
+  });
+
+
   // Add a filter using the Config API
   eleventyConfig.addWatchTarget("./src/scss/");
   eleventyConfig.setBrowserSyncConfig({
     reloadDelay: 400
   });
+
   eleventyConfig.addFilter("readableDate", dateObj => {
     return DateTime.fromJSDate(dateObj, {
       zone: 'utc'

package.json

@@ -41,6 +41,8 @@
   },
   "author": "Holger Koenemann",
   "devDependencies": {
+    "@11ty/eleventy-navigation": "^0.3.2",
+    "@11ty/eleventy-plugin-rss": "^1.1.1",
     "gulp-html-replace": "^1.6.2",
     "gulp-purgecss": "^4.0.3",
     "node-sass": "^6.0.1",

src/_includes/layouts/blog.njk

@@ -9,11 +9,11 @@
 
     {% include 'snippets/navbar.njk' %}
 
-    <main class="container py-vh-5 pb-0">
+    <main class="container py-5">
       {% include 'snippets/maincontent.njk' %}
     </main>
 
-    <div class="container py-vh-5">
+    <div class="container">
       {% include 'snippets/postloop.njk' %}
     </div>
 

src/_includes/layouts/post.njk

@@ -9,7 +9,7 @@
 
     {% include 'snippets/navbar.njk' %}
 
-    <main class="container py-5">
+    <main class="container">
         {% include 'snippets/postcontent.njk' %}
     </main>
 

src/_includes/snippets/maincontent.njk

@@ -1,5 +1,5 @@
 <div class="row d-flex justify-content-center">
-  <div class="col-12 col-lg-10 col-xl-8">
+  <div class="col-12">
     <header>
       <h1 class="display-1">{{ title }}</h1>
     </header>

src/_includes/snippets/postcontent.njk

@@ -1,5 +1,5 @@
 <div class="row d-flex justify-content-center">
-  <div class="col-12 col-lg-10 col-xl-8">
+  <div class="col-12">
     <article>
       <header class="border-bottom pb-4 mb-4">
         <h1 class="display-1">{{ title }}</h1>
@@ -13,6 +13,12 @@
           <p>Published
             <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
           </p>
+          <p>
+            {% for tag in post.data.tags | filterTagList %}
+              {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
+              <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
+            {% endfor %}
+          </p>
         {% endblock %}
       </header>
       <p class="lead">

src/_includes/snippets/postloop.njk

@@ -1,30 +1,28 @@
 <div class="row d-flex justify-content-center">
-  <div class="col-12 col-lg-10 col-xl-8">
+  <div class="col-12">
     {%- for post in posts %}
-        <div class=" border-top py-5">
-          <h2>{{ post.data.title}}</h2>
-          <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
-          <p>{{ post.data.intro }}</p>
-          <a href="{{ post.url | url }}" class="link-fancy">Read more...</a>
-        </div>
+      <div class=" border-top py-5">
+        <h2>{{ post.data.title}}</h2>
+        <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+        {% for tag in post.data.tags | filterTagList %}
+          {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
+          <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
+        {% endfor %}
+        <p>{{ post.data.summary }}</p>
+        <a href="{{ post.url | url }}" class="link-fancy">Read more...</a>
+      </div>
     {% endfor %}
   </div>
 </div>
 
-
 <div class="row d-flex justify-content-center">
-  <div class="col-12 col-lg-10 col-xl-8">
+  <div class="col-12">
     <div class="row d-flex justify-content-between">
-  <div class="col">
-      {% if pagination.href.previous %}
-      <a href="{{pagination.href.previous}}"><< Previous Page</a>
-      {% endif %}
-    </div>
-    <div class="col text-end">
-      {% if pagination.href.next %}
-      <a href="{{pagination.href.next}}">Next Page >></a>
-      {% endif %}
+      <div class="col">
+        {% if pagination.href.previous %}
+          <a href="{{pagination.href.previous}}"><< Previous Page</a> {% endif %} </div> <div class="col text-end"> {% if pagination.href.next %} <a href="{{pagination.href.next}}">Next Page >></a>
+        {% endif %}
+      </div>
     </div>
   </div>
-  </div>
 </div>

src/blog.njk

@@ -2,7 +2,7 @@
 layout: layouts/blog.njk
 title: My personal blog
 pagination:
-    data: collections.posts
+    data: collections.post
     size: 3
     reverse: true
     alias: posts