“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.

Zapraszam do czytania :)

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) i story.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)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

title = "Dziwna historia"
author = "Jan Kowalski"
titleImagePath = "tytulowa_grafika.jpg"
footer = "Wydawnictwo Klawisz"

[[pages]]
number = 1
imagePath = "strona_1.jpg"
text = """
To tekst pierwszej strony
"""

[[pages]]
number = 2
imagePath = "strona_2.jpg"
text = """
To tekst dwuwierszowy
na drugiej stronie
"""

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.