Add craft templates, asset rev plugin, and node dependencies for fron…

…t-end builds

.nvmrc

@@ -0,0 +1 @@
+6.11.1

composer.json

@@ -20,6 +20,7 @@
   "require": {
     "craftcms/cms": "^3.0.0-RC1",
     "vlucas/phpdotenv": "^2.4.0",
+    "clubstudioltd/craft-asset-rev": "^v6.0.0",
     "craftcms/redactor": "^1.0.0",
     "mikestecker/craft-videoembedder": "^v1.0.0",
     "pennebaker/craft-architect": "^2.2.0",

config/assetrev.php

@@ -0,0 +1,9 @@
+<?php
+
+return [
+
+    'manifestPath' => 'web/assets/rev-manifest.json',
+    'assetsBasePath' => 'web/assets',
+    'assetUrlPrefix' => '/assets/',
+
+];

config/path-config.json

@@ -0,0 +1,29 @@
+{
+  "src": "./src",
+  "dest": "./web/assets",
+
+  "javascripts": {
+    "src": "javascripts",
+    "dest": "javascripts"
+  },
+
+  "stylesheets": {
+    "src": "stylesheets",
+    "dest": "stylesheets"
+  },
+
+  "images": {
+    "src": "images",
+    "dest": "images"
+  },
+
+  "fonts": {
+    "src": "fonts",
+    "dest": "fonts"
+  },
+
+  "icons": {
+    "src": "icons",
+    "dest": "images"
+  }
+}

config/task-config.js

@@ -0,0 +1,41 @@
+var globImporter = require('node-sass-glob-importer')
+
+module.exports = {
+  images      : true,
+  fonts       : true,
+  svgSprite   : true,
+
+  stylesheets : {
+    cssnano: {
+      safe: true
+    },
+    sass: {
+      importer: globImporter()
+    }
+  },
+
+  javascripts: {
+    entry: {
+      // files paths are relative to
+      // javascripts.dest in path-config.json
+      app: ["./app.js"]
+    },
+    // This tells webpack middleware where to
+    // serve js files from in development:
+    publicPath: "/assets/javascripts"
+  },
+
+  browserSync: {
+    // Update this to match your development URL
+    proxy: 'craft-ssk.test',
+    files: ['templates/**/*']
+  },
+
+  production: {
+    rev: true
+  },
+
+  ghPages     : false,
+  html        : false,
+  static      : false,
+}

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "craft",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "yarn run blendid",
+    "build": "yarn run blendid -- build"
+  },
+  "dependencies": {
+    "blendid": "4.4.3",
+    "node-sass-glob-importer": "5.1.1"
+  }
+}

src/javascripts/app.js

@@ -0,0 +1,3 @@
+import './modules'
+
+console.log(`app.js has loaded!`)

src/javascripts/modules/example.js

@@ -0,0 +1,6 @@
+export default class Example {
+  constructor(el) {
+    this.el = el
+    console.log(el.textContent, '- From the example module')
+  }
+}

src/javascripts/modules/index.js

@@ -0,0 +1,31 @@
+/*
+  Automatically instantiates modules based on data-attributes
+  specifying module file-names.
+*/
+
+const moduleElements = document.querySelectorAll('[data-module]')
+
+for (var i = 0; i < moduleElements.length; i++) {
+  const el = moduleElements[i]
+  const name = el.getAttribute('data-module')
+  const Module = require(`./${name}`).default
+  new Module(el)
+}
+
+/*
+  Usage:
+  ======
+
+  html
+  ----
+  <button data-module="disappear">disappear!</button>
+
+  js
+  --
+  // modules/disappear.js
+  export default class Disappear {
+    constructor(el) {
+      el.style.display = 'none'
+    }
+  }
+*/

src/stylesheets/blocks/quote.scss

@@ -0,0 +1,35 @@
+.quote-block {
+  clear: both;
+
+  blockquote {
+    &:not([class*="float-"]) {
+      margin: 0;
+      text-align: center;
+    }
+
+    &[class*="float-"] {
+      max-width: 400px;
+    }
+
+    p {
+      font-size: 24px;
+      font-weight: bold;
+
+      &:first-child::before {
+        content: '“'
+      }
+
+      &:last-of-type::after {
+        content: '”'
+      }
+    }
+  }
+
+  cite {
+    color: #777;
+    display: block;
+    font-size: 16px;
+    font-style: normal;
+    margin: 0.5em 0 0;
+  }
+}

src/stylesheets/blocks/two-column-image-caption.scss

