Allow nested ingredients / directions in groups

_layouts/recipe.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 <div class="container" itemscope itemtype="http://schema.org/Recipe">
- 
+
 <!-- call up the image and image credit link -->
  {% for image in page.image %}
  <div class="xs-p2">
@@ -27,10 +27,10 @@ <h1 class="post-title center m1 sm-mt3" itemprop="name">{{ page.title }}</h1>
  <div class="px2 mt3 clearfix">
  <div class="sm-col-8 center mx-auto" itemprop="description">{{page.content}}</div>
  </div>
- 
+
 <!-- call up recipe and directions -->
  <div class="clearfix mt3">
- 
+
  <div class="sm-col sm-col-6 lg-col-6">
  <!-- check if it's a component-based recipe -->
  {% if page.components %}
@@ -48,38 +48,56 @@ <h4 class="blue mt0 mb2 xs-center">Ingredients</h4>
  <ul itemprop="ingredients">
  <!-- list ingredients that make up recipe -->
  {% for ingredient in page.ingredients %}
- <li itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
+ {% if ingredient.first %}
+ <h4>{{ ingredient.first[0] }}</h4>
+ <ul itemprop="recipeIngredientGroup">
+ {% for i in ingredient.first[1] %}
+ <li itemprop="recipeIngredient">{{ i | markdownify }}</li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ <li itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
+ {% endif %}
  {% endfor %}
  </ul>
  {% endif %}
  </div>
- 
+
  <div class="sm-col sm-col-6 lg-col-6">
  <h4 class="blue mt0 mb2 xs-center">Directions</h4>
  <ul itemprop="recipeInstructions">
  {% for direction in page.directions %}
- <li>{{ direction | markdownify }}</li>
+ {% if direction.first %}
+ <h4>{{ direction.first[0] }}</h4>
+ <ul itemprop="instructionGroup">
+ {% for d in direction.first[1] %}
+ <li itemprop="instruction">{{ d | markdownify }}</li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ <li itemprop="instruction">{{ direction | markdownify }}</li>
+ {% endif %}
  {% endfor %}
  </ul>
  </div>
- 
+
  </div>
 <!-- end recipe and directions -->
 
 <!-- check if it's a component-based recipe, render it -->
  {% if page.components %}
- 
+
  <div class="components bg-darken-2 p2 mt3 mb3 center">
  &darr; This is a <strong class="blue">component-based recipe</strong> (fancy talk for making the dish in pieces, then assembling). &darr;
  </div>
- 
+
  <div class="clearfix mxn2">
  {% for component in page.components %}
  <div class="sm-col sm-col-4 px2">
  {% for recipe in site.components %}
  {% if recipe.title == component %}
  <h4 class="blue center">{{recipe.title}}</h4>
- 
+
  {% for image in recipe.image %}
  <div class="image ratio bg-cover" style="background-image:url({{site.baseurl}}/images/{{ image }});">
  <img class="hide" itemprop="photo" src="{{site.baseurl}}/images/{{ image }}" />
@@ -92,30 +110,48 @@ <h4 class="blue center">{{recipe.title}}</h4>
  {% endfor %}
  {% endif %}
  {% endfor %}
- 
+
  <h4 class="blue regular xs-center">Ingredients</h4>
  <ul class="ingredients" itemprop="ingredients">
- {% for item in recipe.ingredients %}
- <li itemprop="ingredient">{{ item | markdownify }}</li>
- {% endfor %}
+ {% for ingredient in recipe.ingredients %}
+ {% if ingredient.first %}
+ <h4>{{ ingredient.first[0] }}</h4>
+ <ul itemprop="recipeIngredientGroup">
+ {% for i in ingredient.first[1] %}
+ <li itemprop="recipeIngredient">{{ i | markdownify }}</li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ <li itemprop="recipeIngredient">{{ ingredient | markdownify }}</li>
+ {% endif %}
+ {% endfor %}
  </ul>
- 
+
  <h4 class="blue regular xs-center">Steps</h4>
  <ul itemprop="instructions">
- {% for item in recipe.directions %}
- <li>{{ item | markdownify }}</li>
+ {% for direction in recipe.directions %}
+ {% if direction.first %}
+ <h4>{{ direction.first[0] }}</h4>
+ <ul itemprop="instructionGroup">
+ {% for d in direction.first[1] %}
+ <li itemprop="instruction">{{ d | markdownify }}</li>
+ {% endfor %}
+ </ul>
+ {% else %}
+ <li itemprop="instruction">{{ direction | markdownify }}</li>
+ {% endif %}
  {% endfor %}
  </ul>
- 
+
  {% endif %}
  {% endfor %}
  </div>
  {% endfor %}
  </div>
- 
+
  {% endif %}
 <!-- end components -->
- 
+
  {% for category in page.categories %}
  <p class="clearfix">Category: <span itemprop="recipeCategory">{{ category }}</span></p>
  {% endfor %}
@@ -148,5 +184,5 @@ <h4 class="blue regular xs-center">Steps</h4>
  });
 
  });
- 
-</script>
+
+</script>