✨ Add breadcrumbs

layouts/_default/single.html

@@ -1,6 +1,9 @@
 {{ define "main" }}
   <article class="max-w-prose">
     <header>
+      {{ if .Site.Params.article.showBreadcrumbs | default false }}
+        {{ partial "breadcrumbs.html" . }}
+      {{ end }}
       <h1 class="mt-0 text-4xl font-extrabold">{{ .Title | emojify }}</h1>
       <div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
         {{ partial "article-meta.html" . }}

layouts/partials/breadcrumbs.html

@@ -0,0 +1,13 @@
+<ol class="text-sm text-gray-400 dark:text-gray-600">
+  {{ template "crumb" (dict "p1" . "p2" .) }}
+</ol>
+{{ define "crumb" }}
+  {{ if .p1.Parent }}
+    {{ template "crumb" (dict "p1" .p1.Parent "p2" .p2 ) }}
+  {{ else if not .p1.IsHome }}
+    {{ template "crumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
+  {{ end }}
+  <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
+    <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a><span class="px-1 text-primary-500">/</span>
+  </li>
+{{ end }}

layouts/partials/section-heading.html

@@ -1,3 +1,6 @@
+{{ if .Site.Params.list.showBreadcrumbs | default false }}
+  {{ partial "breadcrumbs.html" . }}
+{{ end }}
 <section class="prose dark:prose-light">
   <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
   <section>{{ .Content }}</section>