Skip to main content

How to externalize strings

A string is available for translation only if it has been externalized in the source code of the passbolt applications, and the source code is already in the pre-release state.

note

As mentioned in the introduction of this document, British English is the language used to develop the application. Therefore, any changes to the source language will have to be done in the source code and each change will have to go through the translation process.

Externalize styleguide strings​

The styleguide repository contains most of the screens presented to the end user.

In this repository you will find:

  • Most of the passbolt front-end application in the directory src/react-extension
  • The passbolt quickaccess application in the directory src/react-quickaccess

The styleguide uses the i18next library to help manage the translation, if you want to know more checkout their documentation.

Getting started​

In order to work on the translation of this application you need to:

  1. Fork the repository.
  2. Clone it.
  3. Install the project dependencies npm install.

Mark a string for translation​

To translate a component, this one has first to load the translation context, and optionally the Trans component useful in JSX context.

import PropTypes from "prop-types";
import React from "react";
import {Trans, withTranslation} from "react-i18next";

class ComponentToTranslate extends React.Component {}

ComponentToTranslate.propTypes = {
  t: PropTypes.func, // The translation function
};
export default withTranslation("common")(ComponentToTranslate);

To mark for translation a string contained in JSX code.

<Trans>Welcome to passbolt!</Trans>

To mark for translation a string contained in javascript code.

this.props.t("Welcome to passbolt!");

Generate the language json source file​

Once you have made your changes on the source code, you can then generate the language json source file.

npx grunt externalize-locale-string

Once done you can propose your changes as a pull request on the repository.

Externalize browser extension strings​

The browser extension repository contains the code that orchestrates the browser extension screens and communicate with the API.

In this repository you will find the browser extension background page in the directory src/all/background_page

The browser extension uses the i18next library to help manage the translation, if you want to know more checkout their documentation.

Getting started​

In order to work on the translation of this application you need to:

  1. Fork the repository.
  2. Clone it.
  3. Install the project dependencies npm install.

Mark a string for translation​

To translate a string, a file has first to load the passbolt translation utility located in src/all/background_page/sdk/i18n.js. For instance:

const {i18n} = require("./sdk/i18n");

To mark for translation a string contained in javascript code.

i18n.t("Welcome to passbolt!");

Generate the language json source file​

Once you have made your changes on the source code, you can then generate the language json source file.

npx grunt externalize-locale-string

Once done you can propose your changes as a pull request on the repository.

Externalize API strings​

The API repository contains all the code relative to the API obviously but also some screens presented to the end users such as the installation wizard.

The passbolt API uses the CakePHP translation feature to help manage the translation, if you want to know more checkout their documentation.

Getting started​

In order to work on the translation of this application you need to:

  1. Fork the repository.
  2. Clone it.
  3. Install the project dependencies composer install.

Mark a string for translation​

To mark for translation a string contained in PHP code.

__('Welcome to passbolt!');

Generate the language gettext source file​

Once you have made your changes on the source code, you can then generate the language gettext source file.

composer externalize-locale-strings

Once done you can propose your changes as a pull request on the repository.