Support nutritional information in Recipes

[rathgar]

Taking the lead from recipe microdata, this allows recipes to include optional Nutritional Information. Example markup for the nutrition section:

nutrition:
  servingSize: per slice
  calories: 183
  fatContent: 4
  saturatedFatContent: 1
  carbohydrateContent: 27
  sugarContent: 3
  fiberContent: 5
  proteinContent: 7
  sodiumContent: 0.3

This becomes formatted as follows:

I've done my best to keep this PR as atomic as I can. I've putt the additional layout code in its own 'partial' to avoid polluting the main recipe layout.

Additional suggestions and comment most welcome!

[clarklab]

Amazing! I've got a busy weekend (and maybe upcoming week) so I'm not sure when I'll have a chance to take a closer look, but I wanted to respond quickly and say this looks awesome.

[rathgar]

Thanks @clarklab, I'll leave it with you.

I heard about this fabulous project via the Home Assistant Podcast and wanted to give it a try. Looks like a great solution for those of us who've been around long enough to know we don't want another solution that needs continuous maintenance and upgrades. 😉

[clarklab]

I'm getting ready to start on a few changes, and I'm thinking of merging this as part, but I wanted to check your opinion before.

First up: I love the idea of having nutritional info available. Especially since I've read that Google is going to start restricting indexing to sites without it.

The original goal of Chowdown was something along the lines of "JUST SHOW ME THE RECIPE", and lately I've seen that sentiment echoed by folks that like the Chowdown page design. It got me thinking that I might move my description under the recipe, or that I might truncate it to a few lines.

I'm thinking the nutritional info deserves the same design treatment. There for folks that want it, but out of the way of the main recipe. What do you think about me tucking this info behind an expand action or at the bottom of the page?

[lathrum]

Since you asked for an opinion, I'll offer one... I asked my wife her preference, and she loves the nutritional addition, but she doesn't want to have to expand it (i.e. she would like it to be expanded by default). If there was a per-user preference setting to always expand/always compact that would at least give a choice to the user.

As for placement, we think it makes sense for it to go between the recipe and the instructions. When looking for something to eat, we first look for complexity/time to make, ingredients, and then what nutrition it offers. If we choose to make it, only then do we care about the instructions.

[rathgar]

I agree with @lathrum. This is information you typically need when selecting the recipe and not at all when cooking. If it's at the top it's immediately available when browsing recipes and out of the way when reading the detail.

I wonder whether adding an anchor in the page to the recipe part might help users who wish to skip the introductory section, or a button which could present a full-screen chef's view might help those who need it.

For full disclosure, I should add that I have another PR waiting in the wings which adds to this by including all the tag type data in one place alongside this info. It currently looks like this:

but more on that separately.

[clarklab]

Good stuff! Adding tags was on the roadmap but I haven't quite got there yet.

I'm planning to use tags to populate the "books" that are still coming soon. Basically it's just a cheeky way to group recipes and have a little cover image.

Displaying the tags on the recipe page is the next step, so heck yeah.

On a related note (things-too-big-for-this-thread), I've got new designs in the works, aimed primarily at improving responsive support (tablets, smart displays in the kitchen, etc).

[lathrum]

My wife's use case is with a Win10 Surface Pro 4 in tablet mode on the kitchen counter, so I'm looking forward to that.

[rathgar]

That sounds really good @clarklab! Loving the new style btw, very nice. Books will be an excellent feature.

I'd be more than happy to restyle my PR to suit the new styles if needed. When are you planning to release it?

I'm assuming you'll remove the dependency on (seemingly unmaintained) basscss and geomicon. What did you have planned?

[clarklab]

Glad y'all like it! I'm still working through a good bit of design, but I've started updating things at https://chowdown.io/beta/

For now I'm keeping basscss, it's my favorite library when moving quickly. I don't need geomicon (or can I even remember what I was using it for, haha), so we can clean that up.

Eventually, when the new design is done, I'll clean things up on the code side up considerably.

Is there another front-end library y'all like? If I had to pick a new one, I'd probably try Tailwind. (probably because looking through the docs it reminds me A LOT of basscss).

[rathgar]

I'd heard of tailwind but not really looked at it seriously before. From a 30min glance I'd say it looks pretty solid and has good support. If you are comfortable with it I'd say go for that. As basscss is already archived it might be less painful to migrate now before the UI gets more feature rich. I've used many different libraries over the years, they all come to an end one day 😉

There are a few icon sets available for it. I don't see everything that you need in those, however I (and others) would be happy to generate additional svgs where needed.

[rathgar]

I've moved the info to above the ingredients and directions as we discussed and also made this a little more basscss compliant, following a utility-first approach. It should make migrating to another library easier in the future.

Let me know if there's anything else that needs fixing :)