From ddbd68f61128b2e9852a14ff673e0e52cd08b909 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:07:38 +0800
Subject: [PATCH] Add breadcrumbs to articles

---
 src/_includes/main/article.njk | 28 +++++++++++++++++++++++++++-
 src/assets/css/main.css        |  1 +
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/_includes/main/article.njk b/src/_includes/main/article.njk
index 1ec5c5c4..9298e07a 100644
--- a/src/_includes/main/article.njk
+++ b/src/_includes/main/article.njk
@@ -5,6 +5,16 @@ metadata:
 ---
 
 <header class="main__header">
+    <ul class="breadcrumbs">
+        {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle) %}
+        {%- for entry in breadcrumbNavPages %}
+        <li>
+            <a href="{{ entry.url }}" {% if entry.url == page.url %} class="breadcrumbs--active"{% endif %}>{{ entry.title }}</a>
+        </li>
+        ➔
+        {%- endfor %}
+    </ul>
+
     <h1>{{ articleTitle }}</h1>
     <div class="article__info">
         <p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
@@ -34,4 +44,20 @@ metadata:
     {% if tags and tags.includes("articles") or tags and tags.includes("posts") %}
         {% include "main/content-nav.njk" %}
     {% endif %}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    .breadcrumbs {
+        justify-self: center;
+        list-style: none;
+        padding: 0;
+        margin: 0 0 0.7em 0;
+        display: flex;
+        gap: 0.5em;
+    }
+
+    .breadcrumbs--active {
+        text-decoration: none;
+        color: var(--clr-bold-txt);
+    }
+</style>
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 61f40646..739a3ead 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -267,6 +267,7 @@ main {
     /* background-color: var(--clr-quote-bg); */
     padding: 2.5rem clamp(1rem, 5%, 3rem);
     text-align: center;
+    display: grid;
 }
 
 .article,