From 280dfee53bda0eaeeb3bf34c87001f2fed1d863c Mon Sep 17 00:00:00 2001
From: Pascal Syma <p.syma@appfarms.com>
Date: Mon, 15 Sep 2025 16:08:53 +0200
Subject: [PATCH] Add SEO info

---
 TODO.md                                       |  2 +-
 .../hunt/[huntSlug]/[questSlug]/index.vue     | 20 ++++++++++++++++++-
 app/pages/hunt/[huntSlug]/index.vue           | 20 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index 98897c2..4f56410 100644
--- a/TODO.md
+++ b/TODO.md
@@ -48,7 +48,7 @@
     - [x] Pretty slugified urls
     - [x] All static texts translated
     - [ ] Pretty
-    - [ ] SEO, Meta, Preview
+    - [x] SEO, Meta, Preview
     - [ ] Deployment `.on.hs-bremen.de`??
 
 ```txt
diff --git a/app/pages/hunt/[huntSlug]/[questSlug]/index.vue b/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
index 4720b3a..079a46c 100644
--- a/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
+++ b/app/pages/hunt/[huntSlug]/[questSlug]/index.vue
@@ -40,7 +40,25 @@ useHead({
       ]
         .filter((s) => s && s?.length > 0)
         .join(' | ') || t('layouts.default_tile')
-  })
+  }),
+  meta: [
+    {
+      property: 'og:title',
+      content: hasKey(data.value, 'title')
+        ? tKey(data.value!, 'title').value
+        : questSlug?.name
+    },
+    {
+      property: 'og:description',
+      content: hasKey(data.value, 'description')
+        ? tKey(data.value!, 'description').value
+        : questSlug?.name
+    },
+    {
+      property: 'og:image',
+      content: data.value?.picture?.url
+    }
+  ]
 });
 
 const answer = ref(data.value?.answer?.text);
diff --git a/app/pages/hunt/[huntSlug]/index.vue b/app/pages/hunt/[huntSlug]/index.vue
index 52afa71..a46e9f6 100644
--- a/app/pages/hunt/[huntSlug]/index.vue
+++ b/app/pages/hunt/[huntSlug]/index.vue
@@ -20,7 +20,25 @@ const hideAnswers = ref(true);
 useHead({
   title: t('layouts.title', {
     title: hasKey(data.value, 'name') ? tKey(data.value!, 'name').value : name
-  })
+  }),
+  meta: [
+    {
+      property: 'og:title',
+      content: hasKey(data.value, 'name')
+        ? tKey(data.value!, 'name').value
+        : name
+    },
+    {
+      property: 'og:description',
+      content: hasKey(data.value, 'description')
+        ? tKey(data.value!, 'description').value
+        : name
+    },
+    {
+      property: 'og:image',
+      content: data.value?.picture?.url
+    }
+  ]
 });
 
 watch(loggedIn, () => refresh());