Move to Panini 2.0

gulpfile.js

@@ -1,25 +1,25 @@
-var gulp = require('gulp');
+const gulp = require('gulp');
 // var pug = require('gulp-pug');
 // var less = require('gulp-less');
 var minify = require('gulp-minifier');
 // var minifyCSS = require('gulp-csso');
-var panini = require('panini');
+const panini = require('panini/gulp');
 var browserSync = require('browser-sync').create();
 var del = require('del');
 var imageResize = require('gulp-image-resize');
 var gulpSequence = require('gulp-sequence').use(gulp);
 var critical = require('critical');
 
-gulp.task('panini', function() {
-  return gulp.src('pages/**/*{.html,.xml}')
-    .pipe(panini({
-      root: 'pages/',
-      layouts: 'layouts/',
-      partials: 'partials/',
-      helpers: 'helpers/',
-      data: 'data/'
-    }))
-    .pipe(gulp.dest('./build'));
+gulp.task('panini', () => {
+  return panini('src', {
+    //   builtins: false,
+    //   root: 'pages/',
+    //   layouts: 'layouts/',
+    //   partials: 'partials/',
+    //   helpers: 'helpers/',
+    //   data: 'data/'
+    })
+    .pipe(gulp.dest('build'));
 });
 
 // https://github.com/addyosmani/critical
@@ -28,7 +28,7 @@ gulp.task('critical', function() {
     // inline: true,
     base: './',
     src: 'build/index.html',
-    dest: 'partials/critical.min.css.html', // we use .html so we can do a panini include
+    dest: 'src/partials/criticalmincss.html', // we use .html so we can do a panini include
     ignore: ['@font-face'],
     minify: true,
     dimensions: [{
@@ -119,11 +119,12 @@ gulp.task('static', function () {
   return gulp.src('./static/**/*')
     .pipe(gulp.dest('build'));
 });
+// p.watch();
 
 // refresh panini's helpers, templates
 gulp.task('refresh', function () {
-  panini.refresh();
-  // gulp.start('taskname');
+  // panini.refresh();
+  gulp.start('panini');
 });
 
 gulp.task('refreshBrowser', function () {
@@ -135,7 +136,7 @@ gulp.task('refreshBrowser', function () {
 
 // runner tasks
 gulp.task('default', ['static', 'panini', 'critical', 'browser-sync'], function() {
-  var watcher = gulp.watch(['./{layouts,partials,data,pages,static}/**/*'], function(event) {
+  var watcher = gulp.watch(['./{src,static}/**/*'], function(event) {
     console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
     gulpSequence(['refresh', 'static'], 'panini', 'refreshBrowser')(function (err) {
       if (err) console.log(err)

package.json

@@ -23,7 +23,7 @@
     "gulp-image-resize": "^0.12.0",
     "gulp-minifier": "^0.2.2",
     "gulp-sequence": "^0.4.6",
-    "panini": "^1.5.1"
+    "panini": "^2.0.0-alpha.2"
   },
   "dependencies": {
     "critical": "^0.9.1"

src/helpers/ifequal.js

@@ -0,0 +1,11 @@
+/**
+ * Handlebars block helper that checks if two values are equal.
+ * @param {mixed} a - First value to compare.
+ * @param {mixed} b - Second value to compare.
+ * @param {object} options - Handlebars object.
+ * @returns If the values are equal, content inside of the helper. If not, the content inside the `{{else}}` block.
+ */
+module.exports = function(a, b, options) {
+  if (a === b) return options.fn(this);
+  else return options.inverse(this);
+}

layouts/default.html → src/layouts/default.html

@@ -5,7 +5,7 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <title>{{this.title}} > All about Ken</title>
-    <style type="text/css">{{> critical.min.css}}</style>
+    <style type="text/css">{{> criticalmincss}}</style>
 
     <link rel="preload" href="https://khawkins98.github.io/allaboutken-framework/css/allaboutken-framework.css" as="style" onload="this.rel='stylesheet'">
     <noscript><link rel="stylesheet" href="https://khawkins98.github.io/allaboutken-framework/css/allaboutken-framework.css"></noscript>
@@ -61,6 +61,7 @@
         <div class="medium-1 show-for-medium cell do-not-print"></div>
         <div class="small-12 medium-10 print-12 cell">
 {{> body}}
+
         </div>
       </div>
       <code class="show-for-print-only">Printed direct from AllAboutKen.com</code>

pages/index.html → src/pages/index.html

@@ -15,18 +15,13 @@ <h1 class="margin-top-none margin-bottom-none tight-leading">Hello.
 </div>
 
 - **I am a deep thinker:**
-  <br/>I have a strong conceptual background from years of crafting deadline-driven data-heavy infographics for newspapers,  online publications driven by data and inovating marketing and tracking tools.
-  <br/>
-  <br/>
+  I have a strong conceptual background from years of crafting deadline-driven data-heavy infographics for newspapers,  online publications driven by data and inovating marketing and tracking tools.
 - **These are my descriptors:**
-  <br/>Creator of websites, information architect, data geek, designer, newspaper nerd, lover of UX, consultant,  [information acrobat](https://twitter.com/euroia/status/912695523118927873).
-  <br/>
-  <br/>
+  Creator of websites, information architect, data geek, designer, newspaper nerd, lover of UX, consultant,  [information acrobat](https://twitter.com/euroia/status/912695523118927873).
 - **These are my methodologies:**
-  <br/>Content modelling, design thinking, content structure and organisation, responsive design, analytics and metrics, principles of graphing, user centred design, user stories, user behaviour, Kanban.
+  Content modelling, design thinking, content structure and organisation, responsive design, analytics and metrics, principles of graphing, user centred design, user stories, user behaviour, Kanban.
 {{/markdown}}
 
-
 <div class="padding-top-xlarge padding-bottom-medium margin-bottom-xlarge">
 <h2 class="margin-top-none margin-bottom-none tight-leading">Concisely: <small>Ken Hawkins,</small> <small>Web Design Architect.</small>
 </h2>
@@ -44,7 +39,7 @@ <h2 class="margin-top-none margin-bottom-none">Say hello<small class="">, dig de
 <a class="block only-hover" href="{{root}}/blog">
 {{#markdown}}
 - **<h3 class="emoji">📝</h3> My blog:**
-  <br/>If I've made something interesting and had a bit of time, I've hopefully done a post on it.
+  If I've made something interesting and had a bit of time, I've hopefully done a post on it.
 {{/markdown}}
 </a>
 </div>
@@ -59,15 +54,15 @@ <h2 class="margin-top-none margin-bottom-none">Say hello<small class="">, dig de
 <a class="block only-hover" href="mailto:khawkins98@gmail.com">
 {{#markdown}}
 - **<h3 class="emoji">📧</h3>khawkins98@gmail.com:**
-  <br/>Happy to take an e-mail about projects or to just say hello.
+  Happy to take an e-mail about projects or to just say hello.
 {{/markdown}}
 </a>
 </div>
 <div class="cell">
 <a class="block only-hover" href="{{root}}cv">
 {{#markdown}}
 - **<h3 class="emoji">ℹ️</h3> Want more details?**
-  <br/>Have a read of my CV.
+  Have a read of my CV.
 {{/markdown}}
 </a>
 </div>

pages/posts/20180122-content-action-model-origin-story.html → src/pages/posts/20180122-content-action-model-origin-story.html

@@ -19,7 +19,7 @@
 
 <div class="grid-x padding-bottom-medium padding-top-large padding-bottom-large">
   <figure class="large-10 medium-8 cell callout"><img class="padding-bottom-medium" src="{{root}}images/original/blog/terra-incognita.jpg" />
-    <cite class="text-right">Gutiérrez, Diego, Active, Hieronymus Cock, and Lessing J. Rosenwald Collection. Americae Sive Qvartae Orbis Partis Nova Et Exactissima Descriptio. [Library of Congress](https://www.loc.gov/item/map49000970/).</cite>
+    <cite class="text-right">Gutiérrez, Diego, Active, Hieronymus Cock, and Lessing J. Rosenwald Collection. Americae Sive Qvartae Orbis Partis Nova Et Exactissima Descriptio. [<a href="https://www.loc.gov/item/map49000970/">Library of Congress</a>].</cite>
     <figcaption>Gutiérrez and Cock 1562 map of the Americas "vlterius hec terra incognita permansit": we're trying to explore connected, but new spaces.</figcaption>
   </figure>
 </div>
@@ -62,8 +62,7 @@
 
 ## More on the CAM?
 
-This post only discusses how the CAM compares to the Core Content Model method, for more about the CAM:
-<a href="20180122-content-action-model.html" class="readmore">read the overview of the Content-Action Method for Web Systems</a>
+This post only discusses how the CAM compares to the Core Content Model method, for more about the CAM: <a href="20180122-content-action-model.html" class="readmore">read the overview of the Content-Action Method for Web Systems</a>
 
 {{/markdown}}
 </div>

pages/posts/20180122-content-action-model.html → src/pages/posts/20180122-content-action-model.html

@@ -19,7 +19,7 @@
 
 <div class="grid-x padding-bottom-medium padding-top-large padding-bottom-large">
   <figure class="large-10 medium-8 cell callout"><img class="padding-bottom-medium" src="{{root}}images/original/blog/drill-bits.jpg" />
-    <cite class="text-right">Thanks to Ian D. Keating for the Image of drill bits [CC License](https://www.flickr.com/photos/ian-arlett/16451711088/in/photolist-r4Mjxb-bUwfJz-iHHBQQ-8Qm8QP-b6s3ZV-f2Tnr1-bGJgsD-2X2qoF-huG8Dh-iHDD62-6yUnY2-7bdZGU-7yJa9W-6rtm2J-aoJjP8-MNrMV-e3oT7B-cud5gf-7i7C9Q-o9YGLJ-c6vCxU-7NMBs8-cbHgAh-8jr6t-35Qptr-eUDDyz-7kYWoy-4TLFAu-8WJQPF-REYo4-4xRx4m-7LAXfS-agnLeM-9cADSS-4Nh3Fw-e4vipc-K4dko-bQ3obT-HXgd54-9bTRFU-sRSEx-HUURqw-5egmfz-C8hBS-4mtSKC-c51MTG-q2sPN-7wfWvA-jBf1qU-e4vsmT)</cite>
+    <cite class="text-right">Thanks to Ian D. Keating for the Image of drill bits [<a href="https://www.flickr.com/photos/ian-arlett/16451711088">CC License</a>]</cite>
     <figcaption>Content, IA and UX professionals are spoiled for choice when it comes to tooling. But we need to be clear about which ones are right for the job — and that means distilling our intentions.</figcaption>
   </figure>
 </div>

pages/posts/20180207-discovery-and-analysis.html → src/pages/posts/20180207-discovery-and-analysis.html

@@ -10,18 +10,18 @@
   - CAM for Web Systems, UX
 ---
 
-{{#markdown}}
+
 
 <div class="medium-12 cell padding-top-large">
 <div class="">
 
 <div class="grid-x padding-bottom-medium padding-top-large padding-bottom-large">
   <figure class="large-10 medium-8 cell callout"><img class="padding-bottom-medium" src="{{root}}images/original{{image}}" />
-    <cite class="text-right">Thanks to Flickr user isa for the image [CC License](https://www.flickr.com/photos/58231478@N00/7739966376/in/photolist-cMXmm9-dnCnAR-gCeoGe-8RDsaq-2WNBVU-e6YWLU-3oHPtf-7fBphx-5PVRE3-7iEYKH-4FZBj6-4z69T8-6ZqfCM-4PZris-66Wi3b-66Sakv-3817GD-5bR3Ue-7iEYKV-5JXNf7-aqvyFX-jkxvBw-5pDbDe-heNDMi-oxTcev-pFRR1a-8BCmH4-4nppCB-2rvLWp-4q5wWN-VX5y2-bNsSSP-RXXfVW-i9NfFJ-7Em9s2-bBUUpk-8vZQkH-dizdjM-PEtcT-6FP3GA-jEhzjs-9bBFio-HQK7vZ-qS7w32-o11JCU-a6oCjb-4ge1LY-6SZyGk-9YY9wQ-ndpGqY)</cite>
+    <cite class="text-right">Thanks to Flickr user isa for the image [<a href="https://www.flickr.com/photos/58231478@N00/7739966376/">CC License</a>]</cite>
     <figcaption>Three options, but which does a user want? Maybe they don't want any of the three.</figcaption>
   </figure>
 </div>
-
+{{#markdown}}
 {{#date}}{{this.date}}{{/date}} &nbsp; &nbsp;
 
 <div class="grid-x">

partials/footer.html → src/partials/footer.html

@@ -1,6 +1,6 @@
 <hr class="margin-top-xlarge" />
 {{#ifequal 'blog' active_path}}
-<p><a href="{{root}}blog" class=""><span class="emoji">⬅️</span> There's more to read on blog overview</a></p>
+<p><a href="{{root}}blog" class=""><span class="emoji">⬅️</span> There's more to read on the blog overview</a></p>
 <hr/>
 {{/ifequal}}
 <div class="grid-x grid-padding-x padding-bottom-xlarge">