Add i18n localization

[rickstaa]

Is your feature request related to a problem? Please describe.

Since we have users from all over the world, it would be nice to add localization.

Describe the solution you'd like

Both emoji-mart and material-UI provide localization options (see https://github.com/missive/emoji-mart#options--props and https://mui.com/material-ui/guides/localization/). The only things we have to translate are the header and footer texts. We can use a localization tool like Crowdin to manage these translations (see https://crowdin.com/).

[rickstaa]

Initial setup done at add_i18next:

• [x] Add language switcher button.
• [x] Add emoji-mart localization.
• [x] Update contributing to point to Crowdin.

[kenxran]

I would to translate to languages zh-TW, zh-HK, zh-CN and vi-VN, thanks !

[rickstaa]

I would to translate to languages zh-TW, zh-HK, zh-CN and vi-VN, thanks !

Amazing! I will probably finish this in January. Will let you know👍.

[rickstaa]

I assigned myself so that I remember to implement this feature. I, however, currently do not have the time to complete it. If anybody else would like to complete https://github.com/rickstaa/github-emoji-picker/tree/add_i18next, feel free to comment below, and I will assign you instead. 🤝

[sjsanc]

Hey, I'm happy to give it a go.

[rickstaa]

Hey, I'm happy to give it a go.

Amazing 🚀. I completed the main translation-related features and linked the repository to https://crowdin.com/project/github-emoji-picker. I just merged the changes I already did in https://github.com/rickstaa/github-emoji-picker/pull/51.

It currently uses the browser settings to determine the correct localization. The thing that still needs to be implemented is to create a UI element that people can use to switch the localization. Maybe we can add a localization button next to the theme switch button:

Or put both the theme switch and localization settings inside a Material-UI settings component:

While doing this, we must ensure that the selected localization is remembered in the localStorage.

[rickstaa]

I would to translate to languages zh-TW, zh-HK, zh-CN and vi-VN, thanks !

@kenxran You can already add these translations through https://crowdin.com/project/github-emoji-picker 🎉. As explained above, the current implementation does not yet have a language switch button. However, you can already test the languages in Crowding through the ?lng=nl query parameter.

[sjsanc]

@rickstaa - Finished off the selector. I wanted to the use the Intl API for converting display names but it had too many holes in it that lead to some messy code. For example, it couldn't figure out Sanskrit at all.

I'm getting an error trying to push my branch to the remote origin though: ERROR: Permission to rickstaa/github-emoji-picker.git denied to sjsanc. I've never contributed to a public repository before so I might be missing something obvious here...

[rickstaa]

@rickstaa - Finished off the selector. I wanted to the use the Intl API for converting display names but it had too many holes in it that lead to some messy code. For example, it couldn't figure out Sanskrit at all.

I'm getting an error trying to push my branch to the remote origin though: ERROR: Permission to rickstaa/github-emoji-picker.git denied to sjsanc. I've never contributed to a public repository before so I might be missing something obvious here...

@sjsanc Amazing that you finished the selector! ❤️‍🔥 Ah, no problem; I think the error is because you are trying to push to the main repository (i.e. https://github.com/rickstaa/github-emoji-picker). You should instead fork the main repository, make changes and create a PR since you are not a collaborator yet of the main repository. Since you already cloned the main repository, I think the best steps to create a pull request with your changes are:

1. Fork the repository using GitHub's fork button.
2. Change the remote to your own remote git remote set-url origin [email protected]:username/rep_name.git.
3. Fetch the changes git fetch --all.
4. Push the commit to your fork.
5. Create a PR on the main branch through GitHub's interface.

Let me know if that works. I'm very curious about the new selector 🚀.

[sjsanc]

Done. https://github.com/rickstaa/github-emoji-picker/pull/63#issuecomment-1418804615 - Thanks for the help :tada: