1.2.7

Localizer

Localizer is a script for retrieve locales data on google sheet and save to file for using in application.

How it looks like?

Usage

yarn add 20scoops-localizer
yarn localizer

Step 1

Create file called localizer.js. The only minimum config required is url which is google sheet url you want to retrieve locales data from

module.exports = {
  url:
    'https://docs.google.com/spreadsheets/d/1RzakawKOAo9JLz-MTkM9Iz5dqYmC6XvqcVmegUCos48/edit#gid=0',
}

and run script

yarn localizer

Step 2

Prompt will asked your secret key (What is secret key and how to retrieve it?).

It only ask for the first time when you install this package.

Step 3

Prompt will asked to visit the url and provide token (What is token and how to retrieve it?). This is for retrieve private google sheet.

It only ask for the first time when you install this package.

Step 4

That's it. If you provide correctly, it will show where files are saved.

Don't worry if you provide incorrectly, just run again and you can provide correct token / secret.

How to retrieve secret key and token

Secret key

It's secret key of OAuth google. You can get it from slack channel #general-dev. I'll pin on there under "20scoops-localizer" section or you can ask in the channel.

Token

Token is authorization key so that script can retrieve data on private google sheet on behalf of you. You can get this token by following the url the script provide in Step 3 on Usage section or run script localizer --get-refresh-token

Continuous Integration (CI)

How to use on Continuous Integration (CI)

Set up LOCALIZER_CREDENTIAL_TOKEN and LOCALIZER_REFRESH_TOKEN on environtment

You can get refresh token from Option

Example for Github Actions

- name: Localizer
  env:
    LOCALIZER_CREDENTIAL_TOKEN: ${{ secrets.LOCALIZER_CREDENTIAL_TOKEN }}
    LOCALIZER_REFRESH_TOKEN: ${{ secrets.LOCALIZER_REFRESH_TOKEN }}
  run: yarn localizer

How localizer read/export locales from google sheet

Example google sheet

Can divide the headers by merge row of sheet.

Example output for esm format

//en.js

const en = {
  translation: {
    btnLogin: 'Login',
    username: 'Username',
    password: 'Password',
    welcome: 'Welcome',
    hello: 'Hello',
    morning: 'Morning',
  },
}
export default en

//de.js

const de = {
  translation: {
    btnLogin: 'Anmeldung',
    username: 'Nutzername',
    password: 'Passwort',
    welcome: 'herzlich willkommen',
    hello: 'Hallo',
    morning: 'Guten morgen',
  },
}
export default de

Example output for commonjs format

//en.js

module.exports = {
  btnLogin: 'Login',
  username: 'Username',
  password: 'Password',
  welcome: 'Welcome',
  hello: 'Hello',
  morning: 'Morning',
}

//de.js

module.exports = {
  btnLogin: 'Anmeldung',
  username: 'Nutzername',
  password: 'Passwort',
  welcome: 'herzlich willkommen',
  hello: 'Hallo',
  morning: 'Guten morgen',
}

localizer assume first row is for headline. it will start retrieve data after the first row.

In addition, the Localizer has the following rules

• The first column is the key for developer.
• The second to last column is the name of the language that is exported. There will be a key to each file.

Options

Config

You can config script by creating localizer.js on your root project.

Example

module.exports = {
  dest: './locales',
  filename: {
    en: 'en.js',
    de: 'de.js',
  },
  url:
    'https://docs.google.com/spreadsheets/d/1RzakawKOAo9JLz-MTkM9Iz5dqYmC6XvqcVmegUCos48/edit#gid=0',
  ignoreColumns: ['th', 'description'],
  sheetName: '',
  module: 'esm',
}

** If sheetName more than 1. You can set follow sheetName:['sheet1', 'sheet2']