From f9b92cbbd6a17c7b6cabec13dc709f99a44b1b76 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 12 Sep 2022 15:02:18 +0800
Subject: [PATCH] :zap: Perf: optimize reading progress bar (#191)

---
 .../_partials/_widgets/_reading-progress.scss |  5 +++--
 layouts/partials/widgets.html                 | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/assets/css/_partials/_widgets/_reading-progress.scss b/assets/css/_partials/_widgets/_reading-progress.scss
index 861e739d..76546c38 100644
--- a/assets/css/_partials/_widgets/_reading-progress.scss
+++ b/assets/css/_partials/_widgets/_reading-progress.scss
@@ -1,11 +1,12 @@
 .reading-progress-bar {
   --progress: 0;
+  height: var(--progress-h, 2px);
   width: var(--progress);
-  background-color: var(--bg-progress, $info);
+  background-color: var(--bg-progress, var(--fi-info));
   z-index: 150;
   position: fixed;
   
   [data-theme="dark"] & {
-    background-color: var(--bg-progress-dark, darken($info, 5%));
+    background-color: var(--bg-progress-dark, var(--fi-info-dark));
   }
 }
diff --git a/layouts/partials/widgets.html b/layouts/partials/widgets.html
index 44028413..f5dd31f7 100644
--- a/layouts/partials/widgets.html
+++ b/layouts/partials/widgets.html
@@ -36,12 +36,20 @@
   {{- $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>
+      {{- $style := printf "%v: 0;%v: 0;" (.Start | default "left") (.Position | default "top") -}}
+      {{- if .Height | and (ne .Height "2px")   -}}
+        {{- $style = printf "%v--progress-h: %v;" $style .Height -}}
+      {{- end -}}
+      {{- if .Reversed -}}
+        {{- $style = printf "%v%v" $style "width: calc(100% - var(--progress));" -}}
+      {{- end -}}
+      {{- if .Light -}}
+        {{- $style = printf "%v--bg-progress: %v;" $style .Light -}}
+      {{- end -}}
+      {{- if .Dark -}}
+        {{- $style = printf "%v--bg-progress-dark: %v;" $style .Dark -}}
+      {{- end -}}
+      <div class="reading-progress-bar" {{ printf "style=\"%v\"" $style | safeHTMLAttr }}></div>
     {{- end -}}
   {{- end -}}