From 57301170551f209ecd5d3801b32daf83daf0e60e Mon Sep 17 00:00:00 2001
From: Claudia Reynders <>
Date: Sat, 30 Apr 2022 18:21:43 +0200
Subject: [PATCH] Added category pages and subnav - added category page
 template and generated category pages - added a category-focused sub
 navigation component - added category tags/links to the articles

---
 src/_includes/components/articleList.njk |  1 +
 src/_includes/components/categoryNav.njk | 21 +++++++++++++++++++++
 src/_includes/layouts/article.njk        |  3 ++-
 src/blog.njk                             |  2 +-
 src/category.njk                         | 17 +++++++++++++++++
 5 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/_includes/components/categoryNav.njk
 create mode 100644 src/category.njk

diff --git a/src/_includes/components/articleList.njk b/src/_includes/components/articleList.njk
index d2dd2c7..83d8374 100644
--- a/src/_includes/components/articleList.njk
+++ b/src/_includes/components/articleList.njk
@@ -5,6 +5,7 @@
       <h2><a href="{{ article.url | url }}">{{ article.data.title }}</a></h2>
       <small>
         <time>{{ article.data.date | readableDate }}</time>
+        <a class="category" href="/blog/{{ article.data.category }}">{{ article.data.category }}</a>
       </small>
     </article>
   </li>
diff --git a/src/_includes/components/categoryNav.njk b/src/_includes/components/categoryNav.njk
new file mode 100644
index 0000000..a3a4bca
--- /dev/null
+++ b/src/_includes/components/categoryNav.njk
@@ -0,0 +1,21 @@
+{% set categories =  collections.categoryList %}
+<nav role="navigation" aria-label="category navigation" >
+  <span>Filter posts by category:</span>
+  <ul>
+    <li class="category__link {{ ' active' if page.url == '/blog/'}}">
+      <a class="category__link" 
+        href="/blog"
+        {{ "aria-current" if page.url === "/blog/" }}
+          >all</a>
+    </li>
+    {%- for category in categories %}
+    {% set catUrl = ["/blog/", category.key, "/" ] |  join %}
+    <li class="category__link {{ ' active' if page.url == catUrl }}">
+      <a href="{{ catUrl }}"
+      {{ "aria-current" if page.url == catUrl }}>
+        {{ category.key }}
+      </a>
+    </li>
+    {%- endfor -%}
+  </ul>
+</nav>
\ No newline at end of file
diff --git a/src/_includes/layouts/article.njk b/src/_includes/layouts/article.njk
index fc2e125..9c6c7d0 100644
--- a/src/_includes/layouts/article.njk
+++ b/src/_includes/layouts/article.njk
@@ -2,10 +2,11 @@
 layout: page
 ---
 
-<article>
+<article class="article">
   <h1>{{ title }}</h1>
   <small>
     Published: <time>{{ date | readableDate }}</time>
+    <a class="category" href="/blog/{{ category }}">{{ category }}</a>
   </small>
   {{ content | safe }}
 </article>
\ No newline at end of file
diff --git a/src/blog.njk b/src/blog.njk
index 69920d5..e3b0965 100644
--- a/src/blog.njk
+++ b/src/blog.njk
@@ -11,7 +11,7 @@ pagination:
 ---
 
 <h1>{{ title }}</h1>
-
+{% include "./_includes/components/categoryNav.njk" %}
 <p>This view contains a list of all blogposts sorted from newest to oldest.</p>
 
 {% include "./_includes/components/articleList.njk" %}
\ No newline at end of file
diff --git a/src/category.njk b/src/category.njk
new file mode 100644
index 0000000..eb207a5
--- /dev/null
+++ b/src/category.njk
@@ -0,0 +1,17 @@
+---
+layout: page
+pagination:
+  data: collections.categoryList
+  size: 1
+  alias: cat
+permalink: "/blog/{{ cat.key }}/"
+eleventyComputed:
+  title: Articles categorized under "{{ cat.name }}"
+---
+
+
+<h1>{{ title }}</h1>
+
+{% include "./_includes/components/categoryNav.njk" %}
+{% set articles = collections.categories[cat.key] | reverse %}
+{% include "./_includes/components/articleList.njk" %}
\ No newline at end of file