Hi HN,
I have been working on a project which can automatically convert a recipe to the tree/graph/tabular style notation that pops up on HN every now and then. It's still early days but I am keen to hear about improvements I can make to the recipe presentation.
For reference, the earliest example I have seen of this style of notation is from 'Cooking For Engineers' (https://news.ycombinator.com/item?id=30797907) but I have seen other, similar notations from time to time.
This is my take on the notation, as well as the ability to convert recipes automatically. In the future, I would like to see it become my own personal kitchen/recipe management system but I would first like to improve the recipe display options.
It uses ChatGPT to format the recipe into a JSON tree structure, which is then rendered with CSS grid. So far it works well enough but there is definitely some recipes that are impossible to render, and of course ChatGPT will occasionally spit out less-than-useful trees. I have been using AppWrite for the backend.
Curious to hear everyone's thoughts and what people might like to see!
UX feedback: Make the sample recipe graphs larger, especially at "tablet" size. Tablets are often used in the kitchen, and laptop screens are sometimes set to half-width for multitasking. Consider stacking the sidebar at a larger breakpoint.
Minor note: The border-radius on cards causes a small gap at the top-right for cards with simultaneous instructions.
Also, my recipe didn’t save after I entered my email and used the link. Great work overall!