assets/ -> resources/assets/

resources/assets/build/.eslintrc

@@ -0,0 +1,14 @@
+{
+  "root": false,
+  "rules": {
+    "import/no-extraneous-dependencies": 0,
+    "prefer-rest-params": 0,
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "ignore"
+    }]
+  }
+}

resources/assets/build/config.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const { argv } = require('yargs');
+const merge = require('webpack-merge');
+
+const userConfig = require('../config');
+
+const isProduction = !!((argv.env && argv.env.production) || argv.p);
+const rootPath = (userConfig.paths && userConfig.paths.root)
+  ? userConfig.paths.root
+  : process.cwd();
+
+const config = merge({
+  copy: 'images/**/*',
+  proxyUrl: 'http://localhost:3000',
+  cacheBusting: '[name]_[hash]',
+  paths: {
+    root: rootPath,
+    assets: path.join(rootPath, 'resources/assets'),
+    dist: path.join(rootPath, 'dist'),
+  },
+  enabled: {
+    sourceMaps: !isProduction,
+    optimize: isProduction,
+    cacheBusting: isProduction,
+    watcher: !!argv.watch,
+  },
+  watch: [],
+  browsers: [],
+}, userConfig);
+
+module.exports = merge(config, {
+  env: Object.assign({ production: isProduction, development: !isProduction }, argv.env),
+  publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
+  manifest: {},
+});
+
+/**
+ * If your publicPath differs between environments, but you know it at compile time,
+ * then set SAGE_DIST_PATH as an environment variable before compiling.
+ * Example:
+ *   SAGE_DIST_PATH=/wp-content/themes/sage/dist yarn build:production
+ */
+if (process.env.SAGE_DIST_PATH) {
+  module.exports.publicPath = process.env.SAGE_DIST_PATH;
+}
+
+/**
+ * If you don't know your publicPath at compile time, then uncomment the lines
+ * below and use WordPress's wp_localize_script() to set SAGE_DIST_PATH global.
+ * Example:
+ *   wp_localize_script('sage/main.js', 'SAGE_DIST_PATH', get_theme_file_uri('dist/'))
+ */
+// Object.keys(module.exports.entry).forEach(id =>
+//   module.exports.entry[id].unshift(path.join(__dirname, 'public-path.js')));

resources/assets/build/public-path.js

@@ -0,0 +1,7 @@
+/* eslint-env browser */
+/* globals SAGE_DIST_PATH */
+
+/** Dynamically set absolute public path from current protocol and host */
+if (SAGE_DIST_PATH) {
+  __webpack_public_path__ = SAGE_DIST_PATH; // eslint-disable-line no-undef, camelcase
+}

resources/assets/build/util/addHotMiddleware.js

@@ -0,0 +1,16 @@
+/**
+ * Loop through webpack entry
+ * and add the hot middleware
+ * @param  {Object} entry webpack entry
+ * @return {Object} entry with hot middleware
+ */
+module.exports = (entry) => {
+  const results = {};
+  const hotMiddlewareScript = 'webpack-hot-middleware/client?timeout=20000&reload=true';
+
+  Object.keys(entry).forEach((name) => {
+    results[name] = Array.isArray(entry[name]) ? entry[name].slice(0) : [entry[name]];
+    results[name].unshift(hotMiddlewareScript);
+  });
+  return results;
+};

resources/assets/build/util/assetManifestsFormatter.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = (key, value) => {
+  if (typeof value === 'string') {
+    return value;
+  }
+  const manifest = value;
+  /**
+   * Hack to prepend scripts/ or styles/ to manifest keys
+   *
+   * This might need to be reworked at some point.
+   *
+   * Before:
+   *   {
+   *     "main.js": "scripts/main_abcdef.js"
+   *     "main.css": "styles/main_abcdef.css"
+   *   }
+   * After:
+   *   {
+   *     "scripts/main.js": "scripts/main_abcdef.js"
+   *     "styles/main.css": "styles/main_abcdef.css"
+   *   }
+   */
+  Object.keys(manifest).forEach((src) => {
+    const sourcePath = path.basename(path.dirname(src));
+    const targetPath = path.basename(path.dirname(manifest[src]));
+    if (sourcePath === targetPath) {
+      return;
+    }
+    manifest[`${targetPath}/${src}`] = manifest[src];
+    delete manifest[src];
+  });
+  return manifest;
+};

resources/assets/build/webpack.config.js

