improved pipelines and theme

.eleventy.js

@@ -1,19 +1,35 @@
 module.exports = function(config) {
 
+  // A useful way to reference to the contect we are runing eleventy in
+  let env = process.env.ELEVENTY_ENV;
+
+  // Layout aliases can make templates more portable
+  config.addLayoutAlias('default', 'layouts/base.njk');
+
   // Add a date formatter filter to Nunjucks
-  config.addFilter("dateDisplay", require("./filters/dates.js") );
-  config.addFilter("timestamp", require("./filters/timestamp.js") );
-  config.addFilter("squash", require("./filters/squash.js") );
+  config.addFilter("dateDisplay", require("./src/filters/dates.js") );
+  config.addFilter("timestamp", require("./src/filters/timestamp.js") );
+  config.addFilter("squash", require("./src/filters/squash.js") );
+
+  // minify the html output
+  config.addTransform("htmlmin", require("./src/utils/minify-html.js"));
+
+
+  // pass some assets right through
+  config.addPassthroughCopy("./src/site/images");
 
+  // make the seed target act like prod
+  env = (env=="seed") ? "prod" : env;
   return {
     dir: {
       input: "src/site",
       output: "dist",
-      includes: "_includes"
+      data: `_data/${env}`
     },
     templateFormats : ["njk", "md"],
     htmlTemplateEngine : "njk",
-    markdownTemplateEngine : "njk"
+    markdownTemplateEngine : "njk",
+    passthroughFileCopy: true
   };
 
 };

.env-sample

@@ -0,0 +1 @@
+INSTAGRAM_AUTH="INSTAGRAM_TOKEN"

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 functions
+.env
 yarn-error.log

README.md

@@ -25,3 +25,22 @@ Good question. Here's what it will do...
 1. Netlify will clone the git repository of this project into your Github account. It will be asking for permission to add the repo for you.
 2. We'll create a new site for you in Netlify, and configure it to use your shiny new repo. Right away you'll be able to deploy changes simply by pushing changes to your repo.
 3. That's it really.
+
+
+## Common additions
+
+### Netlify Functions
+
+Add the build pipeline for Netlify Functions for a simpler way tp build Lambdas
+
+```
+ "scripts": {
+   ..
+    "start" : "yarn run dev",
+    "dev": "yarn run watch && eleventy && yarn run dev:functions",
+    "build": "gulp build && yarn run build:functions",
+    "build:functions": "netlify-lambda build src/lambda",
+    "dev:functions": "netlify-lambda build src/lambda",
+
+  },
+```

gulp-tasks/scripts.js

@@ -1,19 +1,13 @@
-var project = require('./_project.js');
-var gulp    = require('gulp');
-var uglify  = require('gulp-uglify');
-var concat  = require('gulp-concat');
-var pump    = require('pump');
+const gulp   = require('gulp');
+const uglify = require('gulp-uglify');
+const concat = require('gulp-concat');
 
