search

ohcnetwork / life

Verified Crowd-Sourced Emergency Services Directory
https://life.coronasafe.network/
84 stars 55 forks source link

setting up docs / guide for translation #102

Closed Deep-Codes closed 3 years ago

Deep-Codes commented 3 years ago

Adding a new Language

All Translations are inside the [/locales ]()folder

Each language has a Folder with the Name of its Respective Code Based on this.

For example: English Translation would be in /locales/en and Marathi in /locales/mr

Each File Inside the Language Folder would have Multiple Files based on the Template we would give.

For generating template there would some Script that would automate this process.

By Default it would add files with English Translation and you have add translations for the words,phrases you know because we want a fallback if the translation doesn't exists.

For Example Home Page has English Translation in /locales/en/home.js

export default {
    title: 'Life',
    description: 'Verified Crowd Sourced Emergency Services Directory',
    oxygen: 'Oxygen',
    medicine: 'Medicine',
    hospital: 'Hospital',
    ambulance: 'Ambulance',
    helpline: 'Helpline',
    plasma: 'Plasma',
    searchPlaceholder: 'Search for availability in a State or District',
    state: 'State',
    district: 'District',
    covid19Stats: 'Covid19 Statistics',
    oxygenRequirements: 'Oxygen Requirements',
    contributeData: 'Contribute Verified Data',
    campaigns: 'Campaigns',
    partnerWithUs: 'Partner With Us',
    curatedBy: 'Curated By',
    supportedBy: 'Supported By',
    poweredBy: 'Powered By',
    github: 'Github',
    database: 'Database',
    about: 'About'
};

Here the key is the value of word we want to be translated and the value is the translated word of the key in the respective language.

To add marathi translations to the Home Page

Gotta create a file in /locales/mr/home.js and add the following :

export default {
    title: 'लाइफ़',
    description: 'सत्यापित क्रोड सोर्सिड इमर्जन्सी सर्व्हिसेस निर्देशिका',
    oxygen: 'ऑक्सिजन',
    medicine: 'औषध',
    hospital: 'रुग्णालय',
    ambulance: 'रुग्णवाहिका',
    helpline: 'हेल्पलाइन',
    plasma: 'प्लाझ्मा',
    searchPlaceholder: 'राज्य किंवा जिल्ह्यात उपलब्धतेचा शोध घ्या',
    state: 'राज्य',
    district: 'जिल्हा',
    covid19Stats: 'कोविड 19 आकडेवारी',
    oxygenRequirements: 'ऑक्सिजन आवश्यकता',
    contributeData: 'सत्यापित डेटाचे योगदान द्या',
    campaigns: 'मोहिमा',
    partnerWithUs: 'आमच्यासह भागीदार',
    curatedBy: 'क्युरेटेड बाय',
    supportedBy: 'समर्थित',
    poweredBy: 'द्वारा समर्थित',
    github: 'गीथब',
    database: 'डेटाबेस',
    about: 'बद्दल'
};

Things to Consider after adding the Translations:

As an example, if your adding Marathi Language

Adding the new language's name and code in this /locales/index.js

export default [
    {
        name: 'English',
        code: 'EN'
    },
    {
        name: 'हिंदी',
        code: 'HI'
    },
+    {
+       name: 'मराठी',
+        code: 'MR'
+    }
];

Then Updating the useLocale.js hook in /hooks/use-locale.js

import en from '@locales/en/index';
import hi from '@locales/hi/index';
+ import mr from '@locales/mr/index';

const useLocale = (loc) => {
    let t = loc;
    switch (loc) {
        case 'EN':
            t = en;
            break;
        case 'HI':
            t = hi;
            break;
+       case 'MR':
+          t = mr;
+          break;
        default:
            t = en;
    }
    return t;
};

export default useLocale;
Deep-Codes commented 3 years ago

Indian Languages Added:

Deep-Codes commented 3 years ago

Added Docs