From edefcdae9abe47d2852a120f8e327fa7220c87f0 Mon Sep 17 00:00:00 2001
From: Alfred <799953468@qq.com>
Date: Mon, 7 Sep 2020 10:24:31 +0800
Subject: [PATCH] Add NProgress (#79)

---
 _config.yml                       | 17 +++++++----------
 _vendors.yml                      | 20 +++++++++-----------
 layout/_partials/head/head.njk    |  6 +++---
 layout/_third-party/index.njk     |  2 ++
 layout/_third-party/nprogress.njk | 22 ++++++++++++++++++++++
 scripts/helpers/next-vendors.js   |  2 +-
 6 files changed, 44 insertions(+), 25 deletions(-)
 create mode 100644 layout/_third-party/nprogress.njk

diff --git a/_config.yml b/_config.yml
index 185bad8..00e08b3 100644
--- a/_config.yml
+++ b/_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:
diff --git a/_vendors.yml b/_vendors.yml
index e3801eb..9c4a71a 100644
--- a/_vendors.yml
+++ b/_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
diff --git a/layout/_partials/head/head.njk b/layout/_partials/head/head.njk
index 37186b7..0f54b60 100644
--- a/layout/_partials/head/head.njk
+++ b/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() }}
diff --git a/layout/_third-party/index.njk b/layout/_third-party/index.njk
index 6630439..b34370e 100644
--- a/layout/_third-party/index.njk
+++ b/layout/_third-party/index.njk
@@ -15,3 +15,5 @@
 
 {% include 'tags/pdf.njk' %}
 {% include 'tags/mermaid.njk' %}
+
+{% include 'nprogress.njk' %}
diff --git a/layout/_third-party/nprogress.njk b/layout/_third-party/nprogress.njk
new file mode 100644
index 0000000..da35fa7
--- /dev/null
+++ b/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 %}
diff --git a/scripts/helpers/next-vendors.js b/scripts/helpers/next-vendors.js
index b9bb62e..3fc0be3 100644
--- a/scripts/helpers/next-vendors.js
+++ b/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');