Un site bilingue sans plugin de traduction

Chaque page de ce site existe en anglais et en français, et j’écris les deux versions moi-même. La question n’était pas de traduire, mais de garder deux langues synchronisées sans qu’un framework le fasse à ma place.

Un document, trois onglets

Chaque article est un seul document dans le CMS. Un onglet Commun contient ce qui ne dépend pas de la langue : date, catégorie, image de couverture. Un onglet English et un onglet Français contiennent le titre, le slug, le chapô et le texte.

Une seule publication met les deux langues en ligne. Aucun article n’existe dans une seule langue : le sélecteur de langue a donc toujours une page vers laquelle pointer.

Les textes d’interface vivent dans le code

Libellés de navigation, légendes et boutons forment un petit dictionnaire dans le dépôt. Il est typé : une clé française manquante fait échouer le build au lieu d’afficher un bouton vide.

export const ui = {
  en: { 'nav.blog': 'Blog', 'contact.copy': 'Copy' },
  fr: { 'nav.blog': 'Blog', 'contact.copy': 'Copier' },
} as const;

type Key = keyof typeof ui.en;

export function t(lang: 'en' | 'fr', key: Key) {
  return ui[lang][key];
}

Ce que je ne referais pas

1. Rediriger selon la langue du navigateur. On partage des liens ; un lien doit ouvrir ce qui a été partagé.
2. Traduire les slugs après coup. Décidez-les avec le titre, dans les deux langues.
3. Laisser le français être le plus long par accident. Testez chaque composant avec un texte un tiers plus long.

Un sélecteur de langue promet que l’autre page existe. Tenez cette promesse dans le modèle de données, pas dans le gabarit.