Localization using Paraglide.js

[MohammedEAbdelAziz]

feat:

• Added localization using paraglide.js, languages are English and Italian (AI translation).
• Added language switcher in settings with relevant CSS file (definitely needs to be adjusted).

notes:

• I used copilot in this as I usually use Svelte and not native HTML CSS JS, but I have used paraglide multiple times and it's great.
• I choose Italian to add because I thought you could validate it, I can add Arabic but it would require adding support for RTL.
• Not all text is translated because
  1. This is merely a demo. However, I can continue working on it somewhere in the future, if it's within the plan to include of course.
  2. I didn't study the code enough to know where the rest of the text is originating and populating.

explanation:

• Static content is translated on page load.

• Dynamic content is handled by the companion DynamicTextUpdater.

• User preferences are persisted across sessions.

• Messages are saved in {locale}.json and accessed using m['parent.child']() function.

• There is a localization manager (utils/localization.js) which ultimately handles the following:

  • Locale switching
  • Text updates during runtime (after switching language)
  • Updates the HTML lang tag

• There is also a dynamic text updater (utils/dynamic-text-updater.js) that updates text content when:

  • Timer state changes
  • DOM elements are added dynamically