68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<template>
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div v-if="post" class="prose prose-lg max-w-none">
|
|
<div class="mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">{{ post.title }}</h1>
|
|
<div class="flex items-center justify-between text-gray-600 mb-6">
|
|
<time>{{ formatDate(post.date) }}</time>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
</div>
|
|
|
|
<ContentRenderer v-if="post" :value="post" />
|
|
</div>
|
|
|
|
<div v-else class="text-center py-20">
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-4">{{ t('errors.404.translation') }}</h1>
|
|
<p class="text-gray-600 mb-6">{{ t('errors.404.translationMessage') }}</p>
|
|
<NuxtLink
|
|
:to="localePath('/blog')"
|
|
class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
{{ t('blog.backToBlog') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { t, locale } = useI18n()
|
|
const route = useRoute()
|
|
const localePath = useLocalePath()
|
|
// console.log(locale.value)
|
|
// const { data: post } = await useAsyncData(
|
|
// () => `blog-item-${locale.value}-${route.params.slug}`,
|
|
// async () => {
|
|
// return await queryCollection('blog').where('path', '=', route.path ).first()
|
|
// },{ watch: [locale], }
|
|
// )
|
|
console.log(route.path)
|
|
const { data: post } = await useAsyncData(
|
|
`blog-item-${locale.value}-${route.params.slug}`,
|
|
async () => {
|
|
const localizedPath = localePath(`/blog/${route.params.slug}`)
|
|
return await queryCollection('blog').where('path', '=', localizedPath).first()
|
|
},
|
|
{ watch: [locale] }
|
|
)
|
|
|
|
const formatDate = (date) => {
|
|
return new Date(date).toLocaleDateString(locale.value, {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}
|
|
|
|
if (post) {
|
|
useSeoMeta({
|
|
title: post.title,
|
|
description: post.description,
|
|
ogTitle: post.title,
|
|
ogDescription: post.description
|
|
})
|
|
}
|
|
</script>
|
|
|
|
|