[{"data":1,"prerenderedAt":188},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka":3,"blog-project-\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka":112},{"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,"__hash__":111},"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":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\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka","\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":5,"description":95},"blog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka",[108,109,110],"vue","typescript","projekt","agfgAWEn8LEpKTztb8HBXv6_f6ikXsQUA708kU6q--I",{"id":113,"title":114,"agency":98,"body":115,"compare":98,"cover":147,"date":152,"description":153,"draft":96,"extension":97,"facts":154,"featured":96,"gallery":166,"galleryLead":98,"highlights":98,"image":174,"links":175,"meta":177,"navigation":101,"note":98,"ogImage":178,"path":104,"seo":179,"stack":180,"stem":185,"tags":186,"__hash__":187},"projects_en\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex.md","Coffee Recipes",{"type":8,"value":116,"toc":144},[117,120,124],[11,118,119],{},"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,121,123],{"id":122},"main-features","Main features",[41,125,126,129,132,135,138,141],{},[44,127,128],{},"Search by ingredients from a list – recipes with the selected ingredients on top, the rest below",[44,130,131],{},"Two filter modes: a recipe with all selected ingredients or with at least one",[44,133,134],{},"Filters saved in the page address – you can send a filtered list to someone",[44,136,137],{},"A recipe in a dialog: photo, ingredients and how to make it",[44,139,140],{},"Polish and English, light and dark theme and font size – saved in the browser",[44,142,143],{},"Recipes, ingredients and translations in JSON files, published on GitHub Pages with GitHub Actions",{"title":87,"searchDepth":88,"depth":88,"links":145},[146],{"id":122,"depth":88,"text":123},{"desktop":148,"width":149,"height":150,"alt":151},"\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.",[155,158,161,164],{"value":156,"text":157},"22","recipes from several ebooks in one place",{"value":159,"text":160},"33","ingredients to search – picked from a list, no typing",{"value":162,"text":163},"2","filter modes – all selected ingredients or at least one",{"value":162,"text":165},"languages – Polish and English, saved in the browser",[167,170],{"src":148,"width":149,"height":150,"alt":168,"caption":169},"Recipe list","List – recipes with the selected ingredient on top, the rest below",{"src":171,"width":149,"height":150,"alt":172,"caption":173},"\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":176},"https:\u002F\u002Fgithub.com\u002Flukaszdzielo\u002Fcoffee-recipes",{},"\u002Fog\u002Fprojects\u002Fcoffee-recipes-en.jpg",{"title":114,"description":153},[181,182,183,184],"Vue 3","TypeScript","Vite","CSS","projects\u002F2024\u002Fcoffee-recipes\u002Findex",[108],"8zTMdI4jofCsaT5VDJwrFQ60g9JMKQvsqmzpEMhu1RY",1791981810908]