47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<template>
|
|
<div class="recipe-bg min-h-screen">
|
|
<v-container>
|
|
<RecipeDisplay v-if="normalizedRecipe" :recipe="normalizedRecipe" :is-public-view="true" />
|
|
<v-progress-linear v-else indeterminate color="#8c4a32" />
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const route = useRoute();
|
|
const config = useRuntimeConfig();
|
|
|
|
const { data: rawRecipe, error } = await useAsyncData(`recipe-${route.params.id}`, () => {
|
|
const baseUrl = config.public.apiBase.endsWith('/')
|
|
? config.public.apiBase
|
|
: `${config.public.apiBase}/`;
|
|
|
|
return $fetch(`${baseUrl}api/recipe/${route.params.id}`);
|
|
});
|
|
|
|
const normalizedRecipe = computed(() => {
|
|
if (!rawRecipe.value) return null;
|
|
|
|
const r = rawRecipe.value;
|
|
return {
|
|
id: r.id || r.Id,
|
|
title: r.title || r.Title || 'Untitled Recipe',
|
|
ingredients: r.ingredients || r.Ingredients || [],
|
|
instructions: r.instructions || r.Instructions || [],
|
|
imageUrl: r.imageUrl || r.ImageUrl || null
|
|
};
|
|
});
|
|
|
|
if (error.value || !recipe.value) {
|
|
throw createError({ statusCode: 404, statusMessage: 'Recipe not found' })
|
|
}
|
|
|
|
useSeoMeta({
|
|
title: `${normalizedRecipe.value.title} | Seasoned`,
|
|
ogTitle: `Chef's Choice: ${normalizedRecipe.value.title}`,
|
|
description: `Check out this delicious recipe for ${normalizedRecipe.value.title} on Seasoned.`,
|
|
ogImage: normalizedRecipe.value.imageUrl || '/images/seasoned-logo.png',
|
|
twitterCard: 'summary_large_image',
|
|
ogType: 'article',
|
|
})
|
|
</script> |