Motywy

Do stylowania strony wykorzystałem bibliotekę TailwindCSS oraz czystego CSSa.

Zasoby

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.

Hostowanie, CI/CD oraz repozytorium

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 oraz service workers

Określając poprawnie plik manifestu, umożliwiłem tej stronie działanie jako PWA (więc można ją zainstalować jako aplikację). Co więcej, dodałem niestandardową stronę offline (gdy użytkownik jest offline lub strona jest niedostępna), korzystając z service workerów.

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.

Warsztaty PWA

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.