Skip to content

Add reading progress bar for articles#3014

Open
mortennordbye wants to merge 1 commit into
nunocoracao:mainfrom
mortennordbye:feat/reading-progress-bar
Open

Add reading progress bar for articles#3014
mortennordbye wants to merge 1 commit into
nunocoracao:mainfrom
mortennordbye:feat/reading-progress-bar

Conversation

@mortennordbye

Copy link
Copy Markdown
Contributor

Describe your changes

Adds an optional reading progress bar for articles: a thin, primary-colored bar fixed to the top of the viewport that fills from 0 to 100 percent as the reader scrolls through a page.

Why

Long-form articles have no scroll-position indicator today. This is a common, lightweight blog-theme affordance and there is no equivalent in the theme (the scroll-to-top button only appears past a threshold and shows no progress).

What

  • New article.showReadingProgress param (default false), overridable per page via front matter, following the same pattern as the other article.show* flags.
  • New layouts/partials/reading-progress.html partial and assets/js/reading-progress.js, mirroring the existing scroll-to-top feature.
  • The script is loaded as its own fingerprinted <script> tag (the same approach used for zen-mode.js) rather than appended to the shared main.bundle.js, because that bundle is cached by its target name and the inclusion is page-conditional.
  • The bar sits at z-100 so it renders above the fixed header while still being covered by the search overlay (z-500).
  • Enabled on the exampleSite to showcase it, and documented in the configuration and front matter tables.

Verification

  • hugo production build of the exampleSite succeeds with no errors; the script tag and bar element are emitted on article pages and absent on the home and list pages.
  • Verified in the browser that the bar tracks scroll exactly (0 percent at top, 50 percent at mid, 100 percent at bottom) and paints above the fixed header, in both light and dark mode.
  • Only the .h-1 utility was added to the committed compiled CSS (via npm run build); no other CSS changed.

Issue ticket number and link

N/A

Checklist before requesting a review

  • I have performed a self-review of my code
  • Will this be part of a product update? If yes, please write one phrase about this update.

Optional reading progress bar for articles, enabled with article.showReadingProgress.

@netlify

netlify Bot commented Jul 18, 2026

Copy link
Copy Markdown

Deploy Preview for snazzy-dango-efb2ec ready!

Name Link
🔨 Latest commit cb61f77
🔍 Latest deploy log https://app.netlify.com/projects/snazzy-dango-efb2ec/deploys/6a5bc458c81edb000898866b
😎 Deploy Preview https://deploy-preview-3014--snazzy-dango-efb2ec.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant