chore(i8n,docs): processed translations (#41718)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
CamperBot
GitHub
@ -2,11 +2,13 @@
|
||||
|
||||
Read our ["How to Contribute to Open Source Guide"](https://github.com/freeCodeCamp/how-to-contribute-to-open-source). It's a comprehensive reference for first-timer-friendly projects. And it includes a lot of open source contribution tips.
|
||||
|
||||
### Can I translate freeCodeCamp's curriculum?
|
||||
### Can I translate freeCodeCamp's resources?
|
||||
|
||||
Yes - Read [this guide](/how-to-translate-files) if you are interested in contributing to translations.
|
||||
Yes - You can contribute to any of the 30+ languages we have enabled on our translation platform.
|
||||
|
||||
Currently we have the user contributed translations being done in Chinese and Español. We intend to localize freeCodeCamp into several major world languages. You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort).
|
||||
We have the user contributed translations live in Chinese (中文) and Spanish (Español). We intend to localize freeCodeCamp into several major world languages. You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort).
|
||||
|
||||
If you are interested in contributing to translations please makes sure you [read this guide](/how-to-translate-files) first.
|
||||
|
||||
### How can I report a new bug?
|
||||
|
||||
@ -79,7 +81,6 @@ If you have queries about the stack, architecture of the codebase, translations,
|
||||
| Nicholas Carrigan | [@nhcarrigan](https://forum.freecodecamp.org/u/nhcarrigan) |
|
||||
| Oliver Eyton-Williams | [@ojeytonwilliams](https://forum.freecodecamp.org/u/ojeytonwilliams) |
|
||||
| Rafael D Hernandez | [@RafaelHernandez](https://forum.freecodecamp.org/u/rafaelhernandez) |
|
||||
| Randell Dawson | [@RandellDawson](https://forum.freecodecamp.org/u/randelldawson) |
|
||||
| Tom Mondloc | [@moT01](https://forum.freecodecamp.org/u/moT01) |
|
||||
|
||||
**You can email our developer staff at: `dev[at]freecodecamp.org`**
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
- [Work on the news theme](how-to-work-on-the-news-theme.md)
|
||||
- [Work on the docs theme](how-to-work-on-the-docs-theme.md)
|
||||
- **Translation Contribution**
|
||||
- [Translating a Curriculum File](how-to-translate-files.md)
|
||||
- [Proofreading a Curriculum File](how-to-proofread-files.md)
|
||||
- [How to Translate the Website](how-to-translate-the-website.md)
|
||||
- [Work on translating resources](how-to-translate-files.md)
|
||||
- [Work on proofreading translations](how-to-proofread-files.md)
|
||||
- **Optional Guides**
|
||||
- [Set up freeCodeCamp on Windows (WSL)](how-to-setup-wsl.md)
|
||||
- [Add Cypress tests](how-to-add-cypress-tests.md)
|
||||
- [Work on localized client web app](how-to-work-on-localized-client-webapp.md)
|
||||
- [Catch outgoing emails locally](how-to-catch-outgoing-emails-locally.md)
|
||||
|
||||
---
|
||||
|
||||
@ -1,40 +1,54 @@
|
||||
# 如何校对译文
|
||||
|
||||
我们的校对团队负责确保译文准确地反映了源文件的意思。
|
||||
Our proofreading team is responsible for ensuring that translations accurately reflect the source text. We trust our proofreaders to ensure that we have very high quality translations.
|
||||
|
||||
访问并登录[我们的翻译网站](https://translate.freecodecamp.org)，开始校对。 然后，在顶部导航栏中选择“Go to console”，从公共视图（public view）切换到工作区视图（workspace view）。
|
||||
All our translations are done by hand, by real humans. Proofreading ensures that there is a consistent tone across our all our translated resources like the curriculum.
|
||||
|
||||
To begin proofreading, visit [our translation platform](https://translate.freecodecamp.org) and login. Select "Go to console" in the top navigation bar to switch from the public view to the workspace view.
|
||||
|
||||
## 选择文件
|
||||
|
||||
你将看到你已被授予访问权限的项目列表。 选择你想参与校对的项目，然后选择你要校对的语言版本。
|
||||
You should see the list of projects you have been granted access to. Select the project that you would like to proofread, then select the language.
|
||||
|
||||
|
||||
|
||||
|
||||
在文件列表中， 通过点击文件右侧的 `Proofread` 按钮选择你要校对的文件，然后从出现的下拉菜单中选择 `Proofreading`。
|
||||
You should now see the list of available files. Choose your file by selecting the `Proofread` button on the right of that file, then choosing `Proofreading` from the drop-down menu that appears.
|
||||
|
||||
> [!NOTE] 如果你在工作区视图（workspace view）中，但想要[翻译文件](./how-to-translate-files.md)，而不是校对文件，那么你可以从下拉菜单中选择 `Crowdsourcing`。
|
||||
|
||||
## 校对译文
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Add proofread/crowdsource button to the image-->
|
||||
|
||||
接着，你将看到所选文件中的字符串列表及其译文。 此处显示的译文是翻译社区评分最高（基于赞同和反对票）的译文。
|
||||
Here you will see the list of strings in the selected file, with their related translations. The translation that is displayed here is the translation that has received the highest score (between upvotes and downvotes) from the translation community.
|
||||
|
||||
你可以查看某个字符串的*所有*建议的译文，在确认选用哪个译文时，你应当结合社区评分（基于赞同和反对票）来确认。 社区可以审核建议的译文，并推荐其中最准确、最清晰的一个。
|
||||
While you can view _all_ proposed translations for a given string, the community scores (determined by the upvotes and downvotes) should be taken into consideration when choosing which translation to approve. The community can review proposed translations and recommend which one is most accurate and clear.
|
||||
|
||||
1. 这是源文件的字符串（英文）。
|
||||
2. 这是相匹配的翻译的字符串。 此处将显示基于赞同和反对票数的最受欢迎的译文建议。
|
||||
3. 点击这个选择标记按钮确认该译文。
|
||||
4. Crowdin 将显示每个字符串的状态。 `Done` 的意思是已经确认了译文，我们将在下次从 Crowdin 拉取内容的时候下载已确认的译文。 `Todo` 的意思是字符串的译文还未被校对确认。 `Hidden` 的意思是字符串是被锁定的，*不应该被翻译*。 `Comment` 的意思是对此字符串有评论消息。
|
||||
4. Crowdin 将显示每个字符串的状态。 `Done` 的意思是已经确认了译文，我们将在下次从 Crowdin 拉取内容的时候下载已确认的译文。 `Todo` 的意思是字符串的译文还未被校对确认。 `Hidden` means the string is locked and _should not be translated_. `Comment` 的意思是对此字符串有评论消息。
|
||||
5. 可以使用复框选择多条译文，并在此处一次性批量确认。
|
||||
6. 你可以在此处查看社区建议的译文，社区对其的评分，以及 Crowdin 建议的译文。
|
||||
7. 这个按钮显示/隐藏右侧的显示窗口，你可以在其中查看翻译、评论、翻译记忆和词汇表术语。
|
||||
8. Crowdin 在此处显示来自质量保证检查的报错消息。 也就是说，如果译文中有不正确的地方，Crowdin 会通知你。 请仔细校对确认出现报错消息的译文。
|
||||
|
||||
> [!WARNING] 校对确认之后的字符串会被标注为已完成。我们将在下一次从 Crowdin 拉取内容时下载这些字符串。
|
||||
No additional actions are required once a file has been proofread.
|
||||
|
||||
当文件被校对确认完毕，你不需要采取其他任何行动。 如果你有任何问题，或者感兴趣成为一名校对贡献者，请随时在[译者交流群](https://chat.freecodecamp.org/channel/translators)联系我们。 If you are already a proofreader and are interested in having a dedicated channel for a specific language, [fill out our form](https://forms.gle/XU5CyutrYCgDYaVZA).
|
||||
> [!NOTE] Approving a string in the proofreading view will mark it as complete and it will be downloaded in our next pull from Crowdin to GitHub.
|
||||
|
||||
## Becoming a proofreader
|
||||
|
||||
If you have any questions, or are interested in becoming a proofreader, feel free to reach out to us in our [translators chat room](https://chat.freecodecamp.org/channel/translators). We will typically grant you proofreading access if you have been contributing to freeCodeCamp for a while.
|
||||
|
||||
Our staff team and community moderators teams are always looking for kind volunteers like you who help us make high quality translations available to the world.
|
||||
|
||||
> [!NOTE] Crowdin 会允许你校对你自己的译文。 一般来说，最好是让另一位校对者审核你的译文，以确保最终内容的准确性。
|
||||
|
||||
## Creating a channel on Chat for a world language
|
||||
|
||||
For the most part we encourage you to use the [translators chat](https://chat.freecodecamp.org/channel/translators) room for all correspondence. However if the team of volunteer translators grows for a certain language, we can consider creating additional break-out channel for the language.
|
||||
|
||||
If you are already a proofreader and are interested in having a dedicated channel on our chat servers for a specific language, [fill out this form](https://forms.gle/XU5CyutrYCgDYaVZA).
|
||||
|
||||
@ -1,84 +1,148 @@
|
||||
# 如何翻译文件
|
||||
# How to Translate freeCodeCamp's resources
|
||||
|
||||
> [!NOTE] 所有翻译都在 https://translate.freecodecamp.org 进行——我们不再使用 GitHub 直接翻译文件。
|
||||
It's our dream to provide you with the resources to learn, no matter the world language you speak. To help us with this massive effort, we have integrated our open-source code-base & curriculum with [Crowdin](https://crowdin.com/) - A tool to help us localize our code-base.
|
||||
|
||||
首先，请访问并登录我们的翻译网站（如果你之前没有参与过翻译协作，那么你需要新建一个账号）。
|
||||
The translation workflow is split into two main activities:
|
||||
|
||||
## 选择项目和文件
|
||||
- **Translating** curriculum files, documentation and UI elements like buttons, labels, etc.:
|
||||
|
||||
你应该可以看到两个“项目”可供翻译：`Contributing Documentation` 项目，包含本文档网站的所有文件；`Coding Curriculum` 项目，包含 `/learn` 的课程文件。
|
||||
As a translator you can sign up on [our translation platform](https://translate.freecodecamp.org) and contribute translations in any of the 30+ languages enabled in there.
|
||||
|
||||
选择你想参与贡献的项目，然后你会看到不同语言版本的可翻译文件列表。
|
||||
- **Proofreading** the translations for all of the above.
|
||||
|
||||
|
||||
Proofreaders verify that the community contributed translations are uniform in tone and free of common issues like typos, etc. In short, they ensure that the quality of translations is high. Note that we do not use machine translations for a reason.
|
||||
|
||||
选择你想参与翻译的语言，然后你会看到完整的文件列表。
|
||||
> [!WARNING] We are no longer using GitHub to translate files directly, if you are a returning contributor head to our [translation platform](https://translate.freecodecamp.org/) instead.
|
||||
|
||||
|
||||
## Prepare yourself for contributions
|
||||
|
||||
每个文件和文件夹都会显示一个进度条。 进度条的**蓝色**部分表示多少百分比的文件已经被翻译了，而**绿色**部分表示多少百分比的文件已经被校对团队审核确认。
|
||||
> The freeCodeCamp Localization Roadmap – There Are No Speed Limits
|
||||
|
||||
选择你想翻译的文件，然后 Crowdin 会打开编辑界面。
|
||||
You can translate as much as you want, when you want. It's only a matter of how much time and energy you are willing to invest as a volunteer translator.
|
||||
|
||||
> [!NOTE] 打开编辑界面后，你需要点击设置图标（右上角的齿轮状图标），将 “HTML tags displaying” 设置为 “SHOW”。 这样，文件中会显示 `<code></code>` 标签，而不是 `<0></0>` 标签。
|
||||
We just ask that you understand the following:
|
||||
|
||||
## 翻译文件
|
||||
1. **Translations are a team effort.**
|
||||
|
||||
|
||||
Translating freeCodeCamp's resources is one of the most fun and rewarding experiences as a contributor, and it works best if you involve your friends and colleagues who speak the same world language as you.
|
||||
|
||||
Crowdin 将一个文件分割成“字符串”（通常是一个个句子），以供翻译。 请单独翻译每个字符串。 在上图中：
|
||||
We recommend joining [our community forum](https://forum.freecodecamp.org/c/contributors/3) and [translators chat room](https://chat.freecodecamp.org/channel/translators) with your friends and showing your interest before starting off with translations. Crowdin makes it easy to contribute translations, but it's still a lot of work.
|
||||
|
||||
1. 标注为绿色的字符串已经有建议的译文。
|
||||
2. 标注为红色的字符串_没有_建议的译文。
|
||||
3. 显示为灰色的内容是不能翻译的。 这些内容是代码块或其他内容，是不可修改的。 你不能在编辑框中选中这些字符串。
|
||||
4. 如果某位贡献者对某个字符串有建议的译文，那么 Crowdin 将在此处显示所有的建议。 你无法保存相同的译文。如果某个译文是正确的，那么你可以点击 `+` 图标，给它投票表示赞同。 如果你觉得某个译文不正确，那么你可以点击 `-` 图标，投反对票。
|
||||
5. Crowdin 将基于翻译记忆（TM）或机器翻译（MT）推荐译文。 翻译记忆是指我们已在其他文件中翻译过/批准过的相似的或相同的字符串。 机器翻译是指由 Crowdin 系统推荐的翻译。
|
||||
6. 这是编辑器窗口，你可以在其中输入你对于所选字符串建议的译文。
|
||||
7. 编辑窗口当前选中的字符串将被标注为黄色。
|
||||
8. 这里的标签是表示字符串的状态。 `Done` 标签表示字符串有至少一个建议的译文。 `Todo` 标签表示字符串还没有建议的译文。
|
||||
9. 这里是评论窗口。 如果你对某个字符串有疑问或疑虑，可以在此处对字符串发表评论，以便其他翻译人员查看。
|
||||
10. 点击这两个“窗格”按钮，可以隐藏左边的（文件）视图和右边的（评论）视图。
|
||||
We want you to enjoy contributing and not burn out or lose interest.
|
||||
|
||||
> [!NOTE] 如果你看到一个被隐藏的（即灰色的）字符串有对应的译文，请在[译者交流群](https://chat.freecodecamp.org/channel/translators)告诉我们，我们会移除翻译记忆中的译文。
|
||||
A small group of 4-5 individuals is a good size to start your niche for your world language. You can then recruit even more friends to join the team.
|
||||
|
||||
当你翻译完一个字符串，请点击 `Save` 按钮，将你的译文储存在 Crowdin 中。 然后其他贡献者可以给你的译文投票，而校对者也将审核确认你的译文。
|
||||
2. **It costs quite a lot to spin servers for each language.**
|
||||
|
||||
你想翻译多少字符串，都可以，我们非常欢迎你贡献！当你翻译完某个文件或某个字符串之后，你不需要采取其他步骤。 你只需要点击 `Save` 按钮，就能保存你的译文了。
|
||||
On the surface it might not seem how complicated the technical stack is, but it costs quite a lot to keep the engines running. This includes provisioning additional servers and dedicating staff to look after them.
|
||||
|
||||
> [!NOTE] 如果你发现在英语源文件中有不正确的内容，请不要在翻译流程中对其进行修改。 请在字符串上留下评论，通知我们有什么问题，或者在 GitHub 创建 issue。
|
||||
freeCodeCamp.org is committed to providing these for free as always, however we need to prioritize resources for those who need it the most. The last thing we want is to shutdown servers for a language if the translation activity dies off & things become outdated.
|
||||
|
||||
### 翻译文档
|
||||
Once a language reaches at least a few certifications on the curriculum we can begin deploying the language live on [`/learn`](https://www.freecodecamp.org/learn), while you continue to translate the remaining certifications.
|
||||
|
||||
翻译贡献文档的流程和翻译课程文件的流程类似。
|
||||
For example, we would want to deploy at least the entire front-end certifications suite when we ship a new world language for the first time.
|
||||
|
||||
> [!NOTE] 我们的贡献文档由` docsify `提供支持，并且我们消息框（比如这份文档里的）进行了特殊的解析。 如果你看到以 `[!NOTE]`、`[!WARNING]` 或 `[!TIP]` 开头的字符串，请注意不要翻译这些单词。
|
||||
3. **But what about the languages not listed on the translation platform?**
|
||||
|
||||
## 给译文评分
|
||||
We have looked at our user base and added 30+ most widely spoken languages to the list of enabled languages on the translations platform. Some languages like Chinese and Spanish are already deployed live on **"/learn"** at this moment.
|
||||
|
||||
Crowdin 允许你对已有的建议译文进行评分。 在你尝试保存译文的时候，你可能会看到一条消息，提示你无法保存重复的译文——这意味着另一位贡献者已经建议了相同的译文。 如果你赞同那个译文，可以点击 `+` 按钮来投票赞同它。
|
||||
Unfortunately, the list does not include hundreds of languages out there. We get dozens of requests from contributors like you every day who want to help translate the site into a language they speak.
|
||||
|
||||
如果你认为译文不正确或与源文件字符串的意思不一致，请单击 `-` 按钮投反对票。
|
||||
We are definitely looking forward to adding more languages to the list, but as you may already guess, it would only be feasible if we get enough momentum around a world language.
|
||||
|
||||
Crowdin 通过这些投票为一个字符串的每个建议译文给出一个分数，这有助于校对团队确定哪个译文是最准确的。
|
||||
If you would like us to include a new world language, we recommend getting your friends excited about this.
|
||||
|
||||
## 质量保证检查
|
||||
Once you have a small group of people (at least 4-5) interested and committed, we can hop on a call. We will explain all the details and walk you through some of the tools and processes.
|
||||
|
||||
我们采用了一些质量保证步骤，以确保译文尽可能准确——这有助于我们的校对贡献者审核建议的译文。
|
||||
## Getting started
|
||||
|
||||
当你尝试保存翻译时，你可能会看到一条警告消息，其中包含关于你所建议的翻译的通知。
|
||||
First, make sure you come say "Hi" in our [translators chat room](https://chat.freecodecamp.org/channel/translators). We post regular updates about translating resources and answer a lot of your queries in there.
|
||||
|
||||
|
||||
Next, head to our [translation platform](https://translate.freecodecamp.org/) and login (if you have not contributed to translations before, you will need to create an account).
|
||||
|
||||
当 Crowdin 的质量保证检查系统在建议的译文中发现可能的错误时，将显示此消息。 在这个例子中，我们修改了 `<code>` 标签的文本内容，Crowdin 会发现这个问题。
|
||||
Finally, go through the detailed walk-thru below to understand the translation tools and workflows at your disposal.
|
||||
|
||||
> [!WARNING] 即使 Crowdin 提示有错误，你也可以选择保存译文。 如果你仍要通过点击 “Save Anyway” 保存译文，那么你应该标记（@）校对人员或项目经理，说明为什么需要忽略质量检查消息。
|
||||
Happy translating.
|
||||
|
||||
## 翻译最佳实践
|
||||
## Select a Project and File
|
||||
|
||||
请遵循下列准则，以确保我们的翻译尽可能的准确：
|
||||
Once you visit the translation platform, you should see multiple "projects" available for translation:
|
||||
|
||||
- 不要翻译 `<code>` 标签中的内容。 这个标签表示在文本在代码中，应保留英文文本。
|
||||
- 不要添加额外的内容。 如果你认为源文件的文本内容或其他信息需要修改，那么请你在 GitHub issue 或 pull request 来提出更改建议。
|
||||
- 不要更改内容的顺序。
|
||||
1. [Contributing documentation](https://translate.freecodecamp.org/contributing-docs) project, which contains the files for this documentation site.
|
||||
2. [Coding Curriculum](https://translate.freecodecamp.org/curriculum) project, which contains our challenge files for our curriculum.
|
||||
3. [Learn User Interface](https://translate.freecodecamp.org/learn-ui) project which contains strings for UI elements like buttons, labels, etc. for our learning platform.
|
||||
|
||||
如果你有任何问题，欢迎你随时在[译者交流群](https://chat.freecodecamp.org/channel/translators)提出，我们很高兴给予你支持。
|
||||
Select any project you want to contribute to, and you will see a list of available languages for translation.
|
||||
|
||||
|
||||
|
||||
Select the language you want to work on, and you will see the complete file tree.
|
||||
|
||||
|
||||
|
||||
Each file and folder will show a progress bar. The **blue** portion of the progress bar indicates what percentage of the file has been translated, while the **green** portion of the progress bar indicates what percentage of the file has been approved by the proofreading team.
|
||||
|
||||
Select a file to work on and Crowdin will open the editor view.
|
||||
|
||||
> [!NOTE] When the editor view opens, you will need to click the settings icon (shown as a gear) and switch the 'HTML tags displaying' setting to 'SHOW'. This will ensure you can see tags such as `<code></code>` instead of `<0></0>`.
|
||||
|
||||
## Translate Curriculum
|
||||
|
||||
|
||||
|
||||
Crowdin separates a document into translatable "strings", usually sentences. Each string is translated individually. Referring to the image above:
|
||||
|
||||
1. A string highlighted in green already has a proposed translation.
|
||||
2. A string highlighted in red does _not_ have a proposed translation.
|
||||
3. A string with greyed out text is not translatable. This is the case for code blocks and other content that must not be translated. You will be unable to select these strings in the editor.
|
||||
4. If a contributor has proposed a translation to a string, Crowdin will display those proposals here. You will not be able to save an identical translation - instead, if a translation is accurate, you should click the `+` icon to "upvote" it. An inaccurate translation can be "downvoted" with the `-` icon.
|
||||
5. Crowdin will recommend translations based on Translation Memory (TM) or Machine Translation (MT). Translation Memory refers to similar or identical strings that we have translated/approved in other files. Machine Translation refers to translations recommended by their integrated library.
|
||||
6. This is the editor pane, where you may write your proposed translation for the selected string.
|
||||
7. The currently selected string in the editor will be highlighted in yellow.
|
||||
8. Here you will see tags indicating the state of the string. `Done` means the string has at least one proposed translation. `Todo` means the string does not have any proposed translations.
|
||||
9. Here you can see the comments window. If you have questions or concerns about a particular string, you can leave a comment on the string here for other translators to see.
|
||||
10. These two "pane" buttons will hide the left (document) and right (comments) views.
|
||||
|
||||
> [!NOTE] If you see a hidden string that includes translations, please notify us in the [translators chat room](https://chat.freecodecamp.org/channel/translators) so we can remove the translation from memory.
|
||||
|
||||
When you have completed a translation for a string, select the `Save` button to store your translation on Crowdin. Other contributors will then be able to vote on your translation and proofreaders will be able to approve it.
|
||||
|
||||
You are welcome to translate as many strings as you like - there are no additional steps required when you complete a full file or propose a new translation. Clicking the `Save` button is all that is needed to store a translation.
|
||||
|
||||
> [!NOTE] If you see something in the English source file that is inaccurate or incorrect, please do not fix it through the translation flow. Instead, leave a comment on the string to notify us that there is a discrepancy, or create a GitHub issue.
|
||||
|
||||
## Translate Documentation
|
||||
|
||||
Translating our contributing documentation is a similar flow to translating our curriculum files.
|
||||
|
||||
> [!NOTE] Our contributing documentation is powered by `docsify`, and we have special parsing for message boxes like this one. If you see strings that start with `[!NOTE]`, `[!WARNING]`, or `[!TIP]`, these words should NOT be translated.
|
||||
|
||||
## Rate Translations
|
||||
|
||||
Crowdin allows you to rate the existing proposed translations. If you attempt to save a translation, you may see a message indicating that you cannot save a duplicate translation - this means another contributor has proposed that identical translation. If you agree with that translation, click the `+` button to "upvote" the translation.
|
||||
|
||||
If you see a translation that is inaccurate or does not provide the same clarity as the original string, click the `-` button to "downvote" the translation.
|
||||
|
||||
Crowdin uses these votes to give a score to each proposed translation for a string, which helps the proofreading team determine which translation is the best fit for each string.
|
||||
|
||||
## Quality Assurance Checks
|
||||
|
||||
We have enabled some quality assurance steps that will verify a translation is as accurate as possible - this helps our proofreaders review proposed translations.
|
||||
|
||||
When you attempt to save a translation, you may see a warning message appear with a notification regarding your proposed translation.
|
||||
|
||||
|
||||
|
||||
This message appears when Crowdin's QA system has identified a potential error in the proposed translation. In this example, we have modified the text of a `<code>` tag and Crowdin has caught that.
|
||||
|
||||
> [!WARNING] You have the option to save a translation in spite of errors. If you do, by clicking "Save Anyway", you should also tag a proofreader or project manager and explain why the QA message needs to be ignored in this case.
|
||||
|
||||
## Translation Best Practices
|
||||
|
||||
Follow these guidelines to ensure our translations are as accurate as possible:
|
||||
|
||||
- Do not translate the content within `<code>` tags. These tags indicate text that is found in code and should be left in English.
|
||||
- Do not add additional content. If you feel a challenge requires changes in the text content or additional information, you should propose the changes through a GitHub issue or a pull request that modifies the English file.
|
||||
- Do not change the order of content.
|
||||
|
||||
If you have any questions, feel free to reach out to us in our [translators chat room](https://chat.freecodecamp.org/channel/translators) and we will be happy to assist you.
|
||||
|
||||
267
docs/i18n/chinese/how-to-work-on-localized-client-webapp.md
Normal file
267
docs/i18n/chinese/how-to-work-on-localized-client-webapp.md
Normal file
@ -0,0 +1,267 @@
|
||||
# How to work on localized client webapp
|
||||
|
||||
The react based client web app that powers our learning platform is built using Gatsby. It is translated into various world languages using [react-i18next](https://react.i18next.com/) and [i18next](https://www.i18next.com/).
|
||||
|
||||
You can learn more about setting up the client application locally for development by following [our local setup guide here](/how-to-setup-freecodecamp-locally). By default the application is available only in English.
|
||||
|
||||
Once you have setup the project locally you should be able to follow this documentation to run the client in the language of your choice from the list of available languages.
|
||||
|
||||
This could be helpful when you are working on a feature that specifically targets something that involves localization, and requires you to validate for instance a button's label in a different language.
|
||||
|
||||
> [!TIP] You do not need to follow this document for translating freeCodeCamp's curriculum or contributing documentation. Read [this guide here](./how-to-translate-files.md) instead.
|
||||
|
||||
Let's understand how the i18n frameworks and tooling work.
|
||||
|
||||
## File Structure
|
||||
|
||||
Most of files for translating the platform are located in the [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n) folder. Each language has a directory within that containing JSON files with the translations.
|
||||
|
||||
```console
|
||||
config/i18n
|
||||
└── all-langs.js
|
||||
...
|
||||
client/i18n
|
||||
├── configForTests.js
|
||||
├── config.js
|
||||
├── locales
|
||||
│ ├── chinese
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
... ...
|
||||
│ ├── dothraki
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
... ...
|
||||
│ ├── english
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
│ └── espanol
|
||||
│ ├── intro.json
|
||||
│ ├── links.json
|
||||
│ ├── meta-tags.json
|
||||
│ ├── motivation.json
|
||||
│ ├── translations.json
|
||||
│ └── trending.json
|
||||
├── locales.test.js
|
||||
├── schema-validation.js
|
||||
└── validate-keys.js
|
||||
```
|
||||
|
||||
Some of these files are translated on our translation platform (Crowdin), some are not.
|
||||
|
||||
**Files translated on our translation platform:**
|
||||
|
||||
- The `translations.json` file contains the majority of the text that appears on the user interface elements. The keys are used in the codebase to get the correct text for whatever language is set. This file needs to have the exact same keys in all languages.
|
||||
|
||||
- The `intro.json` file contains the key-value pairs for the introduction text on the certification pages.
|
||||
|
||||
If you want to add/update translations for the keys please [read this guide here](/how-to-translate-files.md).
|
||||
|
||||
**Files NOT translated on our translations platform:**
|
||||
|
||||
- The `motivation.json` files are not required to have the same quotes, compliments, or array length. Just the same JSON structure.
|
||||
|
||||
- The `trending.json` file contains the titles and links for the trending news articles in the website's footer.
|
||||
|
||||
- The `meta-tags.json` file contains the information for our website's meta tag information.
|
||||
|
||||
Changes to these files are typically done by the staff team. If you see something out of the ordinary we recommend you reach us in the [translators chat room](https://chat.freecodecamp.org/channel/translators).
|
||||
|
||||
## Testing the client app in a world language
|
||||
|
||||
You can test the client app in any language available in the [list of languages here](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5).
|
||||
|
||||
```js
|
||||
const availableLangs = {
|
||||
client: ['english', 'espanol', 'chinese'],
|
||||
...
|
||||
};
|
||||
```
|
||||
|
||||
If you are testing a new language, create a folder with the language name as the title next to the other languages and copy the JSON files from another language into your new folder.
|
||||
|
||||
Add the language to the `client` array as seen above in the [`config/i18n/all-langs.js`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n/all-langs.js) file.
|
||||
|
||||
Next, follow the instructions in the comments in the same file to add/update the rest of the variables as needed.
|
||||
|
||||
Finally, set the `CLIENT_LOCALE` variable in your `.env` file to the locale you want to build and you're ready.
|
||||
|
||||
## How to Structure Components
|
||||
|
||||
If you are working on a feature or a bug for the client web app, say for example adding new UI items on the settings page, you should follow the guidelines below. They will help you prepare the components for localization into all the supported world languages.
|
||||
|
||||
### Functional Component
|
||||
|
||||
```js
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
// in the render method:
|
||||
const { t } = useTranslation();
|
||||
|
||||
// call the "t" function with a key from the JSON file:
|
||||
<p>{t('key')}</p>; // more details below
|
||||
```
|
||||
|
||||
### Class Component
|
||||
|
||||
```js
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
// withTranslation adds the "t" function to props:
|
||||
const { t } = this.props;
|
||||
|
||||
// call the "t" function with a key from the JSON file:
|
||||
<h1>{t('key')}</h1> // more details below
|
||||
|
||||
// export without redux:
|
||||
export default withTranslation()(Component);
|
||||
|
||||
// or with redux:
|
||||
export default connect(...)(withTranslation()(Component));
|
||||
```
|
||||
|
||||
## Translate Using the "t" Function
|
||||
|
||||
### Basic Translation
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
<p>{t('p1')}</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"p1": "My paragraph"
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>My paragraph</p>
|
||||
```
|
||||
|
||||
### With Dynamic Data
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
const username = 'moT';
|
||||
|
||||
<p>{t('welcome', { username: username })}</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"welcome": "Welcome {{username}}"
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Welcome moT</p>
|
||||
```
|
||||
|
||||
The above example passes an object to the `t` function with a `username` variable. The variable will be used in the JSON value where `{{username}}` is.
|
||||
|
||||
## Translate with the `Trans` Component
|
||||
|
||||
The general rule is to use the "t" function when you can. But there's a `Trans` component for when that isn't enough, usually when you have elements embedded in the text. You can use the `Trans` component with any type of react component.
|
||||
|
||||
### Basic Elements Nested
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
import { Trans } from 'react-i18next'
|
||||
|
||||
<p>
|
||||
<Trans>fcc.greeting</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"fcc": {
|
||||
"greeting": "Welcome to <strong>freeCodeCamp</strong>"
|
||||
}
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Welcome to <strong>freeCodeCamp</strong></p>
|
||||
```
|
||||
|
||||
You can place the key inside the component tags like the above example if the text contains "simple" tags with no attributes. `br`, `strong`, `i`, and `p` are the default, but that list can be expanded in the i18n config.
|
||||
|
||||
### Complex Elements Nested
|
||||
|
||||
Other times, you will want to have certain text inside another element, an anchor tag is a good example:
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
<p>
|
||||
<Trans i18nKey='check-forum'>
|
||||
<a href='https://forum.freecodecamp.org/'>placeholder</a>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"check-forum": "Check out <0>our forum</0>."
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Check out <a href='https://forum.freecodecamp.org/'>our forum</a></p>
|
||||
```
|
||||
|
||||
In the above example, the key is set in the attributes of the `Trans` component. The `<0>` and `</0>` in the JSON represent the first child of the component, in this case, the anchor element. If there were more children, they would just count up from there using the same syntax. You can find the children of a component in the react dev tools by inspecting it. `placeholder` is simply there because the linter complains about empty `<a>` elements.
|
||||
|
||||
### With a Variable
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
const email = 'team@freecodecamp.org';
|
||||
|
||||
<p>
|
||||
<Trans email={email} i18nKey='fcc.email'>
|
||||
<a href={`mailto:${email}`}>
|
||||
{{ email }}
|
||||
</a>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"fcc": {
|
||||
"email": "Send us an email at: <0>{{email}}</0>"
|
||||
}
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Send us an email at: <a href='mailto:team@freecodecamp.org'>team@freecodecamp.org</a><p>
|
||||
```
|
||||
|
||||
In the above example, the key and a variable are set in the attributes of the `Trans` component. `{{ email }}` needs to be somewhere in the `Trans` component as well, it doesn't matter where.
|
||||
|
||||
## Changing Text
|
||||
|
||||
To change text on the client side of things, go to the relevant `.json` file, find the key that is being used in the React component, and change the value to the new text you want. You should search the codebase for that key to make sure it isn't being used elsewhere. Or, if it is, that the changes make sense in all places.
|
||||
|
||||
## Adding Text
|
||||
|
||||
If the text you want to add to the client exists in the relevant `.json` file, use the existing key. Otherwise, create a new key.
|
||||
|
||||
The English file is the "source of truth" for all of the `.json` files sharing the same name. If you need to add a new key, add it there. Then, add the key to **all** of the `translations.json` files.
|
||||
|
||||
> [!NOTE] Use English text for all languages if the file is translated through Crowdin. The tests will fail if you don't.
|
||||
|
||||
It would be nice to keep the keys in the same order across all the files as well. Also, try to put all punctuation, spacing, quotes, etc in the JSON files and not in the components or server files.
|
||||
|
||||
> [!NOTE] The underscore (`_`) is a reserved character for keys in the client side files. See [the documentation](https://www.i18next.com/translation-function/plurals) for how they are used.
|
||||
|
||||
## Helpful Documentation
|
||||
|
||||
- [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook)
|
||||
- [i18next docs](https://www.i18next.com/translation-function/essentials)
|
||||
@ -22,13 +22,9 @@ You can help expand and improve the curriculum. You can also update project user
|
||||
|
||||
## Translations
|
||||
|
||||
We are localizing freeCodeCamp.org to world languages starting with Chinese and Español. We will be expanding the translations to more languages.
|
||||
We are localizing freeCodeCamp.org to major world languages. Some of the certifications are already live in [Chinese (中文)](https://chinese.freecodecamp.org/learn) and [Spanish (Español)](https://www.freecodecamp.org/espanol/learn/). We encourage you to read the [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort) and share it your friends to get them excited about this.
|
||||
|
||||
To help us with this massive effort, we have integrated our open-source code-base & curriculum with [Crowdin](https://crowdin.com/). You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort). We encourage you to read the announcement and share it your friends to get them excited about this.
|
||||
|
||||
It's our dream to provide you with the resources to learn, no matter the world language you speak.
|
||||
|
||||
**If you're interested in translating, here are the guides to translate our [curriculum](how-to-translate-files.md), the [learning platform](how-to-translate-the-website.md) and our [Contributing guidelines](https://translate.freecodecamp.org/contributing-docs).**
|
||||
**If you're interested in translating, here's [how to translate freCodeCamp's resources](how-to-translate-files.md).**
|
||||
|
||||
## Learning Platform
|
||||
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
|
||||
Lee nuestra ["Guía de como contribuir a Open Source"](https://github.com/freeCodeCamp/how-to-contribute-to-open-source). Es una referencia completa para proyectos aptos para principiantes. E incluye muchos consejos de contribución de código abierto.
|
||||
|
||||
### ¿Puedo traducir el currículum de freeCodeCamp?
|
||||
### Can I translate freeCodeCamp's resources?
|
||||
|
||||
Yes - Read [this guide](/how-to-translate-files) if you are interested in contributing to translations.
|
||||
Yes - You can contribute to any of the 30+ languages we have enabled on our translation platform.
|
||||
|
||||
Currently we have the user contributed translations being done in Chinese and Español. We intend to localize freeCodeCamp into several major world languages. You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort).
|
||||
We have the user contributed translations live in Chinese (中文) and Spanish (Español). We intend to localize freeCodeCamp into several major world languages. You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort).
|
||||
|
||||
If you are interested in contributing to translations please makes sure you [read this guide](/how-to-translate-files) first.
|
||||
|
||||
### ¿Cómo puedo reportar un nuevo error?
|
||||
|
||||
@ -79,7 +81,6 @@ If you have queries about the stack, architecture of the codebase, translations,
|
||||
| Nicholas Carrigan | [@nhcarrigan](https://forum.freecodecamp.org/u/nhcarrigan) |
|
||||
| Oliver Eyton-Williams | [@ojeytonwilliams](https://forum.freecodecamp.org/u/ojeytonwilliams) |
|
||||
| Rafael D Hernandez | [@RafaelHernandez](https://forum.freecodecamp.org/u/rafaelhernandez) |
|
||||
| Randell Dawson | [@RandellDawson](https://forum.freecodecamp.org/u/randelldawson) |
|
||||
| Tom Mondloc | [@moT01](https://forum.freecodecamp.org/u/moT01) |
|
||||
|
||||
**You can email our developer staff at: `dev[at]freecodecamp.org`**
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
- [ Trabajar en el tema de noticias](how-to-work-on-the-news-theme.md)
|
||||
- [Trabajar en el tema de docs](how-to-work-on-the-docs-theme.md)
|
||||
- **Contribución a Traducción**
|
||||
- [Traducir un archivo de currículo](how-to-translate-files.md)
|
||||
- [Revisar un archivo de currículo](how-to-proofread-files.md)
|
||||
- [Cómo traducir la web](how-to-translate-the-website.md)
|
||||
- [Work on translating resources](how-to-translate-files.md)
|
||||
- [Work on proofreading translations](how-to-proofread-files.md)
|
||||
- **Guías Opcionales**
|
||||
- [Configurar freeCodeCamp en Windows(WSL)](how-to-setup-wsl.md)
|
||||
- [Set up freeCodeCamp on Windows (WSL)](how-to-setup-wsl.md)
|
||||
- [Agregar pruebas de Cypress](how-to-add-cypress-tests.md)
|
||||
- [Captura correos electrónicos salientes localmente](how-to-catch-outgoing-emails-locally.md)
|
||||
- [Work on localized client web app](how-to-work-on-localized-client-webapp.md)
|
||||
- [Catch outgoing emails locally](how-to-catch-outgoing-emails-locally.md)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,40 +1,54 @@
|
||||
# Como revisar traducciones
|
||||
|
||||
Nuestro equipo de revisión es responsable de asegurarse que las traducciones sean un reflejo fiel del texto original.
|
||||
Our proofreading team is responsible for ensuring that translations accurately reflect the source text. We trust our proofreaders to ensure that we have very high quality translations.
|
||||
|
||||
Para comenzar a revisar y aprobar traducciones, visita [ nuestro sitio de traducciones](https://translate.freecodecamp.org) e inicia sesión. Luego, selecciona "Go to console" (ir a la consola) en la barra de navegación superior, para cambiar de la vista pública (public view) a la vista de trabajo (workspace view).
|
||||
All our translations are done by hand, by real humans. Proofreading ensures that there is a consistent tone across our all our translated resources like the curriculum.
|
||||
|
||||
To begin proofreading, visit [our translation platform](https://translate.freecodecamp.org) and login. Select "Go to console" in the top navigation bar to switch from the public view to the workspace view.
|
||||
|
||||
## Seleccionar un archivo
|
||||
|
||||
Deberías ver una lista de los proyectos para los que te concedieron acceso. Selecciona el proyecto que quieres revisar y luego selecciona el idioma.
|
||||
You should see the list of projects you have been granted access to. Select the project that you would like to proofread, then select the language.
|
||||
|
||||
|
||||
|
||||
|
||||
Ahora podrás ver la lista de archivos disponibles. Selecciona un archivo haciendo clic en el botón `Proofread` que se encuentra a la derecha de ese archivo, y luego selecciona la opción `Proofreading` del menú desplegable que se abrirá.
|
||||
You should now see the list of available files. Choose your file by selecting the `Proofread` button on the right of that file, then choosing `Proofreading` from the drop-down menu that appears.
|
||||
|
||||
> [!NOTE] Si estás en la vista "workspace" pero quieres trabajar en [traducir un archivo](./how-to-translate-files.md) en lugar de corregirlo, puedes seleccionar la opción `Crowdsourcing` del menú desplegable.
|
||||
|
||||
## Revisar traducciones
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Add proofread/crowdsource button to the image-->
|
||||
|
||||
Aquí podrás ver una lista de segmentos del archivo seleccionado, cada uno con sus traducciones propuestas. La traducción que se muestra aquí es aquella que haya recibido el puntaje más alto de la comunidad de traductores (tomando en cuenta votos positivos y negativos).
|
||||
Here you will see the list of strings in the selected file, with their related translations. The translation that is displayed here is the translation that has received the highest score (between upvotes and downvotes) from the translation community.
|
||||
|
||||
Si bien puedes ver *todas* las traducciones propuestas para un segmento, deberías tener en cuenta los puntajes de la comunidad (que se determinan según los votos positivos y negativos) para decidir cuál de las traducciones aprobarás. La comunidad puede revisar las traducciones propuestas y recomendar cuál es la más clara y apropiada.
|
||||
While you can view _all_ proposed translations for a given string, the community scores (determined by the upvotes and downvotes) should be taken into consideration when choosing which translation to approve. The community can review proposed translations and recommend which one is most accurate and clear.
|
||||
|
||||
1. Este es el segmento original (en inglés).
|
||||
2. Este es el segmento traducido que le corresponde. Aquí se mostrará la traducción propuesta más popular, según sus votos positivos y negativos.
|
||||
3. Al hacer clic en este botón de tilde aprobarás esa traducción.
|
||||
4. Crowdin mostrará el estado de cada segmento. `Done` (listo) significa que una traducción ha sido aprobada y que será descargada en el próximo pull de Crowdin. `Todo` (por hacer o "to do") significa que el segmento aún no ha sido revisado. `Hidden` significa que el segmento está bloqueado (locked) y *no se debe traducir*. `Comment` significa que el segmento incluye un comentario.
|
||||
4. Crowdin mostrará el estado de cada segmento. `Done` (listo) significa que una traducción ha sido aprobada y que será descargada en el próximo pull de Crowdin. `Todo` (por hacer o "to do") significa que el segmento aún no ha sido revisado. `Hidden` means the string is locked and _should not be translated_. `Comment` significa que el segmento incluye un comentario.
|
||||
5. Puedes usar las casillas de verificación para seleccionar varias traducciones y aprobarlas en un solo paso.
|
||||
6. Aquí puedes ver las traducciones propuestas por la comunidad, sus puntajes de popularidad y las traducciones sugeridas por Crowdin.
|
||||
7. Este botón muestra/oculta el panel del lado derecho, donde puedes ver traducciones, comentarios, la memoria de traducciones y el glosario de términos.
|
||||
8. Crowdin muestra aquí los mensajes de error de las verificaciones de calidad (QA / quality assurance). En otras palabras, Crowdin te notificará si algo en la traducción no parece estar correcto. Estas traducciones deberían ser aprobadas cuidadosamente.
|
||||
|
||||
> [!WARNING] Si un segmento es aprobado durante la revisión, se mostrará como finalizado en la vista de proofreading y será descargado en el próximo pull de Crowdin a GitHub.
|
||||
No additional actions are required once a file has been proofread.
|
||||
|
||||
Cuando un archivo ha sido corregido, no se requiere ningún paso adicional. Si tienes alguna pregunta o te interesa colaborar como corrector, por favor contáctanos en nuestra [sala de chat de traductores](https://chat.freecodecamp.org/channel/translators). Si ya eres un revisor(a) y estás interesado(a) en tener un canal dedicado a un idioma específico, [ llena nuestro formulario](https://forms.gle/XU5CyutrYCgDYaVZA).
|
||||
> [!NOTE] Approving a string in the proofreading view will mark it as complete and it will be downloaded in our next pull from Crowdin to GitHub.
|
||||
|
||||
## Becoming a proofreader
|
||||
|
||||
If you have any questions, or are interested in becoming a proofreader, feel free to reach out to us in our [translators chat room](https://chat.freecodecamp.org/channel/translators). We will typically grant you proofreading access if you have been contributing to freeCodeCamp for a while.
|
||||
|
||||
Our staff team and community moderators teams are always looking for kind volunteers like you who help us make high quality translations available to the world.
|
||||
|
||||
> [!NOTE] Crowdin te permite aprobar tus propias traducciones. Sin embargo, en general suele ser mejor permitir que otro corrector revise tus traducciones propuestas como medida adicional para asegurarse que no hayan errores.
|
||||
|
||||
## Creating a channel on Chat for a world language
|
||||
|
||||
For the most part we encourage you to use the [translators chat](https://chat.freecodecamp.org/channel/translators) room for all correspondence. However if the team of volunteer translators grows for a certain language, we can consider creating additional break-out channel for the language.
|
||||
|
||||
If you are already a proofreader and are interested in having a dedicated channel on our chat servers for a specific language, [fill out this form](https://forms.gle/XU5CyutrYCgDYaVZA).
|
||||
|
||||
@ -1,84 +1,148 @@
|
||||
# Cómo traducir un archivo
|
||||
# How to Translate freeCodeCamp's resources
|
||||
|
||||
> [!NOTE] Todas las traducciones se manejan a través de https://translate.freecodecamp.org, ya no utilizamos GitHub para traducir archivos directamente.
|
||||
It's our dream to provide you with the resources to learn, no matter the world language you speak. To help us with this massive effort, we have integrated our open-source code-base & curriculum with [Crowdin](https://crowdin.com/) - A tool to help us localize our code-base.
|
||||
|
||||
Para comenzar, dirígete a nuestro sitio web de traducciones e inicia sesión (si no has contribuido en traducciones antes, deberás crear una cuenta).
|
||||
The translation workflow is split into two main activities:
|
||||
|
||||
## Selecciona un proyecto y un archivo
|
||||
- **Translating** curriculum files, documentation and UI elements like buttons, labels, etc.:
|
||||
|
||||
Deberías ver dos "proyectos" disponibles para traducir: el proyecto `Contributing Documentation`, que contiene los archivos para este sitio de documentación, y el proyecto `Coding Curriculum`, que contiene nuestros archivos de desafío para la sección `/learn`.
|
||||
As a translator you can sign up on [our translation platform](https://translate.freecodecamp.org) and contribute translations in any of the 30+ languages enabled in there.
|
||||
|
||||
Selecciona el proyecto en el que deseas contribuir y verás una lista de idiomas disponibles para traducir.
|
||||
- **Proofreading** the translations for all of the above.
|
||||
|
||||
|
||||
Proofreaders verify that the community contributed translations are uniform in tone and free of common issues like typos, etc. In short, they ensure that the quality of translations is high. Note that we do not use machine translations for a reason.
|
||||
|
||||
Selecciona el idioma en el que deseas trabajar y verás el árbol de archivos completo.
|
||||
> [!WARNING] We are no longer using GitHub to translate files directly, if you are a returning contributor head to our [translation platform](https://translate.freecodecamp.org/) instead.
|
||||
|
||||
|
||||
## Prepare yourself for contributions
|
||||
|
||||
Cada archivo y carpeta mostrará una barra de progreso. La parte **azul** de la barra de progreso indica qué porcentaje del archivo se ha traducido, mientras que la parte **verde** de la barra de progreso indica qué porcentaje del archivo ha sido aprobado por el equipo de revisión.
|
||||
> The freeCodeCamp Localization Roadmap – There Are No Speed Limits
|
||||
|
||||
Selecciona un archivo para trabajar y Crowdin abrirá la vista de edición.
|
||||
You can translate as much as you want, when you want. It's only a matter of how much time and energy you are willing to invest as a volunteer translator.
|
||||
|
||||
> [!NOTE] Cuando se abra la vista de edición, deberás hacer clic en el icono de configuración (que se muestra como un engranaje) y cambiar la configuración de ''HTML tags displaying (Mostrar etiquetas HTML)" a "SHOW (Mostrar)". Esto asegurará que puedas ver las etiquetas como `<code></code>` en lugar de `<0></0>`.
|
||||
We just ask that you understand the following:
|
||||
|
||||
## Traducir el archivo
|
||||
1. **Translations are a team effort.**
|
||||
|
||||
|
||||
Translating freeCodeCamp's resources is one of the most fun and rewarding experiences as a contributor, and it works best if you involve your friends and colleagues who speak the same world language as you.
|
||||
|
||||
Crowdin separa un documento en "cadenas" traducibles, normalmente oraciones. Cada cadena se traduce individualmente. Tomando como referencia la imagen anterior:
|
||||
We recommend joining [our community forum](https://forum.freecodecamp.org/c/contributors/3) and [translators chat room](https://chat.freecodecamp.org/channel/translators) with your friends and showing your interest before starting off with translations. Crowdin makes it easy to contribute translations, but it's still a lot of work.
|
||||
|
||||
1. Una cadena resaltada en verde ya tiene una traducción propuesta.
|
||||
2. Una cadena resaltada en rojo _no_ tiene una traducción propuesta.
|
||||
3. Una cadena con texto en gris no es traducible. Este es el caso de los bloques de código y otros contenidos que no deben traducirse. No podrás seleccionar estas cadenas en el editor.
|
||||
4. Si un contribuyente ha propuesto una traducción a una cadena, Crowdin mostrará esas propuestas aquí. No podrás guardar una traducción idéntica, en su lugar, si una traducción es precisa, debes hacer clic en el ícono `+` para votar a su favor. Puedes votar en contra de una traducción inexacta con el icono `-`.
|
||||
5. Crowdin recomendará traducciones basadas en la Translation Memory (TM) o la Machine Translation (MT). La Translation Memory (memoria de traducción) remite hacia cadenas similares o idénticas que hemos traducido/aprobado en otros archivos. La Machine Translation (traducción automática) remite hacia las traducciones recomendadas por su biblioteca integrada.
|
||||
6. Este es el panel del editor, donde puedes escribir tu propuesta de traducción para la cadena seleccionada.
|
||||
7. La cadena seleccionada actualmente en el editor se resaltará en amarillo.
|
||||
8. Aquí verás etiquetas que indican el estado de la cadena. `Done` (hecho) significa que la cadena tiene al menos una traducción propuesta. `Todo` (por hacer) significa que la cadena no tiene ninguna traducción propuesta.
|
||||
9. Aquí puedes ver la ventana de comentarios. Si tienes preguntas o inquietudes sobre una cadena en particular, puedes dejar aquí un comentario sobre la cadena para que lo vean otros traductores.
|
||||
10. Estos dos botones de "panel" ocultarán las vistas izquierda (documento) y derecha (comentarios).
|
||||
We want you to enjoy contributing and not burn out or lose interest.
|
||||
|
||||
> [!NOTE] Si ves una cadena oculta que incluye traducciones, notifícanos en la [ sala de chat de traductores ](https://chat.freecodecamp.org/channel/translators) para que podamos eliminar la traducción de la memoria.
|
||||
A small group of 4-5 individuals is a good size to start your niche for your world language. You can then recruit even more friends to join the team.
|
||||
|
||||
Cuando hayas completado la traducción de una cadena, pulsa el botón `Save` (guardar) para almacenar tu traducción en Crowdin. Luego, otros contribuyentes podrán votar tu traducción y los proofreaders podrán aprobarla.
|
||||
2. **It costs quite a lot to spin servers for each language.**
|
||||
|
||||
Eres bienvenido a traducir tantas cadenas como desees, no se requieren pasos adicionales cuando completas todo un archivo o propones una nueva traducción. Hacer clic en el botón `Save` es todo lo que se necesita para almacenar una traducción.
|
||||
On the surface it might not seem how complicated the technical stack is, but it costs quite a lot to keep the engines running. This includes provisioning additional servers and dedicating staff to look after them.
|
||||
|
||||
> [!NOTE] Si ves algo en el archivo fuente en inglés que sea inexacto o incorrecto, no lo corrijas a través del flujo de traducción. En su lugar, deja un comentario en la cadena para notificarnos que hay una discrepancia, o crea un issue en GitHub.
|
||||
freeCodeCamp.org is committed to providing these for free as always, however we need to prioritize resources for those who need it the most. The last thing we want is to shutdown servers for a language if the translation activity dies off & things become outdated.
|
||||
|
||||
### Traducir la documentación
|
||||
Once a language reaches at least a few certifications on the curriculum we can begin deploying the language live on [`/learn`](https://www.freecodecamp.org/learn), while you continue to translate the remaining certifications.
|
||||
|
||||
Traducir nuestra documentación de contribución es un proceso similar a traducir nuestros archivos de currículo.
|
||||
For example, we would want to deploy at least the entire front-end certifications suite when we ship a new world language for the first time.
|
||||
|
||||
> [!NOTE] Nuestra documentación de contribución esta basada en `docsify`, y tenemos una forma especial de procesar los cuadros de mensaje como este. Si ves cadenas que comiencen con `[!NOTE]`, `[!WARNING]` o ` [!TIP]`, estas palabras NO deben traducirse.
|
||||
3. **But what about the languages not listed on the translation platform?**
|
||||
|
||||
## Calificar traducciones
|
||||
We have looked at our user base and added 30+ most widely spoken languages to the list of enabled languages on the translations platform. Some languages like Chinese and Spanish are already deployed live on **"/learn"** at this moment.
|
||||
|
||||
Crowdin te permite calificar las traducciones propuestas existentes. Si intentas guardar una traducción, es posible que veas un mensaje que indica que no puedes guardar una traducción duplicada, esto significa que otro contribuyente ha propuesto una traducción idéntica. Si estás de acuerdo con esa traducción, haz clic en el botón `+` para votar a favor de la traducción.
|
||||
Unfortunately, the list does not include hundreds of languages out there. We get dozens of requests from contributors like you every day who want to help translate the site into a language they speak.
|
||||
|
||||
Si ves una traducción que es inexacta o no proporciona la misma claridad que la cadena original, haz clic en el botón `-` para votar en contra de la traducción.
|
||||
We are definitely looking forward to adding more languages to the list, but as you may already guess, it would only be feasible if we get enough momentum around a world language.
|
||||
|
||||
Crowdin usa estos votos para dar una puntuación a cada traducción propuesta para una cadena, lo que ayuda al equipo de revisión a determinar qué traducción es la mejor para cada cadena.
|
||||
If you would like us to include a new world language, we recommend getting your friends excited about this.
|
||||
|
||||
## Comprobaciones de control de calidad
|
||||
Once you have a small group of people (at least 4-5) interested and committed, we can hop on a call. We will explain all the details and walk you through some of the tools and processes.
|
||||
|
||||
Hemos habilitado algunos pasos de control de calidad que verificarán que una traducción sea lo más precisa posible, esto ayuda a nuestros proofreaders a revisar las traducciones propuestas.
|
||||
## Getting started
|
||||
|
||||
Cuando intentes guardar una traducción, es posible que veas aparecer un mensaje de advertencia con una notificación sobre tu traducción propuesta.
|
||||
First, make sure you come say "Hi" in our [translators chat room](https://chat.freecodecamp.org/channel/translators). We post regular updates about translating resources and answer a lot of your queries in there.
|
||||
|
||||
|
||||
Next, head to our [translation platform](https://translate.freecodecamp.org/) and login (if you have not contributed to translations before, you will need to create an account).
|
||||
|
||||
Este mensaje aparece cuando el sistema de control de calidad de Crowdin ha identificado un posible error en la traducción propuesta. En este ejemplo, hemos modificado el texto de una etiqueta `<code>` y Crowdin lo ha detectado.
|
||||
Finally, go through the detailed walk-thru below to understand the translation tools and workflows at your disposal.
|
||||
|
||||
> [!WARNING] Tienes la opción de guardar una traducción a pesar de los errores. Si lo haces, al hacer clic en "Save Anyway (Guardar de todos modos)", también debes etiquetar a un miembro del equipo de revisión o encargado del proyecto y explicar por qué el mensaje de control de calidad debe ignorarse en este caso.
|
||||
Happy translating.
|
||||
|
||||
## Buenas prácticas de traducción
|
||||
## Select a Project and File
|
||||
|
||||
Sigue estas pautas para asegurarte de que nuestras traducciones sean lo más precisas posible:
|
||||
Once you visit the translation platform, you should see multiple "projects" available for translation:
|
||||
|
||||
- No traduzcas el contenido dentro de las etiquetas `<code>`. Estas etiquetas indican texto que se encuentra en el código y deben dejarse en inglés.
|
||||
- No agregues contenido adicional. Si crees que un desafío requiere cambios en el contenido del texto o información adicional, debes proponer los cambios a través de un issue de GitHub o una pull request que modifique el archivo en inglés.
|
||||
- No cambies el orden del contenido.
|
||||
1. [Contributing documentation](https://translate.freecodecamp.org/contributing-docs) project, which contains the files for this documentation site.
|
||||
2. [Coding Curriculum](https://translate.freecodecamp.org/curriculum) project, which contains our challenge files for our curriculum.
|
||||
3. [Learn User Interface](https://translate.freecodecamp.org/learn-ui) project which contains strings for UI elements like buttons, labels, etc. for our learning platform.
|
||||
|
||||
Si tienes alguna pregunta, no dudes en comunicarte con nosotros en nuestra [sala de chat de traductores](https://chat.freecodecamp.org/channel/translators) y estaremos encantados de ayudarte.
|
||||
Select any project you want to contribute to, and you will see a list of available languages for translation.
|
||||
|
||||
|
||||
|
||||
Select the language you want to work on, and you will see the complete file tree.
|
||||
|
||||
|
||||
|
||||
Each file and folder will show a progress bar. The **blue** portion of the progress bar indicates what percentage of the file has been translated, while the **green** portion of the progress bar indicates what percentage of the file has been approved by the proofreading team.
|
||||
|
||||
Select a file to work on and Crowdin will open the editor view.
|
||||
|
||||
> [!NOTE] When the editor view opens, you will need to click the settings icon (shown as a gear) and switch the 'HTML tags displaying' setting to 'SHOW'. This will ensure you can see tags such as `<code></code>` instead of `<0></0>`.
|
||||
|
||||
## Translate Curriculum
|
||||
|
||||
|
||||
|
||||
Crowdin separates a document into translatable "strings", usually sentences. Each string is translated individually. Referring to the image above:
|
||||
|
||||
1. A string highlighted in green already has a proposed translation.
|
||||
2. A string highlighted in red does _not_ have a proposed translation.
|
||||
3. A string with greyed out text is not translatable. This is the case for code blocks and other content that must not be translated. You will be unable to select these strings in the editor.
|
||||
4. If a contributor has proposed a translation to a string, Crowdin will display those proposals here. You will not be able to save an identical translation - instead, if a translation is accurate, you should click the `+` icon to "upvote" it. An inaccurate translation can be "downvoted" with the `-` icon.
|
||||
5. Crowdin will recommend translations based on Translation Memory (TM) or Machine Translation (MT). Translation Memory refers to similar or identical strings that we have translated/approved in other files. Machine Translation refers to translations recommended by their integrated library.
|
||||
6. This is the editor pane, where you may write your proposed translation for the selected string.
|
||||
7. The currently selected string in the editor will be highlighted in yellow.
|
||||
8. Here you will see tags indicating the state of the string. `Done` means the string has at least one proposed translation. `Todo` means the string does not have any proposed translations.
|
||||
9. Here you can see the comments window. If you have questions or concerns about a particular string, you can leave a comment on the string here for other translators to see.
|
||||
10. These two "pane" buttons will hide the left (document) and right (comments) views.
|
||||
|
||||
> [!NOTE] If you see a hidden string that includes translations, please notify us in the [translators chat room](https://chat.freecodecamp.org/channel/translators) so we can remove the translation from memory.
|
||||
|
||||
When you have completed a translation for a string, select the `Save` button to store your translation on Crowdin. Other contributors will then be able to vote on your translation and proofreaders will be able to approve it.
|
||||
|
||||
You are welcome to translate as many strings as you like - there are no additional steps required when you complete a full file or propose a new translation. Clicking the `Save` button is all that is needed to store a translation.
|
||||
|
||||
> [!NOTE] If you see something in the English source file that is inaccurate or incorrect, please do not fix it through the translation flow. Instead, leave a comment on the string to notify us that there is a discrepancy, or create a GitHub issue.
|
||||
|
||||
## Translate Documentation
|
||||
|
||||
Translating our contributing documentation is a similar flow to translating our curriculum files.
|
||||
|
||||
> [!NOTE] Our contributing documentation is powered by `docsify`, and we have special parsing for message boxes like this one. If you see strings that start with `[!NOTE]`, `[!WARNING]`, or `[!TIP]`, these words should NOT be translated.
|
||||
|
||||
## Rate Translations
|
||||
|
||||
Crowdin allows you to rate the existing proposed translations. If you attempt to save a translation, you may see a message indicating that you cannot save a duplicate translation - this means another contributor has proposed that identical translation. If you agree with that translation, click the `+` button to "upvote" the translation.
|
||||
|
||||
If you see a translation that is inaccurate or does not provide the same clarity as the original string, click the `-` button to "downvote" the translation.
|
||||
|
||||
Crowdin uses these votes to give a score to each proposed translation for a string, which helps the proofreading team determine which translation is the best fit for each string.
|
||||
|
||||
## Quality Assurance Checks
|
||||
|
||||
We have enabled some quality assurance steps that will verify a translation is as accurate as possible - this helps our proofreaders review proposed translations.
|
||||
|
||||
When you attempt to save a translation, you may see a warning message appear with a notification regarding your proposed translation.
|
||||
|
||||
|
||||
|
||||
This message appears when Crowdin's QA system has identified a potential error in the proposed translation. In this example, we have modified the text of a `<code>` tag and Crowdin has caught that.
|
||||
|
||||
> [!WARNING] You have the option to save a translation in spite of errors. If you do, by clicking "Save Anyway", you should also tag a proofreader or project manager and explain why the QA message needs to be ignored in this case.
|
||||
|
||||
## Translation Best Practices
|
||||
|
||||
Follow these guidelines to ensure our translations are as accurate as possible:
|
||||
|
||||
- Do not translate the content within `<code>` tags. These tags indicate text that is found in code and should be left in English.
|
||||
- Do not add additional content. If you feel a challenge requires changes in the text content or additional information, you should propose the changes through a GitHub issue or a pull request that modifies the English file.
|
||||
- Do not change the order of content.
|
||||
|
||||
If you have any questions, feel free to reach out to us in our [translators chat room](https://chat.freecodecamp.org/channel/translators) and we will be happy to assist you.
|
||||
|
||||
267
docs/i18n/espanol/how-to-work-on-localized-client-webapp.md
Normal file
267
docs/i18n/espanol/how-to-work-on-localized-client-webapp.md
Normal file
@ -0,0 +1,267 @@
|
||||
# How to work on localized client webapp
|
||||
|
||||
The react based client web app that powers our learning platform is built using Gatsby. It is translated into various world languages using [react-i18next](https://react.i18next.com/) and [i18next](https://www.i18next.com/).
|
||||
|
||||
You can learn more about setting up the client application locally for development by following [our local setup guide here](/how-to-setup-freecodecamp-locally). By default the application is available only in English.
|
||||
|
||||
Once you have setup the project locally you should be able to follow this documentation to run the client in the language of your choice from the list of available languages.
|
||||
|
||||
This could be helpful when you are working on a feature that specifically targets something that involves localization, and requires you to validate for instance a button's label in a different language.
|
||||
|
||||
> [!TIP] You do not need to follow this document for translating freeCodeCamp's curriculum or contributing documentation. Read [this guide here](./how-to-translate-files.md) instead.
|
||||
|
||||
Let's understand how the i18n frameworks and tooling work.
|
||||
|
||||
## File Structure
|
||||
|
||||
Most of files for translating the platform are located in the [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n) folder. Each language has a directory within that containing JSON files with the translations.
|
||||
|
||||
```console
|
||||
config/i18n
|
||||
└── all-langs.js
|
||||
...
|
||||
client/i18n
|
||||
├── configForTests.js
|
||||
├── config.js
|
||||
├── locales
|
||||
│ ├── chinese
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
... ...
|
||||
│ ├── dothraki
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
... ...
|
||||
│ ├── english
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
│ └── espanol
|
||||
│ ├── intro.json
|
||||
│ ├── links.json
|
||||
│ ├── meta-tags.json
|
||||
│ ├── motivation.json
|
||||
│ ├── translations.json
|
||||
│ └── trending.json
|
||||
├── locales.test.js
|
||||
├── schema-validation.js
|
||||
└── validate-keys.js
|
||||
```
|
||||
|
||||
Some of these files are translated on our translation platform (Crowdin), some are not.
|
||||
|
||||
**Files translated on our translation platform:**
|
||||
|
||||
- The `translations.json` file contains the majority of the text that appears on the user interface elements. The keys are used in the codebase to get the correct text for whatever language is set. This file needs to have the exact same keys in all languages.
|
||||
|
||||
- The `intro.json` file contains the key-value pairs for the introduction text on the certification pages.
|
||||
|
||||
If you want to add/update translations for the keys please [read this guide here](/how-to-translate-files.md).
|
||||
|
||||
**Files NOT translated on our translations platform:**
|
||||
|
||||
- The `motivation.json` files are not required to have the same quotes, compliments, or array length. Just the same JSON structure.
|
||||
|
||||
- The `trending.json` file contains the titles and links for the trending news articles in the website's footer.
|
||||
|
||||
- The `meta-tags.json` file contains the information for our website's meta tag information.
|
||||
|
||||
Changes to these files are typically done by the staff team. If you see something out of the ordinary we recommend you reach us in the [translators chat room](https://chat.freecodecamp.org/channel/translators).
|
||||
|
||||
## Testing the client app in a world language
|
||||
|
||||
You can test the client app in any language available in the [list of languages here](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5).
|
||||
|
||||
```js
|
||||
const availableLangs = {
|
||||
client: ['english', 'espanol', 'chinese'],
|
||||
...
|
||||
};
|
||||
```
|
||||
|
||||
If you are testing a new language, create a folder with the language name as the title next to the other languages and copy the JSON files from another language into your new folder.
|
||||
|
||||
Add the language to the `client` array as seen above in the [`config/i18n/all-langs.js`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n/all-langs.js) file.
|
||||
|
||||
Next, follow the instructions in the comments in the same file to add/update the rest of the variables as needed.
|
||||
|
||||
Finally, set the `CLIENT_LOCALE` variable in your `.env` file to the locale you want to build and you're ready.
|
||||
|
||||
## How to Structure Components
|
||||
|
||||
If you are working on a feature or a bug for the client web app, say for example adding new UI items on the settings page, you should follow the guidelines below. They will help you prepare the components for localization into all the supported world languages.
|
||||
|
||||
### Functional Component
|
||||
|
||||
```js
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
// in the render method:
|
||||
const { t } = useTranslation();
|
||||
|
||||
// call the "t" function with a key from the JSON file:
|
||||
<p>{t('key')}</p>; // more details below
|
||||
```
|
||||
|
||||
### Class Component
|
||||
|
||||
```js
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
// withTranslation adds the "t" function to props:
|
||||
const { t } = this.props;
|
||||
|
||||
// call the "t" function with a key from the JSON file:
|
||||
<h1>{t('key')}</h1> // more details below
|
||||
|
||||
// export without redux:
|
||||
export default withTranslation()(Component);
|
||||
|
||||
// or with redux:
|
||||
export default connect(...)(withTranslation()(Component));
|
||||
```
|
||||
|
||||
## Translate Using the "t" Function
|
||||
|
||||
### Basic Translation
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
<p>{t('p1')}</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"p1": "My paragraph"
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>My paragraph</p>
|
||||
```
|
||||
|
||||
### With Dynamic Data
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
const username = 'moT';
|
||||
|
||||
<p>{t('welcome', { username: username })}</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"welcome": "Welcome {{username}}"
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Welcome moT</p>
|
||||
```
|
||||
|
||||
The above example passes an object to the `t` function with a `username` variable. The variable will be used in the JSON value where `{{username}}` is.
|
||||
|
||||
## Translate with the `Trans` Component
|
||||
|
||||
The general rule is to use the "t" function when you can. But there's a `Trans` component for when that isn't enough, usually when you have elements embedded in the text. You can use the `Trans` component with any type of react component.
|
||||
|
||||
### Basic Elements Nested
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
import { Trans } from 'react-i18next'
|
||||
|
||||
<p>
|
||||
<Trans>fcc.greeting</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"fcc": {
|
||||
"greeting": "Welcome to <strong>freeCodeCamp</strong>"
|
||||
}
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Welcome to <strong>freeCodeCamp</strong></p>
|
||||
```
|
||||
|
||||
You can place the key inside the component tags like the above example if the text contains "simple" tags with no attributes. `br`, `strong`, `i`, and `p` are the default, but that list can be expanded in the i18n config.
|
||||
|
||||
### Complex Elements Nested
|
||||
|
||||
Other times, you will want to have certain text inside another element, an anchor tag is a good example:
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
<p>
|
||||
<Trans i18nKey='check-forum'>
|
||||
<a href='https://forum.freecodecamp.org/'>placeholder</a>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"check-forum": "Check out <0>our forum</0>."
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Check out <a href='https://forum.freecodecamp.org/'>our forum</a></p>
|
||||
```
|
||||
|
||||
In the above example, the key is set in the attributes of the `Trans` component. The `<0>` and `</0>` in the JSON represent the first child of the component, in this case, the anchor element. If there were more children, they would just count up from there using the same syntax. You can find the children of a component in the react dev tools by inspecting it. `placeholder` is simply there because the linter complains about empty `<a>` elements.
|
||||
|
||||
### With a Variable
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
const email = 'team@freecodecamp.org';
|
||||
|
||||
<p>
|
||||
<Trans email={email} i18nKey='fcc.email'>
|
||||
<a href={`mailto:${email}`}>
|
||||
{{ email }}
|
||||
</a>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"fcc": {
|
||||
"email": "Send us an email at: <0>{{email}}</0>"
|
||||
}
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Send us an email at: <a href='mailto:team@freecodecamp.org'>team@freecodecamp.org</a><p>
|
||||
```
|
||||
|
||||
In the above example, the key and a variable are set in the attributes of the `Trans` component. `{{ email }}` needs to be somewhere in the `Trans` component as well, it doesn't matter where.
|
||||
|
||||
## Changing Text
|
||||
|
||||
To change text on the client side of things, go to the relevant `.json` file, find the key that is being used in the React component, and change the value to the new text you want. You should search the codebase for that key to make sure it isn't being used elsewhere. Or, if it is, that the changes make sense in all places.
|
||||
|
||||
## Adding Text
|
||||
|
||||
If the text you want to add to the client exists in the relevant `.json` file, use the existing key. Otherwise, create a new key.
|
||||
|
||||
The English file is the "source of truth" for all of the `.json` files sharing the same name. If you need to add a new key, add it there. Then, add the key to **all** of the `translations.json` files.
|
||||
|
||||
> [!NOTE] Use English text for all languages if the file is translated through Crowdin. The tests will fail if you don't.
|
||||
|
||||
It would be nice to keep the keys in the same order across all the files as well. Also, try to put all punctuation, spacing, quotes, etc in the JSON files and not in the components or server files.
|
||||
|
||||
> [!NOTE] The underscore (`_`) is a reserved character for keys in the client side files. See [the documentation](https://www.i18next.com/translation-function/plurals) for how they are used.
|
||||
|
||||
## Helpful Documentation
|
||||
|
||||
- [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook)
|
||||
- [i18next docs](https://www.i18next.com/translation-function/essentials)
|
||||
@ -22,32 +22,28 @@ Puedes ayudar a ampliar y mejorar el plan de estudios. También puedes actualiza
|
||||
|
||||
## Traducciones
|
||||
|
||||
Estamos globalizando freeCodeCamp.org a los idiomas del mundo, comenzando por chino y español. Estaremos expandiendo las traducciones a más idiomas.
|
||||
We are localizing freeCodeCamp.org to major world languages. Some of the certifications are already live in [Chinese (中文)](https://chinese.freecodecamp.org/learn) and [Spanish (Español)](https://www.freecodecamp.org/espanol/learn/). We encourage you to read the [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort) and share it your friends to get them excited about this.
|
||||
|
||||
Para ayudarnos con este esfuerzo masivo, hemos integrado nuestra base de código de fuente abierta & plan de estudios con [Crowdin](https://crowdin.com/). Puedes leer todo sobre esto en nuestro [anuncio aquí](https://www.freecodecamp.org/news/world-language-translation-effort). Te animamos a que leas el anuncio y lo compartas con tus amigos para que se entusiasmen con esto.
|
||||
|
||||
Nuestro sueño es brindarte los recursos para aprender, sin importar el idioma mundial que hables.
|
||||
|
||||
**Si estás interesado en traducir, aquí tienes las guías para traducir nuestro [plan de estudios](how-to-translate-files.md), la [plataforma de aprendizaje](how-to-translate-the-website.md) y nuestras [pautas de contribución](https://translate.freecodecamp.org/contributing-docs).**
|
||||
**If you're interested in translating, here's [how to translate freCodeCamp's resources](how-to-translate-files.md).**
|
||||
|
||||
## Plataforma de aprendizaje
|
||||
|
||||
Nuestra plataforma de aprendizaje se ejecuta en un stack de JavaScript moderno. Tiene varios componentes, herramientas y librerías. Estos incluyen Node.js, MongoDB, OAuth 2.0, React, Gatsby, Webpack y más.
|
||||
Our learning platform runs on a modern JavaScript stack. It has various components, tools, and libraries. These include Node.js, MongoDB, OAuth 2.0, React, Gatsby, Webpack, and more.
|
||||
|
||||
En general, usamos
|
||||
Broadly, we use
|
||||
|
||||
- un servidor con una API basada en Node.js
|
||||
- un conjunto de aplicaciones de lado del cliente basadas en React
|
||||
- y scripts de pruebas para evaluar los proyectos del plan de estudios enviados por nuestros campers.
|
||||
|
||||
Si deseas contribuir de manera productiva a la plataforma de aprendizaje, te recomendamos que te familiarice un poco con estas herramientas.
|
||||
If you want to productively contribute to the learning platform, we recommend some familiarity with these tools.
|
||||
|
||||
Si quieres ayudarnos a mejorar nuestro código base...
|
||||
If you want to help us improve our codebase...
|
||||
|
||||
**puedes utilizar Gitpod, un entorno de desarrollo en línea gratuito que inicia un entorno de desarrollo listo para codificar para freeCodeCamp en tu navegador.**
|
||||
**you can either use Gitpod, a free online dev environment that starts a ready-to-code dev environment for freeCodeCamp in your browser.**
|
||||
|
||||
[](https://gitpod.io/#https://github.com/freeCodeCamp/freeCodeCamp)
|
||||
[](https://gitpod.io/#https://github.com/freeCodeCamp/freeCodeCamp)
|
||||
|
||||
O puedes...
|
||||
Or you can...
|
||||
|
||||
**[configurar freeCodeCamp localmente](how-to-setup-freecodecamp-locally.md) en tu máquina.**
|
||||
**[set up freeCodeCamp locally](how-to-setup-freecodecamp-locally.md) on your machine.**
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
|
||||
Read our ["How to Contribute to Open Source Guide"](https://github.com/freeCodeCamp/how-to-contribute-to-open-source). It's a comprehensive reference for first-timer-friendly projects. And it includes a lot of open source contribution tips.
|
||||
|
||||
### Can I translate freeCodeCamp's curriculum?
|
||||
### Can I translate freeCodeCamp's resources?
|
||||
|
||||
Yes - Read [this guide](/how-to-translate-files) if you are interested in contributing to translations.
|
||||
Yes - You can contribute to any of the 30+ languages we have enabled on our translation platform.
|
||||
|
||||
Currently we have the user contributed translations being done in Chinese and Español. We intend to localize freeCodeCamp into several major world languages. You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort).
|
||||
We have the user contributed translations live in Chinese (中文) and Spanish (Español). We intend to localize freeCodeCamp into several major world languages. You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort).
|
||||
|
||||
If you are interested in contributing to translations please makes sure you [read this guide](/how-to-translate-files) first.
|
||||
|
||||
### How can I report a new bug?
|
||||
|
||||
@ -79,7 +81,6 @@ If you have queries about the stack, architecture of the codebase, translations,
|
||||
| Nicholas Carrigan | [@nhcarrigan](https://forum.freecodecamp.org/u/nhcarrigan) |
|
||||
| Oliver Eyton-Williams | [@ojeytonwilliams](https://forum.freecodecamp.org/u/ojeytonwilliams) |
|
||||
| Rafael D Hernandez | [@RafaelHernandez](https://forum.freecodecamp.org/u/rafaelhernandez) |
|
||||
| Randell Dawson | [@RandellDawson](https://forum.freecodecamp.org/u/randelldawson) |
|
||||
| Tom Mondloc | [@moT01](https://forum.freecodecamp.org/u/moT01) |
|
||||
|
||||
**You can email our developer staff at: `dev[at]freecodecamp.org`**
|
||||
|
||||
@ -9,12 +9,12 @@
|
||||
- [Work on the news theme](how-to-work-on-the-news-theme.md)
|
||||
- [Work on the docs theme](how-to-work-on-the-docs-theme.md)
|
||||
- **Translation Contribution**
|
||||
- [Translating a Curriculum File](how-to-translate-files.md)
|
||||
- [Proofreading a Curriculum File](how-to-proofread-files.md)
|
||||
- [How to Translate the Website](how-to-translate-the-website.md)
|
||||
- [Work on translating resources](how-to-translate-files.md)
|
||||
- [Work on proofreading translations](how-to-proofread-files.md)
|
||||
- **Optional Guides**
|
||||
- [Set up freeCodeCamp on Windows (WSL)](how-to-setup-wsl.md)
|
||||
- [Add Cypress tests](how-to-add-cypress-tests.md)
|
||||
- [Work on localized client web app](how-to-work-on-localized-client-webapp.md)
|
||||
- [Catch outgoing emails locally](how-to-catch-outgoing-emails-locally.md)
|
||||
|
||||
---
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
# How to Proofread Translations
|
||||
|
||||
Our proofreading team is responsible for ensuring that translations accurately reflect the source text.
|
||||
Our proofreading team is responsible for ensuring that translations accurately reflect the source text. We trust our proofreaders to ensure that we have very high quality translations.
|
||||
|
||||
To begin proofreading, visit [our translation site](https://translate.freecodecamp.org) and login. Then select "Go to console" in the top navigation bar to switch from the public view to the workspace view.
|
||||
All our translations are done by hand, by real humans. Proofreading ensures that there is a consistent tone across our all our translated resources like the curriculum.
|
||||
|
||||
To begin proofreading, visit [our translation platform](https://translate.freecodecamp.org) and login. Select "Go to console" in the top navigation bar to switch from the public view to the workspace view.
|
||||
|
||||
## Select a File
|
||||
|
||||
@ -22,19 +24,31 @@ You should now see the list of available files. Choose your file by selecting th
|
||||
|
||||
Here you will see the list of strings in the selected file, with their related translations. The translation that is displayed here is the translation that has received the highest score (between upvotes and downvotes) from the translation community.
|
||||
|
||||
While you can view *all* proposed translations for a given string, the community scores (determined by the upvotes and downvotes) should be taken into consideration when choosing which translation to approve. The community can review proposed translations and recommend which one is most accurate and clear.
|
||||
While you can view _all_ proposed translations for a given string, the community scores (determined by the upvotes and downvotes) should be taken into consideration when choosing which translation to approve. The community can review proposed translations and recommend which one is most accurate and clear.
|
||||
|
||||
1. This is the original string (in English).
|
||||
2. This is the matching translated string. The most popular translation proposal, based on upvotes and downvotes, will be displayed here.
|
||||
3. Clicking this checkmark button will approve that translation.
|
||||
4. Crowdin will display the status of each string. `Done` means a translation has been approved and will be downloaded on our next Crowdin pull. `Todo` means the string has not been proofread. `Hidden` means the string is locked and *should not be translated*. `Comment` means the string has a related comment.
|
||||
4. Crowdin will display the status of each string. `Done` means a translation has been approved and will be downloaded on our next Crowdin pull. `Todo` means the string has not been proofread. `Hidden` means the string is locked and _should not be translated_. `Comment` means the string has a related comment.
|
||||
5. Translations can be selected with the checkboxes and approved here in one bulk action.
|
||||
6. You can view the community proposed translations, their popularity scores, and Crowdin suggested translations here.
|
||||
7. This button shows/hides the right-hand side display pane, where you can view translations, comments, translation memory, and glossary terms.
|
||||
8. Crowdin displays error messages here from the quality assurance checks. In other words, if something does not seem correct in the translation, Crowdin will notify you. These translations should be approved with care.
|
||||
|
||||
> [!WARNING] Approving a string in the proofreading view will mark it as complete and it will be downloaded in our next pull from Crowdin to GitHub.
|
||||
No additional actions are required once a file has been proofread.
|
||||
|
||||
No additional actions are required once a file has been proofread. If you have any questions, or are interested in becoming a proofreader, feel free to reach out to us in our [translators chat room](https://chat.freecodecamp.org/channel/translators). If you are already a proofreader and are interested in having a dedicated channel for a specific language, [fill out our form](https://forms.gle/XU5CyutrYCgDYaVZA).
|
||||
> [!NOTE] Approving a string in the proofreading view will mark it as complete and it will be downloaded in our next pull from Crowdin to GitHub.
|
||||
|
||||
## Becoming a proofreader
|
||||
|
||||
If you have any questions, or are interested in becoming a proofreader, feel free to reach out to us in our [translators chat room](https://chat.freecodecamp.org/channel/translators). We will typically grant you proofreading access if you have been contributing to freeCodeCamp for a while.
|
||||
|
||||
Our staff team and community moderators teams are always looking for kind volunteers like you who help us make high quality translations available to the world.
|
||||
|
||||
> [!NOTE] Crowdin will allow you to approve your translations. In general, it is best to allow another proofreader to review your proposed translations as extra safety to ensure there are no errors.
|
||||
|
||||
## Creating a channel on Chat for a world language
|
||||
|
||||
For the most part we encourage you to use the [translators chat](https://chat.freecodecamp.org/channel/translators) room for all correspondence. However if the team of volunteer translators grows for a certain language, we can consider creating additional break-out channel for the language.
|
||||
|
||||
If you are already a proofreader and are interested in having a dedicated channel on our chat servers for a specific language, [fill out this form](https://forms.gle/XU5CyutrYCgDYaVZA).
|
||||
|
||||
@ -1,14 +1,78 @@
|
||||
# How to Translate a File
|
||||
# How to Translate freeCodeCamp's resources
|
||||
|
||||
> [!NOTE] All translations are handled through https://translate.freecodecamp.org - we are no longer using GitHub to translate files directly.
|
||||
It's our dream to provide you with the resources to learn, no matter the world language you speak. To help us with this massive effort, we have integrated our open-source code-base & curriculum with [Crowdin](https://crowdin.com/) - A tool to help us localize our code-base.
|
||||
|
||||
To begin, head to our translation website and login (if you have not contributed to translations before, you will need to create an account).
|
||||
The translation workflow is split into two main activities:
|
||||
|
||||
- **Translating** curriculum files, documentation and UI elements like buttons, labels, etc.:
|
||||
|
||||
As a translator you can sign up on [our translation platform](https://translate.freecodecamp.org) and contribute translations in any of the 30+ languages enabled in there.
|
||||
|
||||
- **Proofreading** the translations for all of the above.
|
||||
|
||||
Proofreaders verify that the community contributed translations are uniform in tone and free of common issues like typos, etc. In short, they ensure that the quality of translations is high. Note that we do not use machine translations for a reason.
|
||||
|
||||
> [!WARNING] We are no longer using GitHub to translate files directly, if you are a returning contributor head to our [translation platform](https://translate.freecodecamp.org/) instead.
|
||||
|
||||
## Prepare yourself for contributions
|
||||
|
||||
> The freeCodeCamp Localization Roadmap – There Are No Speed Limits
|
||||
|
||||
You can translate as much as you want, when you want. It's only a matter of how much time and energy you are willing to invest as a volunteer translator.
|
||||
|
||||
We just ask that you understand the following:
|
||||
|
||||
1. **Translations are a team effort.**
|
||||
|
||||
Translating freeCodeCamp's resources is one of the most fun and rewarding experiences as a contributor, and it works best if you involve your friends and colleagues who speak the same world language as you.
|
||||
|
||||
We recommend joining [our community forum](https://forum.freecodecamp.org/c/contributors/3) and [translators chat room](https://chat.freecodecamp.org/channel/translators) with your friends and showing your interest before starting off with translations. Crowdin makes it easy to contribute translations, but it's still a lot of work.
|
||||
|
||||
We want you to enjoy contributing and not burn out or lose interest.
|
||||
|
||||
A small group of 4-5 individuals is a good size to start your niche for your world language. You can then recruit even more friends to join the team.
|
||||
|
||||
2. **It costs quite a lot to spin servers for each language.**
|
||||
|
||||
On the surface it might not seem how complicated the technical stack is, but it costs quite a lot to keep the engines running. This includes provisioning additional servers and dedicating staff to look after them.
|
||||
|
||||
freeCodeCamp.org is committed to providing these for free as always, however we need to prioritize resources for those who need it the most. The last thing we want is to shutdown servers for a language if the translation activity dies off & things become outdated.
|
||||
|
||||
Once a language reaches at least a few certifications on the curriculum we can begin deploying the language live on [`/learn`](https://www.freecodecamp.org/learn), while you continue to translate the remaining certifications.
|
||||
|
||||
For example, we would want to deploy at least the entire front-end certifications suite when we ship a new world language for the first time.
|
||||
|
||||
3. **But what about the languages not listed on the translation platform?**
|
||||
|
||||
We have looked at our user base and added 30+ most widely spoken languages to the list of enabled languages on the translations platform. Some languages like Chinese and Spanish are already deployed live on **"/learn"** at this moment.
|
||||
|
||||
Unfortunately, the list does not include hundreds of languages out there. We get dozens of requests from contributors like you every day who want to help translate the site into a language they speak.
|
||||
|
||||
We are definitely looking forward to adding more languages to the list, but as you may already guess, it would only be feasible if we get enough momentum around a world language.
|
||||
|
||||
If you would like us to include a new world language, we recommend getting your friends excited about this.
|
||||
|
||||
Once you have a small group of people (at least 4-5) interested and committed, we can hop on a call. We will explain all the details and walk you through some of the tools and processes.
|
||||
|
||||
## Getting started
|
||||
|
||||
First, make sure you come say "Hi" in our [translators chat room](https://chat.freecodecamp.org/channel/translators). We post regular updates about translating resources and answer a lot of your queries in there.
|
||||
|
||||
Next, head to our [translation platform](https://translate.freecodecamp.org/) and login (if you have not contributed to translations before, you will need to create an account).
|
||||
|
||||
Finally, go through the detailed walk-thru below to understand the translation tools and workflows at your disposal.
|
||||
|
||||
Happy translating.
|
||||
|
||||
## Select a Project and File
|
||||
|
||||
You should see two "projects" available for translation: The `Contributing Documentation` project, which contains the files for this documentation site, and the `Coding Curriculum` project, which contains our challenge files for `/learn`.
|
||||
Once you visit the translation platform, you should see multiple "projects" available for translation:
|
||||
|
||||
Select which project you want to contribute to, and you will see a list of available languages for translation.
|
||||
1. [Contributing documentation](https://translate.freecodecamp.org/contributing-docs) project, which contains the files for this documentation site.
|
||||
2. [Coding Curriculum](https://translate.freecodecamp.org/curriculum) project, which contains our challenge files for our curriculum.
|
||||
3. [Learn User Interface](https://translate.freecodecamp.org/learn-ui) project which contains strings for UI elements like buttons, labels, etc. for our learning platform.
|
||||
|
||||
Select any project you want to contribute to, and you will see a list of available languages for translation.
|
||||
|
||||
|
||||
|
||||
@ -22,7 +86,7 @@ Select a file to work on and Crowdin will open the editor view.
|
||||
|
||||
> [!NOTE] When the editor view opens, you will need to click the settings icon (shown as a gear) and switch the 'HTML tags displaying' setting to 'SHOW'. This will ensure you can see tags such as `<code></code>` instead of `<0></0>`.
|
||||
|
||||
## Translate the File
|
||||
## Translate Curriculum
|
||||
|
||||
|
||||
|
||||
@ -47,7 +111,7 @@ You are welcome to translate as many strings as you like - there are no addition
|
||||
|
||||
> [!NOTE] If you see something in the English source file that is inaccurate or incorrect, please do not fix it through the translation flow. Instead, leave a comment on the string to notify us that there is a discrepancy, or create a GitHub issue.
|
||||
|
||||
### Translating Documentation
|
||||
## Translate Documentation
|
||||
|
||||
Translating our contributing documentation is a similar flow to translating our curriculum files.
|
||||
|
||||
|
||||
267
docs/i18n/portuguese/how-to-work-on-localized-client-webapp.md
Normal file
267
docs/i18n/portuguese/how-to-work-on-localized-client-webapp.md
Normal file
@ -0,0 +1,267 @@
|
||||
# How to work on localized client webapp
|
||||
|
||||
The react based client web app that powers our learning platform is built using Gatsby. It is translated into various world languages using [react-i18next](https://react.i18next.com/) and [i18next](https://www.i18next.com/).
|
||||
|
||||
You can learn more about setting up the client application locally for development by following [our local setup guide here](/how-to-setup-freecodecamp-locally). By default the application is available only in English.
|
||||
|
||||
Once you have setup the project locally you should be able to follow this documentation to run the client in the language of your choice from the list of available languages.
|
||||
|
||||
This could be helpful when you are working on a feature that specifically targets something that involves localization, and requires you to validate for instance a button's label in a different language.
|
||||
|
||||
> [!TIP] You do not need to follow this document for translating freeCodeCamp's curriculum or contributing documentation. Read [this guide here](./how-to-translate-files.md) instead.
|
||||
|
||||
Let's understand how the i18n frameworks and tooling work.
|
||||
|
||||
## File Structure
|
||||
|
||||
Most of files for translating the platform are located in the [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n) folder. Each language has a directory within that containing JSON files with the translations.
|
||||
|
||||
```console
|
||||
config/i18n
|
||||
└── all-langs.js
|
||||
...
|
||||
client/i18n
|
||||
├── configForTests.js
|
||||
├── config.js
|
||||
├── locales
|
||||
│ ├── chinese
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
... ...
|
||||
│ ├── dothraki
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
... ...
|
||||
│ ├── english
|
||||
│ │ ├── intro.json
|
||||
│ │ ├── links.json
|
||||
│ │ ├── meta-tags.json
|
||||
│ │ ├── motivation.json
|
||||
│ │ ├── translations.json
|
||||
│ │ └── trending.json
|
||||
│ └── espanol
|
||||
│ ├── intro.json
|
||||
│ ├── links.json
|
||||
│ ├── meta-tags.json
|
||||
│ ├── motivation.json
|
||||
│ ├── translations.json
|
||||
│ └── trending.json
|
||||
├── locales.test.js
|
||||
├── schema-validation.js
|
||||
└── validate-keys.js
|
||||
```
|
||||
|
||||
Some of these files are translated on our translation platform (Crowdin), some are not.
|
||||
|
||||
**Files translated on our translation platform:**
|
||||
|
||||
- The `translations.json` file contains the majority of the text that appears on the user interface elements. The keys are used in the codebase to get the correct text for whatever language is set. This file needs to have the exact same keys in all languages.
|
||||
|
||||
- The `intro.json` file contains the key-value pairs for the introduction text on the certification pages.
|
||||
|
||||
If you want to add/update translations for the keys please [read this guide here](/how-to-translate-files.md).
|
||||
|
||||
**Files NOT translated on our translations platform:**
|
||||
|
||||
- The `motivation.json` files are not required to have the same quotes, compliments, or array length. Just the same JSON structure.
|
||||
|
||||
- The `trending.json` file contains the titles and links for the trending news articles in the website's footer.
|
||||
|
||||
- The `meta-tags.json` file contains the information for our website's meta tag information.
|
||||
|
||||
Changes to these files are typically done by the staff team. If you see something out of the ordinary we recommend you reach us in the [translators chat room](https://chat.freecodecamp.org/channel/translators).
|
||||
|
||||
## Testing the client app in a world language
|
||||
|
||||
You can test the client app in any language available in the [list of languages here](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5).
|
||||
|
||||
```js
|
||||
const availableLangs = {
|
||||
client: ['english', 'espanol', 'chinese'],
|
||||
...
|
||||
};
|
||||
```
|
||||
|
||||
If you are testing a new language, create a folder with the language name as the title next to the other languages and copy the JSON files from another language into your new folder.
|
||||
|
||||
Add the language to the `client` array as seen above in the [`config/i18n/all-langs.js`](https://github.com/freeCodeCamp/freeCodeCamp/blob/main/config/i18n/all-langs.js) file.
|
||||
|
||||
Next, follow the instructions in the comments in the same file to add/update the rest of the variables as needed.
|
||||
|
||||
Finally, set the `CLIENT_LOCALE` variable in your `.env` file to the locale you want to build and you're ready.
|
||||
|
||||
## How to Structure Components
|
||||
|
||||
If you are working on a feature or a bug for the client web app, say for example adding new UI items on the settings page, you should follow the guidelines below. They will help you prepare the components for localization into all the supported world languages.
|
||||
|
||||
### Functional Component
|
||||
|
||||
```js
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
// in the render method:
|
||||
const { t } = useTranslation();
|
||||
|
||||
// call the "t" function with a key from the JSON file:
|
||||
<p>{t('key')}</p>; // more details below
|
||||
```
|
||||
|
||||
### Class Component
|
||||
|
||||
```js
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
// withTranslation adds the "t" function to props:
|
||||
const { t } = this.props;
|
||||
|
||||
// call the "t" function with a key from the JSON file:
|
||||
<h1>{t('key')}</h1> // more details below
|
||||
|
||||
// export without redux:
|
||||
export default withTranslation()(Component);
|
||||
|
||||
// or with redux:
|
||||
export default connect(...)(withTranslation()(Component));
|
||||
```
|
||||
|
||||
## Translate Using the "t" Function
|
||||
|
||||
### Basic Translation
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
<p>{t('p1')}</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"p1": "My paragraph"
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>My paragraph</p>
|
||||
```
|
||||
|
||||
### With Dynamic Data
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
const username = 'moT';
|
||||
|
||||
<p>{t('welcome', { username: username })}</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"welcome": "Welcome {{username}}"
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Welcome moT</p>
|
||||
```
|
||||
|
||||
The above example passes an object to the `t` function with a `username` variable. The variable will be used in the JSON value where `{{username}}` is.
|
||||
|
||||
## Translate with the `Trans` Component
|
||||
|
||||
The general rule is to use the "t" function when you can. But there's a `Trans` component for when that isn't enough, usually when you have elements embedded in the text. You can use the `Trans` component with any type of react component.
|
||||
|
||||
### Basic Elements Nested
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
import { Trans } from 'react-i18next'
|
||||
|
||||
<p>
|
||||
<Trans>fcc.greeting</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"fcc": {
|
||||
"greeting": "Welcome to <strong>freeCodeCamp</strong>"
|
||||
}
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Welcome to <strong>freeCodeCamp</strong></p>
|
||||
```
|
||||
|
||||
You can place the key inside the component tags like the above example if the text contains "simple" tags with no attributes. `br`, `strong`, `i`, and `p` are the default, but that list can be expanded in the i18n config.
|
||||
|
||||
### Complex Elements Nested
|
||||
|
||||
Other times, you will want to have certain text inside another element, an anchor tag is a good example:
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
<p>
|
||||
<Trans i18nKey='check-forum'>
|
||||
<a href='https://forum.freecodecamp.org/'>placeholder</a>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"check-forum": "Check out <0>our forum</0>."
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Check out <a href='https://forum.freecodecamp.org/'>our forum</a></p>
|
||||
```
|
||||
|
||||
In the above example, the key is set in the attributes of the `Trans` component. The `<0>` and `</0>` in the JSON represent the first child of the component, in this case, the anchor element. If there were more children, they would just count up from there using the same syntax. You can find the children of a component in the react dev tools by inspecting it. `placeholder` is simply there because the linter complains about empty `<a>` elements.
|
||||
|
||||
### With a Variable
|
||||
|
||||
```js
|
||||
// in the component:
|
||||
const email = 'team@freecodecamp.org';
|
||||
|
||||
<p>
|
||||
<Trans email={email} i18nKey='fcc.email'>
|
||||
<a href={`mailto:${email}`}>
|
||||
{{ email }}
|
||||
</a>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
// in the JSON file:
|
||||
{
|
||||
"fcc": {
|
||||
"email": "Send us an email at: <0>{{email}}</0>"
|
||||
}
|
||||
}
|
||||
|
||||
// output:
|
||||
<p>Send us an email at: <a href='mailto:team@freecodecamp.org'>team@freecodecamp.org</a><p>
|
||||
```
|
||||
|
||||
In the above example, the key and a variable are set in the attributes of the `Trans` component. `{{ email }}` needs to be somewhere in the `Trans` component as well, it doesn't matter where.
|
||||
|
||||
## Changing Text
|
||||
|
||||
To change text on the client side of things, go to the relevant `.json` file, find the key that is being used in the React component, and change the value to the new text you want. You should search the codebase for that key to make sure it isn't being used elsewhere. Or, if it is, that the changes make sense in all places.
|
||||
|
||||
## Adding Text
|
||||
|
||||
If the text you want to add to the client exists in the relevant `.json` file, use the existing key. Otherwise, create a new key.
|
||||
|
||||
The English file is the "source of truth" for all of the `.json` files sharing the same name. If you need to add a new key, add it there. Then, add the key to **all** of the `translations.json` files.
|
||||
|
||||
> [!NOTE] Use English text for all languages if the file is translated through Crowdin. The tests will fail if you don't.
|
||||
|
||||
It would be nice to keep the keys in the same order across all the files as well. Also, try to put all punctuation, spacing, quotes, etc in the JSON files and not in the components or server files.
|
||||
|
||||
> [!NOTE] The underscore (`_`) is a reserved character for keys in the client side files. See [the documentation](https://www.i18next.com/translation-function/plurals) for how they are used.
|
||||
|
||||
## Helpful Documentation
|
||||
|
||||
- [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook)
|
||||
- [i18next docs](https://www.i18next.com/translation-function/essentials)
|
||||
@ -22,13 +22,9 @@ You can help expand and improve the curriculum. You can also update project user
|
||||
|
||||
## Translations
|
||||
|
||||
We are localizing freeCodeCamp.org to world languages starting with Chinese and Español. We will be expanding the translations to more languages.
|
||||
We are localizing freeCodeCamp.org to major world languages. Some of the certifications are already live in [Chinese (中文)](https://chinese.freecodecamp.org/learn) and [Spanish (Español)](https://www.freecodecamp.org/espanol/learn/). We encourage you to read the [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort) and share it your friends to get them excited about this.
|
||||
|
||||
To help us with this massive effort, we have integrated our open-source code-base & curriculum with [Crowdin](https://crowdin.com/). You can read all about this in our [announcement here](https://www.freecodecamp.org/news/world-language-translation-effort). We encourage you to read the announcement and share it your friends to get them excited about this.
|
||||
|
||||
It's our dream to provide you with the resources to learn, no matter the world language you speak.
|
||||
|
||||
**If you're interested in translating, here are the guides to translate our [curriculum](how-to-translate-files.md), the [learning platform](how-to-translate-the-website.md) and our [Contributing guidelines](https://translate.freecodecamp.org/contributing-docs).**
|
||||
**If you're interested in translating, here's [how to translate freCodeCamp's resources](how-to-translate-files.md).**
|
||||
|
||||
## Learning Platform
|
||||
|
||||
|
||||
Reference in New Issue
Block a user