Create template for the cooklang recipes

src/_includes/layouts/recipe-cook.njk

@@ -0,0 +1,111 @@
+{% 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 value = [ingredient.quantity, ingredient.units, " ", ingredient.name] | 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("£") }'>
+                <!-- <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 == "" %}
+                        <div class="c-recipe__additional-info">
+                            {% if time %}
+                                <p>{% include "icons/time.svg" %}{{ time }}</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 %}
+                            <li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }}</span></label></li>
+                        {% endfor %}
+                    </ul>
+                </div>
+
+                <div class="c-recipe__instructions-wrapper u-free-text">
+                    {% set notesArr = notes.split('|') %}
+                    {% if notesArr.length > 1 %}
+                        <aside class="alert">
+                            {%- for note in notesArr -%}
+                                {{ note | safe }}<br>
+                            {%- endfor -%}
+                        </aside>
+                    {% 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 %}
+                        <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 %}

src/recipes-cook/recipes-cook.json

@@ -0,0 +1,3 @@
+{
+    "layout": "layouts/recipe-cook"
+}