<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(() => new Date(post.value.date).toISOString());
const preview = computed(() =>
  post.value.summary
    .replace(/<[^>]*>?/gm, '')
    .replace('\n', ' ')
    .substring(0, 240)
);
</script>
