feat: add arbitrary scalable quantities

docs/examples-scaling-recipes.md

@@ -28,7 +28,10 @@ const recipe = Recipe(`...`)
 const scaledRecipe = recipe.scaleBy(2)
 ```
 
-All the ingredients with numerical quantities have their quantities multiplied by 2, and the metadata and `servings` value will also be multiplied by 2
+In the above example, will be multiplied by 2:
+- All the ingredients (including alternative units and alternative ingredients) with scalable numerical quantities
+- The scaling metadata and `servings` value
+- [Arbitrary scalable quantities](/guide-extensions.html#arbitrary-scalable-quantities)
 
 ## Scaling to a specific number of servings
 
@@ -41,4 +44,7 @@ const scaledRecipe = recipe.scaleTo(4)
 // const scaledRecipe = recipe.scaleBy(2)
 ```
 
-All the ingredients with scalable numerical quantities have their quantities adjusted by a factor of 4/2 in this case, and the scaling metadata (if expressed as numbers) and `servings` property value will also be multiplied by the same factor.
+In the above example, will be adjusted by a factor of 4/2: 
+- All the ingredients (including alternative units and alternative ingredients) with scalable numerical quantities have their quantities adjusted by a factor of 4/2 in this case
+- The scaling metadata and `servings` value
+- [Arbitrary scalable quantities](/guide-extensions.html#arbitrary-scalable-quantities)

docs/guide-extensions.md

@@ -102,6 +102,19 @@ Also works with Cookware and Timers
 - Cookware can also be quantified (without any unit, e.g. `#bowls{2}`)
 - Quantities will be added similarly as ingredients if cookware is referenced, e.g. `#&bowls{2}`
 
+## Arbitrary scalable quantities
+
+Usage: <code v-pre>{{name:quantity%unit}}</code>
+
+These quantities can be added to any step or note and will be scaled but not added to the ingredients list.
+
+The `name` and `unit` are optional. 
+
+Examples: 
+- <code v-pre>{{5}}</code>
+- <code v-pre>{{2%kcal}}</code>
+- <code v-pre>{{factor}}</code>
+
 ## Alternative units
 
 You can define equivalent quantities in different units for the same ingredient using the pipe `|` separator within the curly braces.

playground/app/components/recipe/NoteContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Recipe, Note, ArbitraryScalable } from "cooklang-parser";
+
+const props = defineProps<{
+  note: Note;
+  recipe: Recipe;
+}>();
+
+/**
+ * Get the arbitrary scalable by index
+ */
+function getArbitrary(index: number): ArbitraryScalable | undefined {
+  return props.recipe.arbitraries[index];
+}
+</script>
+
+<template>
+  <span class="note-content">
+    <template v-for="(item, idx) in note.items" :key="idx">
+      <template v-if="item.type === 'text'">{{ item.value }}</template>
+      <template v-else-if="item.type === 'arbitrary'">
+        <span
+          v-if="getArbitrary(item.index)"
+          class="font-medium text-purple-600 not-italic dark:text-purple-400"
+        >
+          <RecipeSingleQuantity
+            :quantity="getArbitrary(item.index)!.quantity"
+            :unit="getArbitrary(item.index)!.unit"
+          />
+          <template v-if="getArbitrary(item.index)!.name">
+            {{ " " }}{{ getArbitrary(item.index)!.name }}
+          </template>
+        </span>
+      </template>
+    </template>
+  </span>
+</template>

playground/app/components/recipe/RecipeRender.vue

@@ -150,7 +150,8 @@ const sectionsWithStepNumbers = computed(() => {
                 v-else-if="item.type === 'note'"
                 class="note ml-4 text-gray-600 italic dark:text-gray-300"
               >
-                Note: {{ item.note }}
+                Note:
+                <RecipeNoteContent :note="item" :recipe="recipe" />
               </div>
             </template>
           </div>

playground/app/components/recipe/StepContent.vue

@@ -2,11 +2,12 @@
 import type {
   Recipe,
   Step,
-  Item,
+  StepItem,
   Timer,
   IngredientAlternative,
   IngredientItemQuantity,
   QuantityWithPlainUnit,
+  ArbitraryScalable,
 } from "cooklang-parser";
 
 const props = defineProps<{
@@ -30,7 +31,7 @@ function toPlainEquivalents(
  * Get the first (primary) alternative for an ingredient item
  */
 function getPrimaryAlternative(
-  item: Item & { type: "ingredient" },
+  item: StepItem & { type: "ingredient" },
 ): IngredientAlternative | undefined {
   return item.alternatives[0];
 }
@@ -39,15 +40,15 @@ function getPrimaryAlternative(
  * Get the other alternatives (excluding the primary one)
  */
 function getOtherAlternatives(
-  item: Item & { type: "ingredient" },
+  item: StepItem & { type: "ingredient" },
 ): IngredientAlternative[] {
   return item.alternatives.slice(1);
 }
 
 /**
  * Check if an ingredient item has alternatives
  */
-function hasAlternatives(item: Item & { type: "ingredient" }): boolean {
+function hasAlternatives(item: StepItem & { type: "ingredient" }): boolean {
   return item.alternatives.length > 1;
 }
 
@@ -64,6 +65,13 @@ function getCookware(index: number) {
 function getTimer(index: number): Timer | undefined {
   return props.recipe.timers[index];
 }
+
+/**
+ * Get the arbitrary scalable by index
+ */
+function getArbitrary(index: number): ArbitraryScalable | undefined {
+  return props.recipe.arbitraries[index];
+}
 </script>
 
 <template>
@@ -77,7 +85,9 @@ function getTimer(index: number): Timer | undefined {
             <RecipeQuantityWithEquivalents
               :quantity="getPrimaryAlternative(item)!.itemQuantity!.quantity"
               :unit="getPrimaryAlternative(item)!.itemQuantity!.unit?.name"
-              :equivalents="toPlainEquivalents(getPrimaryAlternative(item)!.itemQuantity!)"
+              :equivalents="
+                toPlainEquivalents(getPrimaryAlternative(item)!.itemQuantity!)
+              "
             />
             {{ " " }}
           </template>
@@ -123,6 +133,20 @@ function getTimer(index: number): Timer | undefined {
           :timer="getTimer(item.index)!"
         />
       </template>
+      <template v-else-if="item.type === 'arbitrary'">
+        <span
+          v-if="getArbitrary(item.index)"
+          class="font-medium text-purple-600 dark:text-purple-400"
+        >
+          <RecipeSingleQuantity
+            :quantity="getArbitrary(item.index)!.quantity"
+            :unit="getArbitrary(item.index)!.unit"
+          />
+          <template v-if="getArbitrary(item.index)!.name">
+            {{ " " }}{{ getArbitrary(item.index)!.name }}
+          </template>
+        </span>
+      </template>
     </template>
   </span>
 </template>

playground/app/pages/index.vue

@@ -25,6 +25,8 @@ servings: 8
 tags: [baking, vegan-option]
 ---
 
+> This recipe has an energy content of {{250%kcal}}
+
 Preheat oven to ~{10%minutes}.
 
 Mash @ripe bananas{1%=large|1.5%cup} and @&ripe bananas{2%=small|1%cup} in a #large bowl{}.