_config/eleventy-plugin-cooklang.js

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

package.json

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

src/_includes/layouts/recipe-cook.njk

@@ -13,29 +13,15 @@
                 </div>
                 {% set ingredientsArray = [] %}
                 {% for ingredient in ingredients %}
-                    {% set notes = "" %}
+                    {% set value = [ingredient.quantity, ingredient.units, " ", ingredient.name] | join %}
-                    {% 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 %}
-                                {% if time.prep %}
+                                <p>{% include "icons/time.svg" %}{{ time }}</p>
-                                    <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>
@@ -76,39 +62,38 @@
                     <h3>Cookware</h3>
                     <ul class="c-recipe__ingredients-list">
                         {% for ingredient in cookware %}
-                            {% set notes = "" %}
+                            <li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }}</span></label></li>
-                            {% 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

@@ -1,20 +0,0 @@
----
-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,10 +7,7 @@ tags:
   - Vegetarian 🌿
   - Sharable
   - Favourite ⭐
-duration: 45 minutes
+time: 45 min
-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/).