<template>
  <NuxtLayout name="blog">
    <Head>
      <Meta name="description" :content="preview" />
      <Meta property="og:type" content="article" />
      <Meta property="og:title" :content="post?.title || ''" />
      <Meta
        property="og:url"
        :content="'https://lunasqu.ee/blog/' + post?.fullSlug || ''"
      />
      <Meta property="og:site_name" content="Evert's Blog" />
      <Meta property="og:description" :content="preview" />
      <Meta property="og:locale" content="en_US" />
      <Meta property="article:published_time" :content="isostamp" />
      <Meta property="article:modified_time" :content="isostamp" />
      <Meta property="article:author" content="Evert Prants" />
      <Meta
        v-for="tag in post?.tags || []"
        property="article:tag"
        :content="tag"
      />
      <Meta name="twitter:card" content="summary" />
      <Title>{{ post?.title }} | Evert's Blog | lunasqu.ee</Title>
    </Head>

    <BlogPost :post="post" :detail="true" />
  </NuxtLayout>
</template>

<script setup lang="ts">
import type { BlogPost } from '~~/lib/types/post';

const route = useRoute();
const { data: post } = await useFetch<BlogPost>(
  `/api/blog/${route.params.slug}`,
  {
    key: `${route.params.slug}-post`,
  }
);

const isostamp = computed(() =>
  post.value ? new Date(post.value.date).toISOString() : ''
);

const preview = computed(() =>
  post.value?.summary
    .replace(/<[^>]*>?/gm, '')
    .replace('\n', ' ')
    .substring(0, 240)
);
</script>
