Translate home page

app/i18n.config.ts

@@ -0,0 +1,5 @@
+export default defineI18nConfig(() => {
+  return {
+    fallbackLocale: ['de', 'en']
+  };
+});

app/lang/de.json

@@ -1,30 +1,27 @@
 {
-  "hello": "Hallo",
-  "locales": {
-    "en": "Englisch",
-    "de": "Deutsch"
-  },
   "auth": {
+    "accept": "Akzeptieren",
+    "conflict": "Diese Email wird bereits verwendet, bitte verwende eine andere!",
+    "email": "E-Mail",
+    "hidePassword": "Passwort ausblenden",
+    "invalid": "Email oder Passwort sind falsch, bitte versuche es erneut!",
     "login": "Anmelden",
     "login_instead": "Stattdessen anmelden",
+    "logout": "Abmelden",
+    "name": "Name",
+    "password": "Passwort",
     "register": "Registrieren",
     "register_instead": "Stattdessen registrieren",
-    "logout": "Abmelden",
-    "email": "E-Mail",
-    "password": "Passwort",
-    "name": "Name",
-    "accept": "Akzeptieren",
-    "showPassword": "Passwort einblenden",
-    "hidePassword": "Passwort ausblenden",
     "reset": "Zurücksetzen",
-    "conflict": "Diese Email wird bereits verwendet, bitte verwende eine andere!",
+    "showPassword": "Passwort einblenden"
-    "invalid": "Email oder Passwort sind falsch, bitte versuche es erneut!"
   },
-  "layouts": {
+  "enums": {
-    "title": "{title} {'|'} PicHunt",
+    "text_type": {
-    "default_tile": "PicHunt",
+      "INTEGER": "Ganzzahl",
-    "switch_lang": "Sprache ändern zu {locale}",
+      "NUMBER": "Zahl",
-    "refresh": "Aktualisieren"
+      "TEXT": "Freitext",
+      "WORD": "Ein Wort"
+    }
   },
   "error": {
     "401": "Bitte melde dich vorher an!",
@@ -32,95 +29,112 @@
     "default": "Unbekannter Fehler",
     "team_not_found": "Team nicht gefunden oder Passwort inkorrekt!"
   },
+  "hello": "Hallo",
+  "layouts": {
+    "default_tile": "PicHunt",
+    "refresh": "Aktualisieren",
+    "switch_lang": "Sprache ändern zu {locale}",
+    "title": "{title} {'|'} PicHunt"
+  },
+  "locales": {
+    "de": "Deutsch",
+    "en": "Englisch"
+  },
+  "page": {
+    "home": {
+      "click_hunt_below_to_join": "Klick auf einen Hunt um ihm beizutreten!",
+      "end": "Ende: {start}",
+      "joined_hunts": "Bereits beigetretenen Hunts:",
+      "login_first": "Melde dich erst an",
+      "n_quests": "Keine Quest bisher | Eine Quest | {n} Quests",
+      "n_teams_joined": "Kein Team ist bisher beigetreten! | Ein Team ist bisher beigetreten! | {n} Teams sind bisher beigetreten!",
+      "new_hunts_soon": "Neue Hunts tauchen bald auf!",
+      "no_hunt_created": "Bisher wurde kein Hunt erstellt",
+      "no_hunt_joined": "Noch keinem Hunt beigetreten!",
+      "open_to_join": "Bereit zum Beitreten:",
+      "start": "Start: {start}"
+    }
+  },
   "validation": {
+    "confirm": "Sind Sie sich sicher?",
+    "date_past": "Zeit darf nicht in der Zukunft liegen",
+    "date_range_past": "Zeitraum darf nicht in der Zukunft liegen",
+    "invalid": "Ungültiges Format",
     "max_length": "{name} darf maximal {max} Zeichen lang sein",
+    "min_array": "Du brauchst mindestens {min} {name}",
     "min_length": "{name} muss mindestens {min} Zeichen lang sein",
     "numeric": "{name} muss numerisch sein",
-    "min_array": "Du brauchst mindestens {min} {name}",
     "required": "{name} ist erforderlich",
-    "invalid": "Ungültiges Format",
+    "taken": "Bereits vergeben"
-    "taken": "Bereits vergeben",
-    "date_range_past": "Zeitraum darf nicht in der Zukunft liegen",
-    "date_past": "Zeit darf nicht in der Zukunft liegen",
-    "confirm": "Sind Sie sich sicher?"
   },
   "vuestic": {
-    "search": "Search",
+    "back": "Zurück",
-    "noOptions": "Items not found",
+    "backToTop": "zurück nach oben",
-    "ok": "OK",
+    "breadcrumbs": "breadcrumbs",
-    "cancel": "Cancel",
+    "cancel": "Abbrechen",
-    "uploadFile": "Upload file",
+    "carousel": "karussell",
-    "undo": "Undo",
+    "close": "schließen",
-    "dropzone": "Drop files here to upload",
+    "closeAlert": "alert schließen",
-    "fileDeleted": "File deleted",
+    "closeToast": "toast schließen",
-    "closeAlert": "close alert",
+    "color": "farbe",
-    "backToTop": "back to top",
+    "colorName": "farbe {color}",
-    "toggleDropdown": "toggle dropdown",
+    "colorSelection": "farbauswahl",
-    "carousel": "carousel",
+    "counterValue": "counter wert",
-    "goPreviousSlide": "go previous slide",
+    "currentRating": "aktuell Bewertung {value} von {max}",
-    "goNextSlide": "go next slide",
+    "decreaseCounter": "counter verringern",
-    "goSlide": "go slide {index}",
+    "dropzone": "Dateien hier ablegen zum Hochladen",
-    "slideOf": "slide {index} of {length}",
+    "fileDeleted": "Datei gelöscht",
-    "close": "close",
+    "fileTypeIncorrect": "Dateityp ist inkorrekt",
-    "openColorPicker": "open color picker",
+    "finish": "Fertig",
-    "colorSelection": "color selection",
+    "goLastPage": "gehe zur letzten Seite",
-    "colorName": "color {color}",
+    "goNextPage": "gehe zur nächsten Seite",
-    "decreaseCounter": "decrease counter",
+    "goNextSlide": "gehe zur nächsten Slide",
-    "increaseCounter": "increase counter",
+    "goPreviousSlide": "gehe zur vorherigen Slide",
-    "selectAllRows": "select all rows",
+    "goSlide": "gehe zur Slide {index}",
-    "sortColumnBy": "sort column by {name}",
+    "goToPreviousPage": "gehe zur vorherigen Seite",
-    "selectRowByIndex": "select row {index}",
+    "goToSpecificPage": "gehe zur {page} Seite",
-    "resetDate": "reset date",
+    "goToSpecificPageInput": "gib eine Seitennummer ein",
-    "nextPeriod": "next period",
+    "goToTheFirstPage": "gehe zur ersten Seite",
-    "switchView": "switch view",
+    "increaseCounter": "counter erhöhen",
-    "previousPeriod": "previous period",
+    "inputField": "Eingabefeld",
-    "removeFile": "remove file",
+    "loading": "Läd",
-    "reset": "reset",
-    "pagination": "pagination",
-    "goToTheFirstPage": "go to the first page",
-    "goToPreviousPage": "go to the previous page",
-    "goToSpecificPage": "go to the {page} page",
-    "goToSpecificPageInput": "enter the page number to go",
-    "goNextPage": "go next page",
-    "goLastPage": "go last page",
-    "currentRating": "current rating {value} of {max}",
-    "voteRating": "vote rating {value} of {max}",
-    "optionsFilter": "options filter",
-    "splitPanels": "split panels",
     "movePaginationLeft": "move pagination left",
     "movePaginationRight": "move pagination right",
-    "resetTime": "reset time",
+    "next": "Nächstes",
-    "closeToast": "close toast",
+    "nextPeriod": "next period",
-    "selectedOption": "Selected option",
+    "noOptions": "Items not found",
     "noSelectedOption": "Option is not selected",
-    "breadcrumbs": "breadcrumbs",
+    "ok": "OK",
-    "counterValue": "counter value",
+    "openColorPicker": "open color picker",
-    "selectedDate": "selected date",
+    "optionsFilter": "options filter",
-    "selectedTime": "selected time",
+    "pagination": "pagination",
-    "progressState": "progress state",
+    "previousPeriod": "previous period",
-    "color": "color",
-    "next": "Next",
-    "back": "Previous",
-    "finish": "Finish",
-    "step": "step",
     "progress": "progress",
-    "loading": "Loading",
+    "progressState": "progress state",
-    "sliderValue": "Current slider value is {value}",
+    "removeFile": "remove file",
+    "reset": "zurücksetzen",
+    "resetDate": "Datum zurücksetzen",
+    "resetTime": "Zeit zurücksetzen",
+    "search": "Suche",
+    "select": "Wähle eine Option",
+    "selectAllRows": "select all rows",
+    "selectRowByIndex": "select row {index}",
+    "selectedDate": "selected date",
+    "selectedOption": "Selected option",
+    "selectedTime": "selected time",
+    "slideOf": "slide {index} of {length}",
     "sliderDot": "Slider dot",
     "sliderMaxDot": "Maximum slider value",
     "sliderMinDot": "Minimum slider value",
+    "sliderValue": "Current slider value is {value}",
+    "sortColumnBy": "sort column by {name}",
+    "splitPanels": "split panels",
+    "step": "step",
     "switch": "Switch",
-    "inputField": "Input field",
+    "switchView": "switch view",
-    "fileTypeIncorrect": "File type is incorrect",
+    "toggleDropdown": "toggle dropdown",
-    "select": "Select an option"
+    "undo": "Rückgängig",
-  },
+    "uploadFile": "Datei hochladen",
-  "enums": {
+    "voteRating": "vote rating {value} of {max}"
-    "text_type": {
-      "TEXT": "Freitext",
-      "WORD": "Ein Wort",
-      "NUMBER": "Zahl",
-      "INTEGER": "Ganzzahl"
-
-    }
   }
 }

app/lang/en.json

@@ -1,126 +1,140 @@
 {
-  "hello": "Hello",
-  "locales": {
-    "en": "English",
-    "de": "German"
-  },
   "auth": {
+    "accept": "Accept",
+    "conflict": "This e-mail is already in use, please use a different one!",
+    "email": "Email",
+    "hidePassword": "Hide password",
+    "invalid": "E-mail or password is invalid, please try again!",
     "login": "Login",
     "login_instead": "Login instead",
+    "logout": "Logout",
+    "name": "Name",
+    "password": "Password",
     "register": "Register",
     "register_instead": "Register instead",
-    "logout": "Logout",
-    "email": "Email",
-    "password": "Password",
-    "name": "Name",
-    "accept": "Accept",
-    "showPassword": "Show password",
-    "hidePassword": "Hide password",
     "reset": "Reset",
-    "conflict": "This e-mail is already in use, please use a different one!",
+    "showPassword": "Show password"
-    "invalid": "E-mail or password is invalid, please try again!"
   },
-  "layouts": {
+  "enums": {
-    "title": "{title} {'|'} PicHunt",
+    "text_type": {
-    "default_tile": "PicHunt",
+      "INTEGER": "Whole number",
-    "switch_lang": "Switch locale to {locale}",
+      "NUMBER": "Number",
-    "refresh": "Refresh"
+      "TEXT": "Free text",
+      "WORD": "One Word"
+    }
   },
   "error": {
     "401": "Please login!",
     "404": "Not found",
-    "default": "Unkown error",
+    "default": "Unknown error",
     "team_not_found": "Team not found or password incorrect!"
   },
+  "hello": "Hello",
+  "layouts": {
+    "default_tile": "PicHunt",
+    "refresh": "Refresh",
+    "switch_lang": "Switch locale to {locale}",
+    "title": "{title} {'|'} PicHunt"
+  },
+  "locales": {
+    "de": "German",
+    "en": "English"
+  },
+  "page": {
+    "home": {
+      "click_hunt_below_to_join": "Click on a hunt below and join them!",
+      "end": "End: {start}",
+      "joined_hunts": "Joined hunts:",
+      "login_first": "Login first",
+      "n_quests": "No quests yet | One quest | {n} quests",
+      "n_teams_joined": "No teams joined yet! | One team joined! | {n} teams joined!",
+      "new_hunts_soon": "New hunts will appear soon!",
+      "no_hunt_created": "No hunt created yet",
+      "no_hunt_joined": "No hunt joined yet!",
+      "open_to_join": "Open to join hunts:",
+      "start": "Start: {start}"
+    }
+  },
   "validation": {
+    "confirm": "Are you sure?",
+    "date_past": "Date cannot be in the future",
+    "date_range_past": "Date range cannot be in the future",
+    "invalid": "Invalid format",
     "max_length": "{name} has to be max {max} chars long",
+    "min_array": "You need at least {min} {name}",
     "min_length": "{name} has to at least {min} chars long",
     "numeric": "{name} need to be numeric",
-    "min_array": "You need at least {min} {name}",
     "required": "{name} is required",
-    "invalid": "Invalid format",
+    "taken": "Already taken"
-    "taken": "Already taken",
-    "date_range_past": "Date range cannot be in the future",
-    "date_past": "Date cannot be in the future",
-    "confirm": "Are you sure?"
   },
   "vuestic": {
-    "search": "Search",
+    "back": "Previous",
-    "noOptions": "Items not found",
+    "backToTop": "back to top",
-    "ok": "OK",
+    "breadcrumbs": "breadcrumbs",
     "cancel": "Cancel",
-    "uploadFile": "Upload file",
+    "carousel": "carousel",
-    "undo": "Undo",
+    "close": "close",
+    "closeAlert": "close alert",
+    "closeToast": "close toast",
+    "color": "color",
+    "colorName": "color {color}",
+    "colorSelection": "color selection",
+    "counterValue": "counter value",
+    "currentRating": "current rating {value} of {max}",
+    "decreaseCounter": "decrease counter",
     "dropzone": "Drop files here to upload",
     "fileDeleted": "File deleted",
-    "closeAlert": "close alert",
+    "fileTypeIncorrect": "File type is incorrect",
-    "backToTop": "back to top",
+    "finish": "Finish",
-    "toggleDropdown": "toggle dropdown",
+    "goLastPage": "go last page",
-    "carousel": "carousel",
+    "goNextPage": "go next page",
-    "goPreviousSlide": "go previous slide",
     "goNextSlide": "go next slide",
+    "goPreviousSlide": "go previous slide",
     "goSlide": "go slide {index}",
-    "slideOf": "slide {index} of {length}",
-    "close": "close",
-    "openColorPicker": "open color picker",
-    "colorSelection": "color selection",
-    "colorName": "color {color}",
-    "decreaseCounter": "decrease counter",
-    "increaseCounter": "increase counter",
-    "selectAllRows": "select all rows",
-    "sortColumnBy": "sort column by {name}",
-    "selectRowByIndex": "select row {index}",
-    "resetDate": "reset date",
-    "nextPeriod": "next period",
-    "switchView": "switch view",
-    "previousPeriod": "previous period",
-    "removeFile": "remove file",
-    "reset": "reset",
-    "pagination": "pagination",
-    "goToTheFirstPage": "go to the first page",
     "goToPreviousPage": "go to the previous page",
     "goToSpecificPage": "go to the {page} page",
     "goToSpecificPageInput": "enter the page number to go",
-    "goNextPage": "go next page",
+    "goToTheFirstPage": "go to the first page",
-    "goLastPage": "go last page",
+    "increaseCounter": "increase counter",
-    "currentRating": "current rating {value} of {max}",
+    "inputField": "Input field",
-    "voteRating": "vote rating {value} of {max}",
+    "loading": "Loading",
-    "optionsFilter": "options filter",
-    "splitPanels": "split panels",
     "movePaginationLeft": "move pagination left",
     "movePaginationRight": "move pagination right",
-    "resetTime": "reset time",
-    "closeToast": "close toast",
-    "selectedOption": "Selected option",
-    "noSelectedOption": "Option is not selected",
-    "breadcrumbs": "breadcrumbs",
-    "counterValue": "counter value",
-    "selectedDate": "selected date",
-    "selectedTime": "selected time",
-    "progressState": "progress state",
-    "color": "color",
     "next": "Next",
-    "back": "Previous",
+    "nextPeriod": "next period",
-    "finish": "Finish",
+    "noOptions": "Items not found",
-    "step": "step",
+    "noSelectedOption": "Option is not selected",
+    "ok": "OK",
+    "openColorPicker": "open color picker",
+    "optionsFilter": "options filter",
+    "pagination": "pagination",
+    "previousPeriod": "previous period",
     "progress": "progress",
-    "loading": "Loading",
+    "progressState": "progress state",
-    "sliderValue": "Current slider value is {value}",
+    "removeFile": "remove file",
+    "reset": "reset",
+    "resetDate": "reset date",
+    "resetTime": "reset time",
+    "search": "Search",
+    "select": "Select an option",
+    "selectAllRows": "select all rows",
+    "selectRowByIndex": "select row {index}",
+    "selectedDate": "selected date",
+    "selectedOption": "Selected option",
+    "selectedTime": "selected time",
+    "slideOf": "slide {index} of {length}",
     "sliderDot": "Slider dot",
     "sliderMaxDot": "Maximum slider value",
     "sliderMinDot": "Minimum slider value",
+    "sliderValue": "Current slider value is {value}",
+    "sortColumnBy": "sort column by {name}",
+    "splitPanels": "split panels",
+    "step": "step",
     "switch": "Switch",
-    "inputField": "Input field",
+    "switchView": "switch view",
-    "fileTypeIncorrect": "File type is incorrect",
+    "toggleDropdown": "toggle dropdown",
-    "select": "Select an option"
+    "undo": "Undo",
-  },
+    "uploadFile": "Upload file",
-  "enums": {
+    "voteRating": "vote rating {value} of {max}"
-    "text_type": {
-      "TEXT": "Free text",
-      "WORD": "One Word",
-      "NUMBER": "Number",
-      "INTEGER": "Whole number"
-
-    }
   }
 }

app/pages/index.vue

@@ -13,7 +13,9 @@ watch(loggedIn, () => refresh());
 
   <div v-if="data">
     <div v-if="data.own !== null">
-      <h2 class="my-4 text-2xl font-bold">Joined hunts:</h2>
+      <h2 class="my-4 text-2xl font-bold">
+        {{ $t('page.home.joined_hunts') }}
+      </h2>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <VaCard
           v-for="hunt in data.own"
@@ -33,43 +35,49 @@ watch(loggedIn, () => refresh());
             {{ hunt.description }}
             <VaDivider />
             <div class="flex flex-col gap-2">
-              <p>{{ hunt._count.quests }} Quests</p>
+              <p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
               <p v-if="hunt.start">
-                Start:
                 {{
-                  $d(hunt.start, {
+                  $t('page.home.start', {
-                    dateStyle: 'medium',
+                    start: $d(hunt.start, {
-                    timeStyle: 'medium'
+                      dateStyle: 'medium',
+                      timeStyle: 'medium'
+                    })
                   })
                 }}
               </p>
               <p v-if="hunt.end">
-                End:
                 {{
-                  $d(hunt.end, {
+                  $t('page.home.end', {
-                    dateStyle: 'medium',
+                    start: $d(hunt.end, {
-                    timeStyle: 'medium'
+                      dateStyle: 'medium',
+                      timeStyle: 'medium'
+                    })
                   })
                 }}
               </p>
-              <p>{{ hunt._count.teams }} teams joined!</p>
+              <p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</p>
             </div>
           </VaCardContent>
         </VaCard>
         <VaCard v-if="data.own.length <= 0">
-          <VaCardTitle>No hunt joined yet</VaCardTitle>
+          <VaCardTitle>{{ $t('page.home.no_hunt_joined') }}</VaCardTitle>
-          <VaCardContent>Click on a hunt below and join them!</VaCardContent>
+          <VaCardContent>{{
+            $t('page.home.click_hunt_below_to_join')
+          }}</VaCardContent>
         </VaCard>
       </div>
     </div>
     <div v-else>
-      <VaButton color="info" icon="login" :to="$localePath(`/login`)"
+      <VaButton color="info" icon="login" :to="$localePath(`/login`)">{{
-        >Login first</VaButton
+        $t('page.home.login_first')
-      >
+      }}</VaButton>
     </div>
     <div class="mt-8">
       <VaDivider />
-      <h2 class="my-4 text-2xl font-bold">Open to join hunts:</h2>
+      <h2 class="my-4 text-2xl font-bold">
+        {{ $t('page.home.open_to_join') }}
+      </h2>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <VaCard
           v-for="hunt in data.others"
@@ -87,32 +95,34 @@ watch(loggedIn, () => refresh());
             {{ hunt.description }}
             <VaDivider />
             <div class="flex flex-col gap-2">
-              <p>{{ hunt._count.quests }} Quests</p>
+              <p>{{ $t('page.home.n_quests', hunt._count.quests) }}</p>
               <p v-if="hunt.start">
-                Start:
                 {{
-                  $d(hunt.start, {
+                  $t('page.home.start', {
-                    dateStyle: 'medium',
+                    start: $d(hunt.start, {
-                    timeStyle: 'medium'
+                      dateStyle: 'medium',
+                      timeStyle: 'medium'
+                    })
                   })
                 }}
               </p>
               <p v-if="hunt.end">
-                End:
                 {{
-                  $d(hunt.end, {
+                  $t('page.home.end', {
-                    dateStyle: 'medium',
+                    start: $d(hunt.end, {
-                    timeStyle: 'medium'
+                      dateStyle: 'medium',
+                      timeStyle: 'medium'
+                    })
                   })
                 }}
               </p>
-              <p>{{ hunt._count.teams }} teams joined!</p>
+              <p>{{ $t('page.home.n_teams_joined', hunt._count.teams) }}</p>
             </div>
           </VaCardContent>
         </VaCard>
         <VaCard v-if="data.others.length <= 0">
-          <VaCardTitle>No hunt created yet</VaCardTitle>
+          <VaCardTitle>{{ $t('page.home.no_hunt_created') }}</VaCardTitle>
-          <VaCardContent>New hunts will appear soon!</VaCardContent>
+          <VaCardContent>{{ $t('page.home.new_hunts_soon') }}</VaCardContent>
         </VaCard>
       </div>
     </div>

docker-compose.yml

@@ -23,6 +23,8 @@ services:
     image: redis:6.2-alpine
     networks:
       - internal
+    profiles:
+      - future
     restart: always
     command: redis-server --save 20 1 --loglevel warning --requirepass ${NUXT_REDIS_PASSWORD}
     healthcheck:

nuxt.config.ts

@@ -35,6 +35,8 @@ export default defineNuxtConfig({
     customRoutes: 'page',
     strategy: 'prefix_and_default',
     defaultLocale: 'de',
+    hmr: true,
+    autoDeclare: true,
     langDir: 'lang',
     restructureDir: 'app',
     baseUrl: 'https://pichunt.syma.dev'