Add reading progress bar for articles (#3014)

* Add reading progress bar for articles

* Let page-level showReadingProgress override the site setting

Hugo's default treats false as empty, so a page-level false could not
disable the bar once it was enabled site-wide. Resolve the value by
initialising from the site setting and overriding it only when the
front matter parameter is actually present, and use the same resolved
boolean in single.html and head.html.

* Guard the reading progress handler and mark the listener passive

The script loads in the head without defer, so the scroll listener is
registered before the progress bar element exists. A scroll event fired
during parsing, such as when the browser restores the scroll position on
reload, would throw. Bail out when the element is missing, matching the
guard in background-blur.js, and mark the scroll listener passive as
toc.html already does.

layouts/_default/single.html

@@ -1,5 +1,12 @@
 {{ define "main" }}
   {{ .Scratch.Set "scope" "single" }}
+  {{ $showReadingProgress := site.Params.article.showReadingProgress | default false }}
+  {{ if isset .Params "showreadingprogress" }}
+    {{ $showReadingProgress = .Params.showReadingProgress }}
+  {{ end }}
+  {{ if $showReadingProgress }}
+    {{ partial "reading-progress.html" . }}
+  {{ end }}
   <article>
     {{/* Hero */}}
     {{ if .Params.showHero | default (site.Params.article.showHero | default false) }}

layouts/partials/head.html

@@ -158,6 +158,17 @@
     {{ $zoomJS := resources.Get "lib/zoom/zoom.min.umd.js" | resources.Fingerprint $alg }}
     <script src="{{ $zoomJS.RelPermalink }}" integrity="{{ $zoomJS.Data.Integrity }}"></script>
   {{ end }}
+  {{ $showReadingProgress := site.Params.article.showReadingProgress | default false }}
+  {{ if isset .Params "showreadingprogress" }}
+    {{ $showReadingProgress = .Params.showReadingProgress }}
+  {{ end }}
+  {{ if and .IsPage $showReadingProgress }}
+    {{ $jsReadingProgress := resources.Get "js/reading-progress.js" | resources.Minify | resources.Fingerprint $alg }}
+    <script
+      type="text/javascript"
+      src="{{ $jsReadingProgress.RelPermalink }}"
+      integrity="{{ $jsReadingProgress.Data.Integrity }}"></script>
+  {{ end }}
 
   {{/* JS deferred */}}
   {{ $jsResources := slice }}

layouts/partials/reading-progress.html

@@ -0,0 +1,4 @@
+<div
+  id="reading-progress"
+  class="fixed left-0 top-0 z-100 h-1 w-0 bg-primary-500 dark:bg-primary-400 print:hidden"
+  aria-hidden="true"></div>