ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-12 13:26:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add seo

Browse source
This commit is contained in:
Ruidy 2024-12-15 00:50:58 +01:00
parent ba78374f81
commit 27c7ffacf6
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
2 changed files with 36 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
pages/categories/[name].vue
View file

@ -10,20 +10,40 @@ if (!recipes.value) {
statusMessage: "Category not found", 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> </script>
<template> <template>
<div> <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-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content"> <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> </div>
<div class="container mx-auto px-4 py-8"> <div class="container mx-auto px-4 py-8">
<div class="prose max-w-none mb-12"> <div class="prose max-w-none mb-12">
<!-- <p>{{ category!.description }}</p> --> <p>{{ category!.description }}</p>
</div> </div>
<div v-if="status === 'pending'" class="flex justify-center my-8"> <div v-if="status === 'pending'" class="flex justify-center my-8">

13
pages/categories/index.vue
View file

@ -7,6 +7,19 @@ if (error.value) {
message: error.value.message, 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> </script>
<template> <template>