openzim / zimit-frontend

Zimit Public Web UI
https://zimit.kiwix.org
GNU General Public License v3.0
7 stars 8 forks source link

GSoC 2024: Internationalization Implementation for Zimit Frontend #51

Open Onyx2406 opened 3 months ago

Onyx2406 commented 3 months ago

Fixes #46 See also https://github.com/openzim/overview/issues/28

Overview

This pull request introduces comprehensive internationalization (i18n) support to the Zimit frontend.

What Has Been Done

What Is Left

Screenshots

image

kelson42 commented 3 months ago

@Onyx2406 Thank you for your PR, here a few questions:

Onyx2406 commented 3 months ago

@Onyx2406 Thank you for your PR, here a few questions:

It does fix #46, but this PR only adds translations to the strings within this repository using Vue I18n. It doesn't translate the form details from Zimfarm. This PR only contains code to solve #46 and not #28. (I wanted to refer to https://github.com/openzim/overview/issues/28).

kelson42 commented 3 months ago

@nikerabbit @Onyx2406 Do you know if this translation file can be indgested by Translatewiki?

Onyx2406 commented 3 months ago

@kelson42, they are using a similar structure at https://github.com/mathjax/MathJax-i18n, so it should work.

Nikerabbit commented 3 months ago

@Nikerabbit @Onyx2406 Do you know if this translation file can be indgested by Translatewiki?

Yes, we do support nested JSON. Also FYI we have recently updated our guidance for new projects: https://translatewiki.net/wiki/Translating:New_project

Onyx2406 commented 3 months ago

@benoit74 Regarding splitting the integration with TranslateWiki into another PR, I completely agree. I have added the footer i18n.

I'll ensure that RTL support is tested and functional before merging. However, as the application currently supports only two languages which don't require RTL support, We can add RTL support to a future PR when additional RTL languages are added?

I've added the qqq language file for translation instructions.

For the automated browser language detection improvement, I'll do further testing across different browsers, so it's a normal testing and nothing special.

benoit74 commented 3 months ago

Thank you ! Regarding RTL support, I do not mind to split it into another PR if there is too much work. It is however a pre-requisite for TranslateWiki integration and mostly a requirement for us, we have to translate the website into Farsi / Persian and already have persons ready to do the translation, so it will be in use quite quickly after TranslateWiki integration. Doesn't need to be perfect, but at least it should look pretty (e.g. I don't think we necessarily have to transfer all left buttons to the right and vice-versa, but at least the text should be readable and preferably right aligned when it was left aligned).

Onyx2406 commented 3 months ago

Alright. In that case, it's better to push commits for RTL Support in this PR itself.

benoit74 commented 3 months ago

Btw, do not forget to have a look at human_size_limit and human_time_limit, this must be internationalized as well (especially for RTL I think).

Regarding the persian translation, is it a language you speak or did you just performed an automated translation? If it is an automated translation, we will definitely need someone else to review it, I can't read it at all.

Nikerabbit commented 3 months ago

FYI translatewiki.net prefers two letter language codes if one exists. Else we need to add code mapping.

Onyx2406 commented 3 months ago

just performed an automated translation

I had just performed an automated translation so we need someone to review it.

Onyx2406 commented 3 months ago

Do we need to change the logo and buttons in RTL like this:

image

benoit74 commented 3 months ago

@Onyx2406 I think this is exactly what we where referring to when mentioning adding support for RTL languages.

@Popolechien @kelson42 @rgaudin do you confirm we want to reverse the layout when selecting a RTL language for Zimit as proposed in https://github.com/openzim/zimit-frontend/pull/51#issuecomment-1992289575?

Note that other screen(s) will have to be adapted as well.

rgaudin commented 3 months ago

@Popolechien @kelson42 @rgaudin do you confirm we want to reverse the layout when selecting a RTL language for Zimit

Yes

Onyx2406 commented 3 months ago

Note that other screen(s) will have to be adapted as well.

@benoit74 Any screen you are referring to other than the main page? RTL support (reverses the layout) now works well for Farsi. It would be great if you could test it.

benoit74 commented 3 months ago

@benoit74 Any screen you are referring to other than the main page? RTL support (reverses the layout) now works well for Farsi. It would be great if you could test it.

I was referring to the fact that 3 components (and their subcomponents) have to be adapted: Request, NotFound and NewRequest.

Please tell me once code is ready for a new review (or even better, request it directly through the dedicated button if you can, button is supposed to be in the upper right "Reviewers" box, I never recall if external contributors have access to it or not).

benoit74 commented 2 months ago

New issue about what is left (not part of this issue / PR): https://github.com/openzim/zimit-frontend/issues/53

Onyx2406 commented 2 months ago

Wouldn't it be simpler to move the select box out of the header, keep the header as it was and put an absolute positioning to the select box?

This worked, thanks!

benoit74 commented 2 months ago

Thank you, unfortunately you again modified the indentation of many files.

I'm a bit sorry about that, but I will take over the end of this PR from this point, because I need to activate prettier and eslint on this, and this is way beyond the scope of this PR.

Please consider that work is done from this point, I will finish what needs to be done. I will convert this to draft so that it is not merged by mistake.

Thank you.