some cleanups and touches to the readmes

README.md

@@ -15,6 +15,16 @@ yarn run blendid
 
 This will create default src and config files in your directory and start compiling and live-updating files! Try editing them and watch your browser auto-update!
 
+**If you would like to take advantage of HTTP/2 multiplexing**
+After running line 3 ( `yarn run blendid -- init` ) run:
+
+```bash
+yarn run blendid -- http2-upgrade
+```
+
+Note that you must have your server set to HTTP/2 otherwise you will be sending unnecessary requests to your HTTP/1.1 server, slowing it down.
+
+For more information, see the [HTTP/2 readme](extras/http2/stylesheets/modules/README.md) for recommended architecture, read [this blog post](https://www.viget.com/articles/getting-started-with-http-2-part-1) on the benefits of HTTP/2, and [this blog post](https://www.viget.com/articles/managing-css-js-http-2) on how easy and straightforward a project is to manage using HTTP/2 methods.
 
 **Using Craft?**
 Replace line 3 above with:

extras/http2/src/html/example-component/index.html

@@ -0,0 +1,8 @@
+{% extends 'layouts/application' %}
+{{ macros.css('example-component') }}
+
+<div class="example-component">
+  <p>{{ text }}</p>
+  <p><strong>{{ caveat }}</strong></p>
+  <p><a href="#TODO">{{ link }}</a></p>
+</div>

extras/http2/src/html/index.html

@@ -9,11 +9,5 @@
 {% block content %}
   <h1 data-module="example">{{ message }}</h1>
 
-
-  {{ macros.css('example-module') }}
-  <div class="example-module">
-    <p>{{ text }}</p>
-    <p><strong>{{ caveat }}</strong></p>
-    <p><a href="#TODO">{{ link }}</a></p>
-  </div>
+  {% include 'example-component/index.html' %}
 {% endblock %}

extras/http2/src/html/macros/helpers.html

@@ -7,5 +7,5 @@
 
 
 {%- macro css(stylesheet) -%}
-	<link rel="stylesheet" href="{{ 'stylesheets/modules/' ~ stylesheet ~ '/index.css' }}">
+	<link rel="stylesheet" href="{{ 'stylesheets/components/' ~ stylesheet ~ '/index.css' }}">
 {%- endmacro -%}

extras/http2/src/javascripts/app.js

@@ -0,0 +1,5 @@
+// es6-promise/auto needed to fulfil promises for the `import()` statement in modules/index.js
+require('es6-promise/auto')
+import './modules'
+
+console.log(`app.js has loaded!`)

extras/http2/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')
+  }
+}

extras/http2/src/javascripts/modules/index.js

@@ -0,0 +1,33 @@
+/*
+  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')
+
+	import(`./${name}`).then(Module => {
+		new Module.default(el)
+	});
+}
+
+/*
+  Usage:
+  ======
+
+  html
+  ----
+  <button data-module="disappear">disappear!</button>
+
+  js
+  --
+  // modules/disappear.js
+  export default class Disappear {
+    constructor(el) {
+      el.style.display = 'none'
+    }
+  }
+*/

extras/http2/src/stylesheets/components/README.md

@@ -0,0 +1,27 @@
+# HTTP2 component styles
+
+Each HTML component you create should have a corresponding CSS directory within components.
+
+Every component should import the config files (variables, mixins and functions) so that anything defined there can be used to calculate values within the component.
+
+## Organizing your stylesheets directory
+Standard component directory structure should include an index file that imports the config files as well as any files in the directory, usually just one that is either named `_base.scss` or `_[component-name].scss` for easier fuzzy finder location.
+
+For example:
+
+```
+/components
+  |
+  /example-component
+  | |
+  | index.scss // imports config and any underscored files in this directory
+  | _example-component.scss // has all the styles for this component
+  |
+  /another-component
+    |
+    index.scss
+    // etc
+```
+
+## Using component styles in your HTML templates
+Using the `css()` macro defined in `src/html/macros/helpers.html` will allow you to easily pull in the styles defined for that component inline. To use simply call `{{ macros.css('example-component') }}` before writing any HTML in the template and it will find pull in the index file of that directory. 

gulpfile.js/task-config.js

@@ -3,7 +3,6 @@ module.exports = {
   images      : true,
   fonts       : true,
   static      : true,
-  http2       : false,
   svgSprite   : true,
   ghPages     : true,
   stylesheets : true,

gulpfile.js/tasks/init-http2.js → gulpfile.js/tasks/http2-upgrade.js

@@ -4,7 +4,7 @@ const mergeStream = require('merge-stream')
 const path = require('path')
 const del  = require('del')
 
-gulp.task('init-http2', function() {
+gulp.task('http2-upgrade', function() {
   del(
     [path.resolve(process.env.PWD, PATH_CONFIG.src, PATH_CONFIG.stylesheets.src)],
     { force: true }
@@ -18,6 +18,7 @@ gulp.task('init-http2', function() {
   const srcStream = gulp.src(
     [
       'src/stylesheets',
+      'src/javascripts',
       'src/html'
     ]
   ).pipe(gulp.dest(path.join(process.env.PWD, PATH_CONFIG.src)))

package.json

@@ -9,15 +9,17 @@
   },
   "main": "gulpfile.js/index.js",
   "homepage": "https://github.com/vigetlabs/blendid",
-  "repository": "git://github.com/vigetlabs/blendid.git",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/vigetlabs/blendid.git"
+  },
   "bin": {
     "blendid": "bin/blendid.js"
   },
   "scripts": {
     "start": "gulp",
     "gulp": "gulp",
     "build": "gulp build",
-    "http2": "gulp http2",
     "gh-pages": "gulp gh-pages",
     "dev:test": "mocha ./gulpfile.js/**/*.test.js"
   },
@@ -29,6 +31,7 @@
     "blendid": "^4.2.0",
     "browser-sync": "^2.18.8",
     "del": "2.2.2",
+    "es6-promise": "^4.1.1",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "3.1.1",
     "gulp-changed": "^2.0.0",