From 27c7ffacf630555788c81f83645e62c069315710 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Sun, 15 Dec 2024 00:50:58 +0100
Subject: [PATCH] add seo

---
 pages/categories/[name].vue | 26 +++++++++++++++++++++++---
 pages/categories/index.vue  | 13 +++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/pages/categories/[name].vue b/pages/categories/[name].vue
index cec2fbb..cca8c0c 100644
--- a/pages/categories/[name].vue
+++ b/pages/categories/[name].vue
@@ -10,20 +10,40 @@ if (!recipes.value) {
     statusMessage: "Category not found",
   });
 }
+
+const { data: categories } = await useCategories();
+const category = categories.value?.find((c) => c.name === categoryName);
+
+const url = useRequestURL();
+useSeoMeta({
+  title: `${categoryName} | Mood2Food`,
+  description: "The perfect meal that fits your mood",
+  ogTitle: `${categoryName} | Mood2Food`,
+  ogDescription: "The perfect meal that fits your mood",
+  ogImage: category!.picture,
+  ogUrl: url.href,
+  twitterTitle: `${categoryName} | Mood2Food`,
+  twitterDescription: "The perfect meal that fits your mood",
+  twitterImage: category!.picture,
+  twitterCard: "summary",
+});
 </script>
 
 <template>
   <div>
-    <div class="hero h-[40vh] bg-cover bg-center relative">
+    <div
+      class="hero h-[40vh] bg-cover bg-center relative"
+      :style="`background-image: url(${category!.picture})`"
+    >
       <div class="hero-overlay bg-opacity-60"></div>
       <div class="hero-content text-center text-neutral-content">
-        <h1 class="text-5xl font-bold">{{ categoryName }}</h1>
+        <h1 class="text-5xl font-bold">{{ category?.name || categoryName }}</h1>
       </div>
     </div>
 
     <div class="container mx-auto px-4 py-8">
       <div class="prose max-w-none mb-12">
-        <!-- <p>{{ category!.description }}</p> -->
+        <p>{{ category!.description }}</p>
       </div>
 
       <div v-if="status === 'pending'" class="flex justify-center my-8">
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index 1db8827..68e3940 100644
--- a/pages/categories/index.vue
+++ b/pages/categories/index.vue
@@ -7,6 +7,19 @@ if (error.value) {
     message: error.value.message,
   });
 }
+const url = useRequestURL();
+useSeoMeta({
+  title: `Recipe categories | Mood2Food`,
+  description: "The perfect meal that fits your mood",
+  ogTitle: `Recipe categories | Mood2Food`,
+  ogDescription: "The perfect meal that fits your mood",
+  ogImage: "/logo192.png",
+  ogUrl: url.href,
+  twitterTitle: `Recipe categories | Mood2Food`,
+  twitterDescription: "The perfect meal that fits your mood",
+  twitterImage: "/logo192.png",
+  twitterCard: "summary",
+});
 </script>
 
 <template>