feat: Added the dutch translation

apps/web/next.config.mjs

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

apps/web/src/locales/de.ts

@@ -36,6 +36,7 @@ export default {
 
   "settings.english": "Englisch",
   "settings.german": "Deutsch",
+  "settings.dutch": "Niederländisch",
 
   // locationsettings page translations
   "locationsettings.add new location": "Füge einen Ort hinzu",
@@ -187,4 +188,5 @@ export default {
   "contributors.founder": "Gründer",
   "contributors.engineer": "Entwickler",
   "contributors.designer": "Designer",
+  "contributors.translator": "Übersetzer",
 } as const;

apps/web/src/locales/en.ts

@@ -36,6 +36,7 @@ export default {
 
   "settings.english": "English",
   "settings.german": "German",
+  "settings.dutch": "Dutch",
 
   // locationsettings page translations
   "locationsettings.add new location": "Add new location",
@@ -184,4 +185,5 @@ export default {
   "contributors.founder": "Founder",
   "contributors.engineer": "Engineer",
   "contributors.designer": "Designer",
+  "contributors.translator": "Translator",
 } as const;

apps/web/src/locales/index.ts

@@ -9,4 +9,5 @@ export const {
 } = createI18n({
   en: () => import("./en"),
   de: () => import("./de"),
+  nl: () => import("./nl"),
 });

apps/web/src/locales/nl.ts

@@ -0,0 +1,189 @@
+export default {
+  // 404 page translations
+  "404.title": "404 - pagina niet gevonden",
+
+  // common translations
+  "common.title": "Weather.io",
+  "common.location": "Nederland",
+
+  "common.start button": "Vind uw locatie",
+  "common.share button": "Delen",
+  "common.menu home": "Home",
+  "common.menu locations": "Locaties",
+  "common.menu settings": "Instellingen",
+  "common.menu contact": "Contact",
+  "common.footer legal": "Legaal",
+  "common.footer contributors": "Bijdragers",
+
+  "common.search page title": "Zoek - Weather.io",
+
+  "common.miles per hour": "Mijl per uur",
+  "common.kilometers per hour": "Kilometers per uur",
+  "common.knots": "Knopen",
+  "common.meters per second": "Meters per seconden",
+  "common.beaufort": "Beaufort",
+  "common.hectopascals": "Hectopascal",
+
+  "common.share text": "Bekijk deze pagina: ",
+
+  "common.title 404 page": "404: Deze pagina kan niet worden gevonden",
+  "common.title offline page": "Offline",
+
+  // settings page translations
+  "settings.temperature units": "Temperatuur eenheden",
+  "settings.wind speed units": "Windsnelheid eenheden",
+  "settings.language": "Taal",
+
+  "settings.english": "Engels",
+  "settings.german": "Duts",
+  "settings.dutch": "Nederlands",
+
+  // locationsettings page translations
+  "locationsettings.add new location": "Nieuwe locatie toevoegen",
+  "locationsettings.add new location button": "Nieuwe locatie toevoegen",
+  "locationsettings.search input placeholder": "Zoek je locatie",
+
+  "locationsettings.at least one city toast":
+    "Je moet minstens een locatie toevoegen",
+  "locationsettings.switched to city toast": "Geswitched naar locatie!",
+  "locationsettings.added city toast": "Nieuwe locatie toegevoegd!",
+  "locationsettings.city not found toast": "Stad niet gevonden!",
+  "locationsettings.try again toast": "Probeer opnieuw!",
+
+  "locationsettings.my location button": "Kies mijn locatie",
+
+  // offline page translations
+  "offline.title": "Je bent offline",
+  "offline.message": "Controleer uw internetverbinding en probeer het opnieuw.",
+
+  // search page translations
+  "search.search input placeholder": "Zoek uw locatie",
+  "search.continue button": "Verder -->",
+
+  "search.my location button": "Kies mijn locatie",
+
+  // legal page translations
+  "legal.main text":
+    "De inhoud van deze website is zorgvuldig beoordeeld en samengesteld. Wij kunnen echter niet instaan voor de juistheid, volledigheid en actualiteit van de verstrekte informatie. Wij zijn niet aansprakelijk voor schade of verlies voortvloeiend uit het gebruik van deze website. De beheerders van de gelinkte pagina's zijn als enige verantwoordelijk voor de inhoud ervan. Iedere aansprakelijkheid voor externe inhoud wordt uitdrukkelijk uitgesloten.",
+  "legal.germany": "Duitsland",
+  "legal.information disclaimer": "Informatie volgens § 5 TMG",
+
+  // home page translations
+  "home.today": "Vandaag",
+  "home.9 day forecast": "9-daagse voorspelling",
+  "home.precipitation": "Neerslag",
+  "home.feels like": "Voelt als",
+  "home.visibility": "Zichtbaarheid",
+  "home.wind pressure": "Wind en druk",
+  "home.air quality": "Luchtkwaliteit",
+  "home.pressure": "Druk",
+  "home.speed": "Snelheid",
+  "home.moon phase": "Maanfase",
+
+  "home.early morning": "Vroege morgen",
+  "home.morning": "Ochtend",
+  "home.noon": "Middag",
+  "home.afternoon": "Middag",
+  "home.night": "Nacht",
+
+  "home.feels like phrase extremely warm": "The sun is scorching today!",
+  "home.feels like phrase very warm":
+    "De zon probeert waarschijnlijk af te koelen!",
+  "home.feels like phrase warm": "Zelfs ijs vindt warmte te veel!",
+  "home.feels like phrase slightly more warm": "It's a toasty day!",
+  "home.feels like phrase slightly warm": "A perfect day for a picnic!",
+  "home.feels like phrase neutral":
+    "Just the right temperature, not too hot, not too cold.",
+  "home.feels like phrase slightly cold": "A light jacket might be needed.",
+  "home.feels like phrase slightly more cold": "It's a frosty day!",
+  "home.feels like phrase cold":
+    "Pinguïns bestellen warme chocolademelk vanwege de kou!",
+  "home.feels like phrase very cold":
+    "Het ijzige weer van vandaag doet zelfs sneeuwmannen huiveren!",
+  "home.feels like phrase extremely cold":
+    "It's so cold, even the polar bears are staying inside!",
+
+  "home.air quality text very poor": "Erg arm",
+  "home.air quality text poor": "Arm",
+  "home.air quality text fair": "Eerlijk",
+  "home.air quality text moderate": "Gematigd",
+  "home.air quality text good": "Goed",
+  "home.air quality text excellent": "Uitstekend",
+
+  "home.sunset": "Zonsondergang",
+  "home.sunrise": "Zonsopgang",
+
+  "home.moonset": "Maanondergang",
+  "home.moonrise": "Maanopgang",
+
+  "home.weather state stormy": "Stormachtig",
+  "home.weather state snowy": "Sneeuwachtig",
+  "home.weather state rainy": "Regenachtig",
+  "home.weather state very cloudy": "Zeer bewolkt",
+  "home.weather state cloudy": "Bewolkt",
+  "home.weather state windy": "Bewolkt met wind",
+  "home.weather state sunny": "Zonnig",
+
+  "home.this hour": "Deze uur",
+  "home.early hour time ending": ":00",
+  "home.late hour time ending": ":00",
+
+  "home.9 day forecast card content":
+    'De voorspelling voor de komende 9 dagen. <br />Het <span class="font-semibold">temperatures</span> zijn de gemiddelde temperaturen voor de dag. Eén voor de dag en één voor de nacht.',
+
+  "home.precipitation card title": "Huidige neerslag",
+
+  "home.feels like card content":
+    "De gevoelstemperatuur is de temperatuur die je voelt als je buiten bent.<br /> Deze wordt beïnvloed door de temperatuur, vochtigheid en wind.",
+
+  "home.visibility card title": "Huidige zichtbaarheid",
+
+  "home.wind pressure card title": "Huidige wind en druk",
+  "home.wind pressure card content":
+    "<b>Atmosferische druk op zeeniveau.</b> <br /> Op zeeniveau is atmosferische druk de kracht die wordt uitgeoefend door het gewicht van de lucht erboven en is gemiddeld 1013,25 hPa.",
+
+  "home.not available": "Niet beschikbaar",
+
+  "home.moon phase card title": "Huidige maanfase",
+  "home.moon phase card content":
+    "De maanfase is de vorm van het direct door de zon beschenen deel van de maan gezien vanaf de aarde.",
+
+  "home.moon phase new moon": "Nieuwe maan",
+  "home.moon phase waxing crescent": "Wassende halve maan",
+  "home.moon phase first quarter": "Eerste kwartier",
+  "home.moon phase waxing gibbous": "Wassende volle maan",
+  "home.moon phase full moon": "Volle maan",
+  "home.moon phase waning gibbous": "Afnemende maan",
+  "home.moon phase last quarter": "Laatste kwartier",
+  "home.moon phase waning crescent": "Afnemende halve maan",
+
+  "home.more information": "Meer Informatie",
+  "home.less information": "Minder Informatie",
+
+  "home.sun hours": "Zonuren",
+
+  "home.from": "Van",
+
+  // contact page translations
+  "contact.send button": "Versturen",
+  "contact.sent button": "Verstuurd",
+  "contact.first name": "Voornaam",
+  "contact.last name": "Achternaam",
+  "contact.email": "Email",
+  "contact.message": "Bericht",
+
+  "contact.sent toast": "Bericht Verstuurd!",
+  "contact.sending email loading toast": "Email verzenden...",
+
+  "contact.invalid email": "Ongeldig e-mailadres",
+  "contact.at least 2 characters": "Dit veld moet minimaal 2 tekens bevatten",
+  "contact.at least 10 characters": "Dit veld moet minimaal 10 tekens bevatten",
+
+  // contributors page translations
+  "contributors.made with love text":
+    'Gemaakt met <span class="text-4xl" style="color: rgb(239 68 68)">♥️</span> bij',
+  "contributors.founder": "Oprichter",
+  "contributors.engineer": "Ingenieur",
+  "contributors.designer": "Ontwerper",
+  "contributors.translator": "Vertaler",
+} as const;

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

@@ -6,6 +6,7 @@ import ReactHtmlParser from "react-html-parser";
 import iqbalProfile from "~/assets/bal-profile.jpg";
 import dicsiluksProfile from "~/assets/dicsiluks-profile.webp";
 import fabiusProfile from "~/assets/fabius-profile.jpg";
+import furkanProfile from "~/assets/furkan-profile.webp";
 import jakeProfile from "~/assets/jake-profile.png";
 import jakobProfile from "~/assets/jakob-profile.webp";
 import Layout from "~/components/Layout";
@@ -111,6 +112,24 @@ const Contributors = () => {
               {translationContributors("engineer")}
             </p>
           </div>
+          <div className="flex w-16 flex-col items-center gap-2 md:w-20">
+            <Link
+              href="https://github.com/zolusion"
+              className="group relative inline-block aspect-square w-10 md:w-20"
+            >
+              <Image
+                src={furkanProfile}
+                alt="Furkan's logo"
+                fill
+                className="transform rounded-full transition-transform duration-300 group-hover:-translate-x-2 group-hover:scale-105"
+              />
+            </Link>
+            <p className="flex text-center text-base md:text-xl">
+              {translationContributors("designer")} &{" "}
+              {translationContributors("engineer")} &{" "}
+              {translationContributors("translator")}
+            </p>
+          </div>
         </div>
       </div>
     </Layout>

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

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