Add basic search functionality via Fuse.js and minor changes

5 files changed, 315 insertions, 25 deletions

diff --git a/assets/bundle.svg b/assets/bundle.svg
index d39e25d..d299238 100644
--- a/assets/bundle.svg
+++ b/assets/bundle.svg
@@ -1,6 +1,6 @@
 <!--
   From FontAwesome 5:
-  adjust, angle-right, angle-double-right, caret-down and hashtag.
+  adjust, angle-right, angle-double-right, caret-down, hashtag and search.
 -->
 
 <!-- Reduce repetition... -->
@@ -28,6 +28,11 @@
   <symbol viewBox="0 0 512 512" id="adjust">
     <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"/>
   </symbol>
+  
+  
+  <symbol viewBox="0 0 512 512" id="search">
+    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
+  </symbol>
 
   
   {{ if .Site.Params.Style.hasIconAsFootnoteReturnLink }}
diff --git a/assets/fuse.js@6.4.0/dist/fuse.basic.min.js b/assets/fuse.js@6.4.0/dist/fuse.basic.min.js
new file mode 100644
index 0000000..c8ee330
--- /dev/null
+++ b/assets/fuse.js@6.4.0/dist/fuse.basic.min.js
@@ -0,0 +1,9 @@
+/**
+ * Fuse.js v6.4.0 - Lightweight fuzzy-search (http://fusejs.io)
+ *
+ * Copyright (c) 2020 Kiro Risk (http://kiro.me)
+ * All Rights Reserved. Apache Software License 2.0
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+var e,t;e=this,t=function(){"use strict";function e(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function n(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function a(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return c(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?c(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function s(e){return Array.isArray?Array.isArray(e):"[object Array]"===Object.prototype.toString.call(e)}function h(e){return"string"==typeof e}function u(e){return"number"==typeof e}function d(e){return null!=e}function l(e){return!e.trim().length}var f=function(e){return"Pattern length exceeds max of ".concat(e,".")},v=Object.prototype.hasOwnProperty,g=function(){function t(n){var r=this;e(this,t),this._keys=[],this._keyMap={};var i=0;n.forEach((function(e){var t=y(e);i+=t.weight,r._keys.push(t),r._keyMap[t.id]=t,i+=t.weight})),this._keys.forEach((function(e){e.weight/=i}))}return n(t,[{key:"get",value:function(e){return this._keyMap[e]}},{key:"keys",value:function(){return this._keys}},{key:"toJSON",value:function(){return JSON.stringify(this._keys)}}]),t}();function y(e){var t=null,n=null,r=null,i=1;if(h(e)||s(e))r=e,t=p(e),n=m(e);else{if(!v.call(e,"name"))throw new Error(function(e){return"Missing ".concat(e," property in key")}("name"));var o=e.name;if(r=o,v.call(e,"weight")&&(i=e.weight)<=0)throw new Error(function(e){return"Property 'weight' in key '".concat(e,"' must be a positive integer")}(o));t=p(o),n=m(o)}return{path:t,id:n,weight:i,src:r}}function p(e){return s(e)?e:e.split(".")}function m(e){return s(e)?e.join("."):e}var k=o({},{isCaseSensitive:!1,includeScore:!1,keys:[],shouldSort:!0,sortFn:function(e,t){return e.score===t.score?e.idx<t.idx?-1:1:e.score<t.score?-1:1}},{},{includeMatches:!1,findAllMatches:!1,minMatchCharLength:1},{},{location:0,threshold:.6,distance:100},{},{useExtendedSearch:!1,getFn:function(e,t){var n=[],r=!1;return function e(t,i,o){if(i[o]){var a=t[i[o]];if(!d(a))return;if(o===i.length-1&&(h(a)||u(a)))n.push(function(e){return null==e?"":function(e){if("string"==typeof e)return e;var t=e+"";return"0"==t&&1/e==-1/0?"-0":t}(e)}(a));else if(s(a)){r=!0;for(var c=0,l=a.length;c<l;c+=1)e(a[c],i,o+1)}else i.length&&e(a,i,o+1)}else n.push(t)}(e,h(t)?t.split("."):t,0),r?n:n[0]},ignoreLocation:!1,ignoreFieldNorm:!1}),M=/[^ ]+/g;function b(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:3,t=new Map;return{get:function(n){var r=n.match(M).length;if(t.has(r))return t.get(r);var i=parseFloat((1/Math.sqrt(r)).toFixed(e));return t.set(r,i),i},clear:function(){t.clear()}}}var x=function(){function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=n.getFn,i=void 0===r?k.getFn:r;e(this,t),this.norm=b(3),this.getFn=i,this.isCreated=!1,this.setIndexRecords()}return n(t,[{key:"setSources",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.docs=e}},{key:"setIndexRecords",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.records=e}},{key:"setKeys",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.keys=t,this._keysMap={},t.forEach((function(t,n){e._keysMap[t.id]=n}))}},{key:"create",value:function(){var e=this;!this.isCreated&&this.docs.length&&(this.isCreated=!0,h(this.docs[0])?this.docs.forEach((function(t,n){e._addString(t,n)})):this.docs.forEach((function(t,n){e._addObject(t,n)})),this.norm.clear())}},{key:"add",value:function(e){var t=this.size();h(e)?this._addString(e,t):this._addObject(e,t)}},{key:"removeAt",value:function(e){this.records.splice(e,1);for(var t=e,n=this.size();t<n;t+=1)this.records[t].i-=1}},{key:"getValueForItemAtKeyId",value:function(e,t){return e[this._keysMap[t]]}},{key:"size",value:function(){return this.records.length}},{key:"_addString",value:function(e,t){if(d(e)&&!l(e)){var n={v:e,i:t,n:this.norm.get(e)};this.records.push(n)}}},{key:"_addObject",value:function(e,t){var n=this,r={i:t,$:{}};this.keys.forEach((function(t,i){var o=n.getFn(e,t.path);if(d(o))if(s(o))!function(){for(var e=[],t=[{nestedArrIndex:-1,value:o}];t.length;){var a=t.pop(),c=a.nestedArrIndex,u=a.value;if(d(u))if(h(u)&&!l(u)){var f={v:u,i:c,n:n.norm.get(u)};e.push(f)}else s(u)&&u.forEach((function(e,n){t.push({nestedArrIndex:n,value:e})}))}r.$[i]=e}();else if(!l(o)){var a={v:o,n:n.norm.get(o)};r.$[i]=a}})),this.records.push(r)}},{key:"toJSON",value:function(){return{keys:this.keys,records:this.records}}}]),t}();function w(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getFn,i=void 0===r?k.getFn:r,o=new x({getFn:i});return o.setKeys(e.map(y)),o.setSources(t),o.create(),o}function L(e,t){var n=e.matches;t.matches=[],d(n)&&n.forEach((function(e){if(d(e.indices)&&e.indices.length){var n={indices:e.indices,value:e.value};e.key&&(n.key=e.key.src),e.idx>-1&&(n.refIndex=e.idx),t.matches.push(n)}}))}function _(e,t){t.score=e.score}function O(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.errors,r=void 0===n?0:n,i=t.currentLocation,o=void 0===i?0:i,a=t.expectedLocation,c=void 0===a?0:a,s=t.distance,h=void 0===s?k.distance:s,u=t.ignoreLocation,d=void 0===u?k.ignoreLocation:u,l=r/e.length;if(d)return l;var f=Math.abs(c-o);return h?l+f/h:f?1:l}function S(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:k.minMatchCharLength,n=[],r=-1,i=-1,o=0,a=e.length;o<a;o+=1){var c=e[o];c&&-1===r?r=o:c||-1===r||((i=o-1)-r+1>=t&&n.push([r,i]),r=-1)}return e[o-1]&&o-r>=t&&n.push([r,o-1]),n}function A(e){for(var t={},n=0,r=e.length;n<r;n+=1){var i=e.charAt(n);t[i]=(t[i]||0)|1<<r-n-1}return t}var E=function(){function t(n){var r=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=i.location,a=void 0===o?k.location:o,c=i.threshold,s=void 0===c?k.threshold:c,h=i.distance,u=void 0===h?k.distance:h,d=i.includeMatches,l=void 0===d?k.includeMatches:d,f=i.findAllMatches,v=void 0===f?k.findAllMatches:f,g=i.minMatchCharLength,y=void 0===g?k.minMatchCharLength:g,p=i.isCaseSensitive,m=void 0===p?k.isCaseSensitive:p,M=i.ignoreLocation,b=void 0===M?k.ignoreLocation:M;if(e(this,t),this.options={location:a,threshold:s,distance:u,includeMatches:l,findAllMatches:v,minMatchCharLength:y,isCaseSensitive:m,ignoreLocation:b},this.pattern=m?n:n.toLowerCase(),this.chunks=[],this.pattern.length){var x=function(e,t){r.chunks.push({pattern:e,alphabet:A(e),startIndex:t})},w=this.pattern.length;if(w>32){for(var L=0,_=w%32,O=w-_;L<O;)x(this.pattern.substr(L,32),L),L+=32;if(_){var S=w-32;x(this.pattern.substr(S),S)}}else x(this.pattern,0)}}return n(t,[{key:"searchIn",value:function(e){var t=this.options,n=t.isCaseSensitive,r=t.includeMatches;if(n||(e=e.toLowerCase()),this.pattern===e){var i={isMatch:!0,score:0};return r&&(i.indices=[[0,e.length-1]]),i}var o=this.options,c=o.location,s=o.distance,h=o.threshold,u=o.findAllMatches,d=o.minMatchCharLength,l=o.ignoreLocation,v=[],g=0,y=!1;this.chunks.forEach((function(t){var n=t.pattern,i=t.alphabet,o=t.startIndex,p=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},i=r.location,o=void 0===i?k.location:i,a=r.distance,c=void 0===a?k.distance:a,s=r.threshold,h=void 0===s?k.threshold:s,u=r.findAllMatches,d=void 0===u?k.findAllMatches:u,l=r.minMatchCharLength,v=void 0===l?k.minMatchCharLength:l,g=r.includeMatches,y=void 0===g?k.includeMatches:g,p=r.ignoreLocation,m=void 0===p?k.ignoreLocation:p;if(t.length>32)throw new Error(f(32));for(var M,b=t.length,x=e.length,w=Math.max(0,Math.min(o,x)),L=h,_=w,A=v>1||y,E=A?Array(x):[];(M=e.indexOf(t,_))>-1;){var I=O(t,{currentLocation:M,expectedLocation:w,distance:c,ignoreLocation:m});if(L=Math.min(I,L),_=M+b,A)for(var j=0;j<b;)E[M+j]=1,j+=1}_=-1;for(var F=[],C=1,P=b+x,N=1<<b-1,$=0;$<b;$+=1){for(var D=0,K=P;D<K;){var z=O(t,{errors:$,currentLocation:w+K,expectedLocation:w,distance:c,ignoreLocation:m});z<=L?D=K:P=K,K=Math.floor((P-D)/2+D)}P=K;var J=Math.max(1,w-K+1),R=d?x:Math.min(w+K,x)+b,T=Array(R+2);T[R+1]=(1<<$)-1;for(var q=R;q>=J;q-=1){var U=q-1,V=n[e.charAt(U)];if(A&&(E[U]=+!!V),T[q]=(T[q+1]<<1|1)&V,$&&(T[q]|=(F[q+1]|F[q])<<1|1|F[q+1]),T[q]&N&&(C=O(t,{errors:$,currentLocation:U,expectedLocation:w,distance:c,ignoreLocation:m}))<=L){if(L=C,(_=U)<=w)break;J=Math.max(1,2*w-_)}}var B=O(t,{errors:$+1,currentLocation:w,expectedLocation:w,distance:c,ignoreLocation:m});if(B>L)break;F=T}var G={isMatch:_>=0,score:Math.max(.001,C)};if(A){var H=S(E,v);H.length?y&&(G.indices=H):G.isMatch=!1}return G}(e,n,i,{location:c+o,distance:s,threshold:h,findAllMatches:u,minMatchCharLength:d,includeMatches:r,ignoreLocation:l}),m=p.isMatch,M=p.score,b=p.indices;m&&(y=!0),g+=M,m&&b&&(v=[].concat(a(v),a(b)))}));var p={isMatch:y,score:y?g/this.chunks.length:1};return y&&r&&(p.indices=v),p}}]),t}(),I=[];function j(e,t){for(var n=0,r=I.length;n<r;n+=1){var i=I[n];if(i.condition(e,t))return new i(e,t)}return new E(e,t)}var F=function(){function t(n){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2?arguments[2]:void 0;if(e(this,t),this.options=o({},k,{},r),this.options.useExtendedSearch)throw new Error("Extended search is not available");this._keyStore=new g(this.options.keys),this.setCollection(n,i)}return n(t,[{key:"setCollection",value:function(e,t){if(this._docs=e,t&&!(t instanceof x))throw new Error("Incorrect 'index' type");this._myIndex=t||w(this.options.keys,this._docs,{getFn:this.options.getFn})}},{key:"add",value:function(e){d(e)&&(this._docs.push(e),this._myIndex.add(e))}},{key:"remove",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){return!1},t=[],n=0,r=this._docs.length;n<r;n+=1){var i=this._docs[n];e(i,n)&&(this.removeAt(n),n-=1,t.push(i))}return t}},{key:"removeAt",value:function(e){this._docs.splice(e,1),this._myIndex.removeAt(e)}},{key:"getIndex",value:function(){return this._myIndex}},{key:"search",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.limit,r=void 0===n?-1:n,i=this.options,o=i.includeMatches,a=i.includeScore,c=i.shouldSort,s=i.sortFn,d=i.ignoreFieldNorm,l=h(e)?h(this._docs[0])?this._searchStringList(e):this._searchObjectList(e):this._searchLogical(e);return C(l,{ignoreFieldNorm:d}),c&&l.sort(s),u(r)&&r>-1&&(l=l.slice(0,r)),P(l,this._docs,{includeMatches:o,includeScore:a})}},{key:"_searchStringList",value:function(e){var t=j(e,this.options),n=this._myIndex.records,r=[];return n.forEach((function(e){var n=e.v,i=e.i,o=e.n;if(d(n)){var a=t.searchIn(n),c=a.isMatch,s=a.score,h=a.indices;c&&r.push({item:n,idx:i,matches:[{score:s,value:n,norm:o,indices:h}]})}})),r}},{key:"_searchLogical",value:function(e){throw new Error("Logical search is not available")}},{key:"_searchObjectList",value:function(e){var t=this,n=j(e,this.options),r=this._myIndex,i=r.keys,o=r.records,c=[];return o.forEach((function(e){var r=e.$,o=e.i;if(d(r)){var s=[];i.forEach((function(e,i){s.push.apply(s,a(t._findMatches({key:e,value:r[i],searcher:n})))})),s.length&&c.push({idx:o,item:r,matches:s})}})),c}},{key:"_findMatches",value:function(e){var t=e.key,n=e.value,r=e.searcher;if(!d(n))return[];var i=[];if(s(n))n.forEach((function(e){var n=e.v,o=e.i,a=e.n;if(d(n)){var c=r.searchIn(n),s=c.isMatch,h=c.score,u=c.indices;s&&i.push({score:h,key:t,value:n,idx:o,norm:a,indices:u})}}));else{var o=n.v,a=n.n,c=r.searchIn(o),h=c.isMatch,u=c.score,l=c.indices;h&&i.push({score:u,key:t,value:o,norm:a,indices:l})}return i}}]),t}();function C(e,t){var n=t.ignoreFieldNorm,r=void 0===n?k.ignoreFieldNorm:n;e.forEach((function(e){var t=1;e.matches.forEach((function(e){var n=e.key,i=e.norm,o=e.score,a=n?n.weight:null;t*=Math.pow(0===o&&a?Number.EPSILON:o,(a||1)*(r?1:i))})),e.score=t}))}function P(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.includeMatches,i=void 0===r?k.includeMatches:r,o=n.includeScore,a=void 0===o?k.includeScore:o,c=[];return i&&c.push(L),a&&c.push(_),e.map((function(e){var n=e.idx,r={item:t[n],refIndex:n};return c.length&&c.forEach((function(t){t(e,r)})),r}))}return F.version="6.4.0",F.createIndex=w,F.parseIndex=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.getFn,r=void 0===n?k.getFn:n,i=e.keys,o=e.records,a=new x({getFn:r});return a.setKeys(i),a.setIndexRecords(o),a},F.config=k,F},"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Fuse=t();
\ No newline at end of file
diff --git a/assets/js/postpone.js b/assets/js/postpone.js
index 1bbb7ab..dd461e6 100644
--- a/assets/js/postpone.js
+++ b/assets/js/postpone.js
@@ -19,4 +19,163 @@ PALETTE.onchange = function () {
   };
   
   updateAccent()
-}
+};
+
+/******************************
+/ Basic search via Fuse.js
+******************************/
+
+{{ $fuseJS := resources.Get "/fuse.js@6.4.0/dist/fuse.basic.min.js" }}
+
+{{ if eq .Layout "search" }}
+
+  // Get Fuse.js
+  {{ $fuseJS.Content | safeJS }}
+  
+  const fuseOptions = {
+    shouldSort: true,
+    threshold: 0,
+    distance: -1,
+    maxPatternLength: 32,
+    minMatchCharLength: 3,
+    keys: [
+      { name: 'title',        weight: .4 },
+      { name: 'tags',         weight: .3 },
+      { name: 'description',  weight: .2 },
+      { name: 'content',      weight: .1 }
+    ]
+  };
+
+  // Sanitize
+  function param(name) {
+    return decodeURIComponent((location.search.split(name + '=')[1] || '').split('&')[0]).replace(/\+/g, ' ')
+  };
+  
+  // Capture input
+  let searchQuery = param('q');
+  
+  // Search info section
+  const info = document.getElementById('search-info');
+
+  if (searchQuery) {
+  
+    // Transfer text to search field
+    document.querySelector('section.search-box input')
+      .value = searchQuery;
+    
+    executeSearch(searchQuery);
+  } else {
+    info.innerHTML = '<p>{{ T "search_awaiting_search" }}</p>'
+  };
+  
+
+  function getJSON(url, fn) {
+    const request = new XMLHttpRequest();
+    request.open('GET', url, true);
+    request.onload = function () {
+      if (request.status >= 200 && request.status < 400) {
+        const data = JSON.parse(request.responseText);
+        fn(data)
+      }
+    };
+    request.send()
+  };
+
+  function executeSearch(searchQuery) {
+
+    getJSON('index.json', function (data) {
+      
+      // Limit results and throw an error if too many pages are found
+      const limit = {{ .Site.Params.Search.maxResults | default 30 }};
+      
+      const pages = data;
+      const fuse = new Fuse(pages, fuseOptions);
+      const result = fuse.search(searchQuery);
+
+      // Reset info regarding the search
+      info.innerHTML = '';
+      
+      info.innerHTML = '<p>{{ T "search_results_for" }}: ' + searchQuery + '</p>';
+      
+      if (result.length > 0) {
+        if (result.length == 1) {
+          info.innerHTML += '<p>{{ T "search_one_page_found" }}.</p>'
+          
+        } else if (1 < result.length && result.length < limit + 1) {
+
+          info.innerHTML += '<p>' + result.length + ' {{ T "search_pages_found" }}.</p>'
+          
+        } else {
+
+          info.innerHTML += '<p class=error>{{ T "search_too_many" }}</p>'
+        }
+
+      } else {
+
+        info.innerHTML += '<p class=error>{{ T "search_no_page_found" }}</p>'
+      };
+      
+      if (0 < result.length && result.length < limit + 1) {
+        populateResults(result)
+      }
+      
+    })
+  };
+
+  // Populate results
+  function populateResults(result) {
+    result.forEach(function (value, key) {
+      const content = value.item.content;
+      
+      // Date as it should be rendered if not null
+      const formatedDate = '<time datetime=' + value.item.date + '>' + value.item.date + '</time>';
+
+      // Pull template from hugo template definition
+      const templateDefinition = document.getElementById('search-result-template').innerHTML;
+
+      // Replace values
+      const output = render(templateDefinition, {
+        link  : value.item.permalink,
+        date  : value.item.date ? formatedDate : '',
+        title : value.item.title
+      });
+      document.getElementById('search-results').appendChild(htmlToElement(output))
+    })
+  };
+
+  function render(templateString, data) {
+    let conditionalMatches, conditionalPattern, copy;
+    
+    conditionalPattern = /\$\{\s*isset ([a-zA-Z]*) \s*\}(.*)\$\{\s*end\s*}/g;
+    
+    //since loop below depends on re.lastInxdex, we use a copy to capture any manipulations whilst inside the loop
+    copy = templateString;
+    while ((conditionalMatches = conditionalPattern.exec(templateString)) !== null) {
+      if (data[conditionalMatches[1]]) {
+        //valid key, remove conditionals, leave content.
+        copy = copy.replace(conditionalMatches[0],conditionalMatches[2])
+      } else {
+        //not valid, remove entire section
+        copy = copy.replace(conditionalMatches[0],'')
+      }
+    };
+    templateString = copy;
+    //now any conditionals removed we can do simple substitution
+    let key, find, re;
+    for (key in data) {
+      find = '\\$\\{\\s*' + key + '\\s*\\}';
+      re = new RegExp(find, 'g');
+      templateString = templateString.replace(re, data[key])
+    };
+    return templateString
+  };
+
+  
+  function htmlToElement(html) {
+    const template = document.createElement('template');
+    html = html.trim(); // Never return a text node of whitespace as the result
+    template.innerHTML = html;
+    return template.content.firstChild
+  };
+  
+{{ end }}
diff --git a/assets/scss/colors/variables.scss b/assets/scss/colors/variables.scss
index 52ffb10..98754cc 100644
--- a/assets/scss/colors/variables.scss
+++ b/assets/scss/colors/variables.scss
@@ -6,6 +6,7 @@ $light-alt-background:    #d6d6d6;
 $light-alt-foreground:    #333;
   
 $light-details:           #fdfdfd;
