Skip to main content

​
Overview

The 200 Mates project supports three languages to accommodate mate drinkers across different regions and language preferences. All interface text, form labels, alerts, and content dynamically update when you switch languages.

Español

Spanish - The primary language of the project, reflecting mate’s cultural roots in Argentina, Uruguay, and Paraguay.

English

English - For international mate enthusiasts and global reach.

Português

Portuguese - Supporting the mate and tereré culture in Brazil and Portugal.

​
Switching Languages

Language selection is immediate and affects all text throughout the interface.
1

Locate Language Buttons

Language switcher buttons appear in the navigation area of the site, typically near the header.
2

Click Desired Language

Click the button for your preferred language:
  • ES for Español
  • EN for English
  • PT for Português
3

Interface Updates

All text immediately updates to the selected language without page reload.
4

Visual Feedback

The selected language button receives an “active” class, typically highlighted to show current selection.
The HTML document’s lang attribute also updates (e.g., <html lang="es">) to properly inform browsers and assistive technologies of the current language.

​
What Gets Translated

The i18n system translates all user-facing text across the entire interface.

​
Header & Navigation

  • ES: “Vuelta al Mundo en unos 200 Mates”
  • EN: “Around the World in about 200 Mates”
  • PT: “Volta ao Mundo em cerca de 200 Mates”

Counter Labels

  • Mates: Same in all languages
  • Countries: Países (ES/PT) / Countries (EN)

Gallery Section

  • ES: “Últimos Mates”
  • EN: “Last Mates”
  • PT: “Últimos Mates”

​
Form Labels & Placeholders

  • ES: “Cebate uno” (Argentine slang for “make yourself a mate”)
  • EN: “Make yourself a mate and join in”
  • PT: “Faz um mate”
All GPS-related messages translate:
  • ”📍 Solicitando ubicación…” / ”📍 Requesting your location…” / ”📍 Solicitando sua localização…”
  • ”📍 Detectando ubicación…” / ”📍 Detecting your location…” / ”📍 Detectando sua localização…”
  • GPS error messages with manual entry instructions
  • Name: Nombre* / Name* / Nome*
  • Country: País* (ES/PT) / Country* (EN)
  • Yerba: Marca de yerba* / Yerba Brand* / Marca de Erva-Mate*
  • Mate Type: Different materials listed (Calabaza, Madera, Acero, Vidrio / Calabash, Wood, Stainless Steel, Glass / Cabaça, Madeira, Aço, Vidro)
  • Bitter: Amargo (ES/PT) / Bitter (EN)
  • Sweet: Dulce / Sweet / Doce
  • Tereré: Same in all languages (Brazilian/Paraguayan term)
  • Brewed: Mate Cocido / Brewed Mate Tea / Chá Mate

​
Alerts & Messages

Validation Errors

ES: “Por favor completá los campos obligatorios y adjuntá una foto.”EN: “Please complete the required fields and add a photo.”PT: “Por favor, complete os campos obrigatórios e envie uma foto.”

Success Messages

ES: “¡Mate enviado! Aparecerá en el mapa una vez aprobado.”EN: “Your mate is on its way! It will show up on the map once approved.”PT: “Seu mate foi enviado! Ele aparecerá no mapa assim que for aprovado.”
After submitting a mate:Title:
  • ES: “¡Mate enviado!”
  • EN: “Your mate is on its way!”
  • PT: “Seu mate foi enviado!”
Body:
  • ES: “Tu mate está en revisión. Una vez aprobado, aparecerá en el mapa.”
  • EN: “It’s now under review and will appear on the map once approved.”
  • PT: “Ele está em revisão e aparecerá no mapa assim que for aprovado.”
Button:
  • ES: “Inicio”
  • EN: “Home”
  • PT: “Início”

​
Content Pages

All static content pages are fully translated, including:
  • About / El proyecto / O projeto
  • Support / Colaborá / Colabore
  • Moderation guidelines / Convivencia / Convivência
  • Press information
  • FAQs (questions and answers)
  • Terms & Rules / Reglas y Consejos / Regras e Dicas
  • Privacy Policy / Privacidad / Privacidade
  • Contact information

​
How Language Switching Works

The technical implementation uses a clean i18n system.

​
Language Data Structure

All translations are stored in a single i18n object with three top-level keys:
const i18n = {
  es: { /* Spanish translations */ },
  en: { /* English translations */ },
  pt: { /* Portuguese translations */ }
};
Each language object contains identical keys with translated values.

