From a5e5d04b9f404bdb45692cb09194471782878903 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Wed, 3 Jul 2024 07:33:51 -0700
Subject: [PATCH] page_breadcrumb: Implement a breadcrumb and display it above
 the <main> content

The breadcrumb shows navigation from the home page as a path:

/ > Posts > This Post

en.yaml
---
 assets/css/099_breadcrumb.css         | 30 +++++++++++++++++++++++++++
 i18n/en.yaml                          |  1 +
 layouts/_default/baseof.html          |  3 +++
 layouts/partials/page_breadcrumb.html | 13 ++++++++++++
 4 files changed, 47 insertions(+)
 create mode 100644 assets/css/099_breadcrumb.css
 create mode 100644 i18n/en.yaml
 create mode 100644 layouts/partials/page_breadcrumb.html

diff --git a/assets/css/099_breadcrumb.css b/assets/css/099_breadcrumb.css
new file mode 100644
index 0000000..eac0f70
--- /dev/null
+++ b/assets/css/099_breadcrumb.css
@@ -0,0 +1,30 @@
+
+
+
+
+
+/*************
+ # BREADCRUMB
+ *************/
+
+.nav-breadcrumb {
+  font-size: var(--text-s);
+
+  ul, ol {
+    display: flex;
+    padding-inline: 0;
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  li:not(:first-child) {
+    margin-inline-start: var(--space-xs);
+
+    &::before {
+      content: "›";
+      margin-inline-end: var(--space-xs);
+    }
+  }
+}
diff --git a/i18n/en.yaml b/i18n/en.yaml
new file mode 100644
index 0000000..12ba225
--- /dev/null
+++ b/i18n/en.yaml
@@ -0,0 +1 @@
+home: Home
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index aa748b2..38d2ec2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -9,6 +9,9 @@
       {{ partial "site/header.html" . }}
     </header>
     <main>
+      {{ if not .IsNode }}
+        {{ partial "page_breadcrumb.html" . }}
+      {{ end }}
       {{ block "main" . }}{{ end }}
     </main>
     <footer class="site-footer">
diff --git a/layouts/partials/page_breadcrumb.html b/layouts/partials/page_breadcrumb.html
new file mode 100644
index 0000000..2f0edc3
--- /dev/null
+++ b/layouts/partials/page_breadcrumb.html
@@ -0,0 +1,13 @@
+<nav class="nav-breadcrumb">
+  <ol>
+    {{ range .Ancestors.Reverse }}
+      {{- $title := .LinkTitle -}}
+      {{- if .IsHome -}}
+        {{ $title = "/" }}
+      {{- end -}}
+      <li><a href="{{ .Permalink }}">{{ $title }}</a></li>
+    {{ end }}
+
+    <li class="nav-breadcrumb__active"><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+  </ol>
+</nav>