100 lines
2.8 KiB
Vue
100 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { BlogPost } from '@/types/blog'
|
|
|
|
const { path } = useRoute()
|
|
const articles = await queryContent(path).findOne()
|
|
|
|
const data = computed<BlogPost>(() => {
|
|
return {
|
|
title: articles.title || 'no-title available',
|
|
description: articles.description || 'no-descriptoin available',
|
|
image: articles.image || '/nuxt-blog/no-image_cyyits.png',
|
|
alt: articles.alt || 'no alter data available',
|
|
ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
|
|
date: articles.date || 'not-date-available',
|
|
tags: articles.tags || [],
|
|
published: articles.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: 'Riyad\'s Blog' },
|
|
{ hid: 'og:type', property: 'og:type', content: 'website' },
|
|
{
|
|
property: 'og:url',
|
|
content: `https://blog-nurriyad.vercel.app/${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: `https://blog-nurriyad.vercel.app/${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: `https://blog-nurriyad.vercel.app/${path}`,
|
|
},
|
|
],
|
|
})
|
|
</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 prose-img:rounded-lg"
|
|
>
|
|
<ContentRenderer :value="articles">
|
|
<template #empty>
|
|
<p>No content found.</p>
|
|
</template>
|
|
</ContentRenderer>
|
|
</div>
|
|
</div>
|
|
<BlogToc />
|
|
</div>
|
|
</template>
|