Add pjax for faster page loads

README.md

@@ -48,4 +48,4 @@ If an item is overwritten in a new release, the attributes from the new item are
 -  [ ] Implement search?
 -  [ ] Radar View?
 -  [ ] Make mobile friendly
--  [ ] Add pjax
+-  [x] Add pjax

js/filter.js

@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import applyPjax from './pjax';
+
 
 const initFilter = element => {
   const index = JSON.parse(element.getAttribute('data-index'));
@@ -24,6 +26,12 @@ const initFilter = element => {
         return visibleItems.length > 0;
       },
     },
+    created() {
+      applyPjax();
+    },
+    updated() {
+      applyPjax();
+    },
   });
 };
 

js/pjax.js

@@ -0,0 +1,10 @@
+import Pjax from 'pjax';
+
+const applyPjax = () => {
+  new Pjax({
+    elements: '.js--body a',
+    selectors: ['title', '.js--body'],
+  });
+};
+
+export default applyPjax;

js/radar.js

@@ -1,8 +1,16 @@
 import filter from './filter';
+import applyPjax from './pjax';
 
 const enhanceComponent = (selector, enhancer) => {
   const $filter = [].slice.call(document.querySelectorAll(selector));
   $filter.map(enhancer);
 }
 
+const enhanceComponents = () => {
   enhanceComponent('.js--filter', filter);
+}
+
+applyPjax();
+
+enhanceComponents();
+document.addEventListener("pjax:success", enhanceComponents);

package.json

@@ -27,6 +27,7 @@
     "fs-extra": "2.0.0",
     "live-server": "1.2.0",
     "marked": "0.3.6",
+    "pjax": "0.2.4",
     "postcss-cli": "2.6.0",
     "postcss-css-variables": "0.6.0",
     "postcss-easy-import": "2.0.0",

templates/layout.pug

@@ -3,7 +3,7 @@ html
   head
     title #{title} - AOE Tech Radar
     link(rel='stylesheet', href='/styles.css')
-  body
+  body.js--body
     block body
     block scripts
       script(src='/bundle.js')