New and shiny sidebar email using templates.

diff --git a/gulpfile.js b/gulpfile.js
index 26614a42333768ac710a7ba4e5927efc1fb567cf..bd3879c8547c9619b22661bf7380d4fe2fe0c15d 100644 (file)
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -16,6 +16,7 @@
 // - - - - - - - - - - - - - - -
 
 var gulp       = require('gulp'),
+    watch      = require('gulp-watch'),
     sass       = require('gulp-ruby-sass'),
     html2txt   = require('gulp-html2txt'),
     inlineCss  = require('gulp-inline-css'),
@@ -130,31 +131,8 @@ gulp.task('copy-html', function() {
   .pipe(connect.reload())
 });
 
-// Inject html partials into default page
-gulp.task('inject-html', function() {
-  omglob(dirs.temp + '/*.html', function(er, files) {
-    for (var i = 0; i < files.length; i++) {
-      var filePath = files[i].replace(/\\/g, '/');
-      var fileName = filePath.substring(filePath.lastIndexOf('/')+1, filePath.lastIndexOf('.'));
-
-       gulp.src(dirs.src + '/layouts/default.html')
-        .pipe(inject(gulp.src(files[i]), {
-          starttag: '<!-- inject:page:{{ext}} -->',
-          transform: function (filePath, file) {
-          // return file contents as string 
-          return file.contents.toString('utf8')
-        }
-      }))
-      .pipe(rename({
-        basename: fileName
-      }))
-      .pipe(gulp.dest(dirs.dist));     
-    }
-  })
-});
-
 // Inject handlebars partials
