[{"data":1,"prerenderedAt":189},["ShallowReactive",2],{"project-\u002Fpl\u002Fprojects\u002F2024\u002Fcoffee-recipes":3,"project-posts-\u002Fpl\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_pl\u002Fpl\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex.md","Coffee Recipes",null,{"type":8,"value":9,"toc":41},"minimark",[10,14,19],[11,12,13],"p",{},"Po zakupie ekspresu do kawy dostałem mailem ebook z przepisami, drugi był za zapis do newslettera, a w ciągu miesiąca znalazłem jeszcze 2–3 kolejne. Zamiast szukać przepisu w kilku plikach PDF, zrobiłem jedno miejsce z całym zbiorem pod ręką – stronę na GitHub Pages, którą mam w zakładkach. Przy okazji uczyłem się Vue 3 i ćwiczyłem TypeScript – bez tutoriala w stylu „jak zrobić aplikację z przepisami”.",[15,16,18],"h2",{"id":17},"najważniejsze-cechy","Najważniejsze cechy",[20,21,22,26,29,32,35,38],"ul",{},[23,24,25],"li",{},"Wyszukiwanie po składnikach z listy – przepisy z wybranymi składnikami na górze, pozostałe niżej",[23,27,28],{},"Dwa tryby filtra: przepis ze wszystkimi wybranymi składnikami albo z co najmniej jednym",[23,30,31],{},"Filtry zapisane w adresie strony – przefiltrowaną listę można komuś wysłać",[23,33,34],{},"Przepis w oknie: zdjęcie, składniki i sposób przygotowania",[23,36,37],{},"Polski i angielski, jasny i ciemny motyw oraz rozmiar czcionki – zapamiętane w przeglądarce",[23,39,40],{},"Przepisy, składniki i tłumaczenia w plikach JSON, publikacja na GitHub Pages przez 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 – lista przepisów przefiltrowana po składniku","2024-01-28","Przepisy na kawę z kilku ebooków w jednym miejscu – wyszukiwanie po składnikach, link z filtrami i dwa języki. Vue 3 i TypeScript.",false,"md",[56,59,62,65],{"value":57,"text":58},"22","przepisy z kilku ebooków w jednym miejscu",{"value":60,"text":61},"33","składniki do wyszukiwania – z listy, bez wpisywania",{"value":63,"text":64},"2","tryby filtra – wszystkie wybrane składniki albo co najmniej jeden",{"value":63,"text":66},"języki – polski i angielski, zapamiętane w przeglądarce",[68,71],{"src":47,"width":48,"height":49,"alt":69,"caption":70},"Lista przepisów","Lista – przepisy z wybranym składnikiem na górze, pozostałe niżej",{"src":72,"width":48,"height":49,"alt":73,"caption":74},"\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Frecipe.webp","Przepis","Przepis w oknie – składniki i sposób przygotowania","\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-pl.jpg","\u002Fpl\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":5,"description":52},[85,86,87,88],"Vue 3","TypeScript","Vite","CSS","pl\u002Fprojects\u002F2024\u002Fcoffee-recipes\u002Findex",[91],"vue","1rlt5105bymZokJ1NLoyCo5ttxGN058--RE3v5Bt78o",[94],{"id":95,"title":96,"art":97,"body":98,"date":176,"description":177,"draft":53,"extension":54,"image":6,"kind":178,"meta":179,"navigation":80,"ogImage":180,"path":181,"project":182,"seo":183,"slug":6,"stem":184,"tags":185,"__hash__":188},"blog_pl\u002Fpl\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka.md","Trzy ebooki z przepisami i jedna zakładka w przeglądarce","\u002Fart\u002Fblog\u002Fcoffee-recipes.svg",{"type":8,"value":99,"toc":170},[100,103,106,110,113,121,125,128,144,147,151,154,158,161],[11,101,102],{},"Kupiłem ekspres do kawy. Razem z nim przyszedł mail z ebookiem z przepisami, drugi ebook dostałem za zapis do newslettera, a w ciągu miesiąca znalazłem jeszcze dwa–trzy kolejne. Brzmi jak raj dla kawosza – dopóki nie chcesz po prostu zrobić czegoś z tym, co masz w lodówce ☕",[11,104,105],{},"Bo jak szukać przepisu z miodem, skoro każdy ebook to osobny PDF, a każdy PDF trzeba przewinąć od początku do końca? Po kilku takich wieczorach uznałem, że wolę mieć wszystko w jednym miejscu, pod jednym linkiem w zakładkach.",[15,107,109],{"id":108},"najpierw-dane-potem-wygląd","Najpierw dane, potem wygląd",[11,111,112],{},"Zacząłem od przepisania przepisów do pliku JSON: nazwa, zdjęcie, składniki, sposób przygotowania i lista tagów – czyli składników, po których da się szukać. Dziś są tam 22 przepisy i 33 składniki. Tłumaczenia interfejsu też trafiły do osobnego pliku, więc strona działa po polsku i po angielsku.",[11,114,115,116,120],{},"Dopiero na tych danych zbudowałem widok w Vue 3 – listę kart, okno z przepisem i wyszukiwarkę. Przy okazji ćwiczyłem TypeScript i starałem się jak najrzadziej sięgać po ",[117,118,119],"code",{},"any",".",[15,122,124],{"id":123},"jedno-pytanie-dwie-odpowiedzi","Jedno pytanie, dwie odpowiedzi",[11,126,127],{},"Najciekawsze okazało się samo wyszukiwanie. Gdy wybierasz „miód” i „mleko”, możesz pytać o dwie różne rzeczy:",[20,129,130,138],{},[23,131,132,133,137],{},"pokaż przepisy, które mają ",[134,135,136],"strong",{},"wszystkie"," te składniki,",[23,139,132,140,143],{},[134,141,142],{},"co najmniej jeden"," z nich.",[11,145,146],{},"Dlatego filtr ma oba tryby, a przepisy pasujące do wyboru są na górze listy – reszta zostaje niżej, żeby nie zgubić niczego z oczu.",[15,148,150],{"id":149},"link-który-można-wysłać","Link, który można wysłać",[11,152,153],{},"Wybrane składniki zapisuję w adresie strony. Dzięki temu przefiltrowaną listę można zapisać w zakładkach albo wysłać komuś w wiadomości – i po otwarciu linku od razu widać te same przepisy.",[15,155,157],{"id":156},"co-z-tego-zostało","Co z tego zostało",[11,159,160],{},"Projekt robiłem bez tutoriala w stylu „jak zrobić aplikację z przepisami” i do dziś uważam, że to był dobrze spędzony czas. Najwięcej nauczyłem się nie z samego Vue, tylko z myślenia o danych: co jest przepisem, co składnikiem, a co tylko tekstem do pokazania.",[11,162,163,164,120],{},"A ekspres? Działa codziennie. Strona też – ",[165,166,169],"a",{"href":77,"rel":167},[168],"nofollow","zajrzyj do Coffee Recipes",{"title":42,"searchDepth":43,"depth":43,"links":171},[172,173,174,175],{"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","Jak kilka ebooków z przepisami na kawę zamieniłem w jedną stronę z wyszukiwaniem po składnikach – i czego nauczyłem się przy tym o Vue 3 i TypeScripcie.","post",{},"\u002Fog\u002Fblog\u002Fcoffee-recipes-pl.jpg","\u002Fpl\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka","\u002Fprojects\u002F2024\u002Fcoffee-recipes",{"title":96,"description":177},"pl\u002Fblog\u002F2024\u002Ftrzy-ebooki-z-przepisami-i-jedna-zakladka",[91,186,187],"typescript","projekt","ZaVHA3dTEtz1HHiHeVxmJWeFYgzQKx0lriNntZpW1RE",1791981731339]