Add support for templating

[ThomasHFWright]

Your Request

I just spun up a new instance of Tandoor on the latest branch and have been using the templating feature which is great for ease of reading instructions.
The feature is described here: https://docs.tandoor.dev/features/templating/

The Current State

Currently the android app does not render the text out of templated ingredients

Additional Context

No response

[phantomate]

Hi, I had a look at the API data we get and it seems, that the API is not giving us markdown but rather HTML/Vue code.

Here is an example:
<p><scalable-number v-bind:number='300.0000000000000000' v-bind:factor='ingredient_factor'></scalable-number> g Quark, <scalable-number v-bind:number='300.0000000000000000' v-bind:factor='ingredient_factor'></scalable-number> g Käse und <scalable-number v-bind:number='200.0000000000000000' v-bind:factor='ingredient_factor'></scalable-number> g Mehl vermischen und an einen <strong>warmen Ort</strong> stellen</p>

Unfortunately flutter can't handle these kind of code.
Maybe @vabene1111 can add a new field that's giving us markdown code or something that can be handled by non-Vue applications

[vabene1111]

hi, the api always returns two fields. The first is instruction which contains just the plain markdown (with the template tag {{ ingredients[0] }})
the other is the one you saw and probably currently use instructions_markdown which is rendered markdown with the templates pre processed as html.

To generate this I use pymarkdown with some extensions and jinja to parse the template tags out of the markdown. So you could start with instruction and then do the exact same processing as I did.

[phantomate]

@vabene1111 thanks. So I will just use the instruction part and try to handle this in flutter. Do I have to consider something else or is this just about {{ ingredients[x] }} ?

[vabene1111]

technically there is also these 4, but I am not sure how many people actually now that these exist

{{ ingredients[0].amount }}
{{ ingredients[0].unit }}
{{ ingredients[0].food }}
{{ ingredients[0].note }}

and there is {{ scale(100) }} which basically just scales the given number according to the ingredient factor

[vabene1111]

I dont know if there is any way I could improve the API response for you to handle it in the app, maybe you could use instructions_markdown because you will have to do some processing anyway and this way there would be the scalable number tags 🤔 not sure. There is probably also something similar to jinja for flutter

[phantomate]

All right, thank you! If you look on the screenshot above, there is also {{ ingredients[0] }}{# Garlic #} what does {# Garlic #} do? I thought {{ ingredients[0] }} should print Garlic with the amount?

[vabene1111]

The garlic is just a comment for human readability.