feat: add stepper graphic for article series

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

Author: dvdksn

layouts/_default/single.html

@@ -8,6 +8,9 @@
     {{ with .Title }}
     <h1 data-pagefind-weight="10" class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
+    {{ if eq .CurrentSection.Layout "series" }}
+      {{ partial "guides-stepper.html" . }}
+    {{ end }}
     <div class="block lg:hidden">
       {{ partial "pagemeta.html" . }}
       <hr>

layouts/partials/guides-stepper.html

@@ -0,0 +1,30 @@
+{{ if or .NextInSection .PrevInSection }}
+  <a
+    class="no-underline my-8 flex justify-center text-xs text-white"
+    href="{{ .CurrentSection.Permalink }}">
+    <span class="rounded-l bg-blue-light-400 px-2 dark:bg-blue-dark-500">SERIES</span>
+    <span class="rounded-r bg-blue-light-500 px-2 dark:bg-blue-dark-400">{{ .CurrentSection.Title }}</span>
+  </a>
+  <div x-data class="mb-8 flex w-full items-center justify-center gap-1 px-8 text-center text-sm md:px-20">
+    {{ page.Store.Set "stepper_seen" false }}
+    {{ range $i, $e := .CurrentSection.Pages }}
+      {{ if $i }}
+        {{ if (page.Store.Get "stepper_seen") }}
+          <div class="flex-grow border-b-2 border-b-gray-light-400 dark:border-b-gray-dark-400"></div>
+        {{ else }}
+          <div class="flex-grow border-b-2 border-b-green-light-400 dark:border-b-green-dark-400"></div>
+        {{ end }}
+      {{ end }}
+      <a href="{{ .Permalink }}" class="no-underline text-white flex items-center justify-center w-8 h-8 rounded-full
+        {{ if (page.Store.Get "stepper_seen") }}
+          bg-gray-light-400 dark:bg-gray-dark-400
+        {{ else if (eq . page) }}
+          {{ .Store.Set "stepper_seen" true }}
+          bg-blue-light-400 dark:bg-blue-dark-400
+        {{ else }}
+          bg-green-light-400 dark:bg-green-dark-400
+        {{ end }}">
+        {{ add $i 1 }}</a>
+    {{ end }}
+  </div>
+{{ end }}