Add timings

As implemented in clarklab/chowdown#39, extended to include total and
active time.

_includes/timings.html

@@ -0,0 +1,35 @@
+{% assign thisRecipe = include.recipe %}
+<div class="center ml2 mr2">
+  {% if thisRecipe.preptime %}
+  <div class="inline-block xs-m1 sm-m2">
+    <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+    <span class="blue caps align-middle">Prep</span>
+    <span class="nowrap align-middle" id="prepTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.preptime | upcase }}"></span>
+  </div>
+  <meta itemprop="prepTime" content="{{ thisRecipe.preptime | upcase }}">
+  {% endif %}
+  {% if thisRecipe.cooktime %}
+  <div class="inline-block xs-m1 sm-m2">
+    <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+    <span class="h4 blue caps align-middle">Cook</span>
+    <span class="nowrap align-middle" id="cookTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.cooktime | upcase }}"></span>
+  </div>
+  <meta itemprop="cookTime" content="{{ thisRecipe.cooktime | upcase }}">
+  {% endif %}
+  {% if thisRecipe.totaltime %}
+  <div class="inline-block xs-m1 sm-m2">
+    <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+    <span class="h4 blue caps align-middle">Total</span>
+    <span class="nowrap align-middle" id="totalTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.totaltime | upcase }}"></span>
+  </div>
+  <meta itemprop="totalTime" content="{{ thisRecipe.totaltime | upcase }}">
+  {% endif %}
+  {% if thisRecipe.activetime %}
+  <div class="inline-block xs-m1 sm-m2">
+    <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+    <span class="h4 blue caps align-middle">Active</span>
+    <span class="nowrap align-middle" id="activeTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.activetime | upcase }}"></span>
+  </div>
+  {% endif %}
+</div>
+{% assign thisRecipe = nil %}

_layouts/recipe.html

@@ -22,6 +22,7 @@
 <!-- call up the main recipe title and content -->
   <header class="post-header">
     <h1 class="post-title center m1 sm-mt3" itemprop="name">{{ page.title }}</h1>
+    {% include timings.html recipe=page %}
   </header>
 
   <div class="px2 mt3 clearfix">
@@ -100,6 +101,8 @@ <h4 class="blue center">{{recipe.title}}</h4>
         {% endif %}
       {% endfor %}
 
+      {% include timings.html recipe=recipe %}
+
       <h4 class="blue regular xs-center">{{ site.translation[site.language].ingredients }}</h4>
         <ul class="ingredients" itemprop="ingredients">
         {% for item in recipe.ingredients %}
@@ -157,3 +160,4 @@ <h4 class="blue regular xs-center">{{ site.translation[site.language].directions
   });
 
 </script>
+<script src="/js/duration.js" charset="utf-8"></script>

_recipes/banana-bread.md

@@ -5,6 +5,10 @@ title:  "Banana Bread"
 image: banana-bread.jpg
 tags: baking
 
+preptime: PT20m
+cooktime: PT60m
+totaltime: PT90m
+
 ingredients:
 - 250g flour (sieved)
 - 1 teaspoon natron

_recipes/chef-johns-dutch-baby.md

@@ -5,6 +5,10 @@ title:  "Chef John's Dutch Baby"
 image: dutch-baby.jpg
 tags: baking, dessert
 
+preptime: PT10m
+cooktime: PT20m
+totaltime: PT30m
+
 ingredients:
 - 2/3 cup milk, room temp
 - 1/2 cup packed flour

_recipes/kaiserschmarrn.md

@@ -5,6 +5,10 @@ title:  "Kaiserschmarrn"
 image: kaiserschmarrn.jpg
 tags: dessert
 
+preptime: PT10m
+cooktime: PT15m
+totaltime: PT30m
+
 ingredients:
 - 200g flour
 - 250ml milk
@@ -19,7 +23,7 @@ ingredients:
 directions:
 - Preheaet the oven to 200°C.
 - Separate the eggs and whip up the egg whites with 20g sugar.
