126 lines
6.8 KiB
Plaintext
126 lines
6.8 KiB
Plaintext
{% extends 'layouts/base.njk' %}
|
|
|
|
{% block content %}
|
|
{% recipeimage image, "c-recipe__header-image", title, "100vw" %}
|
|
<h1 class="c-recipe__title">{{ title }}</h1>
|
|
<section>
|
|
<div class="l-container">
|
|
<div class="c-recipe__recipe-content-wrapper">
|
|
<div class="c-recipe__tag-list">
|
|
{% for tag in tags %}
|
|
<a class="c-tags__tag" href="/tags/{{ tag | noEmoji | slug }}">{{ tag }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% set ingredientsArray = [] %}
|
|
{% for ingredient in ingredients %}
|
|
{% set notes = "" %}
|
|
{% if ingredient.note %}
|
|
{% set notes = [" (", ingredient.note, ")"] | join %}
|
|
{% endif %}
|
|
{% set value = [ingredient.quantity.value.value.value, ingredient.quantity.unit, " ", ingredient.name, notes] | join %}
|
|
{% set ingredientsArray = (ingredientsArray.push(value), ingredientsArray) %}
|
|
{% endfor %}
|
|
<div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredientsArray | arrayToString }}").split("£") }'>
|
|
{% if time or not servings == "" %}
|
|
<div class="c-recipe__additional-info">
|
|
{% if time %}
|
|
{% if time.prep %}
|
|
<p>{% include "icons/time.svg" %}Prep: {{ time.prep }}</p>
|
|
{% endif %}
|
|
{% if time.cook %}
|
|
<p>{% include "icons/time.svg" %}Cook: {{ time.cook }}</p>
|
|
{% endif %}
|
|
{% if not time.cook and not time.prep %}
|
|
<p>{% include "icons/time.svg" %}Total: {{ time }}</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if duration %}
|
|
<p>{% include "icons/time.svg" %}Total: {{ duration }}</p>
|
|
{% endif %}
|
|
{% if not servings == "" %}
|
|
<p>
|
|
<template x-if="currentServings > 1">
|
|
<button @click="currentServings -= 1" class="c-recipe__serving-button">
|
|
-
|
|
<span class="u-sr-only">Remove 1 serving</span>
|
|
</button>
|
|
</template>
|
|
<span x-text="currentServings"></span>
|
|
<button @click="currentServings += 1" class="c-recipe__serving-button">
|
|
+
|
|
<span class="u-sr-only">Add 1 serving</span>
|
|
</button>
|
|
<span>{{ site.servingsLabel }}</span>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h3>{{ site.ingredientsLabel }}</h3>
|
|
<template x-if="currentServings">
|
|
<ul class="c-recipe__ingredients-list">
|
|
<template x-for="(ingredient, index) in ingredients" :key="index">
|
|
<li><label><input type="checkbox"><span x-text="adaptQuantity(ingredient, {{servings}}, currentServings)"></span></label></li>
|
|
</template>
|
|
</ul>
|
|
</template>
|
|
|
|
<template x-if="!currentServings">
|
|
<ul class="c-recipe__ingredients-list">
|
|
{% for ingredient in ingredients %}
|
|
<li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }}</span></label></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</template>
|
|
|
|
<h3>Cookware</h3>
|
|
<ul class="c-recipe__ingredients-list">
|
|
{% for ingredient in cookware %}
|
|
{% set notes = "" %}
|
|
{% if ingredient.note %}
|
|
{% set notes = [" (", ingredient.note, ")"] | join %}
|
|
{% endif %}
|
|
<li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }} {{notes}}</span></label></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="c-recipe__instructions-wrapper u-free-text">
|
|
{% for section in sections %}
|
|
{% if section.title %}
|
|
<h3>{{ section.title.content }}</h3>
|
|
{% endif %}
|
|
<ol>
|
|
{% for steps in section.content %}
|
|
<li>
|
|
{% for items in steps %}{% if items.type == "ingredient" %}{% if items.reference %}<a href="../{{ items.reference.components | join("/") }}/{{ items.reference.name }}" target="_blank">{{items.content}}</a>{% else %}{{items.content}}{% endif %} ({{items.quantity.value.value.value}}{% if items.quantity.unit %} {{items.quantity.unit}}{% endif %}){% else %}{{items.content}}{% endif %}{% endfor %}
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
{% endfor %}
|
|
|
|
{% set notesArr = notes.split('|') %}
|
|
{% if notesArr.length > 1 %}
|
|
<h3>Notes</h3>
|
|
<aside class="alert">
|
|
{%- for note in notesArr -%}
|
|
{{ note | safe }}<br>
|
|
{%- endfor -%}
|
|
</aside>
|
|
{% endif %}
|
|
|
|
{% if source %}
|
|
<p><a href="{{ source }}" target="_blank" rel="noopener">Source</a></p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function adaptQuantity (ingredient, originalServings, currentServings) {
|
|
return ingredient.replace(/(\d|\.|,)+/, match => Number(Math.round(parseFloat(match.replace(',', '.')) * currentServings / originalServings + 'e' + 2) + 'e-' + 2));
|
|
}
|
|
</script>
|
|
|
|
{% endblock %} |