Info tags

_data/diets.yml

@@ -0,0 +1,34 @@
+# See https://schema.org/RestrictedDiet#enumbers
+DiabeticDiet:
+  name: diabetic
+  description: A diet appropriate for people with diabetes.
+GlutenFreeDiet:
+  name: gluten free
+  description: A diet exclusive of gluten.
+HalalDiet:
+  name: halal
+  description: A diet conforming to Islamic dietary practices.
+HinduDiet:
+  name: hindu
+  description: A diet conforming to Hindu dietary practices, in particular, beef-free.
+KosherDiet:
+  name: kosher
+  description: A diet conforming to Jewish dietary practices.
+LowCalorieDiet:
+  name: low-calorie
+  description: A diet focused on reduced calorie intake.
+LowFatDiet:
+  name: low-fat
+  description: A diet focused on reduced fat and cholesterol intake.
+LowLactoseDiet:
+  name: low-lactose
+  description: A diet appropriate for people with lactose intolerance.
+LowSaltDiet:
+  name: low-salt
+  description: A diet focused on reduced sodium intake.
+VeganDiet:
+  name: vegan
+  description: A diet exclusive of all animal products.
+VegetarianDiet:
+  name: vegetarian
+  description: A diet exclusive of animal meat.

_includes/course.html

@@ -0,0 +1,12 @@
+{% for course in include.courses %}
+{% unless course == empty %}
+<span title="Course" class="button button-outline h5 bg-gray white border-1 mb1 capitalize nowrap" itemprop="recipeCategory" data-tag-type="course" data-tag-name="{{ course }}">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="14" height="14" fill="currentColor">
+    <path d="M471 257a214 214 0 00-429 0h429z"/>
+    <circle cx="256.4" cy="30.2" r="28"/>
+    <path d="M498 304H15c-7 0-13-6-13-13v-5c0-8 6-14 13-14h483c7 0 13 6 13 14v5c0 7-6 13-13 13zM0 365l73-15 27 136L0 507zM86 352l63-23 112-5c7-1 14 4 15 12 1 7-3 14-11 16l-74 20 91 5 106-41c7-3 15 0 18 7 4 6 2 15-4 19l-120 77-152-1-23 22-21-108z"/>
+  </svg>
+  <a href="/courses.html#{{ course }}" class="white" rel="tag">{{ course }}</a>
+</span>
+{% endunless %}
+{% endfor %}

_includes/cuisine.html

@@ -0,0 +1,10 @@
+{% if include.cuisines %}
+{% for cuisine in include.cuisines %}
+<span title="Cuisine" class="button button-outline h5 bg-gray white border-1 mb1 capitalize nowrap" itemprop="recipeCuisine" data-tag-type="cuisine" data-tag-name="{{ cuisine }}">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512" fill="currentColor">
+    <path d="M89 421h334v91H89zM408 49c-20 0-39 6-56 16a104 104 0 00-192 0 104 104 0 10-71 191v135h334V256a104 104 0 00-15-207z"/>
+  </svg>
+  <a href="/cuisines.html#{{ cuisine }}" class="white" rel="tag">{{ cuisine }}</a>
+</span>
+{% endfor %}
+{% endif %}

_includes/diet.html

@@ -0,0 +1,13 @@
+{% for diet in include.diets %}
+{% unless diet == empty %}
+{% assign itemprop = diet | append:"Diet" %}
+{% assign name = site.data.diets[itemprop].name %}
+<span title="Diet" class="button button-outline h5 bg-gray white border-1 mb1 capitalize nowrap" data-tag-type="diet" data-tag-name="{{ diet }}"><link itemprop="suitableForDiet" href="http://schema.org/{{ itemprop }}"/>
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512" fill="currentColor">
+    <path d="M502 108c-12-58-32-98-32-99-4-7-12-11-19-8a471 471 0 00-175 116 326 326 0 0142 72c10 23 16 47 20 72l67-162a15 15 0 0128 11l-91 221a462 462 0 01-34 161 525 525 0 00122-89c27-28 47-58 61-91 13-32 20-68 21-107 1-31-3-64-10-97zm0 0"/>
+    <path d="M291 201c-6-14-14-29-22-42A472 472 0 0056 0c-6 0-11 3-14 9A485 485 0 000 205c1 39 8 75 21 107 14 33 34 63 61 91a507 507 0 00162 107L95 147a15 15 0 1128-11l150 362c7-16 24-58 34-112 12-70 7-132-15-185zm0 0"/>
+  </svg>
+  <a href="/diets.html#{{ name }}" class="white" rel="tag">{{ name }}</a>
+</span>
+{% endunless %}
+{% endfor %}

