Update recipe page template

_config/eleventy-plugin-cooklang.js

@@ -1,4 +1,4 @@
-import { Recipe, Parser, getImageURL } from '@cooklang/cooklang-ts';
+import { Parser } from '@cooklang/cooklang';
 import fs  from 'fs';
 
 let config = {}
@@ -10,66 +10,65 @@ export default function (eleventyConfig, pluginOptions) {
 
 const cookExtension = {
   getData: async function (inputPath) {
-    const content = fs.readFileSync(inputPath, "utf-8").split("---")[2];
+    const content = fs.readFileSync(inputPath, "utf-8");
 
-    // Parse recipe using cooklang-ts
-    const recipe = new Recipe(content);
+    // Parse recipe using cooklang
+    const parser = new Parser();
+    const recipe = parser.parse(content);
 
-    let steps = [];
-    let ingredients = [];
-    let cookware = [];
-    const recipeTags = recipe?.metadata?.tags?.split(",") || [];
+    let sections = [];
+    let ingredients = recipe.recipe.ingredients || [];
+    let cookware = recipe.recipe.cookware || [];
+    let timers = recipe.recipe.timers || [];
 
-    function getStepTokenHTML(token) {
-      const { quantity, units, name, value, type } = token;
-      let tagContent = "";
+    const metadata = recipe?.metadata || [];
 
-      if (token.type == "timer") {
-        tagContent = `${quantity} ${units}`;
-      } else {
-        tagContent = token.name || token.value;
+    recipe.recipe.sections.forEach((section, i) => {
+      if (!sections[i]) sections[i] = {};
+      if (section.name != null) {
+        sections[i].title = { type: "title", content: section.name };
       }
-
-      if (config.outputHtml) {
-        return `<span class="recipe--${type}">${tagContent}</span>`;
-      } else {
-        return `${tagContent}`;
-      }
-    }
-
-    recipe.steps.forEach((stepTokens, i) => {
-      if (!steps[i]) steps[i] = [];
-
-      stepTokens.forEach((token) => {
-        if (token.type == "ingredient") {
-          let { name, quantity, units } = token;
-
-          if (
-            config.limitIngredientDecimals &&
-            !isNaN(config.limitIngredientDecimals)
-          ) {
-            const decimalPlaces = parseInt(config.limitIngredientDecimals);
-            // Parsing float twice removes any trailing 0s
-            quantity = parseFloat(parseFloat(quantity).toFixed(decimalPlaces));
+      section.content.forEach((step, stepI) => {
+        if (!sections[i].content) sections[i].content = [];
+        let steps = [];
+        
+        step.value.items.forEach(item => {
+          if (item.type === 'text') {
+            steps.push({ type: "text", content: item.value });
+          } else if (item.type === 'ingredient') {
+            let ingredient = recipe.recipe.ingredients[item.index];
+            steps.push({ type: "ingredient", content: ingredient.name, ...ingredient });
+          } else if (item.type === 'cookware') {
+            let cookware = recipe.recipe.cookware[item.index];
+            steps.push({ type: "cookware", content: cookware.name, ...cookware});
+          } else if (item.type === 'timer') {
+            let timer = recipe.recipe.timers[item.index];
+            steps.push({ type: "timer", content: timer.quantity.value.value.value + " " + timer.quantity.unit, ...timer });
+          } else if (item.type === 'inlineQuantity') {
+            let inlineQuantity = recipe.recipe.inline_quantities[item.index];
+            steps.push({ type: "inlineQuantity", content: inlineQuantity.value.value.value + " " + inlineQuantity.unit, ...inlineQuantity });
+          } else {
+            console.log("Unknown type: ", item.type)
           }
-          ingredients.push({ name, quantity, units });
-        }
-
-        if (token.type == "cookware") {
-          const { name } = token;
-          cookware.push({ name });
-        }
-
-        steps[i].push(getStepTokenHTML(token));
+        });
+        sections[i].content.push(steps);
       });
     });
+    
+    // const {value, error} = parser.parse_render(
+    //     content
+    // );
+    // const html = value;
+
+    // TODO Sections name in ingredients list
 
     return {
       recipe,
-      steps,
+      sections,
       ingredients,
       cookware,
-      recipeTags,
+      timers,
+      metadata
     };
   },
   compile: async (inputContent) => {

package.json

@@ -16,14 +16,14 @@
   "author": "Maël Brunet",
   "license": "MIT",
   "devDependencies": {
-    "@11ty/eleventy": "^3.0.0",
-    "@11ty/eleventy-img": "^6.0.1",
-    "@11ty/eleventy-navigation": "^1.0.4",
+    "@11ty/eleventy": "^3.1.2",
+    "@11ty/eleventy-img": "^6.0.4",
+    "@11ty/eleventy-navigation": "^1.0.5",
     "npm-run-all": "^4.1.5",
     "sass": "^1.86.3"
   },
   "dependencies": {
-    "@cooklang/cooklang-ts": "^1.2.7",
+    "@cooklang/cooklang": "^0.17.2",
     "alpinejs": "^2.8.2",
     "decap-cms-app": "^3.6.2",
     "decap-server": "^3.2.0"

src/_includes/layouts/recipe-cook.njk

@@ -13,15 +13,29 @@
                 </div>
                 {% set ingredientsArray = [] %}
                 {% 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) %}
                 {% 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>
+                                {% 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>
@@ -62,38 +76,39 @@
                     <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>
+                            {% 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 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 %}

src/recipes-cook/sauces/Hollandaise.cook

@@ -0,0 +1,20 @@
+---
+title: Hollandaise
+image: https://ichef.bbci.co.uk/food/ic/food_16x9_1600/recipes/richchocolatebrownie_1933_16x9.jpg
+tags:
+  - Sauce
+time: 5 minutes
+servings: 4
+source: https://www.bbc.co.uk/food/recipes/richchocolatebrownie_1933/
+notes: I much prefer a flatbread to a crunchy tostada or taco so that's what I have this with. | I like [these Deli Kitchen ones](https://mydelikitchen.co.uk/products/4-greek-style-flatbreads/).
+---
+
+= Dough
+
+Heat the oven to 190C/170C Fan/Gas 5. Line a #20x30cm baking tin{} with baking paper.
+
+Gently melt the @butter{225%g}(preferably unsalted) and the @caster sugar{450%g} together in a #large pan{}. Once melted, take off the heat and add the @chocolate{140%g}(dark, broken into pieces). Stir until melted.
+
+Beat in the @eggs{5}(free-range medium eggs), then stir in the @flour{110%g}(plain) and the @cocoa powder{55%g}.
+
+Mix @onion{1}(peeled and finely chopped) and @garlic{2%cloves}(peeled and minced) into paste.

src/recipes-cook/simple-brownies.cook

@@ -7,7 +7,10 @@ tags:
   - Vegetarian 🌿
   - Sharable
   - Favourite ⭐
-time: 45 min
+duration: 45 minutes
+time:
+  prep: 10 minutes
+  cook: 35 minutes
 servings: 4
 source: https://www.bbc.co.uk/food/recipes/richchocolatebrownie_1933/
 notes: I much prefer a flatbread to a crunchy tostada or taco so that's what I have this with. | I like [these Deli Kitchen ones](https://mydelikitchen.co.uk/products/4-greek-style-flatbreads/).