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.
This commit is contained in:
Morten Victor Nordbye authored and GitHub committed 2026-08-16 22:14:45 +01:00
1 parent 74d03343b9
commit 1f82608cd6
9 files changed
+38

No files matched your search

@@ -278,6 +278,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
| `article.showPagination` | `true` | Whether or not the next/previous article links are displayed in the article footer. |
| `article.invertPagination` | `false` | Whether or not to flip the direction of the next/previous article links. |
| `article.showReadingTime` | `true` | Whether or not article reading times are displayed. |
| `article.showReadingProgress` | `false` | When set to `true` a reading progress bar is displayed at the top of articles. |
| `article.showTableOfContents` | `false` | Whether or not the table of contents is displayed on articles. |
| `article.showRelatedContent` | `false` | Display related content for each post. Might required additional configuration to your `hugo.toml`. Please check the theme `hugo.toml` if you want to enable this feature and copy all the relevant _related_ entries. Also check [Hugo's docs](https://gohugo.io/content-management/related/) on related content. |
| `article.relatedContentLimit` | `3` | Limit of related articles to display if `showRelatedContent` is turned on. |
@@ -42,6 +42,7 @@ Front matter parameter default values are inherited from the theme's [base confi
| `showPagination` | `article.showPagination` | Whether or not the next/previous article links are displayed in the article footer. |
| `invertPagination` | `article.invertPagination` | Whether or not to flip the direction of the next/previous article links. |
| `showReadingTime` | `article.showReadingTime` | Whether or not the article reading time is displayed. |
| `showReadingProgress` | `article.showReadingProgress` | Whether or not the reading progress bar is displayed on this article. |
| `showTaxonomies` | `article.showTaxonomies` | Whether or not the taxonomies that relate to this article are displayed. |
| `showTableOfContents` | `article.showTableOfContents` | Whether or not the table of contents is displayed on this article. |
| `showWordCount` | `article.showWordCount` | Whether or not the article word count is displayed. |