<script setup lang="ts">
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import TableHeader from '~/components/parts/TableHeader.vue';
import { useSeo } from '~/composables/seo';
import { computed, onBeforeMount } from 'vue';

const slug = useRoute().params.slug;
const { locale } = useI18n();

const { data: post } = await useAsyncData(`blog-${slug}`, () => 
  queryCollection(`blog`).path(`/blog/${locale.value}/${slug}`).first()
, {watch: [locale]})

useSeo({
  title: post.value?.title || '',
  description: post.value?.description || '',
  canonicalUrl: `/blog/${locale.value}/${slug}`,
  articleDate: post.value?.date,
  structuredData: post.value ? {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.value.title,
    description: post.value.description,
    datePublished: post.value.date,
    dateModified: post.value.date,
    author: {
      '@type': 'Person',
      name: 'Aran Roig'
    },
    publisher: {
      '@type': 'Organization',
      name: 'Aran Roig',
      url: 'https://aranroig.com'
    },
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': `https://aranroig.com/blog/${locale.value}/${slug}`
    }
  } : undefined,
  ogImage: post.value ? `https://aranroig.com/blog/${locale.value}/${slug}/cover.png` : undefined
});
</script>

<template>
  <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>
  <FixedLayout>
    <Container>
      <h1 v-if="post" class="blog-post-title">{{ post.title }}</h1>
      <ContentRenderer v-if="post" :value="post" class="blog" />
    </Container>
  </FixedLayout>
  <Footer></Footer>
</template>

<style lang="scss">
.blog {
    h2 {
        a {
            text-decoration: none;
            color: var(--color-text);
        }
    }

    img {
        margin: auto;
        display: block;
        max-height: 400px;
        width: 100%;
        object-fit: contain;
    }
}

.blog-post-title {
  font-family: 'Hurmit', monospace;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.3;
}

@media screen and (max-width: 600px) {
    .blog {
        img {
            max-height: 250px;
        }
    }

    .blog-post-title {
        font-size: 1.4rem;
    }
}

.no-sprite .undertable-wrapper {
  display: none;
}
</style>