From 82b5a211b4760f4a7346cdc09e801dd042e43f1b Mon Sep 17 00:00:00 2001
From: Maik de Kruif <maik@maik.dev>
Date: Sat, 23 Nov 2024 14:34:52 +0100
Subject: [PATCH] Fix breadcrumbs to actually be a nav element

---
 themes/maik-blog/assets/scss/_main.scss        | 14 ++++++++++++++
 themes/maik-blog/layouts/_default/list.html    |  2 +-
 themes/maik-blog/layouts/_default/single.html  |  2 +-
 .../layouts/partials/breadcrumbs.html          | 18 ++++++++++++------
 themes/maik-blog/layouts/portfolio/list.html   |  2 +-
 themes/maik-blog/layouts/portfolio/single.html |  2 +-
 themes/maik-blog/layouts/writeups/list.html    |  6 +++---
 7 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss
index 22fd907..67722df 100644
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@@ -464,3 +464,17 @@ table {
 .nostyle {
   text-decoration: none;
 }
+
+.breadcrumbs {
+  display: inline;
+
+  ol {
+    list-style-type: none;
+    margin: 0;
+    display: inline;
+
+    li {
+      display: inline;
+    }
+  }
+}
\ No newline at end of file
diff --git a/themes/maik-blog/layouts/_default/list.html b/themes/maik-blog/layouts/_default/list.html
index a3a387e..554d509 100644
--- a/themes/maik-blog/layouts/_default/list.html
+++ b/themes/maik-blog/layouts/_default/list.html
@@ -2,7 +2,7 @@
 {{ $paginator := .Paginate .Data.Pages }}
 
 <main class="posts">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</div>
 
     <h1>{{ .Title }}</h1>
 
diff --git a/themes/maik-blog/layouts/_default/single.html b/themes/maik-blog/layouts/_default/single.html
index 75beea8..692fe05 100644
--- a/themes/maik-blog/layouts/_default/single.html
+++ b/themes/maik-blog/layouts/_default/single.html
@@ -25,7 +25,7 @@
   </div>
 
   <article>
-    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</div>
 
     <h1 class="post-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
diff --git a/themes/maik-blog/layouts/partials/breadcrumbs.html b/themes/maik-blog/layouts/partials/breadcrumbs.html
index b436264..30649e0 100644
--- a/themes/maik-blog/layouts/partials/breadcrumbs.html
+++ b/themes/maik-blog/layouts/partials/breadcrumbs.html
@@ -16,11 +16,17 @@
 {{- $breadcrumbs = after (int .page.IsPage) $breadcrumbs}}
 {{- if ne .page.Type "page"}}
 {{- if lt (default 0 .min) (len $breadcrumbs) }}
-{{- range $index, $breadcrumb := $breadcrumbs }}
-<a href="{{ $breadcrumb.url }}">{{ $breadcrumb.name }}</a>{{ if ne $index (sub (len $breadcrumbs) 1) }}<span> > </span>{{ end }}
-{{- end }}
-{{- if and $breadcrumbs .end }}
-{{ .end }}
-{{- end }}
+<nav aria-label="breadcrumb" class="breadcrumbs">
+    <ol>
+        {{- range $index, $breadcrumb := $breadcrumbs }}
+        <li>
+            <a href="{{ $breadcrumb.url }}">{{ $breadcrumb.name }}</a>{{ if ne $index (sub (len $breadcrumbs) 1) }}<span> > </span>{{ end }}
+        </li>
+        {{- end }}
+    </ol>
+    {{- if and $breadcrumbs .end }}
+    {{ .end }}
+    {{- end }}
+</nav>
 {{- end }}
 {{- end }}
diff --git a/themes/maik-blog/layouts/portfolio/list.html b/themes/maik-blog/layouts/portfolio/list.html
index 115aef9..49dec8d 100644
--- a/themes/maik-blog/layouts/portfolio/list.html
+++ b/themes/maik-blog/layouts/portfolio/list.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <main class="portfolios">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</div>
 
     <h1>Portfolio</h1>
 
diff --git a/themes/maik-blog/layouts/portfolio/single.html b/themes/maik-blog/layouts/portfolio/single.html
index fda7efc..47c3097 100644
--- a/themes/maik-blog/layouts/portfolio/single.html
+++ b/themes/maik-blog/layouts/portfolio/single.html
@@ -20,7 +20,7 @@
   </div>
 
   <article>
-    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+    <div class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</div>
 
     <h1 class="portfolio-title">
       <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
diff --git a/themes/maik-blog/layouts/writeups/list.html b/themes/maik-blog/layouts/writeups/list.html
index b40b320..22398b3 100644
--- a/themes/maik-blog/layouts/writeups/list.html
+++ b/themes/maik-blog/layouts/writeups/list.html
@@ -2,7 +2,7 @@
 {{ $paginator := (.Paginate .RegularPagesRecursive) }}
 
 <main class="posts">
-    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+    <div class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</div>
 
     <h1>{{ .Title }}</h1>
 
@@ -19,14 +19,14 @@
         <div class="post">
             <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
 
-            <p class="post-subtitle">
+            <div class="post-subtitle">
                 {{/*  {{- with .Params.Subtitle }}
                 {{ . | markdownify }}
                 <br>
                 {{- end }}  */}}
 
                 {{ partial "breadcrumbs.html" (dict "page" . "min" 0) }}
-            </p>
+            </div>
 
             <div class="post-meta">
                 {{- if .Date }}