use Webpack to manage CSS + add bulma

.gitignore

@@ -3,3 +3,6 @@ dragonfly.log
 .sass-cache/
 config/deploy.yml
 .DS_Store
+node_modules
+public/samples/_production/
+data/production/

app/assets/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

app/assets/javascripts/app.js

@@ -0,0 +1,19 @@
+// === Wagon main javascript file ===
+
+// Tell Webpack to load the style
+import '../stylesheets/app.scss';
+
+// Import the classes required to handle sections
+import SectionsManager from './sections/_manager';
+import * as Sections from './sections';
+
+document.addEventListener('DOMContentLoaded', event => {
+
+  // Load all the sections
+  const sectionsManager = new SectionsManager();
+
+  // Register sections here. DO NOT REMOVE OR UPDATE THIS LINE
+
+  sectionsManager.start();
+
+});

app/assets/javascripts/sections/_manager.js

@@ -0,0 +1,94 @@
+class Manager {
+
+  constructor() {
+    this.sections = {};
+  }
+
+  registerSection(type, actions) {
+    console.log(type, actions);
+    this.sections[type] = actions;
+  }
+
+  start() {
+    this.eachType((type, actions) => {
+      this.queryAll(`.locomotive-section[data-locomotive-section-type="${type}"]`).forEach((section, index) => {
+        this.runAction(actions, 'load', section);
+      });
+    });
+    this.registerEvents();
+
+    window._sectionsManager = this;
+  }
+
+  registerEvents() {
+    const events = {
+      section: ['load', 'unload', 'select', 'deselect', 'reorder'],
+      block: ['select', 'deselect']
+    }
+
+    for (var namespace in events) {
+      events[namespace].forEach(eventType => {
+        const eventName = `locomotive::${namespace}::${eventType}`;
+        const actionName = this.eventTypeToActionName(namespace, eventType);
+
+        document.addEventListener(eventName, event => {
+          this.applyRuleToEvent(actionName, event);
+        });
+      });
+    }
+  }
+
+  applyRuleToEvent(actionName, event) {
+    const { sectionId, blockId } = event.detail;
+    const section   = document.getElementById(`locomotive-section-${sectionId}`);
+    const type      = section.getAttribute('data-locomotive-section-type');
+    const block     = this.queryOne(`[data-locomotive-block="section-${sectionId}-block-${blockId}"]`, section);
+
+    this.runAction(this.sections[type], actionName, section, block)
+  }
+
+  eventTypeToActionName(namespace, eventType) {
+    if (namespace === 'section')
+      return eventType;
+    else
+      return namespace + eventType.charAt(0).toUpperCase() + eventType.slice(1);
+  }
+
+  runAction(actions, actionName, section, block) {
+    const action = actions[actionName];
+
+    if (action !== undefined)
+      action(section, block);
+  }
+
+  eachType(callback) {
+    for (var type in this.sections) {
+      const actions = this.sections[type];
+      callback(type, actions)
+    }
+  }
+
+  queryAll(selector, scope) {
+    scope = scope ? scope : document;
+    return scope.querySelectorAll(selector);
+  }
+
+  queryOne(selector, scope) {
+    scope = scope ? scope : document;
+    return scope.querySelector(selector);
+  }
+
+  testAction(eventType, section, block) {
+    const hasBlock  = block !== undefined && block !== null ;
+    const namespace = hasBlock ? 'block' : 'section';
+    const sectionId = section.getAttribute('id').replace('locomotive-section-', '');
+    const blockId   = hasBlock ? block.getAttribute('data-locomotive-block').replace(`section-${sectionId}-block-`, '') : null;
+    const detail    = { detail: { sectionId, blockId } };
+    const eventName = `locomotive::${namespace}::${eventType}`;
+
+    document.dispatchEvent(new CustomEvent(eventName, detail));
+  }
+
+}
+
+export default Manager;

app/assets/javascripts/sections/index.js

@@ -0,0 +1,5 @@
+// Import all the sections here
+//
+// Example:
+// export { default as MyAwesomeSection } from './my_awesome_section';
+//

app/assets/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')
+  ]
+}

app/assets/stylesheets/app.scss

@@ -0,0 +1,5 @@
+// Wagon main stylesheet file
+
+// Bulma
+@import './bulma_variables';
+@import '~bulma/bulma.sass';

app/assets/stylesheets/bulma_variables.scss

