127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { BlogPost } from '@/types/blog'
|
|
import { navbarData, seoData } from '~/data'
|
|
|
|
const { path } = useRoute()
|
|
|
|
const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () => queryContent(path).findOne())
|
|
|
|
if (error.value)
|
|
navigateTo('/404')
|
|
|
|
const data = computed<BlogPost>(() => {
|
|
return {
|
|
title: articles.value?.title || 'no-title available',
|
|
description: articles.value?.description || 'no-description available',
|
|
image: articles.value?.image || '/not-found.jpg',
|
|
alt: articles.value?.alt || 'no alter data available',
|
|
ogImage: articles.value?.ogImage || '/not-found.jpg',
|
|
date: articles.value?.date || 'not-date-available',
|
|
tags: articles.value?.tags || [],
|
|
published: articles.value?.published || false,
|
|
}
|
|
})
|
|
|
|
useHead({
|
|
title: data.value.title || '',
|
|
meta: [
|
|
{ name: 'description', content: data.value.description },
|
|
{
|
|
name: 'description',
|
|
content: data.value.description,
|
|
},
|
|
// Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
|
|
{ property: 'og:site_name', content: navbarData.homeTitle },
|
|
{ hid: 'og:type', property: 'og:type', content: 'website' },
|
|
{
|
|
property: 'og:url',
|
|
content: `${seoData.mySite}/${path}`,
|
|
},
|
|
{
|
|
property: 'og:title',
|
|
content: data.value.title,
|
|
},
|
|
{
|
|
property: 'og:description',
|
|
content: data.value.description,
|
|
},
|
|
{
|
|
property: 'og:image',
|
|
content: data.value.ogImage || data.value.image,
|
|
},
|
|
// Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
|
|
{ name: 'twitter:site', content: '@qdnvubp' },
|
|
{ name: 'twitter:card', content: 'summary_large_image' },
|
|
{
|
|
name: 'twitter:url',
|
|
content: `${seoData.mySite}/${path}`,
|
|
},
|
|
{
|
|
name: 'twitter:title',
|
|
content: data.value.title,
|
|
},
|
|
{
|
|
name: 'twitter:description',
|
|
content: data.value.description,
|
|
},
|
|
{
|
|
name: 'twitter:image',
|
|
content: data.value.ogImage || data.value.image,
|
|
},
|
|
],
|
|
link: [
|
|
{
|
|
rel: 'canonical',
|
|
href: `${seoData.mySite}/${path}`,
|
|
},
|
|
],
|
|
})
|
|
|
|
// Generate OG Image
|
|
defineOgImageComponent('Test', {
|
|
headline: 'Greetings 👋',
|
|
title: data.value.title || '',
|
|
description: data.value.description || '',
|
|
link: data.value.ogImage,
|
|
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12 ">
|
|
<div class="col-span-12 lg:col-span-9">
|
|
<BlogHeader
|
|
:title="data.title"
|
|
:image="data.image"
|
|
:alt="data.alt"
|
|
:date="data.date"
|
|
:description="data.description"
|
|
:tags="data.tags"
|
|
/>
|
|
<div
|
|
class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg
|
|
prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
|
|
>
|
|
<ContentRenderer v-if="articles" :value="articles">
|
|
<template #empty>
|
|
<p>No content found.</p>
|
|
</template>
|
|
</ContentRenderer>
|
|
</div>
|
|
</div>
|
|
<BlogToc />
|
|
|
|
<div class="flex mt-10 flex-row gap-2">
|
|
<SocialShare
|
|
v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
|
|
:key="network"
|
|
aria-label="Share with {network}"
|
|
:network="network"
|
|
:styled="true"
|
|
:label="true"
|
|
class="p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|