[{"data":1,"prerenderedAt":189},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002Fthree-recipe-ebooks-and-one-bookmark":3,"blog-project-\u002Fblog\u002F2024\u002Fthree-recipe-ebooks-and-one-bookmark":113},{"id":4,"title":5,"art":6,"body":7,"date":94,"description":95,"draft":96,"extension":97,"image":98,"kind":99,"meta":100,"navigation":101,"ogImage":102,"path":103,"project":104,"seo":105,"slug":98,"stem":106,"tags":107,"translationKey":111,"updated":98,"__hash__":112},"blog_en\u002Fblog\u002F2024\u002Fthree-recipe-ebooks-and-one-bookmark.md","Three recipe ebooks and one bookmark in the browser","\u002Fart\u002Fblog\u002Fcoffee-recipes.svg",{"type":8,"value":9,"toc":86},"minimark",[10,14,17,22,25,33,37,40,58,61,65,68,72,75],[11,12,13],"p",{},"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,15,16],{},"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.",[18,19,21],"h2",{"id":20},"data-first-looks-later","Data first, looks later",[11,23,24],{},"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,26,27,28,32],{},"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 ",[29,30,31],"code",{},"any"," as rarely as possible.",[18,34,36],{"id":35},"one-question-two-answers","One question, two answers",[11,38,39],{},"The search turned out to be the most interesting part. When you pick \"honey\" and \"milk\", you can ask two different things:",[41,42,43,52],"ul",{},[44,45,46,47,51],"li",{},"show recipes that have ",[48,49,50],"strong",{},"all"," of these ingredients,",[44,53,46,54,57],{},[48,55,56],{},"at least one"," of them.",[11,59,60],{},"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.",[18,62,64],{"id":63},"a-link-you-can-send","A link you can send",[11,66,67],{},"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.",[18,69,71],{"id":70},"what-i-took-from-it","What I took from it",[11,73,74],{},"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,76,77,78,85],{},"And the coffee machine? It works every day. So does the page – ",[79,80,84],"a",{"href":81,"rel":82},"https:\u002F\u002Flukaszdzielo.github.io\u002Fcoffee-recipes\u002F",[83],"nofollow","have a look at Coffee Recipes",".",{"title":87,"searchDepth":88,"depth":88,"links":89},"",2,[90,91,92,93],{"id":20,"depth":88,"text":21},{"id":35,"depth":88,"text":36},{"id":63,"depth":88,"text":64},{"id":70,"depth":88,"text":71},"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.",false,"md",null,"post",{},true,"\u002Fog\u002Fblog\u002Fcoffee-recipes-en.jpg","\u002Fblog\u002F2024\u002Fthree-recipe-ebooks-and-one-bookmark","\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":5,"description":95},"blog\u002F2024\u002Fthree-recipe-ebooks-and-one-bookmark",[108,109,110],"vue","typescript","project","trzy-ebooki-z-przepisami-i-jedna-zakladka","3LLGqwfhP5eZEGnSM0xdvXGu24LM6bsqjF8Gni2v5Xc",{"id":114,"title":115,"agency":98,"body":116,"compare":98,"cover":148,"date":153,"description":154,"draft":96,"extension":97,"facts":155,"featured":96,"gallery":167,"galleryLead":98,"highlights":98,"image":175,"links":176,"meta":178,"navigation":101,"note":98,"ogImage":179,"path":104,"seo":180,"stack":181,"stem":186,"tags":187,"__hash__":188},"projects_en\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex.md","Coffee Recipes",{"type":8,"value":117,"toc":145},[118,121,125],[11,119,120],{},"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.",[18,122,124],{"id":123},"main-features","Main features",[41,126,127,130,133,136,139,142],{},[44,128,129],{},"Search by ingredients from a list – recipes with the selected ingredients on top, the rest below",[44,131,132],{},"Two filter modes: a recipe with all selected ingredients or with at least one",[44,134,135],{},"Filters saved in the page address – you can send a filtered list to someone",[44,137,138],{},"A recipe in a dialog: photo, ingredients and how to make it",[44,140,141],{},"Polish and English, light and dark theme and font size – saved in the browser",[44,143,144],{},"Recipes, ingredients and translations in JSON files, published on GitHub Pages with GitHub Actions",{"title":87,"searchDepth":88,"depth":88,"links":146},[147],{"id":123,"depth":88,"text":124},{"desktop":149,"width":150,"height":151,"alt":152},"\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.",[156,159,162,165],{"value":157,"text":158},"22","recipes from several ebooks in one place",{"value":160,"text":161},"33","ingredients to search – picked from a list, no typing",{"value":163,"text":164},"2","filter modes – all selected ingredients or at least one",{"value":163,"text":166},"languages – Polish and English, saved in the browser",[168,171],{"src":149,"width":150,"height":151,"alt":169,"caption":170},"Recipe list","List – recipes with the selected ingredient on top, the rest below",{"src":172,"width":150,"height":151,"alt":173,"caption":174},"\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":81,"github":177},"https:\u002F\u002Fgithub.com\u002Flukaszdzielo\u002Fcoffee-recipes",{},"\u002Fog\u002Fprojects\u002Fcoffee-recipes-en.jpg",{"title":115,"description":154},[182,183,184,185],"Vue 3","TypeScript","Vite","CSS","projects\u002F2024\u002Fcoffee-recipes\u002Findex",[108],"8zTMdI4jofCsaT5VDJwrFQ60g9JMKQvsqmzpEMhu1RY",1792530560852]