Where do I start with translation/localization for accessibility?

[codevogel]

Topic

Hiya,

I would like to look into contributing to p5.js by translating the website to Dutch, my own native language.

Can anyone point me into the right direction on where to start on this process? I'm familiar with how localization works for websites, but there are a couple things that are less clear to me:

• When do you consider support 'finished' enough for it to be added to the website? I know you guys want the tool to feel consistent, so I'm not sure if you have any strict rulings on this. Does all content need to be translated or, say, mainly the 'references' section? What about news articles. about pages, etc?
• Do I need to make a commitment to keep updating future pages for a localization PR to be accepted? What is the general consensus on maintaining a language?
• Is there a page I have missed that guides contributors into the specific localization process for the p5.js website? I'm talking both conceptually (e.g. addresses the above questions) and technically (e.g. addresses the specific technical specifications for the localization process of the p5js website).

Thanks in advance, and I'm keen to see if I can help contribute.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[danicruz0415]

Hi @codevogel 
I'm not part of the P5 team, but I can answer some of your questions based on what I checked and offer you some guidance.

Checking the repo, I find the following:

• The p5js website is hosted on this github repo: https://github.com/processing/p5.js-website
• The content (as you can read on the readme of the repo) is in the folder ['src/content']. (https://github.com/processing/p5.js-website/tree/main/src/content)
• The localization for a new language seems to be enabled on the const.tsx file; I think you'd have to add your language there first.
• I think you can add the content in your language to the site by adding an element with the same name as the locale. For some pages it's a file (like here) or for some elements it's a folder (like here).
• Note that if the locale is not present, then the page will render in English, so not having everything translated won't break the website; just the pages that are missing will show up in English.

Second, addressing some of your questions:
(Again, I'm not part of the P5 team, so these answers are just what I think.)

When do you consider support 'finished' enough for it to be added to the website?

As you can see on the code, there are sections that are not translated to any language and are available only in English, so I don't think everything needs to be translated before merging. If you don't think you can translate all at once, I'd recommend you focus on the pages that you consider the most important for the people you want to help, like references, and so on. I think having some translations is better than none. Just I'd recommend translating full pages, not half pages, because if the page is missing then the page will be shown in English, but if a part of the page is missing it might not show at all.

Do I need to make a commitment to keep updating future pages for a localization PR to be accepted? 

I don't think so; I think anyone supports the project as long as he/she can. Obviously, it's great if you can keep the translations up-to-date but I don't think it's expected. Unfortunately, keeping the translations up to date is a really hard task, not only because it requires constant work but also because it's hard to keep track of the changes or notify the appropriate people when the original source changes. Some projects I've seen are trying to move away from this and go to automatic translation systems, which are not perfect but are getting better and better and are easier to maintain.

Is there a page I have missed that guides contributors into the specific localization process for the p5.js website?

The localization process I don't think is documented here; what I wrote above I wrote based on exploring the repo. I'd recommend you check how to run the website locally and then experiment a little bit. If you want a deeper understanding, you can check the [packages.json](https://github.com/processing/p5.js-website/blob/main/package.json) file to see what libraries are used (on the "dependencies" and "devDependencies" sections) and how they are used to render the site (on the "scripts" section).

BTW: P5 also has some friendly errors, that can help a lot when debugging. I did a PR to translate them to spanish here, you can check that PR to see how to translate them as well. The PR has not been reviewed nor commented on, but maybe it's worth also translating that too.

Hope it helps, good luck! 😄