Use article heading if the content is an article

src/_includes/main/content.njk

@@ -3,9 +3,37 @@ layout: main/base
 ---
 
 <header class="main__header">
-    <h1>{{ pageTitle or title }}</h1>
+    {% if isArticle %}
-    {% if desc %}
+        <ul class="breadcrumbs">
-        <p>{{ desc }}</p>
+            {% 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 }}
+            {% if updated %}
+                • Last updated on {{ updated | niceDate }}</p>
+            {% endif %}
+            {% if categories %}
+                <p>Categories:
+                    {% for cat in categories %}
+                        <a href="/categories/{{ cat | slugify }}">{{ cat }}</a>{% if not loop.last %}, {% endif %}
+                    {% endfor %}
+                </p>
+            {% endif %}
+            <p>{{ content | emojiReadTime }}</p>
+        </div>
+    {% else %}
+        <h1>{{ pageTitle or title }}</h1>
+        {% if desc %}
+            <p>{{ desc }}</p>
+        {% endif %}
     {% endif %}
 </header>
 
@@ -28,3 +56,14 @@ layout: main/base
         {% include "main/content-nav.njk" %}
     {% endif %}
 </div>
+
+<style>
+    .breadcrumbs {
+        justify-self: center;
+        list-style: none;
+        padding: 0;
+        margin: 0 0 0.7em 0;
+        display: flex;
+        gap: 0.5em;
+    }
+</style>