4.0 KiB
4.0 KiB
Translation
This is a guide for translation. Thank you for helping us make our platform accessible in more languages!
Table of Contents
- 1. Files to Modify
- 2. Step-by-Step Instructions
- 3. Translation Key Naming
- 4. Testing Your Translation
- 5. Submitting Your Contribution
- 6. Tips for Quality Translations
- 7. FAQ
1. Files to Modify
To contribute a new language or update an existing one, you must modify the following files:
- Frontend/src/App.jsx
Update the language dropdown to include your language. - Frontend/src/LanguageSwitcher.jsx
Add your language to the dropdown options. - Frontend/src/locales/lang.json
(Replacelang.jsonwith your language code, e.g.es.jsonfor Spanish.)
Add or edit the translation file for your language. - Frontend/src/service/translation.js
Import your language file and register it in thetranslationsobject.
2. Step-by-Step Instructions
A. Add Your Language to the Dropdown
In App.jsx:
function LanguageSwitcher({ language, setLanguage }) {
return (
{
setLanguage(e.target.value);
localStorage.setItem("language", e.target.value);
}}
className="absolute top-2 right-2 p-1 rounded border"
aria-label="Select language"
>
English
Hindi (हिंदी)
Marathi (मराठी)
Français
{/* Add your language here, e.g.: */}
Español
);
}
In Frontend/src/LanguageSwitcher.jsx:
const LanguageSwitcher = ({ currentLanguage, onChangeLanguage }) => (
onChangeLanguage(e.target.value)}>
English
Hindi (हिंदी)
Marathi (मराठी)
French (Français)
{/* Add your language here, e.g.: */}
Español
);
B. Add or Update Your Language File
- File location:
Frontend/src/locales/ - File name: Use your language code, e.g.
es.jsonfor Spanish. - How:
- Copy
en.jsonas a template. - Do not change the keys! Only translate the values.
- Copy
Example (es.json):
{
"login_button": "Iniciar sesión",
"signup_heading": "Registrarse",
"...": "..."
}
C. Register Your Language in the Translation Loader
In Frontend/src/service/translation.js:
import en from '../locales/en.json';
import hi from '../locales/hi.json';
import mr from '../locales/mr.json';
import fr from '../locales/fr.json';
import es from '../locales/es.json'; // {
return translations[lang][key] || key; // Fallback to key if missing
};
3. Translation Key Naming
- Keys must remain unchanged and in English (snake_case).
- Only translate the values.
4. Testing Your Translation
- Switch the app to your language using the dropdown.
- Browse all screens and ensure all text is translated and displays correctly.
- If you see any untranslated keys, add them to your language file.
5. Submitting Your Contribution
- Commit your changes to the files listed above.
- Open a pull request with a clear title, e.g.
Add Spanish translation (es.json)orUpdate French translation. - Describe what you translated or updated in the PR description.
6. Tips for Quality Translations
- Be concise and clear.
- Use formal or polite forms if unsure.
- Match the tone of the English original.
- Double-check spelling and grammar.
- If unsure about a term, ask or leave a comment in your PR.
7. FAQ
Q: What if I see a key in English that isn’t in my language file?
A: Copy it from en.json and translate the value.
Q: Can I add a new key?
A: Only if you are also updating the code to use it. Otherwise, only translate existing keys.
If you have any questions, please ask in the project chat or open an issue.