remix-project mirror

4.7 KiB

Raw Blame History

Contributing

Everyone is very welcome to contribute on the codebase of Remix. Please join our Discord in case of any queries.

Development

Remix libraries work closely with Remix IDE. Each library has a readme to explain its application.

When you add a code in any library, please ensure you add related unit tests.

Coding style

Please conform to standard for code styles.

Submitting Pull Request

Please follow GitHub's standard model of making changes & submitting pull request which is very well explained here. Make sure your code works fine locally before submitting a pull request.

Internationalization

Remix now supports Internationalization. Everyone is welcome to contribute to this feature.

How to make a string support intl?

First, put the string in the locale file located under apps/remix-ide/src/app/tabs/locales/en. Each json file corresponds to a module. If the module does not exist, then create a new json and import it in the index.js. Then you can replace the string with a intl component. The id prop will be the key of this string.

<label className="py-2 align-self-center m-0" style={{fontSize: "1.2rem"}}>
-  Learn
+  <FormattedMessage id="home.learn" />
</label>

In some cases, jsx maybe not be acceptable, you can use intl.formatMessage .

<input
   ref={searchInputRef}
   type="text"
   className="border form-control border-right-0"
   id="searchInput"
-  placeholder="Search Documentation"
+  placeholder={intl.formatMessage({ id: "home.searchDocumentation" })}
   data-id="terminalInputSearch"
/>

How to add another language support?

Let's say you want to add French.

First, create a folder named by the language code which is fr. Then, create a json file, let's say panel.json,

{
  "panel.author": "Auteur",
  "panel.maintainedBy": "Entretenu par",
  "panel.documentation": "Documentation",
  "panel.description": "La description"
}

Then, create a index.js file like this,

import panelJson from './panel.json';
import enJson from '../en';

// There may have some un-translated content. Always fill in the gaps with EN JSON.
// No need for a defaultMessage prop when render a FormattedMessage component.
export default Object.assign({}, enJson, {
  ...panelJson,
})

Then, import index.js in apps/remix-ide/src/app/tabs/locale-module.js

import enJson from './locales/en'
import zhJson from './locales/zh'
+import frJson from './locales/fr'

const locales = [
  { code: 'en', name: 'English', localeName: 'English', messages: enJson },
  { code: 'zh', name: 'Chinese Simplified', localeName: '简体中文', messages: zhJson },
+  { code: 'fr', name: 'French', localeName: 'Français', messages: frJson },
]

You can find the language's code, name, localeName in this link https://github.com/ethereum/ethereum-org-website/blob/dev/i18n.config.json

Whether or not to use `defaultMessage`?

If you search FormattedMessage or intl.formatMessage in this project, you will notice that most of them only have a id prop, but a few of them have a defaultMessage prop.

Why?

Each non-english language will be filled in the gaps with english. Even though there may be some un-translated content, it will always use english as defaultMessage. That's why we don't need to provide a defaultMessage prop each time we render a FormattedMessage component.

But in some cases, the id prop may not be static. For example,

<h6 className="pt-0 mb-1" data-id='sidePanelSwapitTitle'>
 <FormattedMessage id={plugin?.profile.name + '.displayName'} defaultMessage={plugin?.profile.displayName || plugin?.profile.name} />
</h6>

You can't be sure whether there is a match key in locale file or not. So it will be better to provide a defaultMessage prop.

Should I update the non-english locale json files?

You probably will have this question when you are updating the english locale json files.

Well, that depends.

If you update an old json file, then you don't need to update it in other languages, because crowdin will do it for you.

But if you add a new json file, only English is needed.

How to contribute on translations?

Remix is using crowdin to manage translations. If you want to contribute on that, you can do it on crowdin. Check the link below.

https://crowdin.com/project/remix-translation

There are many languages, just get into your language, and you will see a folder named Remix UI, where you can do the translations.

Not only you can do the translations, you can also review it. If you agree or disagree with some translations, you can vote YES or NO. If you vote NO, you can comment to explain why you vote NO, and give your translation.

4.7 KiB Raw Blame History