@@ -0,0 +1,15 @@
+$family-sans-serif: "Noto Sans", sans-serif;
+
+// Colors
+$lighter-blue: #bdd1e4;
+$light-blue: #8aacd4;
+$dark-blue: #224261;
+$dark-grey: #636466;
+$light-grey: #a7a9ac;
+$brown-orange: #E3A346;
+
+$primary: $dark-blue;
+$warning: $brown-orange;
+
+// Navbar
+$navbar-height: 7.25rem !default;

app/assets/webpack.common.js

@@ -0,0 +1,57 @@
+const path = require('path');
+const Webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  entry: './app/assets/javascripts/app.js',
+  output: {
+    path:     path.resolve(__dirname, '../../public'),
+    filename: 'javascripts/bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|es6)$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
+      },
+      {
+        test: /\.(woff2?|svg)$/,
+        loader: 'file-loader?name=fonts/[name].[ext]&useRelativePath=false&publicPath=../'
+      },
+      {
+        test: /\.(ttf|eot|otf)$/,
+        loader: 'file-loader?name=fonts/[name].[ext]&useRelativePath=false&publicPath=../'
+      },
+      {
+        test: /\.(gif|png|jpe?g|svg)$/i,
+        use: [
+          {
+            loader: 'file-loader', options: {
+              outputPath: 'images/',
+              name: '[path][name].[ext]'
+            }
+          },
+          { loader: 'image-webpack-loader', options: { bypassOnDebug: true } }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new Webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+    new MiniCssExtractPlugin({ filename: 'stylesheets/bundle.css', allChunks: true })
+  ]
+};

app/assets/webpack.dev.js

@@ -0,0 +1,11 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const LiveReloadPlugin = require('webpack-livereload-plugin');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  plugins: [
+    new LiveReloadPlugin()
+  ]
+});

app/assets/webpack.prod.js

@@ -0,0 +1,12 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.config.js');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = merge(common, {
+  plugins: [
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /\.css$/,
+      cssProcessorOptions: { discardComments: { removeAll: true } }
+    })
+  ]
+});

app/views/pages/index.liquid

@@ -6,10 +6,10 @@ published: true
 handle: home
 slug: index
 ---
-
 {% extends "layouts/base" %}
 
 {% block main %}
+  {% comment %}
   {% block header %}
   <header style="background: url({% editable_file 'home-header-image', resize: '1900x900#' %}/samples/pages/header-home.jpg{% endeditable_file %}) center center no-repeat;">
     <div class="grid grid-centered">
@@ -233,8 +233,12 @@ slug: index
     {% endblock %}
   </main>
 
-{% endblock %}
+  {% endcomment %}
 
-{% block page_scripts %}
-  {{ "vendor/carousel.js" | javascript_tag }}
 {% endblock %}
+
+{% comment %}
+  {% block page_scripts %}
+    {{ "vendor/carousel.js" | javascript_tag }}
+  {% endblock %}
+{% endcomment %}

app/views/pages/layouts/base.liquid

@@ -36,7 +36,7 @@ is_layout: false
   <link href="https://fonts.googleapis.com/css?family=Muli:400,300|Noto+Sans:400,700" rel="stylesheet" type="text/css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 
-  {{ 'application.css' | stylesheet_tag }}
+  {{ 'bundle.css' | stylesheet_tag }}
 
   {% google_analytics 'UA-17355243-1' %}
 </head>
@@ -47,8 +47,10 @@ is_layout: false
 
   {% block 'main' %}{% endblock %}
 
+  {% comment %}
   {% include footer %}
 
   {% include javascripts %}
+  {% endcomment %}
 </body>
 </html>

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "WagonAssets",
+  "version": "1.0.0",
+  "description": "Assets source for the Wagon site",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack --config app/assets/webpack.dev.js --progress --colors --watch",
+    "build:dev": "webpack --config app/assets/webpack.dev.js --progress",
+    "build:prod": "NODE_ENV=production webpack --config app/assets/webpack.prod.js --progress --mode production",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Wagon",
+  "license": "ISC",
+  "dependencies": {
+    "bulma": "^0.7.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/preset-env": "^7.4.3",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "image-webpack-loader": "^4.3.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "postcss-loader": "^2.1.5",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.1",
+    "webpack-livereload-plugin": "^2.2.0",
+    "webpack-merge": "^4.1.4"
+  }
+}