assets/ -> resources/assets/

resources/assets/scripts/customizer.js

@@ -0,0 +1,5 @@
+import $ from 'jquery';
+
+wp.customize('blogname', (value) => {
+  value.bind(to => $('.brand').text(to));
+});

resources/assets/scripts/main.js

@@ -0,0 +1,25 @@
+/** import external dependencies */
+import 'jquery';
+import 'bootstrap';
+
+/** import local dependencies */
+import Router from './util/Router';
+import common from './routes/common';
+import home from './routes/home';
+import aboutUs from './routes/about';
+
+/**
+ * Populate Router instance with DOM routes
+ * @type {Router} routes - An instance of our router
+ */
+const routes = new Router({
+  /** All pages */
+  common,
+  /** Home page */
+  home,
+  /** About Us page, note the change from about-us to aboutUs. */
+  aboutUs,
+});
+
+/** Load Events */
+jQuery(document).ready(() => routes.loadEvents());

resources/assets/scripts/routes/about.js

@@ -0,0 +1,5 @@
+export default {
+  init() {
+    // JavaScript to be fired on the about us page
+  },
+};

resources/assets/scripts/routes/common.js

@@ -0,0 +1,8 @@
+export default {
+  init() {
+    // JavaScript to be fired on all pages
+  },
+  finalize() {
+    // JavaScript to be fired on all pages, after page specific JS is fired
+  },
+};

resources/assets/scripts/routes/home.js

@@ -0,0 +1,8 @@
+export default {
+  init() {
+    // JavaScript to be fired on the home page
+  },
+  finalize() {
+    // JavaScript to be fired on the home page, after the init JS
+  },
+};

resources/assets/scripts/util/Router.js

@@ -0,0 +1,43 @@
+/* ========================================================================
+ * DOM-based Routing
+ * Based on http://goo.gl/EUTi53 by Paul Irish
+ *
+ * Only fires on body classes that match. If a body class contains a dash,
+ * replace the dash with an underscore when adding it to the object below.
+ * ======================================================================== */
+
+import camelCase from './camelCase';
+
+// The routing fires all common scripts, followed by the page specific scripts.
+// Add additional events for more control over timing e.g. a finalize event
+export default class Router {
+  constructor(routes) {
+    this.routes = routes;
+  }
+
+  fire(route, fn = 'init', args) {
+    const fire = route !== '' && this.routes[route] && typeof this.routes[route][fn] === 'function';
+    if (fire) {
+      this.routes[route][fn](args);
+    }
+  }
+
+  loadEvents() {
+    // Fire common init JS
+    this.fire('common');
+
+    // Fire page-specific init JS, and then finalize JS
+    document.body.className
+      .toLowerCase()
+      .replace(/-/g, '_')
+      .split(/\s+/)
+      .map(camelCase)
+      .forEach((className) => {
+        this.fire(className);
+        this.fire(className, 'finalize');
+      });
+
+    // Fire common finalize JS
+    this.fire('common', 'finalize');
+  }
+}

resources/assets/scripts/util/camelCase.js

@@ -0,0 +1,5 @@
+// the most terrible camelizer on the internet, guaranteed!
+export default str => `${str.charAt(0).toLowerCase()}${str.replace(/[\W_]/g, '|').split('|')
+  .map(part => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+  .join('')
+  .slice(1)}`;