Shuffle things around a bit

Should improve page load of site and upkeep of the build

Author: hughsk

Makefile

@@ -0,0 +1,37 @@
+PATH := $(PWD)/node_modules/.bin:$(PATH)
+
+.PHONY: bundle clean relink disc
+
+bundle: build/bundle.min.js build/splash.min.js
+
+clean:
+	rm -rf build/*.js build/*.json data/*.md
+
+disc:
+	browserify src/index.js src/splash.js --full-paths | uglifyjs -c | discify --open
+
+start: relink build/examples.json
+	wzrd src/index.js:build/bundle.min.js \
+	     src/splash.js:build/splash.min.js
+
+relink:
+	district stackgl splash-grid
+
+postinstall: relink
+	scoped-bulk stackgl npm install
+	npm dedupe
+
+build/:
+	mkdir build
+
+build/bundle.min.js: build/ build/examples.json
+	browserify src/index.js | uglifyjs -c > build/bundle.min.js
+
+build/splash.min.js: build/ build/examples.json
+	browserify src/splash.js | uglifyjs -c > build/splash.min.js
+
+build/examples.json: build/ data/examples.md
+	node data/regenerate
+
+data/examples.md: build/
+	node data/sync

build/bundle.min.js

@@ -76,7 +76,6 @@ <h2>community</h2>
       <canvas></canvas>
     </section>
   </div>
-  <script src="//cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
   <script charset="utf-8">
     ;(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -86,6 +85,8 @@ <h2>community</h2>
     ga('create', 'UA-54792490-1', 'auto');
     ga('send', 'pageview');
   </script>
-  <script charset="utf-8" src="bundle.js"></script>
+  <script charset="utf-8" src="/build/bundle.min.js" defer="defer" async="async"></script>
+  <script charset="utf-8" src="/build/splash.min.js" defer="defer" async="async"></script>
+  <script src="//cdn.webglstats.com/stat.js" defer="defer" async="async"></script>
 </body>
 </html>

build/splash.min.js

@@ -29,13 +29,10 @@
     ]
   },
   "scripts": {
-    "prestart": "npm run links && node data/regenerate",
-    "start": "wzrd index.js:bundle.js",
-    "postinstall": "npm run links && scoped-bulk stackgl npm install && npm dedupe && npm run sync",
-    "bundle": "npm run prestart && browserify index.js | uglifyjs -c > bundle.js",
-    "links": "district stackgl splash-grid",
-    "sync": "node data/sync",
-    "disc": "browserify index.js --full-paths | uglifyjs -c | discify --open"
+    "start": "make start",
+    "clean": "make clean",
+    "postinstall": "make postinstall",
+    "prepublish": "make build/bundle.min.js build/splash.min.js"
   },
   "repository": {
     "type": "git",

bundle.js

@@ -0,0 +1,21 @@
+var filter    = require('../lib/filter')
+var cl        = require('class-list')
+var minstache = require('minstache')
+var domify    = require('domify')
+var slice     = require('sliced')
+var fs        = require('fs')
+
+require('../lib/fill')(document.querySelectorAll('[data-fill]'))
+
+var thumb = minstache.compile(fs.readFileSync(
+  __dirname + '/../lib/thumb.html'
+, 'utf8'))
+
+var examples = require('../build/examples.json').map(function(meta) {
+  return thumb(meta)
+}).join('\n')
+
+document
+  .getElementById('examples')
+  .querySelector('ul.thumb-list')
+  .appendChild(domify(examples))

index.html

@@ -0,0 +1,9 @@
+var cl = require('class-list')
+
+try {
+  require('@stackgl/splash-grid')(
+    document.getElementById('grid').querySelector('canvas')
+  )
+} catch(e) {
+  cl(document.body).add('no-webgl')
+}