|
| 1 | +# Translation Guide |
| 2 | + |
| 3 | +This project uses GNU gettext for internationalization. This guide explains how to add new translations and work with the translation system. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +The translation system follows these principles: |
| 8 | + |
| 9 | +- **English is the source language**: All text in the code is in English, using `t("English text")` calls |
| 10 | +- **Single source of truth**: Language configuration is centralized in `src/i18n/locales.ts` |
| 11 | +- **Standard format**: Uses PO files for translations |
| 12 | +- **Build-time conversion**: PO files are converted to JSON during the build process |
| 13 | + |
| 14 | +## How It Works |
| 15 | + |
| 16 | +### 1. Code Usage |
| 17 | + |
| 18 | +In the `.astro` or `.ts` files, use the `t()` function to mark translatable strings: |
| 19 | + |
| 20 | +```typescript |
| 21 | +const t = useTranslations(lang); |
| 22 | + |
| 23 | +const title = t("Welcome to PyLadiesCon"); |
| 24 | +const description = t("Join us for an amazing conference"); |
| 25 | +``` |
| 26 | + |
| 27 | +For English (the default language), `t()` returns the exact string you pass in. For other languages, it looks up the translation in the PO file. |
| 28 | + |
| 29 | +### 2. Translation Workflow |
| 30 | + |
| 31 | +The system automatically: |
| 32 | +1. Extracts all `t("...")` calls from the codebase |
| 33 | +2. Generates a template file (`messages.pot`) with all strings |
| 34 | +3. Merges new/changed strings into existing language files (`messages.po`) |
| 35 | +4. Converts PO files to JSON at build time for runtime usage |
| 36 | + |
| 37 | +### 3. PO File Format |
| 38 | + |
| 39 | +PO files are plain text files with this structure: |
| 40 | + |
| 41 | +```po |
| 42 | +#: src/components/hero.astro:15 |
| 43 | +msgid "Welcome to PyLadiesCon" |
| 44 | +msgstr "PyLadiesCon'a HoΕ Geldiniz" |
| 45 | +
|
| 46 | +#: src/pages/[lang]/speakers.astro:42 |
| 47 | +msgid "Our Speakers" |
| 48 | +msgstr "KonuΕmacΔ±larΔ±mΔ±z" |
| 49 | +``` |
| 50 | + |
| 51 | +- `msgid`: The English source text (what you wrote in the code) |
| 52 | +- `msgstr`: The translated text (what users will see) |
| 53 | +- `#:` comments show where the string is used in the codebase |
| 54 | + |
| 55 | +## Adding a New Language |
| 56 | + |
| 57 | +### Step 1: Add to Configuration |
| 58 | + |
| 59 | +Edit `src/i18n/locales.ts` and add your language: |
| 60 | + |
| 61 | +```typescript |
| 62 | +export const languages = { |
| 63 | + en: "English", |
| 64 | + es: "EspaΓ±ol", |
| 65 | + tr: "TΓΌrkΓ§e", |
| 66 | + fr: "FranΓ§ais", // β¬
οΈ Add your language here |
| 67 | +}; |
| 68 | +``` |
| 69 | + |
| 70 | +### Step 2: Create the Translation File |
| 71 | + |
| 72 | +Run the bootstrap script with your language code: |
| 73 | + |
| 74 | +```bash |
| 75 | +pnpm run i18n:new fr |
| 76 | +``` |
| 77 | + |
| 78 | +This creates `locales/fr/messages.po` with all current strings ready to translate. |
| 79 | + |
| 80 | +### Step 3: Translate the Strings |
| 81 | + |
| 82 | +You have two options for translating: |
| 83 | + |
| 84 | +#### Option A: Using Poedit (Recommended) |
| 85 | + |
| 86 | +[Poedit](https://poedit.net/) is a free and open-source editor for PO files: |
| 87 | + |
| 88 | +1. Download and install [Poedit](https://poedit.net/) |
| 89 | +2. Open `locales/fr/messages.po` in Poedit |
| 90 | +3. Translate each string in the visual interface |
| 91 | +4. Save the file (Poedit handles the format automatically) |
| 92 | + |
| 93 | +#### Option B: Manual Editing |
| 94 | + |
| 95 | +Open `locales/fr/messages.po` in any text editor and fill in the `msgstr` fields: |
| 96 | + |
| 97 | +```po |
| 98 | +msgid "Welcome" |
| 99 | +msgstr "Bienvenue" # β Add your translation here |
| 100 | +``` |
| 101 | + |
| 102 | +### Step 4: Build and Test |
| 103 | + |
| 104 | +Run the development server to see your translations: |
| 105 | + |
| 106 | +```bash |
| 107 | +pnpm run dev |
| 108 | +``` |
| 109 | + |
| 110 | +Visit `http://localhost:4321/fr` or switch the language to see your translations in action. |
| 111 | + |
| 112 | +### Step 5: Submit Your Translations |
| 113 | + |
| 114 | +Once you have completed your translations, submit a pull request to the [main repository](https://github.com/pyladies/global-conference-2025). Aaaand that's it! Your translations will be reviewed and merged for everyone to enjoy. πππ |
| 115 | + |
| 116 | +## Translation Tips |
| 117 | + |
| 118 | +### Do's |
| 119 | + |
| 120 | +β
Keep the same formatting (HTML tags, placeholders) as the source text |
| 121 | +β
Make sure to escape special characters (e.g., quotes, newlines, etc.) |
| 122 | +β
Try to use gender-neutral language where possible |
| 123 | +β
Test your translations in the browser to verify context |
| 124 | + |
| 125 | +### Don'ts |
| 126 | + |
| 127 | +β Don't change HTML tags or remove them (keep `<strong>`, `<a>`, etc.) |
| 128 | +β Don't manually edit `messages.pot` (it's auto-generated) |
| 129 | + |
| 130 | +*See [Maintaining Translations](maintaining-translations.md) for keeping translations working.* |
0 commit comments