Theming

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

Resources

While building this site, I referenced the Next.js documentation and a tutorial on this technology. I struggled a lot with handling multiple languages. The initial version of the site was based on this repository. However, eventually I managed to implement multilingual support correctly using this documentation. I kept the language selection widget from the previous version of the site, from the mentioned repository.

Hosting, CI/CD, and repository

The code for the site is hosted on GitHub repository. The Vercel platform was used for hosting the site - it has excellent support for Next.js, just the GitHub repository needs to be specified, and Vercel platform automatically handles deployment and sets up 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.

The first implementation of service workers was poor because it relied on adding a JS file completely outside the application's build system - you had to separately create a file and hardcode the JS code into the layout to import that file. However, I found a much better solution that solves all these problems. It's the Servist library, whose code can be found on GitHub.

PWA workshop

I have also launched PWA website with code based on this tutorial, which was about implementing and enhancing PWA website, which was simple markdown editor with possibility to open and save files, with live preview. The page, however, works correctly only on PCs.