@@ -0,0 +1,20 @@
+.two-column-image-caption-block {
+  clear: both;
+
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  figure {
+    margin: 0;
+    width: calc(50% - 20px);
+  }
+
+  figcaption {
+    color: #777;
+    font-size: 16px;
+    font-style: normal;
+    margin: 0.5em 0 0;
+  }
+}

src/stylesheets/blocks/two-column-text.scss

@@ -0,0 +1,19 @@
+.two-column-text-block {
+  clear: both;
+
+  .wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .text {
+    width: calc(50% - 20px);
+  }
+
+  figcaption {
+    color: #777;
+    font-size: 16px;
+    font-style: normal;
+    margin: 0.5em 0 0;
+  }
+}

src/stylesheets/blocks/video.scss

@@ -0,0 +1,22 @@
+.video-block {
+  clear: both;
+}
+
+.video-block__inner {
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    padding-top: (9/16) * 100%;
+    width: 100%;
+  }
+
+  iframe {
+    border: 0;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

src/stylesheets/starter.scss

@@ -0,0 +1,67 @@
+body {
+  color: #444;
+  font-family: sans-serif;
+  font-size: 18px;
+}
+
+[tabindex="-1"]:focus {
+  outline: none;
+}
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+*:first-child {
+  margin-top: 0 !important;
+}
+
+*:last-child {
+  margin-bottom: 0 !important;
+}
+
+.wrapper {
+  margin: auto;
+  max-width: 800px;
+
+  &.-wide {
+    max-width: 1000px;
+  }
+
+  &.-extrawide {
+    max-width: 1200px;
+  }
+}
+
+.float-left {
+  float: left;
+  margin: 0 40px 40px 0;
+}
+
+.float-right {
+  float: right;
+  margin: 0 0 40px 40px;
+}
+
+.spacing-vertical-small {
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+
+.spacing-vertical-medium {
+  margin-bottom: 60px;
+  margin-top: 60px;
+}
+
+.spacing-vertical-large {
+  margin-bottom: 100px;
+  margin-top: 100px;
+}
+
+.text {
+  p {
+    line-height: (28/18);
+    margin: 40px 0;
+  }
+}

templates/_blocks/image.twig

@@ -0,0 +1,34 @@
+{#
+  Parameters
+  - image   | asset
+  - display | position select | left, center, right
+ #}
+
+{% set image = block.image[0] ?? null %}
+
+{% switch block.display %}
+  {% case 'left' %}
+    {% set spacingClass = 'spacing-vertical-medium' %}
+    {% set wrapperClass = '-extrawide' %}
+    {% set displayClass = 'float-left' %}
+  {% case 'right' %}
+    {% set spacingClass = 'spacing-vertical-medium' %}
+    {% set wrapperClass = '-extrawide' %}
+    {% set displayClass = 'float-right' %}
+  {% default %}
+    {% set spacingClass = 'spacing-vertical-large' %}
+    {% set wrapperClass = '-wide' %}
+    {% set displayClass = '' %}
+{% endswitch %}
+
+{% set transformOptions = {
+  width: block.display != 'center' ? 560 : 1000
+} %}
+
+{% if image %}
+  <div class="image-block {{ spacingClass }}">
+    <div class="wrapper {{ wrapperClass }}">
+      <img src="{{ image.url(transformOptions) }}" alt="" class="{{ displayClass }}">
+    </div>
+  </div>
+{% endif %}

templates/_blocks/quote.twig

@@ -0,0 +1,40 @@
+{#
+  Parameters
+  - quote       | rich text
+  - attribution | plain text
+  - display     | position select | left, center, right
+ #}
+
+{%- import '_macros' as macros -%}
+{{ macros.css('blocks/quote') }}
+
+{% set displayClass = block.display != 'center' ? 'float-' ~ block.display %}
+
+{% switch block.display %}
+  {% case 'left' %}
+    {% set spacingClass = 'spacing-vertical-small' %}
+    {% set wrapperClass = '-extrawide' %}
+    {% set displayClass = 'float-left' %}
+  {% case 'right' %}
+    {% set spacingClass = 'spacing-vertical-small' %}
+    {% set wrapperClass = '-extrawide' %}
+    {% set displayClass = 'float-right' %}
+  {% default %}
+    {% set spacingClass = 'spacing-vertical-medium' %}
+    {% set wrapperClass = '' %}
+    {% set displayClass = '' %}
+{% endswitch %}
+
+<div class="quote-block {{ spacingClass }}">
+  <div class="wrapper {{ wrapperClass }}">
+    <blockquote class="{{ displayClass }}">
+      {{ block.quote | raw }}
+
+      {% if block.attribution %}
+        <cite>
+          {{ block.attribution }}
+        </cite>
+      {% endif %}
+    </blockquote>
+  </div>
+</div>