[{"data":1,"prerenderedAt":189},["ShallowReactive",2],{"project-\u002Fprojects\u002F2024\u002Fcoffee-recipes":3,"project-posts-\u002Fprojects\u002F2024\u002Fcoffee-recipes":93},{"id":4,"title":5,"agency":6,"body":7,"compare":6,"cover":46,"date":51,"description":52,"draft":53,"extension":54,"facts":55,"featured":53,"gallery":67,"galleryLead":6,"highlights":6,"image":75,"links":76,"meta":79,"navigation":80,"note":6,"ogImage":81,"path":82,"seo":83,"stack":84,"stem":89,"tags":90,"__hash__":92},"projects_en\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex.md","Coffee Recipes",null,{"type":8,"value":9,"toc":41},"minimark",[10,14,19],[11,12,13],"p",{},"After I bought a coffee machine, I got an ebook with recipes by email, a second one for signing up to the newsletter, and within a month I found 2–3 more. Instead of searching for a recipe in several PDF files, I made one place with the whole collection at hand – a page on GitHub Pages that I keep in my bookmarks. At the same time I was learning Vue 3 and practising TypeScript – without a \"how to build a recipe app\" tutorial.",[15,16,18],"h2",{"id":17},"main-features","Main features",[20,21,22,26,29,32,35,38],"ul",{},[23,24,25],"li",{},"Search by ingredients from a list – recipes with the selected ingredients on top, the rest below",[23,27,28],{},"Two filter modes: a recipe with all selected ingredients or with at least one",[23,30,31],{},"Filters saved in the page address – you can send a filtered list to someone",[23,33,34],{},"A recipe in a dialog: photo, ingredients and how to make it",[23,36,37],{},"Polish and English, light and dark theme and font size – saved in the browser",[23,39,40],{},"Recipes, ingredients and translations in JSON files, published on GitHub Pages with GitHub Actions",{"title":42,"searchDepth":43,"depth":43,"links":44},"",2,[45],{"id":17,"depth":43,"text":18},{"desktop":47,"width":48,"height":49,"alt":50},"\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Frecipe-list.webp",1920,1189,"Coffee Recipes – recipe list filtered by an ingredient","2024-01-28","Coffee recipes from several ebooks in one place – search by ingredients, a link with filters and two languages. Vue 3 and TypeScript.",false,"md",[56,59,62,65],{"value":57,"text":58},"22","recipes from several ebooks in one place",{"value":60,"text":61},"33","ingredients to search – picked from a list, no typing",{"value":63,"text":64},"2","filter modes – all selected ingredients or at least one",{"value":63,"text":66},"languages – Polish and English, saved in the browser",[68,71],{"src":47,"width":48,"height":49,"alt":69,"caption":70},"Recipe list","List – recipes with the selected ingredient on top, the rest below",{"src":72,"width":48,"height":49,"alt":73,"caption":74},"\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Frecipe.webp","Recipe","A recipe in a dialog – ingredients and how to make it","\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Fthumbnail.webp",{"live":77,"github":78},"https:\u002F\u002Flukaszdzielo.github.io\u002Fcoffee-recipes\u002F","https:\u002F\u002Fgithub.com\u002Flukaszdzielo\u002Fcoffee-recipes",{},true,"\u002Fog\u002Fprojects\u002Fcoffee-recipes-en.jpg","\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":5,"description":52},[85,86,87,88],"Vue 3","TypeScript","Vite","CSS","projects\u002F2024\u002Fcoffee-recipes\u002Findex",[91],"vue","8zTMdI4jofCsaT5VDJwrFQ60g9JMKQvsqmzpEMhu1RY",[94],{"id":95,"title":96,"art":97,"body":98,"date":177,"description":178,"draft":53,"extension":54,"image":6,"kind":179,"meta":180,"navigation":80,"ogImage":181,"path":182,"project":82,"seo":183,"slug":6,"stem":184,"tags":185,"__hash__":188},"blog_en\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka.md","Three recipe ebooks and one bookmark in the browser","\u002Fart\u002Fblog\u002Fcoffee-recipes.svg",{"type":8,"value":99,"toc":171},[100,103,106,110,113,121,125,128,144,147,151,154,158,161],[11,101,102],{},"I bought a coffee machine. An email with a recipe ebook came with it, I got a second ebook for signing up to the newsletter, and within a month I found two or three more. Sounds like paradise for a coffee lover – until you just want to make something with what you have in the fridge ☕",[11,104,105],{},"How do you find a recipe with honey when every ebook is a separate PDF and every PDF has to be scrolled from start to end? After a few evenings like that, I decided I wanted everything in one place, under one link in my bookmarks.",[15,107,109],{"id":108},"data-first-looks-later","Data first, looks later",[11,111,112],{},"I started by moving the recipes into a JSON file: name, photo, ingredients, how to make it and a list of tags – the ingredients you can search by. Today there are 22 recipes and 33 ingredients. The interface translations went into a separate file too, so the page works in Polish and in English.",[11,114,115,116,120],{},"Only on top of this data did I build the view in Vue 3 – a list of cards, a recipe dialog and the search. At the same time I practised TypeScript and tried to use ",[117,118,119],"code",{},"any"," as rarely as possible.",[15,122,124],{"id":123},"one-question-two-answers","One question, two answers",[11,126,127],{},"The search turned out to be the most interesting part. When you pick \"honey\" and \"milk\", you can ask two different things:",[20,129,130,138],{},[23,131,132,133,137],{},"show recipes that have ",[134,135,136],"strong",{},"all"," of these ingredients,",[23,139,132,140,143],{},[134,141,142],{},"at least one"," of them.",[11,145,146],{},"That is why the filter has both modes, and the recipes that match are at the top of the list – the rest stay below, so nothing gets lost.",[15,148,150],{"id":149},"a-link-you-can-send","A link you can send",[11,152,153],{},"I save the selected ingredients in the page address. Thanks to that, you can bookmark a filtered list or send it to someone – and when they open the link, they see the same recipes.",[15,155,157],{"id":156},"what-i-took-from-it","What I took from it",[11,159,160],{},"I built the project without a \"how to build a recipe app\" tutorial, and I still think it was time well spent. I learned the most not from Vue itself, but from thinking about the data: what is a recipe, what is an ingredient, and what is just text to show.",[11,162,163,164,170],{},"And the coffee machine? It works every day. So does the page – ",[165,166,169],"a",{"href":77,"rel":167},[168],"nofollow","have a look at Coffee Recipes",".",{"title":42,"searchDepth":43,"depth":43,"links":172},[173,174,175,176],{"id":108,"depth":43,"text":109},{"id":123,"depth":43,"text":124},{"id":149,"depth":43,"text":150},{"id":156,"depth":43,"text":157},"2024-02-12","How I turned several coffee recipe ebooks into one page with search by ingredients – and what it taught me about Vue 3 and TypeScript.","post",{},"\u002Fog\u002Fblog\u002Fcoffee-recipes-en.jpg","\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka",{"title":96,"description":178},"blog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka",[91,186,187],"typescript","projekt","agfgAWEn8LEpKTztb8HBXv6_f6ikXsQUA708kU6q--I",1791981730367]