refactor(app): simplify head link and meta rendering, add more titles and descriptions

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

@@ -15,6 +15,13 @@ const app = useNuxtApp();
 const { name, id } = app.$slugData.huntSlug!;
 const { data, error } = await useFetch(`/api/hunt/${id}/showcase`);
 
+useHead({
+  title: t('layouts.two_title', {
+    title: tKey(data.value ?? { name_de: name, name_en: name }, 'name').value,
+    subtitle: t('page.showcase.title')
+  })
+});
+
 const { toggle, isFullscreen, isSupported } = useFullscreen();
 
 const leaderboardColumns: DataTableColumnSource[] = [

app/pages/index.vue

@@ -19,6 +19,20 @@ const steps = [
   { icon: 'photo_camera', key: 'step_quests' },
   { icon: 'emoji_events', key: 'step_win' }
 ];
+
+useHead({
+  title: t('layouts.default_tile'),
+  meta: [
+    {
+      property: 'og:title',
+      content: t('page.landing.hero_title')
+    },
+    {
+      property: 'og:description',
+      content: t('page.landing.hero_subtitle')
+    }
+  ]
+});
 </script>
 
 <template>

app/pages/profile.vue

@@ -18,6 +18,11 @@ watch(loggedIn, (isLoggedIn) => {
 });
 const { data, refresh, pending } = await useFetch('/api/auth/profile');
 
+useHead({
+  title: t('layouts.title', {
+    title: t('page.profile.title')
+  })
+});
 const form = reactive({
   email: data.value!.email,
   name: data.value!.name