@@ -0,0 +1,186 @@
+'use strict'; // eslint-disable-line
+
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const autoprefixer = require('autoprefixer');
+const CleanPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
+const config = require('./config');
+
+const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
+const sourceMapQueryStr = (config.enabled.sourceMaps) ? '+sourceMap' : '-sourceMap';
+
+let webpackConfig = {
+  context: config.paths.assets,
+  entry: config.entry,
+  devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
+  output: {
+    path: config.paths.dist,
+    publicPath: config.publicPath,
+    filename: `scripts/${assetsFilenames}.js`,
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js?$/,
+        include: config.paths.assets,
+        use: 'eslint',
+      },
+      {
+        test: /\.js$/,
+        exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
+        loader: 'buble',
+        options: { objectAssign: 'Object.assign' },
+      },
+      {
+        test: /\.css$/,
+        include: config.paths.assets,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style',
+          publicPath: '../',
+          use: [
+            `css?${sourceMapQueryStr}`,
+            'postcss',
+          ],
+        }),
+      },
+      {
+        test: /\.scss$/,
+        include: config.paths.assets,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style',
+          publicPath: '../',
+          use: [
+            `css?${sourceMapQueryStr}`,
+            'postcss',
+            `resolve-url?${sourceMapQueryStr}`,
+            `sass?${sourceMapQueryStr}`,
+          ],
+        }),
+      },
+      {
+        test: /\.(ttf|eot|png|jpe?g|gif|svg|ico)$/,
+        include: config.paths.assets,
+        loader: 'file',
+        options: {
+          name: `[path]${assetsFilenames}.[ext]`,
+        },
+      },
+      {
+        test: /\.woff2?$/,
+        include: config.paths.assets,
+        loader: 'url',
+        options: {
+          limit: 10000,
+          mimetype: 'application/font-woff',
+          name: `[path]${assetsFilenames}.[ext]`,
+        },
+      },
+      {
+        test: /\.(ttf|eot|woff2?|png|jpe?g|gif|svg)$/,
+        include: /node_modules|bower_components/,
+        loader: 'file',
+        options: {
+          name: `vendor/${config.cacheBusting}.[ext]`,
+        },
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      config.paths.assets,
+      'node_modules',
+      'bower_components',
+    ],
+    enforceExtension: false,
+  },
+  resolveLoader: {
+    moduleExtensions: ['-loader'],
+  },
+  externals: {
+    jquery: 'jQuery',
+  },
+  plugins: [
+    new CleanPlugin([config.paths.dist], {
+      root: config.paths.root,
+      verbose: false,
+    }),
+    /**
+     * It would be nice to switch to copy-webpack-plugin, but
+     * unfortunately it doesn't provide a reliable way of
+     * tracking the before/after file names
+     */
+    new CopyGlobsPlugin({
+      pattern: config.copy,
+      output: `[path]${assetsFilenames}.[ext]`,
+      manifest: config.manifest,
+    }),
+    new ExtractTextPlugin({
+      filename: `styles/${assetsFilenames}.css`,
+      allChunks: true,
+      disable: (config.enabled.watcher),
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+      Tether: 'tether',
+      'window.Tether': 'tether',
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: config.enabled.optimize,
+      debug: config.enabled.watcher,
+      stats: { colors: true },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      test: /\.s?css$/,
+      options: {
+        output: { path: config.paths.dist },
+        context: config.paths.assets,
+        postcss: [
+          autoprefixer({ browsers: config.browsers }),
+        ],
+      },
+    }),
+    new webpack.LoaderOptionsPlugin({
+      test: /\.js$/,
+      options: {
+        eslint: { failOnWarning: false, failOnError: true },
+      },
+    }),
+  ],
+};
+
+/* eslint-disable global-require */ /** Let's only load dependencies as needed */
+
+if (config.enabled.optimize) {
+  webpackConfig = merge(webpackConfig, require('./webpack.config.optimize'));
+}
+
+if (config.env.production) {
+  webpackConfig.plugins.push(new webpack.NoEmitOnErrorsPlugin());
+}
+
+if (config.enabled.cacheBusting) {
+  const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+  webpackConfig.plugins.push(
+    new WebpackAssetsManifest({
+      output: 'assets.json',
+      space: 2,
+      writeToDisk: false,
+      assets: config.manifest,
+      replacer: require('./util/assetManifestsFormatter'),
+    })
+  );
+}
+
+if (config.enabled.watcher) {
+  webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
+  webpackConfig = merge(webpackConfig, require('./webpack.config.watch'));
+}
+
+module.exports = webpackConfig;

resources/assets/build/webpack.config.optimize.js

@@ -0,0 +1,29 @@
+'use strict'; // eslint-disable-line
+
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const { default: ImageminPlugin } = require('imagemin-webpack-plugin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+const cssnano = require('cssnano');
+
+const config = require('./config');
+
+module.exports = {
+  plugins: [
+    new OptimizeCssAssetsPlugin({
+      cssProcessor: cssnano,
+      cssProcessorOptions: {
+        discardComments: { removeAll: true },
+        autoprefixer: { browsers: config.browsers },
+      },
+      canPrint: true,
+    }),
+    new ImageminPlugin({
+      optipng: { optimizationLevel: 7 },
+      gifsicle: { optimizationLevel: 3 },
+      pngquant: { quality: '65-90', speed: 4 },
+      svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false },
+      plugins: [imageminMozjpeg({ quality: 75 })],
+      disable: (config.enabled.watcher),
+    }),
+  ],
+};

