lmachens / soc.th.gl

A Songs of Conquest fansite
https://soc.th.gl
MIT License
1 stars 1 forks source link

Add locale selector #2

Closed lmachens closed 2 years ago

lmachens commented 2 years ago

This project already supports multiple locales, but you can not select a different locale. Examples: https://www.soc.gg/en/factions (English) https://www.soc.gg/de/factions (German)

The locale is automatically detected. See https://nextjs.org/docs/advanced-features/i18n-routing#automatic-locale-detection for more details.

The available locales are equal to the locales in-game. https://github.com/lmachens/soc.gg/blob/main/lib/collections/locale.json is generated from the game-assets.

The task is to create a locale/language selector to transit between locales. Technically, we can add links to change the locale: https://nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales I am open for ideas how to implement a selector on UI side. One idea is to add a https://mantine.dev/core/action-icon/ with https://mantine.dev/core/popover/ next to the social icons (GitHub / Discord). I think a country flag would be nice here. Icon packs: https://github.com/lipis/flag-icons https://www.npmjs.com/package/country-flag-icons

Linux249 commented 2 years ago

I had a look at the mapping from what's inside the locale.json file to both flag-libs.

I try to use the code attribute directly get flags/icons from both libraries. It turns out, that this isn't possible for each country. E.g. you have flags for "UK" or "US" and not for "en", Japan is "jp" (not "ja") and Korea has 'kp/kr' and not 'ko' 😵

Is the https://github.com/lmachens/soc.gg/blob/main/lib/collections/locale.json file automatically generated from a script parsing the game files? What is the flags attribute for? I wonder if i could change the content or if this will be overwritten by a "export" from the game data in the future.

I think I need some hard-coded mapping for the code attribute to the related icon.

lmachens commented 2 years ago

Yes, this file is generated from the game files. So either add a mapping an generating or on displaying the flags. I would do the latter, because it doesn't require app wide changes.