-- Whisk together the egg yolks with another 20g and the lemon test until creamy.
+- Whisk together the egg yolks with another 20g and the lemon zest until creamy.
 - Mix the flour with the baking powder and then add milk and egg yolks. It should become a viscous batter. Add the oil and then carefully heave the whipped egg whites under.
 - Heat up a skillet on the stove, add butter. Pour in the batter, ca 2-3cm high. Bake in the oven for 4-5min or until golden brown.
 - Return to the stove, flip (it's easier if you cut it in half first). With two spoons rip into pieces.

_recipes/risotto-milanese.md

@@ -5,6 +5,11 @@ title:  "Risotto Milanese"
 image: risotto-milanese.jpg
 tags: dessert
 
+preptime: PT5m
+cooktime: PT25m
+totaltime: PT30m
+activetime: PT30m
+
 ingredients:
 - 50g unsalted butter
 - 1-2 onions (white or red, both work)

_recipes/soft-cheese-bread.md

@@ -5,6 +5,11 @@ title:  "Soft Cheese Bread"
 image: soft-cheese-bread.jpg
 tags: baking
 
+preptime: PT25m
+cooktime: PT45m
+totaltime: PT3h10m
+activetime: PT25m
+
 ingredients:
 - 120ml buttermilk
 - 80ml water

_recipes/yogurt-bread.md

@@ -5,6 +5,10 @@ title:  "Yogurt Bread"
 image: yogurt-bread.jpg
 tags: breakfast, baking, bread
 
+activetime: PT30min
+cooktime: PT45m
+totaltime: PT26h
+
 ingredients:
 - 565g wheat flour (wheat 550, "bread flour" should work)
 - 140g cold water

css/main.scss

@@ -51,3 +51,4 @@ a:hover .image{opacity:0.2;}
 .border-1 { border-width: 1px; }
 .border-1:active { border-width: 1px; }
 .capitalize { text-transform: capitalize; }
+.align-middle { vertical-align: middle; } // imported from basscss 8

js/duration.js

@@ -0,0 +1,52 @@
+let en_GB = {
+    map: {Y: 'yr', B: 'mth', W: 'wk', D: 'day', H: 'hr', M: 'min', S: 'sec'},
+    counted: function(i, c){
+      res = this.map[i];
+      if(c > 1) { res += 's' }
+      return res;
+    }
+  };
+
+function Duration(el) {
+  this.element = document.getElementById(el);
+  this.lang = en_GB;
+  this.result = { Y: 0, B: 0, W: 0, D: 0, H: 0, M: 0, S: 0 };
+  this._rex = /(\d+(?:\.\d+)?)([YBWDHMS])/ig;
+  this.parts = function () {
+    let iso8601 = this.element.dataset.iso8601;
+    let parts = iso8601.substr(1).replace(/M(.*?)T/, 'B$1');
+    parts.match(this._rex).forEach((p) => {
+      let scale = p.substring(0, p.length - 1);
+      let unit = p.substring(p.length - 1).toUpperCase();
+      this.result[unit] = Number(scale);
+    });
+    return this.result;
+  };
+  this.format = function () {
+    const nonZero = (v) => v > 0;
+    let words = [];
+    let parts = this.parts();
+    for (var p in parts) {
+      if (parts.hasOwnProperty(p) && nonZero(parts[p])) {
+        words.push(`${parts[p]} ${this.lang.counted(p, parts[p])}`);
+      }
+    }
+    return words.join(' ');
+  };
+  this.update = function () {
+    this.element.innerHTML = this.format();
+  };
+}
+
+/*
+  Update the page either via object calls passing in the dom ID:
+    new Duration('prepTime').update();
+    new Duration('cookTime').update();
+  or use jquery to find them:
+    $('*[data-iso8601]').each(function (){
+      new Duration(this.id).update();
+    });
+*/
+$('*[data-iso8601]').each(function (){
+  new Duration(this.id).update();
+});