Extracting english texts from source code and replacing by translation entries for the recent "sketch visibility" feature, for both en-US and pt-BR locales

[cassiano]

Extracting english texts from source code and replacing by translation entries for the recent "sketch visibility" feature, for both en-US and pt-BR locales.

Changes:

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[raclim]

Thanks so much for catching these, this is great!!

Will merge this in shortly before the end of the week!

[cassiano]

@raclim, IMHO any new features (such as the "sketch visibility" option) or changes to existing ones should only be approved if they FULLY SUPPORT i18n, providing basic translations for the en-US locale, which would serve as the basis for all remaining locales afterwords.

Trying to find English words directly in the source code later can easily become a tedious and hard job and, again IMHO, should be completely avoided, improving the overall quality of this fantastic product.

The same problem solved in my PR happens in the mobile menu (for any language other than en-US), as shown below for the Portuguese (pt-BR) translation:

Notice the "Settings" section above, as well as the "Donate" button, both displayed in English and apparently lacking proper translation keys.

There might be others, but trying to spot them is an extremely difficult task.

[raclim]

Thanks for pointing this out! We generally do aim to cover i18n for new features, but occasionally things slip through. Maybe we can add it somewhere to the contributor docs to emphasize this? Or if you have suggestions for other places where it could be highlighted?

The "Donate" button is a third-party widget, which we believe supports localization through browser detection. If it turns out it doesn't we can look into how to implement it or using any other alternatives!

[cassiano]

No, the "Donate" button appears hard-coded inside the source code. See line 53 below:

I will try to open another PR and fix these translations as well, for the en-US and pt-BR locales only, as usual.

But I agree that this should/could be emphasized in the contributor docs.

[cassiano]

However, the above code IS NOT a React functional component, so unfortunately the t() helper won't be available in this case, because it is returned by the useTranslation() React hook and of course cannot be used outside of React.

[cassiano]

Done! Notice the Donate button unfortunately could not be (easily) fixed.

#3642

[raclim]

I see, thanks for the clarification and for following up on the mobile translations—I'll take a look at this in a bit!

I think then we can maybe use i18n.t() (as well as changing the import on line 11 to so we have direct access to the118n instance) instead of the React translation hook?

import i18n from './i18n';

buttonScript.setAttribute('data-button-cta', i18n.t('About.donate'));

This won't work since i18n isn't fully initialized yet at this point, but I think there could be a potential workaround from this?However, since this button is only intended to be used until the end of the month (though it's possible it may be used again for future fundraisers), I'm not sure if it might be worth digging into.

[cassiano]

In fact using i18n.t('About.donate') directly does NOT work.