Skip to content

Commit 2d0d390

Browse files
carburocarburo
authored
Merge pull request #183 from reactjs/sync-bab2a349
Sync with reactjs.org @ bab2a34
2 parents 2561d0e + 88e9f04 commit 2d0d390

File tree

10 files changed

+473
-36
lines changed

10 files changed

+473
-36
lines changed

‎content/authors.yml

+3
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ sophiebits:
7373
steveluscher:
7474
name: Steven Luscher
7575
url: https://twitter.com/steveluscher
76+
tesseralis:
77+
name: Nat Alison
78+
url: https://twitter.com/tesseralis
7679
timer:
7780
name: Joe Haddad
7881
url: https://twitter.com/timer150

‎content/blog/2019-02-23-is-react-translated-yet.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: "Is React Translated Yet? ¡Sí! Sim! はい！"
3+
author: [tesseralis]
4+
---
5+
6+
We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into *over 30* languages! You can find them on the new [Languages](/languages) page.
7+
8+
In addition, the following three languages have completed translating most of the React Docs! 🎉
9+
10+
* **Spanish: [es.reactjs.org](https://es.reactjs.org)**
11+
* **Japanese: [ja.reactjs.org](https://ja.reactjs.org)**
12+
* **Brazilian Portuguese: [pt-br.reactjs.org](https://pt-br.reactjs.org)**
13+
14+
Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to *completely* translate the core pages of the docs!
15+
16+
## Why Localization Matters
17+
18+
React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages.
19+
20+
In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind.
21+
22+
## Contributing
23+
24+
If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language.
25+
26+
Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
27+
28+
## Backstory
29+
30+
Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it.
31+
32+
Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale".
33+
34+
[Dan](https://twitter.com/dan_abramov) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
35+
36+
This approach appealed to us for several reasons:
37+
38+
* It was less code integration to get off the ground.
39+
* It encouraged active maintainers for each repo to ensure quality.
40+
* Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization.
41+
42+
We started of with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages.
43+
44+
After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
45+
46+
Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
47+
48+
## The Bot
49+
50+
The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0.html).
51+
52+
In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix.
53+
54+
Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request.
55+
56+
The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and *endlessly* frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine!
57+
58+
The biggest challenge was space. Each fork of the repo is around 100MB -- which takes minutes to clone on my local machine. We have *32* forks, and the free tiers or most deployment platforms I checked limited you to 512MB of storage.
59+
60+
After lots of notepad calculations, I found a solution: delete each repo once we've finished the script and limit the concurrency of `sync` scripts that run at once to be within the storage requirements. Luckily, Heroku dynos have a much faster Internet connection and are able to clone even the React repo quickly.
61+
62+
There were other smaller issues that I ran into. I tried using the [Heroku Scheduler](https://elements.heroku.com/addons/scheduler) add-on so I didn't have to write any actual `watch` code, but it end up running too inconsistently, and I [had an existential meltdown on Twitter](https://twitter.com/tesseralis/status/1097387938088796160) when I couldn't figure out how to send commits from the Heroku dyno. But in the end, this frontend engineer was able to get the bot working!
63+
64+
There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements!
65+
66+
## Thanks
67+
68+
Finally, I would like to extend my gratitude to the following people and groups:
69+
70+
* All the translation maintainers and contributors who are helping translate React to more than thirty languages.
71+
* The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation.
72+
* [Soichiro Miki](https://github.com/smikitki) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation.
73+
* [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
74+
* [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
75+
76+
And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.

‎content/docs/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ React ha sido diseñado desde su inicio para ser adoptado gradualmente, así pue
3636

3737
### Área de juegos {#online-playgrounds}
3838

39-
Si estas interesado en jugar un poco con React, puedes usar un editor de código online. Prueba la plantilla "Hola mundo" en [CodePen](codepen://hello-world) o en [CodeSandbox](https://codesandbox.io/s/new).
39+
Si estas interesado en jugar un poco con React, puedes usar un editor de código online. Prueba la plantilla "Hola mundo" en [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new) o [Glitch](https://glitch.com/edit/#!/remix/starter-react-template).
4040

4141
Si prefieres usar tu propio editor, también puedes [descargar este archivo HTML](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), editarlo, y abrirlo desde tu sistema de archivos al navegador. Esto realiza una transformación de código lenta, así que solo recomendamos esto para pruebas simples.
4242

‎content/docs/hooks-faq.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
192192

193193
### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
194194

195-
* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing is expensive, you can pass a function to `useState`.
195+
* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing the initial state is expensive, you can pass a function to `useState`.
196196

197197
* `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
198198

‎content/languages.yml

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# Status enums indicate what percentage of "core" content has been translated:
2+
# 0: Incomplete (0–49%)
3+
# 1: Partially complete (50–94%)
4+
# 2: Complete (95–100%)
5+
6+
- name: English
7+
translated_name: English
8+
code: en
9+
status: 2
10+
- name: Arabic
11+
translated_name: العربية
12+
code: ar
13+
status: 0
14+
- name: Azerbaijani
15+
translated_name: Azərbaycanca
16+
code: az
17+
status: 0
18+
- name: Bulgarian
19+
translated_name: Български
20+
code: bg
21+
status: 0
22+
- name: Bengali
23+
translated_name: বাংলা
24+
code: bn
25+
status: 0
26+
- name: German
27+
translated_name: Deutsch
28+
code: de
29+
status: 0
30+
- name: Spanish
31+
translated_name: Español
32+
code: es
33+
status: 2
34+
- name: Persian
35+
translated_name: فارسی
36+
code: fa
37+
status: 0
38+
- name: French
39+
translated_name: Français
40+
code: fr
41+
status: 0
42+
- name: Hebrew
43+
translated_name: עברית
44+
code: he
45+
status: 0
46+
- name: Hindi
47+
translated_name: हिन्दी
48+
code: hi
49+
status: 0
50+
- name: Armenian
51+
translated_name: Հայերեն
52+
code: hy
53+
status: 0
54+
- name: Indonesian
55+
translated_name: Bahasa Indonesia
56+
code: id
57+
status: 0
58+
- name: Italian
59+
translated_name: Italiano
60+
code: it
61+
status: 0
62+
- name: Japanese
63+
translated_name: 日本語
64+
code: ja
65+
status: 1
66+
- name: Korean
67+
translated_name: 한국어
68+
code: ko
69+
status: 0
70+
- name: Malayalam
71+
translated_name: മലയാളം
72+
code: ml
73+
status: 0
74+
- name: Nepali
75+
translated_name: नेपाली
76+
code: ne
77+
status: 0
78+
- name: Dutch
79+
translated_name: Nederlands
80+
code: nl
81+
status: 0
82+
- name: Polish
83+
translated_name: Polski
84+
code: pl
85+
status: 0
86+
- name: Portuguese (Brazil)
87+
translated_name: Português do Brasil
88+
code: pt-br
89+
status: 1
90+
- name: Portuguese (Portugal)
91+
translated_name: Português europeu
92+
code: pt-pt
93+
status: 0
94+
- name: Romanian
95+
translated_name: Română
96+
code: ro
97+
status: 0
98+
- name: Russian
99+
translated_name: Русский
100+
code: ru
101+
status: 0
102+
- name: Sinhala
103+
translated_name: සිංහල
104+
code: si
105+
status: 0
106+
- name: Tamil
107+
translated_name: தமிழ்
108+
code: ta
109+
status: 0
110+
- name: Turkish
111+
translated_name: Türkçe
112+
code: tr
113+
status: 0
114+
- name: Ukrainian
115+
translated_name: Українська
116+
code: uk
117+
status: 0
118+
- name: Uzbek
119+
translated_name: Oʻzbekcha
120+
code: uz
121+
status: 0
122+
- name: Vietnamese
123+
translated_name: Tiếng Việt
124+
code: vi
125+
status: 0
126+
- name: Simplified Chinese
127+
translated_name: 简体中文
128+
code: zh-hans
129+
status: 0
130+
- name: Traditional Chinese
131+
translated_name: 繁體中文
132+
code: zh-hant
133+
status: 0

‎src/components/LayoutHeader/DocSearch.js

+14-21
Original file line numberDiff line numberDiff line change
@@ -42,27 +42,25 @@ class DocSearch extends Component<{}, State> {
4242
flex: '0 0 auto',
4343
flexDirection: 'row',
4444
alignItems: 'center',
45-
paddingLeft: '0.5rem',
46-
paddingRight: '0.5rem',
45+
paddingLeft: '0.25rem',
46+
paddingRight: '0.25rem',
4747

48-
[media.lessThan('small')]: {
48+
[media.lessThan('expandedSearch')]: {
4949
justifyContent: 'flex-end',
50-
},
51-
[media.lessThan('large')]: {
5250
marginRight: 10,
5351
},
54-
[media.between('small', 'medium')]: {
55-
width: 'calc(100% / 3)',
56-
},
57-
[media.between('medium', 'xlarge')]: {
58-
width: 'calc(100% / 6)',
59-
},
60-
[media.greaterThan('small')]: {
61-
minWidth: 120,
52+
// TODO: Something like this could show the full search box in more cases
53+
// but it currently breaks its expanding animation.
54+
// [media.between('mediumSearch', 'largerSearch')]: {
55+
// width: 'calc(100% / 8)',
56+
// },
57+
[media.greaterThan('expandedSearch')]: {
58+
minWidth: 100,
6259
},
6360
}}>
6461
<input
6562
css={{
63+
width: '100%',
6664
appearance: 'none',
6765
background: 'transparent',
6866
border: 0,
@@ -71,26 +69,21 @@ class DocSearch extends Component<{}, State> {
7169
fontWeight: 300,
7270
fontFamily: 'inherit',
7371
position: 'relative',
74-
padding: '5px 5px 5px 29px',
72+
padding: '4px 4px 4px 29px',
7573
backgroundImage: 'url(/search.svg)',
7674
backgroundSize: '16px 16px',
7775
backgroundRepeat: 'no-repeat',
7876
backgroundPositionY: 'center',
79-
backgroundPositionX: '5px',
77+
backgroundPositionX: '4px',
8078

8179
':focus': {
8280
outline: 0,
8381
backgroundColor: colors.lighter,
8482
borderRadius: '0.25rem',
8583
},
8684

87-
[media.lessThan('large')]: {
85+
[media.lessThan('expandedSearch')]: {
8886
fontSize: 16,
89-
},
90-
[media.greaterThan('small')]: {
91-
width: '100%',
92-
},
93-
[media.lessThan('small')]: {
9487
width: '16px',
9588
transition: 'width 0.2s ease, padding 0.2s ease',
9689
paddingLeft: '16px',

0 commit comments

Comments
 (0)