Internationalization

.github/workflows/production.yaml

@@ -1,4 +1,4 @@
-name: Deploy Migrations/Edge Functions to Production
+name: Deploy Migrations to Production
 
 on:
   workflow_dispatch
@@ -22,4 +22,4 @@ jobs:
       - run: supabase link --project-ref $SUPABASE_PROJECT_ID
 
       - name: Database Migrations push
-        run: supabase db push
+        run: supabase db push 

src/components/common/ThemeIcon.astro

@@ -4,6 +4,11 @@ import { Icon } from 'astro-icon/components';
 
 import { SITE } from '../../config';
 
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+
 export interface Props {
   label?: string;
   class?: string;
@@ -12,7 +17,7 @@ export interface Props {
 }
 
 const {
-  label = 'Toggle between Dark and Light mode',
+  label = {t(‘ariaLabels.darkMessage’)},
   class:
     className = 'text-ptext1 dark:text-ptext1-DM hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
   iconClass = 'w-6 h-6',

src/components/posts/SocialModal.tsx

@@ -1,6 +1,10 @@
 import { createSignal, Show, createEffect, onCleanup } from 'solid-js';
 import type { Component, JSX } from 'solid-js';
 import { SocialMediaShares } from './SocialMediaShares';
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(new URL(window.location.href));
+const t = useTranslations(lang);
 
 interface Post {
     id: number;
@@ -58,7 +62,7 @@ const SocialModal: Component<Post> = function(props) {
                         <SocialMediaShares id={ props.id } title={ props.title } image_urls={ props.image_urls }/>
 
                         <button
-                            aria-aria-label='Close Dialog'
+                            aria-label={t(‘ariaLabels.closeDialog’)}
                             class="modal-close w-8 h-8 flex justify-center items-start text-icon2 dark:text-icon2-DM"
                             onClick={ closeModal }
                         >

src/i18n/UI/English.ts

@@ -206,6 +206,8 @@ export const English = {
     checkboxMajorMunicipality: "Checkbox for selecting major municipality",
     checkboxMinorMunicipality: "Checkbox for selecting minor municipality",
     checkboxGoverningDistrict: "Checkbox for selecting governing district",
+    darkMessage: "Toggle between Dark and Light mode",
+    closeDialog: "Close Dialog",
   },
 
   headerData: {

src/i18n/UI/French.ts

@@ -206,6 +206,8 @@ export const French = {
     checkboxMajorMunicipality: "Case à cocher pour sélectionner la grande municipalité",
     checkboxMinorMunicipality: "Case à cocher pour sélectionner une commune mineure",
     checkboxGoverningDistrict: "Case à cocher pour sélectionner le district administratif",
+    darkMessage: "Basculer entre le mode clair et le mode sombre",
+    closeDialog: "Fermer la boîte de dialogue",
   },
 
   headerData: {

src/i18n/UI/Spanish.ts

@@ -205,6 +205,8 @@ export const Spanish = {
     checkboxMajorMunicipality: "Casilla de verificación para seleccionar Provincia",
     checkboxMinorMunicipality: "Casilla de verificación para seleccionar Cantón",
     checkboxGoverningDistrict: "Casilla de verificación para seleccionar Distrito",
+    darkMessage: "Cambia entre modo claro y modo oscuro",
+    closeDialog: "Cerrar Dialogo",
   },
 
   headerData: {

src/i18n/uiType.ts

@@ -206,6 +206,8 @@ export interface uiObject {
     checkboxMajorMunicipality: string,
     checkboxMinorMunicipality: string,
     checkboxGoverningDistrict: string,
+    darkMessage: string,
+    closeDialog: string,
   },
 
   headerData: {