ackify-ce/docs/fr/features/i18n.md

Internationalisation (i18n)

Support multilingue complet du frontend Ackify.

Langues Supportées

• 🇫🇷 Français (par défaut)
• 🇬🇧 English (fallback)
• 🇪🇸 Español
• 🇩🇪 Deutsch
• 🇮🇹 Italiano

Frontend (Vue.js)

Sélection de Langue

Le frontend détecte automatiquement la langue via :

1. localStorage - Choix utilisateur sauvegardé
2. navigator.language - Langue du navigateur
3. Fallback - English si non supportée

Switcher de Langue

Interface utilisateur avec drapeaux Unicode :

🇫🇷 FR | 🇬🇧 EN | 🇪🇸 ES | 🇩🇪 DE | 🇮🇹 IT

Clic → Langue change + sauvegarde dans localStorage

Fichiers de Traduction

Localisés dans /webapp/src/locales/ :

locales/
├── fr.json    # Français
├── en.json    # English
├── es.json    # Español
├── de.json    # Deutsch
└── it.json    # Italiano

Structure JSON

{
  "home": {
    "title": "Ackify - Proof of Read",
    "subtitle": "Signatures cryptographiques de lecture"
  },
  "document": {
    "sign": "Signer ce document",
    "signed": "Document signé",
    "signatures": "{count} confirmation | {count} confirmations"
  }
}

Pluralisation :

"signatures": "{count} confirmation | {count} confirmations"

Usage :

{{ $t('document.signatures', { count: 42 }) }}
// → "42 confirmations"

Backend (Go)

Templates Email

Les emails utilisent des templates multilingues dans /backend/templates/emails/ :

templates/emails/
├── fr/
│   ├── reminder.html
│   └── reminder.txt
├── en/
│   ├── reminder.html
│   └── reminder.txt
├── es/...
├── de/...
└── it/...

Envoi avec Locale

POST /api/v1/admin/documents/doc_id/reminders
Content-Type: application/json

{
  "emails": ["user@company.com"],
  "locale": "fr"
}

Le backend charge le template fr/reminder.html.

Configuration

# Langue par défaut pour les emails (défaut: en)
ACKIFY_MAIL_DEFAULT_LOCALE=fr

Ajouter une Langue

Frontend

1. Créer le fichier de traduction :

cd webapp/src/locales
cp en.json pt.json  # Portugais

2. Traduire :

{
  "home": {
    "title": "Ackify - Prova de Leitura",
    "subtitle": "Assinaturas criptográficas de leitura"
  }
}

3. Enregistrer dans i18n :

// webapp/src/i18n.ts
import pt from './locales/pt.json'

const i18n = createI18n({
  locale: 'fr',
  fallbackLocale: 'en',
  messages: {
    fr, en, es, de, it,
    pt  // Ajouter ici
  }
})

4. Ajouter au sélecteur :

<!-- components/LanguageSwitcher.vue -->
<button @click="changeLocale('pt')">🇵🇹 PT</button>

Backend

1. Créer le répertoire :

mkdir -p backend/templates/emails/pt

2. Créer les templates :

cp backend/templates/emails/en/reminder.html backend/templates/emails/pt/
cp backend/templates/emails/en/reminder.txt backend/templates/emails/pt/

3. Traduire les templates

4. Rebuild :

docker compose up -d --force-recreate ackify-ce --build

Vérification i18n

Script de Validation

Le projet inclut un script pour vérifier la complétude des traductions :

cd webapp
npm run lint:i18n

Output :

✅ fr.json - 156 keys
✅ en.json - 156 keys
✅ es.json - 156 keys
✅ de.json - 156 keys
✅ it.json - 156 keys

All translations are complete!

CI/CD

Le script s'exécute automatiquement dans GitHub Actions pour bloquer les PRs avec traductions manquantes.

Bonnes Pratiques

Clés de Traduction

• ✅ Utiliser des clés structurées : feature.action.label
• ✅ Grouper par page/composant
• ✅ Éviter les clés trop génériques (button, title)
• ✅ Utiliser des placeholders : {count}, {name}

Exemple :

{
  "admin": {
    "documents": {
      "list": {
        "title": "Liste des documents",
        "count": "{count} document | {count} documents"
      }
    }
  }
}

Synchronisation

Lors de l'ajout de nouvelles clés en français :

# Sync script (à créer)
node scripts/sync-i18n-from-fr.js

Copie automatiquement les nouvelles clés vers les autres langues avec [TODO].

Textes Longs

Pour les textes longs, utiliser des arrays :

{
  "help": {
    "intro": [
      "Ackify permet de créer des signatures cryptographiques.",
      "Chaque signature est horodatée et non-répudiable.",
      "Les données sont stockées de manière immuable."
    ]
  }
}

Usage :

<p v-for="line in $tm('help.intro')" :key="line">
  {{ line }}
</p>

Formats Spécifiques

Dates

// Formater avec la locale courante
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const formatted = new Date().toLocaleDateString(locale.value, {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})
// fr: "15 janvier 2025"
// en: "January 15, 2025"

Nombres

const formatted = (42000).toLocaleString(locale.value)
// fr: "42 000"
// en: "42,000"

SEO & Meta Tags

Les meta tags sont traduits dynamiquement :

<script setup>
import { useI18n } from 'vue-i18n'
import { useHead } from '@vueuse/head'

const { t } = useI18n()

useHead({
  title: t('home.title'),
  meta: [
    { name: 'description', content: t('home.description') }
  ]
})
</script>

Documentation Complète

Pour plus de détails sur l'implémentation i18n du frontend, voir :

webapp/I18N.md

Ce fichier contient :

• Architecture complète vue-i18n
• Guide de contribution
• Scripts de synchronisation
• Exemples avancés