feat: implement french translation

apps/web/next.config.mjs

@@ -35,7 +35,7 @@ const config = withMyBundleAnalyzer(withPWA(
     transpilePackages: ['@weatherio/api', '@weatherio/ui', '@weatherio/types', '@weatherio/city-data'],
     i18n: {
       defaultLocale: 'en',
-      locales: ['en', 'de', 'id']
+      locales: ['en', 'de', 'id', 'fr']
     }
   }))
 )

apps/web/src/locales/de.ts

@@ -37,6 +37,7 @@ export default {
   "settings.english": "Englisch",
   "settings.german": "Deutsch",
   "settings.indonesian": "Indonesisch",
+  "settings.french": "Französisch",
 
   // locationsettings page translations
   "locationsettings.add new location": "Füge einen Ort hinzu",

apps/web/src/locales/en.ts

@@ -37,6 +37,7 @@ export default {
   "settings.english": "English",
   "settings.german": "German",
   "settings.indonesian": "Indonesian",
+  "settings.french": "French",
 
   // locationsettings page translations
   "locationsettings.add new location": "Add new location",

apps/web/src/locales/fr.ts

@@ -0,0 +1,194 @@
+export default {
+  // 404 page translations
+  "404.title": "404 - Page Non Trouvée",
+
+  // common translations
+  "common.title": "Weather.io",
+  "common.location": "Global",
+
+  "common.start button": "Trouver votre emplacement",
+  "common.share button": "Partager",
+  "common.menu home": "Accueil",
+  "common.menu locations": "Emplacements",
+  "common.menu settings": "Paramètres",
+  "common.menu contact": "Contact",
+  "common.footer legal": "Mentions Légales",
+  "common.footer contributors": "Contributeurs",
+
+  "common.search page title": "Recherche - Weather.io",
+
+  "common.miles per hour": "Miles par heure",
+  "common.kilometers per hour": "Kilomètres par heure",
+  "common.knots": "Nœuds",
+  "common.meters per second": "Mètres par seconde",
+  "common.beaufort": "Beaufort",
+  "common.hectopascals": "Hectopascals",
+
+  "common.share text": "Découvrez cette page : ",
+
+  "common.title 404 page": "404 : Cette page est introuvable",
+  "common.title offline page": "Hors Ligne",
+
+  // settings page translations
+  "settings.temperature units": "Unités de température",
+  "settings.wind speed units": "Unités de vitesse du vent",
+  "settings.language": "Langue",
+
+  "settings.english": "Anglais",
+  "settings.german": "Allemand",
+  "settings.indonesian": "Indonésien",
+  "settings.french": "Français",
+
+  // locationsettings page translations
+  "locationsettings.add new location": "Ajouter un nouvel emplacement",
+  "locationsettings.add new location button": "Ajouter un nouvel emplacement",
+  "locationsettings.search input placeholder": "Rechercher votre emplacement",
+
+  "locationsettings.at least one city toast":
+    "Vous devez avoir au moins une ville",
+  "locationsettings.switched to city toast": "Changement de ville effectué !",
+  "locationsettings.added city toast": "Nouvelle ville ajoutée !",
+  "locationsettings.city not found toast": "Ville introuvable !",
+  "locationsettings.try again toast": "Réessayez !",
+
+  "locationsettings.my location button": "Choisir mon emplacement",
+
+  // offline page translations
+  "offline.title": "Vous êtes hors ligne",
+  "offline.message": "Veuillez vérifier votre connexion internet et réessayer.",
+
+  // search page translations
+  "search.search input placeholder": "Rechercher votre emplacement",
+  "search.continue button": "Continuer -->",
+
+  "search.my location button": "Choisir mon emplacement",
+
+  // legal page translations
+  "legal.main text":
+    "Le contenu de ce site a été soigneusement examiné et créé. Cependant, nous ne garantissons pas l'exactitude, l'exhaustivité et la pertinence des informations fournies. Nous ne sommes pas responsables des dommages ou pertes résultant de l'utilisation de ce site. Les opérateurs des pages liées sont seuls responsables de leur contenu. Toute responsabilité pour le contenu externe est expressément exclue.",
+  "legal.germany": "Allemagne",
+  "legal.information disclaimer": "Informations conformément au § 5 TMG",
+
+  // home page translations
+  "home.today": "Aujourd'hui",
+  "home.9 day forecast": "Prévisions sur 9 jours",
+  "home.precipitation": "Précipitations",
+  "home.feels like": "Ressenti",
+  "home.visibility": "Visibilité",
+  "home.wind pressure": "Vent et Pression",
+  "home.air quality": "Qualité de l'air",
+  "home.pressure": "Pression",
+  "home.speed": "Vitesse",
+  "home.moon phase": "Phase de la Lune",
+
+  "home.early morning": "Tôt le matin",
+  "home.morning": "Matin",
+  "home.noon": "Midi",
+  "home.afternoon": "Après-midi",
+  "home.night": "Nuit",
+
+  "home.feels like phrase extremely warm": "Le soleil brûle aujourd'hui !",
+  "home.feels like phrase very warm":
+    "Le soleil cherche probablement à se rafraîchir !",
+  "home.feels like phrase warm": "Même la glace trouve la chaleur excessive !",
+  "home.feels like phrase slightly more warm": "C'est une journée torride !",
+  "home.feels like phrase slightly warm":
+    "Une journée parfaite pour un pique-nique !",
+  "home.feels like phrase neutral":
+    "La température idéale, ni trop chaude, ni trop froide.",
+  "home.feels like phrase slightly cold":
+    "Une veste légère pourrait être nécessaire.",
+  "home.feels like phrase slightly more cold": "C'est une journée glaciale !",
+  "home.feels like phrase cold":
+    "Les pingouins commandent du chocolat chaud à cause du froid !",
+  "home.feels like phrase very cold":
+    "Le temps glacial d'aujourd'hui fait même frissonner les bonshommes de neige !",
+  "home.feels like phrase extremely cold":
+    "Il fait si froid que même les ours polaires restent à l'intérieur !",
+
+  "home.air quality text very poor": "Très Mauvaise",
+  "home.air quality text poor": "Mauvaise",
+  "home.air quality text fair": "Moyenne",
+  "home.air quality text moderate": "Modérée",
+  "home.air quality text good": "Bonne",
+  "home.air quality text excellent": "Excellente",
+
+  "home.sunset": "Coucher du Soleil",
+  "home.sunrise": "Lever du Soleil",
+
+  "home.moonset": "Coucher de la Lune",
+  "home.moonrise": "Lever de la Lune",
+
+  "home.weather state stormy": "Orageux",
+  "home.weather state snowy": "Neigeux",
+  "home.weather state rainy": "Pluvieux",
+  "home.weather state very cloudy": "Très Nuageux",
+  "home.weather state cloudy": "Nuageux",
+  "home.weather state windy": "Venteux",
+  "home.weather state sunny": "Ensoleillé",
+
+  "home.this hour": "Cette Heure",
+  "home.early hour time ending": "AM",
+  "home.late hour time ending": "PM",
+
+  "home.9 day forecast card content":
+    'Les prévisions pour les 9 prochains jours. <br /> Les <span class="font-semibold">températures</span> sont les températures moyennes de la journée. Une pour la journée et une pour la nuit.',
+
+  "home.precipitation card title": "Précipitations Actuelles",
+
+  "home.feels like card content":
+    "Ce paramètre de température prend en compte la perception humaine du temps",
+
+  "home.visibility card title": "Visibilité Actuelle",
+
+  "home.wind pressure card title": "Vent et Pression Actuels",
+  "home.wind pressure card content":
+    "<b>Pression atmosphérique au niveau de la mer.</b> <br /> Au niveau de la mer, la pression atmosphérique est la force exercée par le poids de l'air au-dessus, avec une moyenne d'environ 1013,25 hPa.",
+
+  "home.not available": "Non disponible",
+
+  "home.moon phase card title": "Phase Lunaire Actuelle",
+  "home.moon phase card content":
+    "La phase de la lune est la forme de la partie éclairée par le soleil de la lune vue de la Terre.",
+
+  "home.moon phase new moon": "Nouvelle Lune",
+  "home.moon phase waxing crescent": "Premier Croissant",
+  "home.moon phase first quarter": "Premier Quartier",
+  "home.moon phase waxing gibbous": "Gibbeuse Croissante",
+  "home.moon phase full moon": "Pleine Lune",
+  "home.moon phase waning gibbous": "Gibbeuse Décroissante",
+  "home.moon phase last quarter": "Dernier Quartier",
+  "home.moon phase waning crescent": "Dernier Croissant",
+
+  "home.more information": "Plus d'Informations",
+  "home.less information": "Moins d'Informations",
+
+  "home.sun hours": "Heures d'ensoleillement",
+
+  "home.from": "De",
+
+  // contact page translations
+  "contact.send button": "Envoyer",
+  "contact.sent button": "Envoyé",
+  "contact.first name": "Prénom",
+  "contact.last name": "Nom",
+  "contact.email": "Email",
+  "contact.message": "Message",
+
+  "contact.sent toast": "Message envoyé !",
+  "contact.sending email loading toast": "Envoi de l'email...",
+
+  "contact.invalid email": "Adresse email invalide",
+  "contact.at least 2 characters":
+    "Ce champ doit contenir au moins 2 caractères",
+  "contact.at least 10 characters":
+    "Ce champ doit contenir au moins 10 caractères",
+
+  // contributors page translations
+  "contributors.made with love text":
+    'Fait avec <span class="text-4xl" style="color: rgb(239 68 68)">♥\uFE0F</span> par',
+  "contributors.founder": "Fondateur",
+  "contributors.engineer": "Ingénieur",
+  "contributors.designer": "Designer",
+  "contributors.translator": "Traducteur",
+} as const;

apps/web/src/locales/id.ts

@@ -37,6 +37,7 @@ export default {
   "settings.english": "Inggris",
   "settings.german": "Jerman",
   "settings.indonesian": "Indonesia",
+  "settings.french": "Perancis",
 
   // locationsettings page translations
   "locationsettings.add new location": "Tambah lokasi baru",

apps/web/src/locales/index.ts

@@ -10,4 +10,5 @@ export const {
   en: () => import("./en"),
   de: () => import("./de"),
   id: () => import("./id"),
+  fr: () => import("./fr"),
 });

apps/web/src/pages/settings/index.tsx

@@ -6,6 +6,7 @@ import { RxCheck } from "react-icons/rx";
 import type { TemperatureUnitType, WindSpeedUnitType } from "~/states";
 import germanFlag from "~/assets/german-flag.png";
 import indonesianFlag from "~/assets/indonesian-flag.png";
+import franceFlag from "~/assets/france-flag.png";
 import usaFlag from "~/assets/usa-flag.png";
 import Layout from "~/components/Layout";
 import {
@@ -199,6 +200,25 @@ const Settings = observer(() => {
                 <RxCheck width={20} height={20} className="h-9 w-9" />
               )}
             </button>
+            <button
+              className={`${normalButtonClass} ${
+                locale === "fr" ? "border-2" : ""
+              }`}
+              onClick={() => changeLocale("fr")}
+            >
+              <Image
+                src={franceFlag}
+                alt="Flag of the France"
+                width={20}
+                height={20}
+              />
+              <p className={`${styles.buttontext} ml-2`}>
+                {translationSettings("french")}
+              </p>
+              {locale === "fr" && (
+                <RxCheck width={20} height={20} className="h-9 w-9" />
+              )}
+            </button>
           </div>
         </div>
       </Layout>