-gulp.task('inject-handlebars', function() {
+gulp.task('compile-html', function() {
   
   omglob(dirs.src + '/pages/*.handlebars', function(er, files) {
 
@@ -173,24 +151,39 @@ gulp.task('inject-handlebars', function() {
         .pipe(gulp.dest(dirs.temp));
     }
   })
-});
 
-gulp.task('compile', function() {
-  runOrder('clean:temp', 'inject-handlebars', function() {
-    // better way to do this?
-    setTimeout(function() {
-      gulp.start('inject-html')
-    }, 50);
-  });
-})
+  // silly gulp asynch. The previous task sometimes happens too fast, so it can't find
+  // the new temporary partials
+  setTimeout(function() {
+    omglob(dirs.temp + '/*.html', function(er, files) {
+      for (var i = 0; i < files.length; i++) {
+        var filePath = files[i].replace(/\\/g, '/');
+        var fileName = filePath.substring(filePath.lastIndexOf('/')+1, filePath.lastIndexOf('.'));
+
+         gulp.src(dirs.src + '/layouts/default.html')
+          .pipe(inject(gulp.src(files[i]), {
+            starttag: '<!-- inject:page:{{ext}} -->',
+            transform: function (filePath, file) {
+            // return file contents as string 
+            return file.contents.toString('utf8')
+          }
+        }))
+        .pipe(rename({
+          basename: fileName
+        }))
+        .pipe(gulp.dest(dirs.temp)) 
+      }
+    })
+  }, 100);
+});
 
 // 6. Syntax Transformer
 // - - - - - - - - - - - - - - -
 
 // get the HTML from the body and run it through Inky parser
 
-gulp.task('query', function() {
-  gulp.src(dirs.dist + '/*.html')
+gulp.task('query', ['compile-html'], function() {
+  gulp.src(dirs.temp + '/*.html')
     .pipe(inkyGulp())
     .pipe(gulp.dest(dirs.dist))
     .pipe(connect.reload());
@@ -207,9 +200,10 @@ gulp.task('test', function () {
 // 8. GO FORTH AND BUILD
 // - - - - - - - - - - - - - - -
 
+
 // Wipes build folder, then compiles SASS, then minifies and copies HTML
-gulp.task('build', ['clean:dist', 'sass', 'query'], function() {
-  gulp.start('minify-html');
+gulp.task('build', function() {
+  runOrder('clean:dist', 'sass','query','minify-html');
 });
 
 // 9. Serve/Watch Tasks
@@ -228,8 +222,16 @@ gulp.task('serve', function() {
 // Watch all HTML files and SCSS files for changes
 // Live reloads on change
 gulp.task('watch', ['serve'], function() {
-  gulp.watch([dirs.src], ['compile','query','minify-html']);
+  gulp.watch([dirs.src + '/*/*.*'], function(event) {
+    runOrder('query', 'minify-html');
+  });
   gulp.watch([dirs.styles], ['sass']);
+  // watch([dirs.dist + '/*.*']).pipe(connect.reload());
+  gulp.watch([dirs.dist + '/*.*'], function(event) {
+    gulp.src(event.path)
+      .pipe(connect.reload());
+  })
+
 });
 
 

diff --git a/package.json b/package.json
index 443c41a00663e1b4cdf35c7d33f32ec5d6705bdb..23c220ca0bd4dc8f74a729b1bc4ceec70bbde944 100644 (file)
--- a/package.json
+++ b/package.json
@@ -13,12 +13,11 @@
     "gulp-html2txt": "^1.1.0",
     "gulp-inky": "*",
     "gulp-inline-css": "^1.0.1",
-    "gulp-jasmine": "^2.0.0",
     "gulp-minify-html": "^0.1.8",
     "gulp-rename": "^1.2.0",
     "gulp-ruby-sass": "^0.7.1",
+    "gulp-watch": "^4.1.1",
     "rimraf": "^2.2.8",
-    "run-sequence": "^1.0.2",
-    "vinyl-map": "^1.0.1"
+    "run-sequence": "^1.0.2"
   }
 }

diff --git a/src/pages/goodbye.handlebars b/src/pages/goodbye.handlebars
index e0f26a9a026a7388565ce4900ceb9a62616749ae..469a932683f854e72481f80d5c38b1b7542ced41 100644 (file)
--- a/src/pages/goodbye.handlebars
+++ b/src/pages/goodbye.handlebars
@@ -1,3 +1,5 @@
 <row>
-  <h6>Goodbasdfasdfye</h6>
+  <columns large='12'>
+  <h6>Wsfaf</h6>
+  </columns>
 </row>
\ No newline at end of file

diff --git a/src/pages/hello.handlebars b/src/pages/hello.handlebars
index bc5e2f7696d38a54aba32810fe6acfdb35eac381..78aba0983f959bb832d772de6474f79239fc521d 100644 (file)
--- a/src/pages/hello.handlebars
+++ b/src/pages/hello.handlebars
@@ -1,4 +1,69 @@
-<row>
-  <h1>Hello!</h1>
-</row>
-{{> header }}
\ No newline at end of file
+{{> header }}
+<container>
+  <row>
+    <columns large='12'>
+      <h1>Welcome, Daneel Olivan</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+      <img width="580" height="300" src="http://placehold.it/580x300">
+    </columns>
+  </row>
+  <row>
+    <columns large='12'>
+      <callout>
+        <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
+      </callout>
+    </columns>
+  </row>
+  <row>
+    <columns large='6'>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
+      <button><a href="#">Click Me!</a></button>
+    </columns>
+    <columns large='6'>
+      <callout>
+        <h6>Header Thing</h6>
+        <p>Sub-head or something</p>
+        <inline-list-v>
+          <a href="#">Just a Plain Link &raquo;</a>
+          <a href="#">Just a Plain Link &raquo;</a>
+          <a href="#">Just a Plain Link &raquo;</a>
+          <hr>
+          <a href="#">Just a Plain Link &raquo;</a>
+          <hr>
+          <a href="#">Just a Plain Link &raquo;</a>
+          <hr>
+          <a href="#">Just a Plain Link &raquo;</a>
+          <hr>
+          <a href="#">Just a Plain Link &raquo;</a>
+        </inline-list-v>
+      </callout>
+    </columns>
+  </row>
+  <row>
+    <columns large='6'>
+    </columns>
+    <columns large='6'>
+      <callout>
+        <h6 style="margin-bottom:5px;">Connect With Us:</h6>
+        <button class="tiny-button facebook">
+          <a href='#'>Facebook</a>
+        </button>
+        <hr>
+        <button class="tiny-button twitter">
+          <a href='#'>Twitter</a>
+        </button>
+        <hr>
+        <button class="tiny-button google-plus">
+          <a href='#'>Google</a>
+        </button>
+        <br>
+        <h6 style="margin-bottom:5px;">Contact Info:</h6>
+        <p>Phone: <b>408.341.0600</b></p>
+        <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+      </callout>
+    </columns>
+  </row>
+ </container>
+ {{> footer }}

diff --git a/src/partials/footer.handlebars b/src/partials/footer.handlebars
new file mode 100644 (file)
index 0000000..985208d
--- /dev/null
+++ b/src/partials/footer.handlebars
@@ -0,0 +1,7 @@
+<row>
+  <columns large='12'>
+    <center>
+      <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+    </center>
+  </columns>
+</row>
\ No newline at end of file

diff --git a/src/partials/header.handlebars b/src/partials/header.handlebars
index 036387df9cb53817a94f0a0f548d96edfd2cb412..2ec4b26e9a74f3adb6bad97bcd848bf44fcd8897 100644 (file)
--- a/src/partials/header.handlebars
+++ b/src/partials/header.handlebars
@@ -1,5 +1,10 @@
-<row>
-  <columns large='12'>
-  header maybe?
+<row class="header" style="background-color: red;">
+  <columns large='12' small='12'>
+    <subcolumns large='6' small='6'>
+      <img src="http://placehold.it/200x50">
+    </subcolumns>
+    <subcolumns large='6' small='6'>
+      <span class="template-label">SIDEBAR HERO</span>
+    </subcolumns>
   </columns>
-</row>
\ No newline at end of file
+ </row>
\ No newline at end of file