​
Translation Function

t() Function

A translation function t(key) retrieves text in the current language:
t("formTitle") // Returns appropriate title based on currentLang
This function is called throughout the codebase whenever text needs to be displayed.

​
Apply i18n Process

1

Language Button Click

User clicks ES, EN, or PT button
2

Update Current Language

currentLang variable updates to selected language code
3

Visual State Update

All language buttons’ “active” class removed, then added to selected button
4

HTML Lang Attribute

Document’s lang attribute updates: document.documentElement.lang = currentLang
5

Apply Translations

applyI18n() function runs, updating all text elements throughout the page
6

Country Select Rebuild

Country dropdown rebuilds with country names in the new language

​
Dynamic Updates

No page reload is required. All text updates happen instantly through DOM manipulation:
  • Static text: element.textContent = t("key")
  • HTML content: element.innerHTML = t("key")
  • Attributes: element.placeholder = t("key")

​
Country Name Translations

The country selection dropdown also translates:

Country Select Behavior

When language changes, the rebuildCountrySelect(currentLang) function:
  1. Clears the current country dropdown
  2. Rebuilds it with country names in the new language
  3. Maintains the currently selected country (if any)
  4. Preserves ISO3 country codes for database consistency

​
Language Persistence

Current Limitation:Language preference is not currently persisted between sessions. When you refresh the page, the default language (Spanish) loads.To remember your language preference, you would need to:
  • Store selection in localStorage
  • Check for saved preference on page load
  • Auto-select saved language

​
Cultural Considerations

​
Regional Variations

Uses Argentine/Uruguayan terminology:
  • “Cebate uno” (Argentine mate culture)
  • “vos” form where appropriate
  • Regional expressions like “yerba”
Neutral international English:
  • Clear explanations of mate traditions
  • Accessible to non-native speakers
  • Explains cultural context
Brazilian Portuguese focus:
  • “Tereré” terminology (Brazilian cold mate)
  • “Erva-mate” instead of “yerba mate”
  • Reflects Brazilian mate culture

​
Terminology Choices

Universal Terms

Some words remain consistent:
  • Mate (Spanish/Portuguese)
  • Tereré (Guaraní origin)
  • FAQs (English acronym used globally)

Localized Terms

Others adapt to local usage:
  • Yerba (ES) → Yerba/Erva-mate (PT)
  • Calabaza (ES) → Cabaça (PT)
  • Amargo (ES/PT) → Bitter (EN)

​
Translation Quality

Community Translations:The project welcomes translation improvements from native speakers. If you notice errors or have suggestions for better phrasing, you can:
  1. Contact the project maintainers
  2. Submit translation improvements
  3. Help expand language support
The maintainers explicitly request help improving translations in the Support page.

​
Accessibility Benefits

Screen Readers

Setting the lang attribute helps screen readers:
  • Pronounce text correctly
  • Use appropriate voice/accent
  • Switch languages automatically
  • Improve experience for visually impaired users

​
Future Language Expansion

Potential for additional languages:

Other Mate Regions

Languages from regions with mate culture:
  • Guaraní (Paraguay)
  • Arabic (Syrian/Lebanese communities)
  • Italian (Argentine heritage)

Global Reach

Major world languages:
  • French
  • German
  • Mandarin
  • Russian
Adding a new language requires:
  1. Complete translation of all text keys in i18n.js
  2. Adding language button to interface
  3. Cultural review to ensure appropriate terminology
  4. Testing all pages and features in new language

​
Tips for Using Multiple Languages

Switch between languages to learn mate-related vocabulary in different languages - useful for international mate communities.
Send the site to friends in their preferred language by telling them which button to click.
See how mate culture terms translate across languages to understand regional differences.
You can use the site in your preferred language, but mate names, brands, and countries work in any language since they’re custom text.

​
Technical Implementation Details

Code Structure

Translation Keys: 80+ translation keys cover all interface textFile Size: ~438 lines in i18n.js for three complete language setsUpdate Mechanism: Event listeners on language buttons trigger immediate DOM updatesPerformance: Translations load once at page load; switching is instantMaintenance: New features need text added to all three language objects

Submitting Your Mate

All form fields and labels are translated - submit in your preferred language

Gallery Features

Gallery interface and lightbox text updates with language selection

Build docs developers (and LLMs) love

Get started for freeTalk to us