Workaround to allow commas inside ingredients

.eleventy.js

@@ -61,8 +61,9 @@ module.exports = config => {
         return value.toLowerCase();
     });
 
-    config.addFilter('asArray', function(value) {
+    // This workaround is needed so we can transform it back into an array with Alpine (we can't split on "," as it can be included within the items)
-        return value ? [...value] : []
+    config.addFilter('arrayToString', function(value) {
+        return value.join('£');
     });
 
     /* Shortcodes */

src/_includes/layouts/recipe.njk

@@ -11,7 +11,7 @@
                         <a class="c-tags__tag" href="/tags/{{ tag | noEmoji | slug }}">{{ tag }}</a>
                     {% endfor %}
                 </div>
-                <div class="c-recipe__ingredients-wrapper" x-data="{currentServings: {{ servings }}, ingredients: '{{ ingredients }}'.split(',') }">
+                <div class="c-recipe__ingredients-wrapper" x-data="{currentServings: {{ servings }}, ingredients: '{{ ingredients | arrayToString }}'.split('£') }">
                     {% if time or servings %}
                         <div class="c-recipe__additional-info">
                             {% if time %}

src/recipes/courgette-lemon-risotto.md

@@ -11,7 +11,7 @@ sourceLabel: BBC good food
 sourceURL: https://www.bbcgoodfood.com/recipes/courgette-lemon-risotto/
 ingredients:
   - 50g butter
-  - 1 onion finely chopped
+  - 1 onion, finely chopped
   - 1 large garlic clove crushed
   - 180g risotto rice
   - 1 vegetable stock cube