Switch to translatable data

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

@@ -7,6 +7,7 @@ definePageMeta({
   layout: 'full'
 });
 const { t, d } = useI18n();
+const { tKey, hasKey, tSluggy } = useI18nKey();
 
 const app = useNuxtApp();
 const { name, id } = app.$slugData.huntSlug!;
@@ -52,7 +53,9 @@ const columns = leaderboardColumns.map((c) =>
         class="flex flex-col items-center justify-center gap-8 bg-green-300 text-center"
       >
         <h1 class="text-7xl">{{ t('page.showcase.showcase_for') }}</h1>
-        <h1 class="text-9xl font-bold">{{ data.name || name }}</h1>
+        <h1 class="text-9xl font-bold">
+          {{ hasKey(data, 'name') ? tKey(data, 'name') : name }}
+        </h1>
         <p v-if="data.start || data.end" class="flex flex-row gap-4 text-4xl">
           <span v-if="data.start">{{ d(data.start, fullDate) }}</span
           ><span v-if="data.start && data.end"> – </span
@@ -94,11 +97,17 @@ const columns = leaderboardColumns.map((c) =>
         />
       </div>
     </section>
-    <section v-for="quest in data.quests" :key="quest.id" :id="sluggy(quest)">
+    <section
+      v-for="quest in data.quests"
+      :key="quest.id"
+      :id="tSluggy(quest).value"
+    >
       <div class="flex flex-col gap-4 bg-yellow-100 p-4">
         <div class="my-8 flex w-full flex-row justify-around">
-          <h3 class="text-3xl">{{ quest.title }}</h3>
-          <p class="text-xl font-bold">{{ quest.question }}</p>
+          <h3 class="text-3xl">{{ tKey(quest, 'title') }}</h3>
+          <p class="text-xl font-bold" v-if="hasKey(quest, 'question')">
+            {{ tKey(quest, 'question') }}
+          </p>
           <p v-if="quest.textSolution" class="text-3xl">
             {{ quest.textSolution }}
           </p>