Add clickable breadcrumb identity

5 files changed, 50 insertions, 11 deletions

diff --git a/layouts/journal/single.html b/layouts/journal/single.html
index 38c6a96..a5043c7 100644
--- a/layouts/journal/single.html
+++ b/layouts/journal/single.html
@@ -1,7 +1,6 @@
 {{ define "main" }}
   <article lang="{{ .Params.lang }}">
     <header class="document-header">
-      <p class="document-path">{{ .RelPermalink }}</p>
       <h1>{{ .Title }}</h1>
       <dl class="document-meta">
         <div><dt>created</dt><dd><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "2006-01-02" }}</time></dd></div>
diff --git a/layouts/notes/single.html b/layouts/notes/single.html
index 35f179d..23331bd 100644
--- a/layouts/notes/single.html
+++ b/layouts/notes/single.html
@@ -1,7 +1,6 @@
 {{ define "main" }}
   <article lang="{{ .Params.lang }}">
     <header class="document-header">
-      <p class="document-path">{{ .RelPermalink }}</p>
       <h1>{{ .Title }}</h1>
       {{- with .Params.series }}{{ partial "series-nav.html" (dict "page" $ "mode" "position") }}{{ end }}
       <dl class="document-meta">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 813713f..7dc37bf 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 <header class="site-header">
   <a class="skip-link" href="#main-content">Skip to content</a>
-  <a class="site-identity" href="{{ "/" | relURL }}">{{ site.Params.identity }}</a>
+  {{ partial "site-identity.html" . }}
   {{- if not .IsHome }}
     {{ partial "primary-nav.html" . }}
   {{- end }}
diff --git a/layouts/partials/site-identity.html b/layouts/partials/site-identity.html
new file mode 100644
index 0000000..0f18d35
--- /dev/null
+++ b/layouts/partials/site-identity.html
@@ -0,0 +1,21 @@
+{{- $page := . -}}
+{{- $identity := strings.TrimSuffix "/" site.Params.identity -}}
+<nav class="site-identity" aria-label="Location">
+  <a class="site-root" href="{{ "/" | relURL }}">{{ $identity }}</a><span class="site-separator" aria-hidden="true">/</span>
+  {{- if not $page.IsHome -}}
+    {{- $path := strings.TrimSuffix "/" $page.RelPermalink -}}
+    {{- $path = strings.TrimSuffix ".html" $path -}}
+    {{- $prefix := "/" -}}
+    {{- $segments := split $path "/" -}}
+    {{- range $index, $segment := $segments -}}
+      {{- if ne $segment "" -}}
+        {{- $prefix = printf "%s%s/" $prefix $segment -}}
+        {{- if eq (add $index 1) (len $segments) -}}
+          <a class="site-current" href="{{ $page.RelPermalink }}" aria-current="page">{{ $segment }}</a><span class="site-separator" aria-hidden="true">/</span>
+        {{- else -}}
+          <a class="site-crumb" href="{{ $prefix | relURL }}">{{ $segment }}</a><span class="site-separator" aria-hidden="true">/</span>
+        {{- end -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+</nav>
diff --git a/static/style.css b/static/style.css
index cf033de..b3bf26e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -120,7 +120,6 @@ a:focus-visible {
 .site-identity,
 .site-nav,
 .site-footer,
-.document-path,
 .document-meta,
 .document-view,
 .document-list time,
@@ -136,11 +135,38 @@ a:focus-visible {
   display: inline-block;
   margin-bottom: 1rem;
   color: var(--text);
+  font-weight: 400;
+}
+
+.site-identity .site-root,
+.site-identity .site-root:visited {
+  color: var(--text);
   font-weight: 700;
   text-decoration: none;
 }
 
-.site-identity:visited {
+.site-identity .site-root:hover,
+.site-identity .site-root:focus-visible {
+  text-decoration: underline;
+}
+
+.site-identity .site-crumb,
+.site-identity .site-crumb:visited,
+.site-identity .site-current,
+.site-identity .site-current:visited {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.site-identity .site-crumb:hover,
+.site-identity .site-crumb:focus-visible,
+.site-identity .site-current:hover,
+.site-identity .site-current:focus-visible {
+  color: var(--text);
+  text-decoration: underline;
+}
+
+.site-identity .site-separator {
   color: var(--text);
 }
 
@@ -207,12 +233,6 @@ a:focus-visible {
   margin-bottom: 2rem;
 }
 
-.document-path {
-  margin-bottom: 0.35rem;
-  color: var(--muted);
-  font-size: 0.875rem;
-}
-
 .document-meta {
   margin-bottom: 1.25rem;
   color: var(--muted);