🎉 Feat: add reading progress bar support (#191)

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 > This version fixes several bugs, adds a few new features and SEO optimizations, and refactors part of the project structure and code.  
 > Snapshot: <>
 
+- :tada: Feat: add reading progress bar support ([#191](https://github.com/hugo-fixit/FixIt/issues/191))
 - :sparkles: Feat: add `raw` shortcode
 - :sparkles: Feat(menu): add params: `icon`, `type` for menu items
 - :sparkles: Feat: add custom aside template in post page ([#172](https://github.com/hugo-fixit/FixIt/issues/172))

assets/css/_partials/_widgets.scss

@@ -1,4 +1,5 @@
 @import '_widgets/cookieconsent';
 @import '_widgets/fixed-button';
 @import '_widgets/github-corner';
+@import '_widgets/reading-progress';
 @import '_widgets/typeit';

assets/css/_partials/_widgets/_reading-progress.scss

@@ -0,0 +1,11 @@
+.reading-progress-bar {
+  --progress: 0;
+  width: var(--progress);
+  background-color: var(--bg-progress, $info);
+  z-index: 150;
+  position: fixed;
+
+  [data-theme="dark"] & {
+    background-color: var(--bg-progress-dark, darken($info, 5%));
+  }
+}

config.toml

@@ -676,6 +676,17 @@
     # Gravatar host, default: "www.gravatar.com"
     host = "www.gravatar.com" # "cn.gravatar.com", "gravatar.loli.net"
     style = "" # "", mp, identicon, monsterid, wavatar, retro, blank, robohash
+  # FixIt 0.2.16 | NEW Reading progress bar
+  [params.readingProgress]
+    enable = false
+    # Available values: ["left", "right"]
+    start = "left"
+    # Available values: ["top", "bottom"]
+    position = "top"
+    reversed = false
+    light = ""
+    dark = ""
+    height = "2px"
   # FixIt 0.2.15 | NEW Developer options
   [params.dev]
     enable = false

layouts/partials/widgets.html

@@ -22,4 +22,17 @@
 
   {{- /* Search mask */ -}}
   <div id="mask"></div>
+
+  {{- /* Reading progress bar */ -}}
+  {{- $readingProgress := .Site.Params.readingProgress -}}
+  {{- if $readingProgress.enable -}}
+    {{- with $readingProgress -}}
+      <div class="reading-progress-bar" style="
+        {{- if .Reversed -}}width: calc(100% - var(--progress));{{- end -}}
+        {{- if .Light -}}--bg-progress: {{ .Light }};{{- end -}}
+        {{- if .Dark -}}--bg-progress-dark: {{ .Dark }};{{- end -}}
+        {{- .Start | default "left" -}}: 0;
+        {{- .Position | default "top" -}}: 0;height: {{ .Height | default "2px" }};"></div>
+    {{- end -}}
+  {{- end -}}
 </div>

src/js/theme.js

@@ -1022,6 +1022,7 @@ class FixIt {
       this.util.scrollIntoView('body');
     });
     const $fixedButtons = document.querySelector('.fixed-buttons');
+    const $readingProgressBar = document.querySelector('.reading-progress-bar');
     const ACCURACY = 20, MINIMUM = 100;
     window.addEventListener('scroll', (event) => {
       if (this.disableScrollEvent) {
@@ -1053,6 +1054,11 @@ class FixIt {
           $fixedButtons.classList.contains('animate__fadeOut') && $fixedButtons.classList.add('d-none');
         });
       }
+      if ($readingProgressBar) {
+        const contentHeight = document.body.scrollHeight - window.innerHeight;
+        const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
+        $readingProgressBar.style.setProperty('--progress', `${scrollPercent.toFixed(2)}%`);
+      }
       for (let event of this.scrollEventSet) {
         event();
       }