Start i18n on static texts

app/pages/hunt/[huntSlug]/index.vue

@@ -46,9 +46,9 @@ async function invite() {
     <h1 class="text-2xl">
       {{ data ? tKey(data, 'name') : name }}
 
-      <VaChip v-if="data?.totalScore" class="float-right" color="success"
-        >Total points: {{ data!!.totalScore }}</VaChip
-      >
+      <VaChip v-if="data?.totalScore" class="float-right" color="success">{{
+        t('page.hunt.total_points', data!!.totalScore)
+      }}</VaChip>
     </h1>
     <div class="grid w-full grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-6">
       <VaButton
@@ -56,7 +56,7 @@ async function invite() {
         :disabled="pending"
         title="Refresh"
         @click="refresh"
-        >Refresh</VaButton
+        >{{ t('page.common.refresh') }}</VaButton
       >
 
       <VaButton
@@ -64,34 +64,34 @@ async function invite() {
         color="success"
         icon="leaderboard"
         :to="$localePath(`/hunt/${tSluggy(data).value}/showcase`)"
-        >Showcase</VaButton
+        >{{ t('page.hunt.showcase') }}</VaButton
       >
       <VaButton
         v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
         color="success"
         icon="collections"
         :to="$localePath(`/hunt/${tSluggy(data).value}/diashow`)"
-        >Diashow</VaButton
+        >{{ t('page.hunt.diashow') }}</VaButton
       >
       <VaButton
         v-if="(data?.revealAnswers && data?.revealQuests) || data?.isMember"
         color="success"
         icon="auto_awesome_mosaic"
         :to="$localePath(`/hunt/${tSluggy(data).value}/pictures`)"
-        >All pictures</VaButton
+        >{{ t('page.hunt.all_pictures') }}</VaButton
       >
       <VaButton
         v-if="data?.isMember"
         color="danger"
         icon="edit"
         :to="$localePath(`/hunt/${tSluggy(data).value}/admin`)"
-        >Admin</VaButton
+        >{{ t('page.common.admin') }}</VaButton
       ><VaButton
         v-if="data?.isMember"
         color="danger"
         icon="groups"
         :to="$localePath(`/hunt/${tSluggy(data).value}/teams`)"
-        >Teams</VaButton
+        >{{ t('page.hunt.teams') }}</VaButton
       >
     </div>
     <div v-if="data">
@@ -110,22 +110,34 @@ async function invite() {
         :title="data ? tKey(data, 'name').value : name"
       />
       <p v-if="data.start">
-        Start:
-        {{ d(data.start, fullDate) }}
+        {{
+          t('page.home.start', {
+            start: d(data.start, fullDate)
+          })
+        }}
       </p>
       <p v-if="data.end">
-        End:
-        {{ d(data.end, fullDate) }}
+        {{
+          t('page.home.end', {
+            start: d(data.end, fullDate)
+          })
+        }}
       </p>
       <p>
-        {{ data._count.teams }} teams joined{{
-          data.ownTeam !== null ? ', just like you' : ', unlike you'
-        }}!
+        {{
+          t(
+            data.ownTeam !== null
+              ? 'page.hunt.team_count_joined'
+              : 'page.hunt.team_count',
+            data._count.teams
+          )
+        }}
       </p>
       <p v-if="data.ownTeam">
-        Your team: <span class="font-bold">{{ data.ownTeam.name }}</span>
+        {{ t('page.hunt.your_team') }}
+        <span class="font-bold">{{ data.ownTeam.name }}</span>
         <VaButton size="small" class="ml-2" @click="invite"
-          >Invite:
+          >{{ t('page.hunt.invite') }}
           <span
             class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none"
           >
@@ -138,10 +150,10 @@ async function invite() {
         color="primary"
         class="mb-16 mt-8"
       >
-        <VaCardTitle>Join this hunt!</VaCardTitle>
-        <VaCardContent class="text-2xl"
-          >To join this hunt you need to join or create a team:</VaCardContent
-        >
+        <VaCardTitle>{{ t('page.hunt.join_this_hunt') }}</VaCardTitle>
+        <VaCardContent class="text-2xl">{{
+          t('page.hunt.login_to_join')
+        }}</VaCardContent>
         <VaCardActions v-if="data.loggedIn">
           <TeamJoinModal :hunt-id="data.id" @update="refresh" />
           <TeamAddModal :hunt-id="data.id" @update="refresh" />
@@ -151,12 +163,14 @@ async function invite() {
             color="info"
             icon="login"
             :to="$localePath(`/login?to=/hunt/${tSluggy(data).value}`)"
-            >Login first</VaButton
+            >{{ t('page.common.login_first') }}</VaButton
           >
         </VaCardActions>
       </VaCard>
       <div v-else-if="!data.isMember" class="flex flex-row gap-2">
-        <VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
+        <VaSwitch v-model="hideAnswers" icon="image">{{
+          t('page.hunt.hide_answers')
+        }}</VaSwitch>
       </div>
       <VaDivider />
       <div
@@ -180,7 +194,7 @@ async function invite() {
           <VaImage
             v-if="!hideAnswers"
             :src="quest?.answer?.picture?.url ?? ''"
-            fallback-text="No picture uploaded"
+            :fallback-text="t('page.hunt.no_picture_uploaded')"
             class="h-32"
             fit="cover"
             lazy
@@ -205,7 +219,7 @@ async function invite() {
               color="primary"
               icon="rate_review"
               class="flex-grow"
-              >Open</VaButton
+              >{{ t('page.common.open') }}</VaButton
             >
             <VaButton
               v-if="data.isMember"
@@ -216,23 +230,26 @@ async function invite() {
                   `/hunt/${tSluggy(data).value}/${tSluggy(quest).value}/admin`
                 )
               "
-              >Admin ({{ quest.unreviewed || 0 }} unreviewed)</VaButton
+              >{{
+                t('page.hunt.admin_unreviewed', quest.unreviewed || 0)
+              }}</VaButton
             >
           </VaCardActions>
         </VaCard>
       </div>
       <VaCard v-else color="warning" class="mt-4"
-        ><VaCardTitle>Quests not revealed yet!</VaCardTitle>
-        <VaCardContent
-          >Soon all {{ data._count.quests }} quests will be
-          revealed!</VaCardContent
-        >
+        ><VaCardTitle>{{ t('page.hunt.quest_not_revealed') }}</VaCardTitle>
+        <VaCardContent>{{
+          t('page.hunt.quest_soon_reveal', data._count.quests)
+        }}</VaCardContent>
       </VaCard>
     </div>
 
     <div v-if="error">
       <h1 class="mt-8 text-3xl">{{ t(parseError(error)) }}</h1>
-      <VaButton icon="arrow_back" :to="$localePath(`/`)">Back home</VaButton>
+      <VaButton icon="arrow_back" :to="$localePath(`/`)">{{
+        t('page.common.back_home')
+      }}</VaButton>
     </div>
   </div>
 </template>