Theming

For styling the page, I used the TailwindCSS library along with pure CSS.

Resources

Przy budowie tej strony wykorzystałem dokumentację Next.js oraz tutorial o tej technologii. Bardzo zmagałem się z obsługą wielu języków. Pierwsza wersja strony była napisana na podstawie tego repozytorium. Jednak potem udało mi się w końcu poprawnie zaimplementować wielojęzyczność za pomocą tej dokumentacji. Widget do wyboru języka zostawiłem z wcześniejszej wersji strony, ze wspomnianego repozytorium.

Hosting, CI/CD, and repository

Kod strony znajduje się na repozytorium GitHub. Platforma Vercel została wykorzystana do hostowania strony - ma ona bardzo dobre wsparcie Next.js, wystarczy wskazać repozytorium GitHub, natomaist platofrma Vercel automatycznie robi deployment oraz ustawia mechanizm CI/CD.

PWA and service workers

By specifying manifest file for the webpage correctly, I have enabled this page to work as PWA (so it is installable as application). Moreover, I have added custom offline page (when user is offline, or page is unavailable), using service workers.

Pierwsza implementacja service workerów byłą kiepska, ponieważ polagała na dodaniu pliku JS, zupełnie poza systemem budowania aplikacji - trzeba było osobno utworzyć plik i wstawić na sztywno kod JS jako tekst w layoucie, aby zaimportować ten plik. Jednak znalazłem o wiele lepsze rozwiązanie, które rozwiązuje te wszystkie problemy. Jest to biblioteka Serwist, której kod można znaleźć na GitHubie.

PWA workshop

Uruchomiłem również stronę PWA z kodem na podstawie tego samouczka, który dotyczył implementacji i ulepszania strony PWA, która była prostym edytorem markdown z możliwością otwierania i zapisywania plików, oraz podglądu "na żywo" tworzonego dokumentu. Strona jednak działa poprawnie tylko na komputerach.