_includes/nutritional-information.html

@@ -6,13 +6,13 @@ <h4 class="blue mt0 mb2 xs-center">Nutritional Information
 {% endif %}</h4>
 <div class="flex flex-wrap" itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
 {% assign nutrients = page.nutrition %}
-{% for nutrient in nutrients  %}
+{% for nutrient in nutrients %}
   {% if nutrient.first == 'servingSize' %}{% continue %}{% endif %}
   {% assign itemprop = nutrient.first %}
   {% assign name = site.data.nutrients[itemprop].name %}
   {% assign value = nutrient.last %}
   {% assign unit = site.data.nutrients[itemprop].unit %}
-  <div  class="rounded center border border-1 border-gray sm-col sm-col-2 lg-col-1 mr1 mb1">
+  <div  class="rounded center border border-1 border-gray sm-col sm-col-2 lg-col-2 mr1 mb1">
     <h5 class="bg-gray white m0 p1 capitalize">{{ name  }}</h5>
     <p itemprop="{{ itemprop }}">{{ value }}{{ unit }}</p>
   </div>

_includes/tag-navigation.html

@@ -0,0 +1,9 @@
+{% assign current = page.url | split:'.' %}
+{% assign current = current[0] %}
+<nav class="mt4">
+  Browse by
+  <a href="/diets.html" class="button button-transparent {% if current == '/diets' %}is-active{% endif %}">Diet</a>
+  <a href="/courses.html" class="button button-transparent {% if current == '/courses' %}is-active{% endif %}">Course</a>
+  <a href="/cuisines.html" class="button button-transparent {% if current == '/cuisines' %}is-active{% endif %}">Cuisine</a>
+  <a href="/tags.html" class="button button-transparent {% if current == '/tags' %}is-active{% endif %}">Tag</a>
+</nav>

_includes/tag.html

@@ -0,0 +1,12 @@
+{% if include.tags %}
+<span itemprop="keywords">
+{% for tag in include.tags %}
+  <div title="{{ tag }}" class="button button-outline h5 bg-gray white border-1 mb1 capitalize nowrap" data-tag-type="tag" data-tag-name="{{ tag }}">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="currentColor">
+      <path d="M469 501c17-1 31-15 32-33l8-177c1-9-3-19-9-26L247 13a35 35 0 00-49 0L13 198a34 34 0 000 49l252 253c7 6 17 10 26 10l178-9zm-90-65a41 41 0 1158-57 41 41 0 01-58 57z"/>
+    </svg>
+    <a href="/tags.html#{{ tag }}" rel="tag" class="white">{{ tag }}</a>
+  </div>
+{% endfor %}
+</span>
+{% endif %}

_layouts/recipe.html

@@ -29,12 +29,20 @@ <h1 class="post-title center m1 sm-mt3" itemprop="name">{{ page.title }}</h1>
   </div>
 
   <div class="mt3 clearfix">
-    <div class="sm-col sm-col-12 lg-col-12">
+    <div class="sm-col sm-col-6 lg-col-6">
       {% include nutritional-information.html %}
     </div>
+    <div class="sm-col sm-col-6 lg-col-6 mt3">
+      <div class="flex-wrap">
+        {% include cuisine.html cuisines=page.cuisines %}
+        {% include course.html courses=page.courses %}
+        {% include diet.html diets=page.diets %}
+        {% include tag.html tags=page.tags %}
+      </div>
+    </div>
   </div>
 
-  <!-- call up recipe and directions -->
+<!-- call up recipe and directions -->
   <div class="clearfix mt3">
 
     <div class="sm-col sm-col-6 lg-col-6">
