chore(*): add progress bar and style fixes

includes/helpers/cdn.js

@@ -40,9 +40,15 @@ module.exports = function (hexo) {
                 filename = filename.startsWith('outdatedbrowser/') ? filename.substr(16) : filename;
             }
             if (_package === 'highlight.js') {
-                filename = filename.endsWith('.css') && filename.indexOf('.min.') === -1 ? 
+                filename = filename.endsWith('.css') && filename.indexOf('.min.') === -1 ?
                     filename.substr(0, filename.length - 4) + '.min.css' : filename;
             }
+            if (_package === 'mathjax') {
+                filename = filename.startsWith('unpacked/') ? filename.substr(9) : filename;
+            }
+            if (_package === 'pace-js') {
+                _package = 'pace';
+            }
         }
         if (provider !== null && cdn_providers.hasOwnProperty(provider)) {
             provider = cdn_providers[provider];

includes/specs/plugins.spec.js

@@ -54,5 +54,10 @@ module.exports = {
             [doc]: 'Hotjar site id',
             [defaultValue]: null
         }
+    },
+    progressbar: {
+        [type]: 'boolean',
+        [doc]: 'Show a loading progress bar at top of the page',
+        [defaultValue]: true
     }
 };

layout/archive.ejs

@@ -27,7 +27,7 @@
                                     class: 'has-link-grey ',
                                     show_count: false,
                                     style: 'none',
-                                    separator: ' / '
+                                    separator: ' / '
                                 }) %>
                                 </div>
                                 <% } %>

layout/plugin/mathjax.ejs

@@ -1,5 +1,5 @@
 <% if (!head && plugin !== false) { %>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>
+<%- js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML')) %>
 <script>
     MathJax.Hub.Config({
         "HTML-CSS": {matchFontHeight: false},

layout/plugin/progressbar.ejs

@@ -0,0 +1,27 @@
+<% if (head && plugin !== false) { %>
+<%- js(cdn('pace-js', '1.0.2', 'pace.min.js')) %>
+<style>
+.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: #3273dc;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  right: 100%;
+  width: 100%;
+  height: 2px;
+}
+</style>
+<% } %>

layout/widget/profile.ejs

@@ -35,7 +35,7 @@
             </div>
         </nav>
         <nav class="level is-mobile">
-            <div class="level-item has-text-centered">
+            <div class="level-item has-text-centered is-marginless">
                 <div>
                     <p class="heading">
                         <%= _p('common.post', post_count()) %>
@@ -45,7 +45,7 @@
                     </p>
                 </div>
             </div>
-            <div class="level-item has-text-centered">
+            <div class="level-item has-text-centered is-marginless">
                 <div>
                     <p class="heading">
                         <%= _p('common.category', category_count()) %>
@@ -55,7 +55,7 @@
                     </p>
                 </div>
             </div>
-            <div class="level-item has-text-centered">
+            <div class="level-item has-text-centered is-marginless">
                 <div>
                     <p class="heading">
                         <%= _p('common.tag', tag_count()) %>
@@ -75,7 +75,7 @@
         <div class="level is-mobile">
             <% for (let name in socialLinks) {
                     let link = socialLinks[name]; %>
-            <a class="level-item button is-white" target="_blank"
+            <a class="level-item button is-white is-marginless" target="_blank"
                 title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>">
                 <% if (typeof(link) === 'string') { %>
                 <%= name %>

layout/widget/recent_posts.ejs

@@ -23,7 +23,7 @@
                             class: 'has-link-grey ',
                             depth:2,
                             style: 'none',
-                            separator: ' / '}) %>
+                            separator: ' / '}) %>
                     </p>
                 </div>
             </div>

source/css/style.styl

@@ -26,7 +26,15 @@ body
 
 @media screen and (max-width: 768px)
     .section
-        padding: 1.5rem 1rem;
+        padding: 1.5rem 1rem
+
+.column-main,
+.column-left,
+.column-right
+    align-self: flex-start
+    &.is-sticky
+        position: sticky
+        top: .75rem
 
 .card
     overflow: hidden