TheThomaas/my-online-cookbook
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update recipe page template

Browse source
This commit is contained in:
TheThomaas 2025-12-24 22:16:38 +01:00
parent d786f02c9a
commit 29140453e8
1 changed files with 37 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/_includes/layouts/recipe-cook.njk
View file

@ -13,15 +13,29 @@
</div> </div>
{% set ingredientsArray = [] %} {% set ingredientsArray = [] %}
{% for ingredient in ingredients %} {% for ingredient in ingredients %}
{% set value = [ingredient.quantity, ingredient.units, " ", ingredient.name] | join %} {% 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) %} {% set ingredientsArray = (ingredientsArray.push(value), ingredientsArray) %}
{% endfor %} {% endfor %}
<div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredientsArray | arrayToString }}").split("£") }'> <div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredientsArray | arrayToString }}").split("£") }'>
<!-- <div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredients | arrayToString }}").split("£") }'> -->
{% if time or not servings == "" %} {% if time or not servings == "" %}
<div class="c-recipe__additional-info"> <div class="c-recipe__additional-info">
{% if time %} {% if time %}
<p>{% include "icons/time.svg" %}{{ time }}</p> {% 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 %} {% endif %}
{% if not servings == "" %} {% if not servings == "" %}
<p> <p>
@ -62,38 +76,39 @@
<h3>Cookware</h3> <h3>Cookware</h3>
<ul class="c-recipe__ingredients-list"> <ul class="c-recipe__ingredients-list">
{% for ingredient in cookware %} {% for ingredient in cookware %}
<li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }}</span></label></li> {% 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 %} {% endfor %}
</ul> </ul>
</div> </div>
<div class="c-recipe__instructions-wrapper u-free-text"> <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('|') %} {% set notesArr = notes.split('|') %}
{% if notesArr.length > 1 %} {% if notesArr.length > 1 %}
<h3>Notes</h3>
<aside class="alert"> <aside class="alert">
{%- for note in notesArr -%} {%- for note in notesArr -%}
{{ note | safe }}<br> {{ note | safe }}<br>
{%- endfor -%} {%- endfor -%}
</aside> </aside>
{% endif %} {% endif %}
<!-- {% if notes.length > 1 %}
<aside class="alert">
{%- for note in notes -%}
{{ note | safe }}
{%- endfor -%}
</aside>
{% endif %} -->
<!-- {{ content | safe }} -->
{% for step in steps %}
<p>
{% for stepDetail in step %}{{ stepDetail | safe }}{% endfor %}
</p>
{% endfor %}
<!-- {% for step in steps %}
<p>
{% for stepDetail in step %}{{ stepDetail.value | safe }}{{ stepDetail.name | safe }}{% endfor %}
</p>
{% endfor %} -->
{% if source %} {% if source %}
<p><a href="{{ source }}" target="_blank" rel="noopener">Source</a></p> <p><a href="{{ source }}" target="_blank" rel="noopener">Source</a></p>
{% endif %} {% endif %}