@@ -123,10 +131,6 @@ <h4 class="blue regular xs-center">{{ site.translation[site.language].directions
   {% endif %}
 <!-- end components -->
 
-  {% for category in page.categories %}
-    <p class="clearfix">{{ site.translation[site.language].category }}: <span itemprop="recipeCategory">{{ category }}</span></p>
-  {% endfor %}
-
   </article>
 
 </div>

courses.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+{% assign allTags = "" %}
+{% for recipe in site.recipes %}
+{% if recipe.courses and recipe.courses != empty %}
+{% assign thisTags = recipe.courses | join:'|' | append:'|' %}
+{% assign allTags = allTags | append:thisTags %}
+{% endif %}
+{% endfor %}
+{% assign allTags = allTags | split:'|' | sort | uniq %}
+
+<div class="container">
+  <article class="post-content px2">
+    {% include tag-navigation.html %}
+    <h1>Courses</h1>
+    {% include course.html courses=allTags %}
+
+    <div class="clearfix">
+      {% unless allTags[0] %}
+      <p>No recipes are marked as being for a specific course.</p>
+      {% endunless %}
+
+      {% for course in allTags %}
+      <div data-tagged="{{ course }}">
+        <h2><a name="{{ course | downcase }}"></a>{{ course }}</h2>
+        {% for recipe in site.recipes %}
+        {% if recipe.courses contains course %}
+        <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
+          <a class="block relative bg-blue" href="{{ recipe.url | prepend: site.baseurl }}">
+            <div class="image ratio bg-cover"{% for image in recipe.image %} style="background-image:url({{recipe.baseurl}}/images/{{ image }});"{% endfor %}></div>
+            <h4 class="title p2 m0 absolute bold white bottom-0 left-0">{{ recipe.title }}</h4>
+          </a>
+        </div>
+        {% endif %}
+        {% endfor %}
+      </div>
+      {% endfor %}
+    </div>
+  </article>
+</div>
+
+<script src="/js/tag-browse.js" charset="utf-8" defer></script>

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; }
+.nowrap { white-space: nowrap; }

cuisines.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+{% assign allTags = "" %}
+{% for recipe in site.recipes %}
+{% if recipe.cuisines and recipe.cuisines != empty %}
+{% assign thisTags = recipe.cuisines | join:'|' | append:'|' %}
+{% assign allTags = allTags | append:thisTags %}
+{% endif %}
+{% endfor %}
+{% assign allTags = allTags | split:'|' | sort | uniq %}
+
+<div class="container">
+  <article class="post-content px2">
+    {% include tag-navigation.html %}
+    <h1>Cuisines</h1>
+    {% include cuisine.html cuisines=allTags %}
+
+    <div class="clearfix">
+      {% unless allTags[0] %}
+      <p>No recipes are marked as being for a specific cuisine.</p>
+      {% endunless %}
+
+      {% for cuisine in allTags %}
+      <div data-tagged="{{ cuisine }}">
+        <h2><a name="{{ cuisine | downcase }}"></a>{{ cuisine | capitalize }}</h2>
+        {% for recipe in site.recipes %}
+        {% if recipe.cuisines contains cuisine %}
+        <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
+            <a class="block relative bg-blue" href="{{ recipe.url | prepend: site.baseurl }}">
+              <div class="image ratio bg-cover"{% for image in recipe.image %} style="background-image:url({{recipe.baseurl}}/images/{{ image }});"{% endfor %}></div>
+              <h4 class="title p2 m0 absolute bold white bottom-0 left-0">{{ recipe.title }}</h4>
+            </a>
+        </div>
+        {% endif %}
+        {% endfor %}
+      </div>
+      {% endfor %}
+    </div>
+  </article>
+</div>
+
+<script src="/js/tag-browse.js" charset="utf-8" defer></script>

diets.html

@@ -0,0 +1,46 @@
+---
+layout: default
+---
+
+{% assign allTags = "" %}
+{% for recipe in site.recipes %}
+{% if recipe.diets and recipe.diets != empty %}
+{% assign thisTags = recipe.diets | join:'|' | append:'|' %}
+{% assign allTags = allTags | append:thisTags %}
+{% endif %}
+{% endfor %}
+{% assign allTags = allTags | split:'|' | sort | uniq %}
+
+<div class="container">
+  <article class="post-content px2">
+    {% include tag-navigation.html %}
+    <h1>Diets</h1>
+    {% include diet.html diets=allTags %}
+
+    <div class="clearfix">
+      {% unless allTags[0] %}
+      <p>No recipes are marked as being for a specific diet.</p>
+      {% endunless %}
+
+      {% for diet in allTags %}
+      <div data-tagged="{{ diet }}">
+        {% assign dietKey = diet | append:"Diet" %}
+        <h2 class="capitalize"><a name="{{ diet | downcase }}"></a>{{ site.data.diets[dietKey].name }}
+        <sup class="h5" style="cursor: help; text-transform: none;" title="{{ site.data.diets[dietKey].description }}">&#9432;</sup></h2>
+        {% for recipe in site.recipes %}
+        {% if recipe.diets contains diet %}
+        <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
+          <a class="block relative bg-blue" href="{{ recipe.url | prepend: site.baseurl }}">
+            <div class="image ratio bg-cover"{% for image in recipe.image %} style="background-image:url({{recipe.baseurl}}/images/{{ image }});"{% endfor %}></div>
+            <h4 class="title p2 m0 absolute bold white bottom-0 left-0">{{ recipe.title }}</h4>
+          </a>
+        </div>
+        {% endif %}
+        {% endfor %}
+      </div>
+      {% endfor %}
+    </div>
+  </article>
+</div>
+
+<script src="/js/tag-browse.js" charset="utf-8" defer></script>

feed.xml

@@ -20,8 +20,8 @@ layout: null
         {% for tag in post.tags %}
         <category>{{ tag | xml_escape }}</category>
         {% endfor %}
-        {% for cat in post.categories %}
-        <category>{{ cat | xml_escape }}</category>
+        {% for course in post.courses %}
+        <category>{{ course | xml_escape }}</category>
         {% endfor %}
       </item>
     {% endfor %}

js/tag-browse.js

@@ -0,0 +1,16 @@
+$('div[data-tagged]').hide();
+
+$('[data-tag-name]').click(function(){
+  let tag_name = $(this).data('tag-name');
+  $('div[data-tagged]').hide();
+  $('[data-tag-name]').removeClass('bg-blue').addClass('bg-gray');
+
+  let $el = $('div[data-tagged="'+tag_name+'"]');
+  $(this).addClass('bg-blue').removeClass('bg-gray');
+  $el.show();
+});
+
+if (window.location.hash.length > 1) {
+  let $el = $('[data-tag-name="'+window.location.hash.substring(1)+'"]');
+  $el.trigger('click');
+};

search.json

@@ -3,14 +3,16 @@
 [
   {% for post in site.recipes %}
     {
-    
+
 	    "title"    : "{{ post.title | escape }}",
       {% if post.ingredients %}"ingredients"    : "{% for ingredient in post.ingredients %}{{ ingredient | escape }}, {% endfor %}",{% endif %}
       {% if post.tags %}"tags"    : "{% for tag in post.tags %}{{ tag | escape }} {% endfor %}",{% endif %}
+      {% if post.cuisines %}"cuisines"    : "{% for cuisines in post.cuisines %}{{ cuisine | escape }} {% endfor %}",{% endif %}
+      {% if post.diets %}"diets"       : "{% for diet in post.diets %}{{ diet | escape }} {% endfor %}",{% endif %}
+      {% if post.courses %}"courses"  : "{% for course in post.courses %}{{ course | escape }} {% endfor %}",{% endif %}
       "image"	   : "{{ site.baseurl }}/images/{{ post.image }}",
 	    "url"      : "{{ site.baseurl }}{{ post.url }}"
-      
+
     } {% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]
-

tags.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+{% assign allTags = "" %}
+{% for recipe in site.recipes %}
+{% if recipe.tags and recipe.tags != empty %}
+{% assign thisTags = recipe.tags | join:'|' | append:'|' %}
+{% assign allTags = allTags | append:thisTags %}
+{% endif %}
+{% endfor %}
+{% assign allTags = allTags | split:'|' | sort | uniq %}
+
+<div class="container">
+  <article class="post-content px2">
+    {% include tag-navigation.html %}
+    <h1>Tags</h1>
+    {% include tag.html tags=allTags %}
+
+    <div class="clearfix">
+      {% unless allTags[0] %}
+      <p>No recipes have any tags yet.</p>
+      {% endunless %}
+
+      {% for tag in allTags %}
+      <div data-tagged="{{ tag }}">
+        <h2><a name="{{ tag | downcase }}"></a>{{ tag }}</h2>
+        {% for recipe in site.recipes %}
+        {% if recipe.tags contains tag %}
+        <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
+            <a class="block relative bg-blue" href="{{ recipe.url | prepend: site.baseurl }}">
+              <div class="image ratio bg-cover"{% for image in recipe.image %} style="background-image:url({{recipe.baseurl}}/images/{{ image }});"{% endfor %}></div>
+              <h4 class="title p2 m0 absolute bold white bottom-0 left-0">{{ recipe.title }}</h4>
+            </a>
+        </div>
+        {% endif %}
+        {% endfor %}
+      </div>
+      {% endfor %}
+    </div>
+  </article>
+</div>
+
+<script src="/js/tag-browse.js" charset="utf-8" defer></script>