add progress bar on top

ref: Jayin/silentor#17
fritx · Oct 10, 2022 · 7d98599 · 7d98599
1 parent 679188c
commit 7d98599
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ for silent 1.0, check [this](https://github.com/fritx/silent/tree/v1) out
 
 ### Funny & Fancy
 
+- [x] progress bar on top
 - [x] auto favicon (extracted from title)
 - [x] favicon dark mode
 - [ ] page-level dark mode

diff --git a/blog/index.html b/blog/index.html
@@ -53,6 +53,7 @@
 <img class="img-holder" id="img-holder" src="p/avatar.jpg">
 
 <!-- import vendor scripts -->
+<script src="vendor/pace-1.2.4.min.js"></script>
 <script src="vendor/jquery-1.11.1.min.js"></script>
 <script src="vendor/marked-0.3.2.min.js"></script>
 <script src="vendor/mermaid-9.1.6.min.js"></script>

diff --git a/blog/p/aboutme.md b/blog/p/aboutme.md
@@ -1,5 +1,7 @@
 # 😅 About Me
 
+<hello@163.com>
+
 ## Fritz Lin
 
 <img alt="avatar" src="avatar.jpg" width="240">

diff --git a/blog/p/projects/silent_2.0/README.md b/blog/p/projects/silent_2.0/README.md
@@ -38,6 +38,7 @@ for silent 1.0, check [this](../silent/) out
 
 ### Funny & Fancy
 
+- [x] progress bar on top
 - [x] auto favicon (extracted from title)
 - [x] favicon dark mode
 - [ ] page-level dark mode

diff --git a/blog/vendor/blog.css b/blog/vendor/blog.css
@@ -189,3 +189,25 @@ code,
     width: 75%;
   }
 }
+
+/* pace minimal */
+/* https://codebyzach.github.io/pace/ */
+.pace {
+	-webkit-pointer-events: none;
+	pointer-events: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+.pace-inactive {
+	display: none;
+}
+.pace .pace-progress {
+	background: #29d;
+	position: fixed;
+	z-index: 2000;
+	top: 0;
+	right: 100%;
+	width: 100%;
+	height: 2px;
+}
diff --git a/blog/vendor/blog.js b/blog/vendor/blog.js
@@ -416,11 +416,12 @@
       if (isTargetSelf && isSilentInternal) {
         e.preventDefault()
         if (isSameUrl) {
-          window.scrollTo(0, 0)
+          // Pace.restart: Called automatically whenever pushState or replaceState is called by default.
+          Pace.restart() // explicit call here
         } else {
           history.pushState({}, '', url)
-          loadMain(url)
         }
+        loadMain(url)
       }
     })
     load('#sidebar-page', sidebarPage)

diff --git a/blog/vendor/pace-1.2.4.min.js b/blog/vendor/pace-1.2.4.min.js