added a javascript build pipeline for transpiling and minifying; updated readme

.gitignore

@@ -1 +1,2 @@
 public/
+node_modules/

README.md

@@ -5,6 +5,9 @@
 - [Zulma](#zulma)
   - [Contents](#contents)
   - [Installation](#installation)
+  - [Javascript](#javascript)
+    - [Sources](#sources)
+    - [Building](#building)
   - [Options](#options)
     - [Pagination](#pagination)
     - [Taxonomies](#taxonomies)
@@ -14,6 +17,7 @@
     - [Title](#title)
     - [Theming](#theming)
   - [Original](#original)
+  - [Known Bugs](#known-bugs)
 
 ## Installation
 First download this theme to your `themes` directory:
@@ -28,7 +32,25 @@ and then enable it in your `config.toml`:
 theme = "zulma"
 ```
 
-That's it! No more configuration should be required, however keep reading to see what options you can set for more customizability.
+That's it! No more configuration should be required, however head to the [Options](#options) section to see what you can set for more customizability.
+
+## Javascript
+
+### Sources
+All the source javascript files live in `javascript/src`. This is a list of the javascript files, their purpose, and their sources. All files are prefixed with `zulma_` to avoid any name clashes.
+
+- `zulma_search.js` - Used when a user types into the search box on the navbar (if enabled). The search is shamefully stolen from [Zola's site](https://github.com/getzola/zola/blob/6100a43/docs/static/search.js). Thanks, Vincent!
+- `zulma_navbar.js` - Used for the mobile navbar toggle. Taken from the [bulma template](https://github.com/dansup/bulma-templates/blob/6263eb7/js/bulma.js) at Bulmaswatch
+- `zulma_switchcss.js` - Used for swapping themes. Created by me.
+
+### Building
+ These are transpiled by babel, minified by webpack, sourcemaps are generated and then everything placed in `static/js`. The repo already contains the transpiled and minified files along with their corrosponding sourcemaps so you don't need to do anything to use these. If you would prefer to build it yourself, feel free to inspect the js files and then run the build process yourself (please ensure that you have [node, npm](https://nodejs.org/en/) and [yarn](https://yarnpkg.com/lang/en/) installed.):
+
+```
+cd javascript
+yarn
+yarn webpack
+```
 
 ## Options
 
@@ -165,4 +187,7 @@ zulma_allow_theme_selection = true
 ```
 
 ## Original
-This template is based on the [blog template](https://dansup.github.io/bulma-templates/templates/blog.html) over at [Free Bulma Templates](https://dansup.github.io/bulma-templates/). The code behind from adapted from the [after-dark](https://github.com/getzola/after-dark/blob/master/README.md) zola template.
+This template is based on the [blog template](https://dansup.github.io/bulma-templates/templates/blog.html) over at [Free Bulma Templates](https://dansup.github.io/bulma-templates/). All themes were taken from [Bulmaswatch](https://jenil.github.io/bulmaswatch/). The code behind from adapted from the [after-dark](https://github.com/getzola/after-dark/blob/master/README.md) zola template.
+
+## Known Bugs
+If user theme swapping is enabled and the user selects a theme different to the default, a slight delay will be introduced in page rendering as the css gets swapped out and in by the javascript. This is better than the alternative FOUC or flashes of the old theme, but still annoying. I don't know any way around this, but with browser caching it should be fast enough to not cause serious issues.

javascript/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

javascript/package.json

@@ -0,0 +1,9 @@
+{
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "babel-loader": "^8.0.5",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.2"
+  }
+}

javascript/src/zulma_switchcss.js

@@ -1,7 +1,7 @@
 (function (switch_css) {
     //Constants
     const THEME_KEY = "ZULMA_THEME";
-    const STOP_LINK_CSS_ID = "stop-blink";
+    const STOP_BLINK_CSS_ID = "stop-blink";
     const STYLESHEET_CLASSNAME = "stylesheet"
 
     //Variables
@@ -58,7 +58,7 @@
         var head = document.getElementsByTagName('head')[0];
         var style = document.createElement('style');
 
-        style.id = STOP_LINK_CSS_ID;
+        style.id = STOP_BLINK_CSS_ID;
         style.setAttribute('type', 'text/css');
 
         if (style.styleSheet) {
@@ -71,7 +71,7 @@
 
     /* Shows the body of the page */
     function showBody() {
-        let css = document.getElementById(STOP_LINK_CSS_ID);
+        let css = document.getElementById(STOP_BLINK_CSS_ID);
         if (css)
             css.remove();
     };

javascript/webpack.config.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+    entry: {
+        zulma_navbar: './src/zulma_navbar.js',
+        zulma_search: './src/zulma_search.js',
+        zulma_switchcss: './src/zulma_switchcss.js'
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve('../static/js')
+    },
+    module: {
+        rules: [{
+            test: /\.js$/,
+            exclude: /node_modules/,
+            use: ['babel-loader']
+        }]
+    },
+    resolve: {
+        extensions: ['*', '.js']
+    },
+    stats: {
+        colors: true
+    },
+    devtool: 'source-map',
+    mode: 'production',
+};

static/js/zulma_navbar.js

@@ -0,0 +1,2 @@
+!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){var r,n;r=document.querySelector(".burger"),n=document.querySelector("#"+r.dataset.target),r.addEventListener("click",function(){r.classList.toggle("is-active"),n.classList.toggle("is-active")})}]);
+//# sourceMappingURL=zulma_navbar.js.map

static/js/zulma_search.js

@@ -0,0 +1,2 @@
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([,function(e,t){function n(e,t){return'<div class="search-results__item box">'+'<a href="'.concat(e.ref,'">').concat(e.doc.title,"</a>")+"<div>".concat(function(e,t){var n=t.map(function(e){return elasticlunr.stemmer(e.toLowerCase())}),r=!1,o=0,u=[],i=e.toLowerCase().split(". ");for(var l in i){var a=i[l].split(" "),c=8;for(var s in a){if((g=a[s]).length>0){for(var d in n)elasticlunr.stemmer(g).startsWith(n[d])&&(c=40,r=!0);u.push([g,c,o]),c=2}o+=g.length,o+=1}o+=1}if(0===u.length)return e;var f=[],p=Math.min(u.length,30),m=0;for(l=0;l<p;l++)m+=u[l][1];for(f.push(m),l=0;l<u.length-p;l++)m-=u[l][1],m+=u[l+p][1],f.push(m);var v=0;if(r){var h=0;for(l=f.length-1;l>=0;l--)f[l]>h&&(h=f[l],v=l)}var y=[],b=u[v][2];for(l=v;l<v+p;l++){var g;b<(g=u[l])[2]&&(y.push(e.substring(b,g[2])),b=g[2]),40===g[1]&&y.push("<b>"),b=g[2]+g[0].length,y.push(e.substring(g[2],b)),40===g[1]&&y.push("</b>")}return y.push("…"),y.join("")}(e.doc.body,t),"</div>")+"</div>"}function r(){var e,t,r,o=document.getElementById("search"),u=document.querySelector(".search-results"),i=document.querySelector(".search-results__items"),l={bool:"AND",fields:{title:{boost:2},body:{boost:1}}},a=elasticlunr.Index.load(window.searchIndex);o.addEventListener("keyup",(e=function(){var e=o.value.trim();if(a&&(u.style.display=""===e?"none":"block",i.innerHTML="",""!==e)){var t=a.search(e,l);if(0!==t.length){e;for(var r=0;r<Math.min(t.length,10);r++){var c=document.createElement("li");c.innerHTML=n(t[r],e.split(" ")),i.appendChild(c)}}else u.style.display="none"}},t=150,function(){var n=this,o=arguments;clearTimeout(r),r=setTimeout(function(){r=null,e.apply(n,o)},t)}))}"complete"===document.readyState||"loading"!==document.readyState&&!document.documentElement.doScroll?r():document.addEventListener("DOMContentLoaded",r)}]);
+//# sourceMappingURL=zulma_search.js.map

static/js/zulma_switchcss.js

@@ -0,0 +1,2 @@
+!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}({2:function(e,t){!function(e){var t="ZULMA_THEME",n="stop-blink",o="stylesheet",r=null,c=localStorage.getItem(t);function i(e,n){var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href="/".concat(e,".css"),(r=document.getElementsByTagName("head")[0].appendChild(o)).addEventListener("load",u),n&&l(),function(e){localStorage.setItem(t,e)}(e)}function l(){document.querySelectorAll(".".concat(o)).forEach(function(e){e.remove()})}function u(){var e;r.removeEventListener("load",u),l(),r.className+=o,(e=document.getElementById(n))&&e.remove()}e.init=function(){var e,t;c&&!document.getElementById(c)&&(e=document.getElementsByTagName("head")[0],(t=document.createElement("style")).id=n,t.setAttribute("type","text/css"),t.styleSheet?t.styleSheet.cssText=css:t.appendChild(document.createTextNode("body{visibility:hidden;}")),e.appendChild(t),i(c,!0),window.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("#theme-select>option").forEach(function(e){e.value===c&&(e.selected="selected")})})),window.addEventListener("DOMContentLoaded",function(){document.getElementById("theme-select").onchange=function(){i(this.value)}})}}(switch_css=window.switch_css||{}),switch_css.init()}});
+//# sourceMappingURL=zulma_switchcss.js.map

templates/index.html

@@ -19,7 +19,7 @@
     {{ index_macros::css() }}
     <!-- This script must follow css -->
     {% if config.extra.zulma_allow_theme_selection %}
-    <script type="text/javascript" src="{{ get_url(path="js/switchcss.js") }}"></script>
+    <script type="text/javascript" src="{{ get_url(path="js/zulma_switchcss.js") }}"></script>
     {% endif %}
 
     {% if config.generate_rss %}
@@ -82,10 +82,10 @@
     {{ index_macros::footer() }}
     {% endblock footer %}
 
-    <script type="text/javascript" src="{{ get_url(path="js/bulma.js") }}"></script>
+    <script type="text/javascript" src="{{ get_url(path="js/zulma_navbar.js") }}"></script>
 
     {% if config.build_search_index %}
-    <script type="text/javascript" src="{{ get_url(path="js/search.js") }}"></script>
+    <script type="text/javascript" src="{{ get_url(path="js/zulma_search.js") }}"></script>
     {% endif %}
 
     {% endblock body%}