ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +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",
});
}
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">

13
pages/categories/index.vue
View file

@ -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>