-// Uglify our javascript files into one.
-// Use pump to expose errors more usefully.
-gulp.task('scripts', function(done) {
-  pump([
-      gulp.src(project.buildSrc + "/js/**/*.js"),
-      concat('script-out.js'),
-      uglify(),
-      gulp.dest(project.buildDest + '/js')
-    ],
-    done()
-  );
+/*
+  Uglify our javascript files into one.
+*/
+gulp.task('js', function() {
+  return gulp.src("./src/js/**/*.js")
+    .pipe(concat('scripts.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest('./src/site/_includes/js'));
 });
-

gulp-tasks/styles.js

@@ -1,15 +1,14 @@
-var project = require('./_project.js');
 var gulp    = require('gulp');
 var sass    = require("gulp-sass");
 
-
 /*
-  Compile SCSS files to CSS
+  generate the css with sass
 */
-gulp.task('styles', function() {
-  return gulp.src(project.buildSrc + '/scss/main.scss')
+gulp.task('css', function() {
+  return gulp.src('./src/scss/*.scss')
     .pipe(sass({
       outputStyle: 'compressed'
-    }).on('error', sass.logError))
-    .pipe(gulp.dest(project.buildDest+ '/css'));
+    })
+    .on('error', sass.logError))
+    .pipe(gulp.dest('./src/site/_includes/css'));
 });

gulpfile.js

@@ -1,6 +1,4 @@
-var gulp  = require('gulp');
-var shell = require('gulp-shell');
-
+const gulp  = require('gulp');
 
 /**
   Our gulp tasks live in their own files,
@@ -9,38 +7,35 @@ var shell = require('gulp-shell');
 require('require-dir')('./gulp-tasks');
 
 
+
 /*
- Run our static site generator to build the pages
+  Watch folders for changess
 */
-gulp.task('generate', shell.task('eleventy'));
-
+gulp.task("watch", function() {
+  gulp.watch('./src/scss/**/*.scss', gulp.parallel('css'));
+  gulp.watch('./src/js/**/*.js', gulp.parallel('js'));
+});
 
 
 /*
-  compile the assets to the correct destination
+  Let's build this sucker.
 */
-gulp.task('assets', gulp.parallel(
-  'images',
-  'styles',
-  'scripts'
+gulp.task('build', gulp.parallel(
+  'css',
+  'js'
 ));
 
-
 /*
-  Let's build this sucker, without getting data from online sources
+  Build and watch things during dev
 */
-gulp.task('build:local', gulp.series(
-  'clean-build',
-  'generate',
-  'assets'
+gulp.task('dev', gulp.series(
+  'build',
+  'watch'
 ));
 
 
-/*
-  Let's gwt the data we need and then build this sucker.
-*/
-gulp.task('build', gulp.series(
-  // 'get:data',
-  'generate',
-  'assets'
-));
+
+
+
+
+

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  Functions = "functions"
   command = "yarn run build"
   publish = "dist"
   NODE_ENV = "8.9.0"
+  Functions = "functions"

package.json

@@ -1,37 +1,35 @@
 {
   "name": "EleventyOne",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A project bootstrap for Eleventy sites. With pipelines for Sass, Js, and Lambdas",
   "author": "Phil Hawksworth",
   "license": "MIT",
   "scripts": {
-    "gen": "gulp generate",
-    "start": "yarn run build && yarn run serve",
-    "build": "gulp build && yarn run build:functions",
-    "build:local": "gulp build:local",
+    "start": "yarn run dev",
+    "dev": "gulp dev & ELEVENTY_ENV=dev eleventy --serve",
+    "build": "gulp build & ELEVENTY_ENV=dev eleventy",
+    "seed": "gulp build & ELEVENTY_ENV=seed eleventy",
     "build:functions": "netlify-lambda build src/lambda",
-    "serve": "gulp watch & gulp serve & netlify-lambda serve src/lambda"
+    "dev:functions": "netlify-lambda serve src/lambda"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/philhawksworth/eleventyone"
   },
   "dependencies": {
-    "@11ty/eleventy": "^0.5.2",
+    "@11ty/eleventy": "^0.7.1",
+    "axios": "^0.18.0",
     "concurrent-transform": "^1.0.0",
-    "gravatar": "^1.6.0",
+    "dotenv": "^6.2.0",
     "gulp": "^4.0.0",
-    "gulp-clean": "^0.4.0",
     "gulp-concat": "^2.6.1",
     "gulp-image-resize": "^0.13.0",
-    "gulp-rename": "^1.3.0",
     "gulp-sass": "^3.1.0",
-    "gulp-serve": "^1.4.0",
-    "gulp-shell": "^0.6.5",
     "gulp-uglify": "^3.0.0",
+    "html-minifier": "^3.5.21",
     "netlify-lambda": "^0.2.0",
-    "pump": "^3.0.0",
-    "require-dir": "^1.0.0"
+    "require-dir": "^1.0.0",
+    "xml2js": "^0.4.19"
   },
   "proxy": {
     "/.netlify/functions": {

src/scss/_variables.scss

@@ -4,6 +4,6 @@ $bp-mid: "(min-width: 740px)";
 $bp-wide: "(min-width: 1200px)";
 
 // Colours
-$page-color: #067ada;
+$page-color: #385780;
 $text-color: #fff;
-$accent-color: #222;
+$accent-color: #213b5c;

src/scss/main.scss

@@ -6,13 +6,12 @@
   padding: 0;
 }
 
-
 ::-moz-selection {
-  background-color: $accent-color;
+  background-color: $text-color;
   color: $page-color;
 }
 ::selection {
-  background-color: $accent-color;
+  background-color: $text-color;
   color: $page-color;
 }
 
@@ -23,16 +22,19 @@ html {
 body {
   text-align: center;
   background-color: $page-color;
-  color: mix($text-color, $page-color, 80%);
+  color: mix($text-color, $page-color, 60%);
   font-family: sans-serif;
-  font-weight: 30;
+  font-weight: 300;
   font-size: 16px;
   line-height: 1.8;
+  min-height: 100vh;
+  background-image: url('/images/bg-grid.png');
   @include bp(mid) {
     font-size: 18px;
   }
 }
 
+
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -50,14 +52,14 @@ body {
 h1, h2, h3 {
   color: $text-color;
   font-weight: 600;
-  margin-top:2.5em;
-  margin-bottom:1em;
-  line-height: 1em;
+  margin-top: 2.5em;
+  margin-bottom:0.2em;
+  line-height: 1;
 }
 h1 {
   margin-top:0.4em;
-  font-size: 4em;
-  line-height: 0.9em;
+  font-size: 3em;
+  line-height: 1;
 
   @include bp(mid) {
     font-size: 5em;
@@ -67,13 +69,12 @@ h1 {
   }
 }
 
-
 p {
   margin-bottom: 1em;
 }
 
 .subtitle {
-  margin-top: -3em;
+  margin-top: 1em;
   margin-bottom: 6em;
 }
 
@@ -83,18 +84,17 @@ ul, ol {
 
 a:link,
 a:visited {
-  color: $accent-color;
+  color: $text-color;
   text-decoration: none;
   border-bottom: solid 1px mix($text-color, $page-color, 10%);
 }
 a:hover,
 a:focus {
   color: $text-color;
-  border-bottom: solid 1px $accent-color;
+  border-bottom: solid 1px $text-color;
 }
 
 
-
 .nav {
   padding-top: 3em;
 
@@ -133,12 +133,13 @@ a:focus {
 
 code {
   font-size: 0.8em;
-  background-color:  mix($accent-color, $page-color, 10%);
+  background-color:  mix($accent-color, $page-color, 20%);
   color: $text-color;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-left: 4px;
-  padding-right: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
+  white-space: nowrap;
 }
 
 pre {
@@ -162,9 +163,6 @@ pre {
 }
 
 
-
-
-
 footer {
   margin-top: 6em;
   padding-top: 4em;

src/site/_data/dev/hawksworx.json

@@ -0,0 +1 @@
+{"title":"Hawksworx - Phil Hawksworth's blog","subtitle":"Phil Hawksworth's home on the web. Read his blog, ask questions, and find coverage of his recent conference talks about web development.","link":"https://www.hawksworx.com","feed":"https://www.hawksworx.com/feed.xml","author":"Phil Hawksworth","entries":[{"title":"Keeping Sass simple and speedy on Eleventy","link":"https://www.hawksworx.com/blog/keeping-sass-simple-and-speedy-on-eleventy/","updated":"2018-12-12T00:00:00+00:00"},{"title":"Adding search to a JAMstack site","link":"https://www.hawksworx.com/blog/adding-search-to-a-jamstack-site/","updated":"2018-10-18T00:00:00+00:00"},{"title":"Contentful and GitHub help make JAMstack_Conf a reality","link":"https://www.hawksworx.com/blog/contentful-and-github-help-make-jamstack_conf-a-reality/","updated":"2018-10-16T00:00:00+00:00"},{"title":"Get more control over Netlify continuous deployment with deploy skipping","link":"https://www.hawksworx.com/blog/get-more-control-over-netlify-continuous-deployment-with-deploy-skipping/","updated":"2018-10-08T00:00:00+00:00"},{"title":"The 10 talks and many highlights of Vue London","link":"https://www.hawksworx.com/blog/the-10-talks-and-many-highlights-of-vue-london/","updated":"2018-09-27T00:00:00+00:00"},{"title":"Off with their heads ! The rise of the modern CMS","link":"https://www.hawksworx.com/blog/off-with-their-heads---the-rise-of-the-modern-cms/","updated":"2018-06-14T00:00:00+00:00"},{"title":"Comedy in the Crown goes pro","link":"https://www.hawksworx.com/blog/comedy-in-the-crown-goes-pro/","updated":"2018-04-29T13:47:03+00:00"},{"title":"Webserverless","link":"https://www.hawksworx.com/blog/webserverless/","updated":"2018-04-10T13:47:03+00:00"},{"title":"Smashing Magazine moves to a JAMstack architecture","link":"https://www.hawksworx.com/blog/smashing-magazine-moves-to-a-jam-stack-architecture/","updated":"2017-11-22T10:23:03+00:00"},{"title":"Joining Netlify","link":"https://www.hawksworx.com/blog/joining-netlify/","updated":"2017-11-17T09:14:55+00:00"},{"title":"TTFN R/GA","link":"https://www.hawksworx.com/blog/ttfn-rga/","updated":"2017-11-10T19:46:38+00:00"},{"title":"Keeping a Jamstack Site Feeling Fresh With Recent Tweets","link":"https://www.hawksworx.com/blog/keeping-a-jamstack-site-feeling-fresh-with-recent-tweets/","updated":"2017-03-27T10:56:18+00:00"},{"title":"Isomorphic Rendering on the JAMstack","link":"https://www.hawksworx.com/blog/isomorphic-rendering-on-the-jam-stack/","updated":"2016-08-01T08:23:35+00:00"},{"title":"Progressive Enhancement Design Smackdown","link":"https://www.hawksworx.com/blog/progressive-enhancement-design-smackdown/","updated":"2016-02-01T00:00:00+00:00"},{"title":"Better Than Perfect","link":"https://www.hawksworx.com/blog/better-than-perfect/","updated":"2014-12-02T00:00:00+00:00"},{"title":"The Shapes of Web Views","link":"https://www.hawksworx.com/blog/the-shapes-of-web-views/","updated":"2014-11-05T00:00:00+00:00"},{"title":"Adding a Static Comments System to My Jekyll Build","link":"https://www.hawksworx.com/blog/adding-a-static-comments-system-to-my-jekyll-build/","updated":"2014-07-22T00:00:00+00:00"},{"title":"Too Funky Didnt Read","link":"https://www.hawksworx.com/blog/too-funky-didnt-read/","updated":"2014-01-06T00:00:00+00:00"},{"title":"Using a Wiimote for Presentations","link":"https://www.hawksworx.com/blog/using-a-wiimote-for-presentations/","updated":"2013-11-16T00:00:00+00:00"},{"title":"On Hiring Developers","link":"https://www.hawksworx.com/blog/on-hiring-developers/","updated":"2013-11-14T00:00:00+00:00"},{"title":"London Content Strategy Meetup","link":"https://www.hawksworx.com/blog/london-content-strategy-meetup/","updated":"2013-06-18T00:00:00+00:00"},{"title":"Oakleys Moto Diet","link":"https://www.hawksworx.com/blog/oakleys-moto-diet/","updated":"2013-06-05T00:00:00+00:00"},{"title":"Data Viz at Digital Dumbo","link":"https://www.hawksworx.com/blog/data-viz-at-digital-dumbo/","updated":"2013-05-29T00:00:00+00:00"},{"title":"Pathing the Gimmicky Cowpaths","link":"https://www.hawksworx.com/blog/pathing-the-gimmicky-cowpaths/","updated":"2013-05-09T00:00:00+00:00"},{"title":"Talking at Jsday Verona","link":"https://www.hawksworx.com/blog/talking-at-jsday-verona/","updated":"2013-05-07T00:00:00+00:00"},{"title":"Oakleys Monster Page of Baubles","link":"https://www.hawksworx.com/blog/oakleys-monster-page-of-baubles/","updated":"2013-04-22T00:00:00+00:00"},{"title":"Reflecting on Txjs","link":"https://www.hawksworx.com/blog/reflecting-on-txjs/","updated":"2013-04-21T00:00:00+00:00"},{"title":"Excess CMS and Stink at Txjs","link":"https://www.hawksworx.com/blog/excess-cms-and-stink-at-txjs/","updated":"2013-04-12T00:00:00+00:00"},{"title":"Smelly CMS at HTML5DevConf","link":"https://www.hawksworx.com/blog/smelly-cms-at-html5devconf/","updated":"2013-03-28T00:00:00+00:00"},{"title":"Simplicity and performance with static files","link":"https://www.hawksworx.com/blog/simplicity-and-performance/","updated":"2012-11-29T00:00:00+00:00"},{"title":"I can smell your CMS at Fronteers 2012","link":"https://www.hawksworx.com/blog/i-can-smell-your-cms-a-talk-at-fronteers/","updated":"2012-10-09T00:00:00+00:00"},{"title":"Bootstrapping front-end development with Yeoman","link":"https://www.hawksworx.com/blog/bootrapping-front-end-development-with-yeoman/","updated":"2012-07-25T00:00:00+00:00"},{"title":"Sketch.js adds convenient canvas rendering","link":"https://www.hawksworx.com/blog/sketchjs-adds-convenient-canvas-rendering/","updated":"2012-07-24T00:00:00+00:00"},{"title":"Visiting BBC Online at Salford","link":"https://www.hawksworx.com/blog/visiting-bbc-online-at-salford/","updated":"2011-11-18T00:00:00+00:00"},{"title":"Reflecting on Full Frontal 2011","link":"https://www.hawksworx.com/blog/reflecting-on-fullfrontal-2011/","updated":"2011-11-13T00:00:00+00:00"},{"title":"Excessive Enhancement at Full Frontal","link":"https://www.hawksworx.com/blog/excessive-enhancement-at-full-frontal/","updated":"2011-11-03T00:00:00+00:00"},{"title":"Joining R/GA","link":"https://www.hawksworx.com/blog/joining-rga-london/","updated":"2011-11-02T00:00:00+00:00"},{"title":"Time to move on from The Team","link":"https://www.hawksworx.com/blog/time-to-move-on-from-the-team/","updated":"2011-11-01T00:00:00+00:00"},{"title":"Value in a happy hack day","link":"https://www.hawksworx.com/blog/value-in-a-happy-hackday/","updated":"2011-09-19T00:00:00+00:00"},{"title":"Expectations of web development at agencies","link":"https://www.hawksworx.com/blog/expectations-of-web-development-at-agencies/","updated":"2011-09-09T00:00:00+00:00"},{"title":"Social media did not cause the London riots","link":"https://www.hawksworx.com/blog/social-media-did-not-cause-the-london-riots/","updated":"2011-08-09T00:00:00+00:00"},{"title":"Getting started with Node at AsyncJS","link":"https://www.hawksworx.com/blog/getting-started-with-node-at-asyncjs/","updated":"2011-05-27T00:00:00+00:00"},{"title":"Developing a side project","link":"https://www.hawksworx.com/blog/developing-a-side-project/","updated":"2011-05-09T00:00:00+00:00"},{"title":"The next generation stack. Is NodeJS ready to go mainstream?","link":"https://www.hawksworx.com/blog/the-next-generation-stack-is-nodejs-ready-to-go-mainstream/","updated":"2010-09-10T00:00:00+00:00"},{"title":"Hitched","link":"https://www.hawksworx.com/blog/hitched/","updated":"2010-07-27T00:00:00+00:00"},{"title":"Nodejs I just have to use it for something","link":"https://www.hawksworx.com/blog/nodejs-i-just-have-to-use-it-for-something/","updated":"2010-02-15T00:00:00+00:00"},{"title":"In defense of IE6","link":"https://www.hawksworx.com/blog/in-defense-of-ie6/","updated":"2009-08-10T00:00:00+00:00"},{"title":"Using Quicksilver to control Last.fm","link":"https://www.hawksworx.com/blog/using-quicksilver-to-control-lastfm/","updated":"2009-08-07T00:00:00+00:00"},{"title":"Flash v Web. Behind enemy lines","link":"https://www.hawksworx.com/blog/flash-v-web-behind-enemy-lines/","updated":"2009-07-27T00:00:00+00:00"},{"title":"Moving on from Osmosoft","link":"https://www.hawksworx.com/blog/moving-on-from-osmosoft/","updated":"2009-04-23T00:00:00+00:00"},{"title":"Leveraging Jquery and Jquery Plugins in TiddlyWiki","link":"https://www.hawksworx.com/blog/leveraging-jquery-and-jquery-plugins-in-tiddlyWiki/","updated":"2009-03-13T00:00:00+00:00"},{"title":"Mashing up flickr in the client with jQuery","link":"https://www.hawksworx.com/blog/mashing-up-flickr-in-the-client-with-jquery/","updated":"2009-02-15T00:00:00+00:00"},{"title":"Unobtrusify your Javascript","link":"https://www.hawksworx.com/blog/unobtrusify-your-javascript/","updated":"2009-01-05T00:00:00+00:00"},{"title":"Enthusiasm and Good Food at Tiddlyparis","link":"https://www.hawksworx.com/blog/enthusiasm-and-good-food-at-tiddlyparis/","updated":"2008-08-27T00:00:00+00:00"},{"title":"Announcing JigglyWiki. A TiddlyWiki experiment with jQuery","link":"https://www.hawksworx.com/blog/announcing-jigglywiki-a-tiddlywiki-experiment/","updated":"2008-08-27T00:00:00+00:00"},{"title":"Get your Task Management wiki","link":"https://www.hawksworx.com/blog/get-your-task-management-wiki/","updated":"2008-07-16T00:00:00+00:00"},{"title":"Nba updates on twitter","link":"https://www.hawksworx.com/blog/nba-updates-on-twitter/","updated":"2008-05-19T00:00:00+00:00"},{"title":"Jsspec Bundle for Textmate Helps With Writing","link":"https://www.hawksworx.com/blog/jsspec-bundle-for-textmate-helps-with-writing/","updated":"2008-04-18T00:00:00+00:00"},{"title":"How to create and distribute lovely screencasts","link":"https://www.hawksworx.com/blog/how-to-create-and-distribute-lovely-screencasts/","updated":"2008-03-28T00:00:00+00:00"},{"title":"Observing Twitter Behaviours","link":"https://www.hawksworx.com/blog/observing-twitter-behaviours/","updated":"2008-01-07T00:00:00+00:00"},{"title":"Osmosoft return from LeWeb3 intact","link":"https://www.hawksworx.com/blog/osmosoft-return-from-leweb3-intact/","updated":"2007-12-17T00:00:00+00:00"},{"title":"Opening a Finder window from the Terminal","link":"https://www.hawksworx.com/blog/opening-a-finder-window-from-the-terminal/","updated":"2007-11-04T00:00:00+00:00"}]}

src/site/_data/dev/site.js

@@ -0,0 +1 @@
+module.exports = require('../site.js');