Premiera serii bajek dla dzieci
“Bajeczki dla Eweczki”!
Jakiś czas temu postanowiłam napisać prosty skrypt, dzięku któremu wygeneruję HTML-ową wersję moich książeczek-bajeczek.
Książeczki, o których mówię, to króciutkie, proste bajeczki, które wieczorami przygotowuję mojej córeczce. Dotychczas przygotowywałam je przy użyciu LibreOffice, a wygenerowanego PDF-a wrzucałam na tablet. Czasami moja córcia wpadała na pomysł czytania bajeczek, gdy tabletu nie miałam przy sobie… Kto ma dzieci, ten wie, co to zwykle oznacza.
Dlatego posiadanie wersji on-line naszych książeczek stało się niemal koniecznością. Siadłam więc do klawiatury.
Dziś publikuję serię mini-książeczek “Bajeczki dla Eweczki”. Są one przeznaczone dla dzieci w wieku od 0 do 3 lat.
Jestem jedną z najlepszych ilustratorek książek dla dzieci wśród kobiet-informatyków :).
Każda z książeczek, które publikuję, otrzymała pozytywną opinię najważniejszego krytyka literackiego w kategorii “Bajeczki dla Eweczki” oraz została bardzo dobrze przyjęta przez domowe grono czytelnicze.
Najważniejszą osobą w tym gronie oraz opiniującym krytykiem jest oczywiście moja córeczka, której bardzo się te nasze książeczki podobają, a ich czytanie i oglądanie jest częścią naszego wieczornego rytuału.
Kodowanie
Pomysł publikacji książeczek oznaczał, oczywiście, że muszę wygenerować jakiegoś html-a i podlinkować kilka obrazków. Żeby nie było nudno, postanowiłam generator książeczzek napisać w TypeScript, którego nie znam. Udało mi się osiągnąć cel bez zaprzęgania wielkich frameworków. Nie musiałam nawet instalować node-a! Przypomniałam sobie, że kiedyś skompilowałam ze źródeł projekt Deno - runtime do javascriptu napisany w Ruście - więc uznałam, że to dobra okazja, żeby go wykorzystać.
Czego się nauczyłam
Oto lista zagadnień/narzędzi/bibliotek, o których wciąż niewiele wiem, ale otarłam się o nie, pisząc swój generator:
- Deno - domyślnie używa TypeScripta (więc nie muszę TypeScripta instalować, hurra!)
- TypeScript - bezpieczniejsza wersja JavaScriptu
- Nunjucks- biblioteka do generowania (renderowania) html-a z templejtów (ostatecznie jej nie użyłam)
- CSS flexbox - miałam okazję poczytać i użyć go do stworzenia prostego układu w moim html-u
- Toml (źródła) - wygodny, prosty format do konfiguracji
Założenia
Program przegląda wszystkie podkatalogi (o głębokości 1) podanego w wierszu poleceń katalogu. Jego zadanie polega na wygenerowaniu katalogu output
zawierającego:
- index.html
- katalog
assets
zawierający arkusze stylów:index.css
(dla strony głównej) istory.css
(dla pojedynczej książeczki) - katalogi odpowiadające bajeczkom, z których każdy zawiera:
- index.html - zawierający treść książeczki
- assets - katalog zawierający grafiki wykorzystane w index.html
Plik description.toml znajdujący się w podkatalogu jest opisem “książeczki” w formacie Toml a i zawiera:
- tytuł
- autora
- ścieżkę do grafiki na stronę tytułową
- tekst stopki obecnej na każdej ze stron
a także listę stron, z których każda posiada:
- numer strony
- ścieżkę do grafiki do umieszczenia na stronie
- tekst umieszczony w potrójnych apostrofach (parsowany do listy wierszy)
Przykład - opis książeczki (description.toml)
|
|
Nawigacja
Ze strony głównej można przejść do konkretnej książeczki klikając w obrazek tytułowy (lub tytuł), natomiast sama książeczka jest prezentowana w postaci pojedynczej strony.
Klikając w prawą połowę stony przechodzi się do kolejnej strony. Klikając w lewą połowę stony przechodzi się do poprzedniej strony.
Być może warto wygenerować odrębne strony html dla poszczególnych stron, dzięki temu do nawigacji nie będzie wymagana obsługa javascript w przeglądarce. To będzie mój pierwszy issue :)
Zakończenie
Kod projektu dostępny jest w repozytorium “stories” na GitHubie.