first working number scaling

vue3/src/components/display/InstructionsCompileComponent.vue

@@ -0,0 +1,34 @@
+<template>
+    <component :is="compiled" :ingredient_factor="ingredient_factor" :code="code"></component>
+</template>
+
+<script>
+
+import {defineComponent} from "vue";
+
+import ScalableNumber from "@/components/display/ScalableNumber.vue";
+
+
+export default defineComponent({
+    name: 'InstructionsCompileComponent',
+    computed: {},
+    components: {ScalableNumber},
+    props: [
+        'code', 'ingredient_factor'
+    ],
+    data() {
+        return {
+            compiled: defineComponent( {
+                name: 'compiled-instructions-component',
+                props: ['ingredient_factor', 'code'],
+                components: {  ScalableNumber, },
+                template: `<div>${this.code}</div>`
+            })
+        }
+    },
+    mounted() {
+
+    },
+})
+</script>
+

vue3/src/components/display/ScalableNumber.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="step__scalable-num" :class="[this.factor===1 ? 'step__scalable-num_scaled_false' : (this.factor > 1 ? 'step__scalable-num_scaled_up':'step__scalable-num_scaled_down')]" v-html="calculateAmount(number)"></span>
+</template>
+
+<script>
+
+
+import {calculateFoodAmount} from "@/utils/number_utils.ts";
+
+export default {
+  name: 'ScalableNumber',
+  props: {
+    number: Number,
+    factor: {
+      type: Number,
+      default: 4
+    },
+  },
+  methods: {
+    calculateAmount: function (x) {
+      return calculateFoodAmount(x, this.factor)
+    }
+  }
+}
+</script>

vue3/src/components/display/Step.vue

@@ -19,8 +19,8 @@
 
         <IngredientsTable :ingredients="step.ingredients"></IngredientsTable>
 
-        <v-card-text v-if="step.instruction?.length > 0">
-            {{ step.instruction }}
+        <v-card-text v-if="step.instructionsMarkdown.length > 0">
+           <instructions-compile-component :code="step.instructionsMarkdown" :ingredient_factor="1"></instructions-compile-component>
         </v-card-text>
     </v-card>
 </template>
@@ -31,6 +31,8 @@ import IngredientsTable from "@/components/display/IngredientsTable.vue";
 import {Step} from "@/openapi";
 import {DateTime, Duration, Interval} from "luxon";
 
+import InstructionsCompileComponent from "@/components/display/InstructionsCompileComponent.vue";
+
 export default defineComponent({
     name: "Step",
     computed: {
@@ -59,7 +61,7 @@ export default defineComponent({
             return ''
         }
     },
-    components: {IngredientsTable},
+    components: {InstructionsCompileComponent, IngredientsTable},
     props: {
         step: {
             type: {} as PropType<Step>,