+$light-error-color:       #c70000;
 
 $light-bg-modifier:       rgba(0,0,0,.3);
 
@@ -24,6 +25,7 @@ $dark-alt-background:     #1c1c1c;
 $dark-alt-foreground:     #ddd;
   
 $dark-details:            #1a1a1a;
+$dark-error-color:        #ff3131;
 
 $dark-bg-modifier:        rgba(255,255,255,.3);
 
@@ -33,6 +35,7 @@ $dark-input-border:       #262626;
 
 $dark-letterpress:        rgba(255,255,255,.2);
 
+
 // Lazy way to deter images that can be too bright
 $img-filter:
   contrast(.85)
@@ -44,4 +47,3 @@ $img-filter:
 $box-border:    #222;
 $error-color:   red;
 $selected-fg:   #f0f0f0;
-
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 6d915f4..c2130fd 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -11,8 +11,6 @@ $change-transition: {{ .Scratch.Get "changeTransition" }};
 

 

 

-

-

 // Default size

 :root {

   font-size: $font-size;

@@ -31,7 +29,8 @@ html {
     --alt-fg: #{$light-alt-foreground};

     

     --dtl: #{$light-details};

-

+    --err: #{$light-error-color};

+    

     --bgmod: #{$light-bg-modifier};

 

     --input-bg: #{$light-input-background};

@@ -62,6 +61,7 @@ html {
     --alt-fg: #{$dark-alt-foreground};

     

     --dtl: #{$dark-details};

+    --err: #{$dark-error-color};

 

     --bgmod: #{$dark-bg-modifier};

 

@@ -228,9 +228,7 @@ body {
       button {

         margin: 0 7.5px;

         outline: 2px dashed transparent;

-        

-        cursor: pointer;

-        

+

         transition:

           outline .2s ease-in-out,

           transform .2s ease-in-out;

@@ -441,6 +439,7 @@ a.anchor {
 

 

 // Avoid accidental selection

+label,

 span.lnt,

 summary,

 sup.footnote-ref {

@@ -449,17 +448,16 @@ sup.footnote-ref {
 

 

 // Lists in general

-ol,

-ul {

+article ol,

+article ul,

+main.index ol,

+main.index ul {

   li {

     margin-bottom: .45rem;

   }

 }

 

 

-

-

-

 ol {

   counter-reset: a-counter;

   

@@ -786,7 +784,7 @@ ul.posts {
       font-size: .85rem;

       

       margin-left: 1.8rem;

-      padding: 0 6px 2px;

+      padding: 0 9px 2px;

     }

   }

 }

@@ -910,13 +908,11 @@ video {
 

   

   

-  

-

-

-

-

-

-

+button,

+input[type=color],

+summary {

+  cursor: pointer;

+}

 

 

 

@@ -949,8 +945,6 @@ details.toc {
     

     @include letterpress(var(--lpress));

 

-    cursor: pointer;

-

     transition:

       color $change-transition,

       opacity .2s ease,

@@ -1060,6 +1054,7 @@ article > ul {
 // BUTTONS

 a.btn,

 a.footnote-backref,

+section.search-box button,

 section.social a,

 input[type=submit] {

   background: var(--accent);

@@ -1322,7 +1317,7 @@ html {
 

 

 p.error {

-  color: $error-color;

+  color: var(--err);

 }

 

 {{ if .Site.Params.hasNoscriptNotice }}

@@ -1350,3 +1345,123 @@ p.error {
 {{ else if (resources.Get "scss/custom.scss") }}

   @import 'custom';

 {{ end }}

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+// SEARCH

+section.search-box {

+

+  form {

+    display: flex;

+    flex-wrap: wrap;

+    justify-content: center;

+    align-items: stretch;

+  }

+  

+  label {

+    color: var(--fg);

+    font-family: $heading-font;

+    font-weight: 700;

+    flex-basis: 100%;

+    text-align: left;

+    

+    font-size: .9rem;

+    letter-spacing: .5px;

+    line-height: 2rem;

+    text-transform: uppercase;

+  }

+

+  input[name=q] {

+    background: var(--input-bg);

+    border: 1px solid var(--input-bd);

+    color: var(--input-fg);

+    font-family: $body-font;

+    font-size: .9rem;

+    line-height: 1.5rem;

+    padding: 6px 12px;

+    flex: 1;

+    

+    transition:

+      background-color .2s ease-in-out,

+      border .2s ease-in-out,

+      outline .2s ease-in-out;

+    

+    border-radius: $border-radius 0 0 $border-radius;

+    

+    outline: 2px solid transparent;

+    

+    &:focus {

+      outline-color: var(--accent);

+    }

+  }

+  

+  button {

+    border-radius: 0 $border-radius $border-radius 0;

+    padding: 6px 30px;

+

+    outline: 2px dashed transparent;

+    outline-offset: 2px;

+    

+    &:focus {

+      outline-color: var(--accent);

+    }

+    

+    &:hover {

+      opacity: .75;

+    }

+    

+    svg {

+      @include squared(15px);

+      

+      fill: currentColor;

+      stroke: var(--lpress);

+      stroke-width: 9px;

+    }

+  }

+}

+

+#search-info {

+  margin: 1rem 0 2rem;

+

+  p:first-of-type {

+    font-family: $heading-font;

+    font-size: 1.5rem;

+    font-weight: 700;

+  }

+  

+  + ul {

+    margin: 0 0 6rem;

+  }

+}