Add NProgress (#79)

_config.yml

@@ -825,13 +825,10 @@ motion:
     sidebar: fadeInUp
 
 # Progress bar in the top during page loading.
-# For more information: https://github.com/HubSpot/pace
-pace:
+# For more information: https://github.com/rstacruz/nprogress
+nprogress:
   enable: false
-  # Themes list:
-  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
-  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
-  theme: minimal
+  spinner: true
 
 # Canvas ribbon
 # For more information: https://github.com/hustcc/ribbon.js
@@ -889,7 +886,7 @@ vendors:
 
   # FancyBox
   jquery:
-  fancybox:
+  fancybox_js:
   fancybox_css:
 
   # Medium-zoom
@@ -930,9 +927,9 @@ vendors:
   # Warning: motion won't work with animate.css version 3.2.0 or later
   animate_css:
 
-  # Pace.js
-  pace:
-  pace_css:
+  # NProgress.js
+  nprogress_js:
+  nprogress_css:
 
   # Canvas ribbon
   canvas_ribbon:

_vendors.yml

@@ -53,7 +53,7 @@ jquery:
   name: jquery
   version: 3.5.1
   file: dist/jquery.min.js
-fancybox:
+fancybox_js:
   name: '@fancyapps/fancybox'
   version: 3.5.7
   file: dist/jquery.fancybox.min.js
@@ -126,16 +126,14 @@ animate_css:
   name: animate.css
   version: 3.1.1
   file: animate.min.css
-pace:
-  name: pace-js
-  version: 1.0.2
-  file: pace.min.js
-  alias: pace
-pace_css:
-  name: pace-js
-  version: 1.0.2
-  file: themes/blue/pace-theme-minimal.css
-  alias: pace
+nprogress_js:
+  name: nprogress
+  version: 0.2.0
+  file: nprogress.js
+nprogress_css:
+  name: nprogress
+  version: 0.2.0
+  file: nprogress.css
 canvas_ribbon:
   name: ribbon.js
   version: 1.0.2

layout/_partials/head/head.njk

@@ -53,9 +53,9 @@
   <link rel="stylesheet" href="{{ theme.vendors.fancybox_css }}">
 {%- endif %}
 
-{%- if theme.pace.enable %}
-  <link rel="stylesheet" href="{{ theme.vendors.pace_css }}">
-  <script src="{{ theme.vendors.pace }}"></script>
+{%- if theme.nprogress.enable %}
+  <link rel="stylesheet" href="{{ theme.vendors.nprogress_css }}">
+  <script src="{{ theme.vendors.nprogress_js }}"></script>
 {%- endif %}
 
 {{ next_config() }}

layout/_third-party/index.njk

@@ -15,3 +15,5 @@
 
 {% include 'tags/pdf.njk' %}
 {% include 'tags/mermaid.njk' %}
+
+{% include 'nprogress.njk' %}

layout/_third-party/nprogress.njk

@@ -0,0 +1,22 @@
+{%- if theme.nprogress.enable %}
+  <script>
+    NProgress.configure({
+      showSpinner: {{ theme.nprogress.spinner | safedump }}
+    });
+    NProgress.start();
+    document.addEventListener('readystatechange', () => {
+      if (document.readyState === 'interactive') {
+        NProgress.inc(0.8);
+      }
+      if (document.readyState === 'complete') {
+        NProgress.done();
+      }
+    });
+    document.addEventListener('pjax:send', () => {
+      NProgress.start();
+    });
+    document.addEventListener('pjax:success', () => {
+      NProgress.done();
+    });
+  </script>
+{%- endif %}

scripts/helpers/next-vendors.js

@@ -15,7 +15,7 @@ hexo.extend.helper.register('js_vendors', function() {
     vendors.push('pjax');
   }
   if (theme.fancybox) {
-    vendors.push('jquery', 'fancybox');
+    vendors.push('jquery', 'fancybox_js');
   }
   if (theme.mediumzoom) {
     vendors.push('mediumzoom');