recipe-pages.liquid

---
pagination:
    data: recipesContentful
    size: 1
    alias: recipe
permalink: "recipe/{{ recipe.title | slug }}/"
tags: "recipe" 
layout: recipe.liquid

renderData:
    title: "{{ recipe.title }}"
    subTitle: "{{ recipe.shortDescription }}"
    thumbnail: "{{ recipe.thumbnail.fields.file.url}}?q=100"
    webTitle: "Festa di Famiglia"
    webTitleSlug: "Festa-di-Famiglia"
---
</br>
{% if recipe.chef != null and recipe.chef != "" %}
<div class="box">
    <b>Chef:</b> {{ recipe.chef }}
</div>
{% endif %}

<div class="box">
    <b>Difficulty:</b>  {% assign handle = recipe.level %}
    {% case handle %}
    {% when 1 %}
    <i class="fas fa-star"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
    {% when 2 %}
    <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="far fa-star"></i>
    {% when 3 %}
    <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
    {% endcase %}
</div>

<div class="box">
     <b>Categories:</b>
    {{ recipe.categories | join: ' , ' }}
</div>

<div class="box">
    <b>Cooking Time:</b> {{ recipe.cookTime }} </br></br> <b>Prep Time:</b> {{ recipe.prepTime }}
</div>

<div class="box">
    <b>Ingredients:</b>
    <div class="content is-normal">
        <ul>
            {%- for ingredients in recipe.ingredients -%}
            <li>{{ingredients}}</li>
            {%- endfor -%}
        </ul>
    </div>
</div>

<div class="box">
    <b>servings:</b> ≈{{ recipe.servings }}
</div>

<div class="box">
    <b>Instructions:</b>
    <div class="content is-normal">
        <ul>
            {%- for instructions in recipe.instructions -%}
            <li>{{instructions}}</li>
            {%- endfor -%}
        </ul>
    </div>
</div>

{% if recipe.chefsComments != null and recipe.chefsComments != "" %}
<div class="box">
    <div class="content is-normal">
        <b>Chef's comments:</b> {{ recipe.chefsComments }}
    </div>
</div>
{% endif %}

{% if recipe.bio != null and recipe.bio != "" %}
<div class="box">
    <div class="content is-normal">
        <b>Recipe bio:</b> {{ recipe.bio }}
    </div>
</div>
{% endif %}