Implementing i18n

[fabm3n]

This is currently a WIP Implementation for basic i18n in account and auth components. There won't be any language switching in this PR.

• [x] Implement (and / or update) the 18n backend and dependencies
• [x] Implement i18n in all account and auth components
• [x] resources/scripts/routers/DashboardRouter.tsx

Files i need help:

• [ ] resources/scripts/components/elements/ScreenBlock.tsx

Things to do:

• [ ] Remove Trans component. From the docs: "It does ONLY interpolation. It does not rerender on language change or load any translations needed."

I will update this post if more progress is done.

This will not close #2518 because this is only a small step for i18n.

[DaneEveritt]

I wonder if we can make webpack bundle the english translations into the bundle itself so they're immediately available until whatever language is selected is loaded in?

[fabm3n]

Now the translations are bundled into the bundle.js. Currently are all translations bundled into the file. I think you don't like this, right?

[DaneEveritt]

@fabm3n No, it should bundle one language, I don't want to bloat the download size unnecessarily. If the user needs a different language than is bundled it should load it from the server.

[fabm3n]

This is still WIP. The Translations are not fully implemented.

[DaneEveritt]

Hey @fabm3n I'm actually making some changes to how the translation files are laid out to avoid a huge nest of strings, might want to hold off for a little bit until I can get that change pushed up. Should make it much easier to work with the files and re-use strings where needed. 👍🏼

[fabm3n]

Hey @fabm3n I'm actually making some changes to how the translation files are laid out to avoid a huge nest of strings, might want to hold off for a little bit until I can get that change pushed up. Should make it much easier to work with the files and re-use strings where needed. 👍🏼

Ok, i will commit my latest changes and then i will wait.

[DaneEveritt]

@fabm3n Okay, I pushed up a change to the translation file structure. Look at en-us/dashboard.json for the new format (specifically the 2fa section). Basically, when you have a bunch of keys related to specific fields and what-not it is much easier for someone else to understand and find when they're grouped together.

Currently with all of the keys in a long single file it is super difficult to know where they are being used, and figure out if there are keys that can be re-used. The elements.json file contains single-word/button titles that can be re-used a lot.

Also, I noticed there were a lot of instances of keys being added but not used yet. Let's try to avoid that for now because it makes it super difficult to see at a glance what is going on.

Finally, for the sake of keeping this review pretty easy and whatnot, lets only translate the dashboard/auth/account areas and leave out the server views for now. It should be much easier to make sure we're happy with the whole setup and figure out a good organization structure. From there we can do future PRs to translate more of the frontend (also, for now only translate to en-us, we'll do a second translation run once this is done and merged to add more languages).

[fabm3n]

I think my latest merge develop into i18n broke a lot of stuff....

[Ferks-FK]

@fabm3n What are the problems with the ScreanBlock and DashboardRouter files?

[fabm3n]

@fabm3n What are the problems with the ScreanBlock and DashboardRouter files?

I tried withTranslation, useTranslation and the Trans Component but i didn't got anything working. I will have a new look into it in the next days if i can get it working now.

[Ferks-FK]

try this in DashboardRouter

<NavLink to={'/account'} exact>{i18n.t('KEY-HERE')}</NavLink> <NavLink to={'/account/api'}>{i18n.t('KEY-HERE')}</NavLink>

[fabm3n]

try this in DashboardRouter

<NavLink to={'/account'} exact>{i18n.t('KEY-HERE')}</NavLink> <NavLink to={'/account/api'}>{i18n.t('KEY-HERE')}</NavLink>

You can't use the i18n.t function because i18n isn't initialized. You need to use the reacti18n package. I found a solution for the dashboard router.

[SerinaNya]

I add the zh-cn translations. -> https://github.com/fabm3n/panel/pull/6

[fabm3n]

I add the zh-cn translations. -> fabm3n#6

@jinzhijie Unfortunately, this is not merged, since this PR only contains the basic implementation of i18n.

[DaneEveritt]

This PR will be maintained even with the PR policy changes mentioned here: https://github.com/pterodactyl/panel/blob/develop/CONTRIBUTING.md

I believe at least getting the base logic into the codebase needed to support i18n will be beneficial in the long run, even if we only end up doing small pieces of the codebase at a time. That is far easier to review and handle rolling forward, rather than dealing with the mental overhead and complexity of doing the whole codebase at once.

I believe we settled on adding in the base logic for i18n and just doing the dashboard for this @fabm3n? I can't remember anymore, but if we can make that be the case here I'm good to merge the work through.

[fabm3n]

Yes the plan for this PR is only auth and dahboard components and the basic i18n implementation (without language switcher. This should be implemented when all string are managed by i18n).

There are currently the following tasks left: i18n in this file: resources/scripts/components/elements/ScreenBlock.tsx

And i planned to remove all trans components (from the docs: "It does ONLY interpolation. It does not rerender on language change or load any translations needed. Check [useTranslation hook] or [withTranslation HOC] for those cases.")

I will have a look into it tomorrow.

[ThnksCJ]

is there an idea when this could be done because i need a russian translation for ptero

[victorpahuus]

Any updates on this? Could be awesome if we could get inplemented more languages. I have translated several opensource projects, and several of them have used Crowdin. It makes it easy for anyone to contribute translations, even for those with no coding experience.

Maybe you could implement Crowdin in the project?