Recipe note
Frontmatter:
---
ServingSize:
cssclass: recipeTable
Alias: []
Tag: []
Date: 2021-09-21
DocType: "Recipe"
CollapseMetaTable: Yes
Meta:
IsFavourite:
Rating:
Recipe:
Courses:
Categories:
Collections:
Source:
PreparationTime:
CookingTime:
OServingSize:
Ingredients:
-
---
I think that the headers are quite self explanatory. I have 2 fields ServingSize and OServingSize: OServingSize represents the original number of portions that the recipe is based on; ServingSize is a variable to adjust ingredient amounts for own purpose. It allows not to have to manually adjust ingredient amounts when importing a recipe.
It is important to keep ServingSize at the top of the FrontMatter but i’ll explain below.
In the ingredient section, input follows this nomenclature: <amount> <unit> <free text for ingredient>, enabling to have more than a word describing an ingredient.
Edit Serving Size
I have created a button using the Buttons & MetaEdit plugins in order to easily update the FrontMatter, which mostly serves to update the ServingSize for ease of manipulation and not have to go back into edit the actual note each time one would like to change the portion size of their dish.
By keeping the field ‘ServingSize’ at the top of the frontmatter, you do not have to scroll down the list of fields when clicking the button, and have an immediate access to this field! It is a question of personal taste, tho!
/```button
name Edit Recipe parameters
type command
action MetaEdit: Run MetaEdit
id EditMetaData
/```
Generic information section
I have a generic information section populated from the ‘Recipe’ part of the FrontMatter:
| |
|-|-
**Courses**: | `$=dv.current().Recipe.Courses`
**Categories**: | `$=dv.current().Recipe.Categories`
**Collections**: | `$=dv.current().Recipe.Collections`
**Serving size**: | `$=dv.current().ServingSize`
**Cooking time**: | `$=dv.current().Recipe.CookingTime` min
which looks like the below:
Ingredients section
In this section, I have used a JS script, using dv.view() from dataview that allows to write 1 code snippet only and reuse it in different notes/sections. On each page, i only reference the code which is easier to maintain. The actual code snippet is going to be shown in the ‘Backend’ section.
On the note, the code looks like:
/```dataviewjs
dv.view("path/to/dv-views/query_ingredient", {ingredients: dv.current().Ingredients, originalportioncount: dv.current().Recipe.OServingSize})
/```
which renders:
Instructions/Direction section
Manual update for each recipe
Backend for the recipe note
In order to use dv.view() from dataview, you need to set up a folder from within Obsidian in which to store these JS snippet and have a JS editor (ex: Textatic for iOS) in order to generate and write into those files.
Once you have created the js file in the JS editor (query_ingredient in my case), you can then copy/paste the below:
let {ingredients, originalportioncount} = input;
let ing = [];
if (!Boolean(originalportioncount)) {
return "⚠️ <b>Warning</b>\nYou have not specified the original serving size!\n<b>Ingredient amounts cannot be estimated.</b>"
}
for (let i = 0; i < ingredients.length; i++) {
let name = ingredients[i].replace(ingredients[i].split(" ")[0] + " " + ingredients[i].split(" ")[1], "");
let unit = ingredients[i].split(" ")[1];
let amount = ingredients[i].split(" ")[0];
ing[i] = "🥣 " + (amount / originalportioncount * dv.current().ServingSize) + " " + unit + " <b>" + name + "</b>"
}
dv.list(ing)
Note that the code reference 2 arguments: the Ingredient list and the OServingSize FrontMatter filed to rebase the ingredients amounts.