resources/assets/build/webpack.config.watch.js

@@ -0,0 +1,34 @@
+const url = require('url');
+const webpack = require('webpack');
+const BrowserSyncPlugin = require('browsersync-webpack-plugin');
+
+const config = require('./config');
+
+const target = process.env.DEVURL || config.devUrl;
+
+/**
+ * We do this to enable injection over SSL.
+ */
+if (url.parse(target).protocol === 'https:') {
+  process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
+}
+
+module.exports = {
+  output: {
+    pathinfo: true,
+    publicPath: config.proxyUrl + config.publicPath,
+  },
+  devtool: '#cheap-module-source-map',
+  stats: false,
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new BrowserSyncPlugin({
+      target,
+      proxyUrl: config.proxyUrl,
+      watch: config.watch,
+      delay: 500,
+    }),
+  ],
+};

resources/assets/config.json

@@ -0,0 +1,23 @@
+{
+  "entry": {
+    "main": [
+      "./scripts/main.js",
+      "./styles/main.scss"
+    ],
+    "customizer": [
+      "./scripts/customizer.js"
+    ]
+  },
+  "publicPath": "/app/themes/sage",
+  "devUrl": "http://example.dev",
+  "proxyUrl": "http://localhost:3000",
+  "cacheBusting": "[name]_[hash:8]",
+  "watch": [
+    "{src,resources/views}/**/*.php"
+  ],
+  "browsers": [
+    "last 2 versions",
+    "android 4",
+    "opera 12"
+  ]
+}

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)}`;

resources/assets/styles/common/_variables.scss

@@ -0,0 +1,2 @@
+// Colors
+$brand-primary:         #27ae60;

resources/assets/styles/components/_comments.scss

@@ -0,0 +1,19 @@
+.comment-list {
+  @extend .list-unstyled;
+}
+.comment-list ol {
+  list-style: none;
+}
+.comment-form p {
+  @extend .form-group;
+}
+.comment-form input[type="text"],
+.comment-form input[type="email"],
+.comment-form input[type="url"],
+.comment-form textarea {
+  @extend .form-control;
+}
+.comment-form input[type="submit"] {
+  @extend .btn;
+  @extend .btn-secondary;
+}

resources/assets/styles/components/_forms.scss

@@ -0,0 +1,15 @@
+// Search form
+.search-form {
+  @extend .form-inline;
+}
+.search-form label {
+  font-weight: normal;
+  @extend .form-group;
+}
+.search-form .search-field {
+  @extend .form-control;
+}
+.search-form .search-submit {
+  @extend .btn;
+  @extend .btn-secondary;
+}

resources/assets/styles/components/_wp-classes.scss

@@ -0,0 +1,49 @@
+// WordPress Generated Classes
+// http://codex.wordpress.org/CSS#WordPress_Generated_Classes
+
+// Media alignment
+.alignnone {
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+  height: auto;
+}
+.aligncenter {
+  display: block;
+  margin: ($spacer / 2) auto;
+  height: auto;
+}
+.alignleft,
+.alignright {
+  margin-bottom: ($spacer / 2);
+  height: auto;
+}
+@include media-breakpoint-up(sm) {
+  // Only float if not on an extra small device
+  .alignleft {
+    float: left;
+    margin-right: ($spacer / 2);
+  }
+  .alignright {
+    float: right;
+    margin-left: ($spacer / 2);
+  }
+}
+
+// Captions
+.wp-caption {
+  @extend .figure;
+}
+.wp-caption img {
+  @extend .figure-img;
+  @extend .img-fluid;
+}
+.wp-caption-text {
+  @extend .figure-caption;
+}
+
+// Text meant only for screen readers
+.screen-reader-text {
+  @extend .sr-only;
+  @extend .sr-only-focusable;
+}

resources/assets/styles/layouts/_header.scss

@@ -0,0 +1,6 @@
+.banner .nav li {
+  @extend .nav-item;
+}
+.banner .nav a {
+  @extend .nav-link;
+}

resources/assets/styles/layouts/_tinymce.scss

@@ -0,0 +1,3 @@
+body#tinymce {
+  margin: 12px !important;
+}

resources/assets/styles/main.scss

@@ -0,0 +1,16 @@
+@import "common/variables";
+
+// Import npm dependencies
+@import "~bootstrap/scss/bootstrap";
+
+@import "common/global";
+@import "components/buttons";
+@import "components/comments";
+@import "components/forms";
+@import "components/wp-classes";
+@import "layouts/header";
+@import "layouts/sidebar";
+@import "layouts/footer";
+@import "layouts/pages";
+@import "layouts/posts";
+@import "layouts/tinymce";