<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug
const { data } = await useAsyncData(() => queryCollection('blog').path("/blog/" + slug).first())
const title = (data.value == undefined ? 'Blog' : data.value!.title);

useSeoMeta({
  title: data.value?.title,
  description: data.value?.description
})
defineOgImageComponent('BlogPost', {
  title: title,
  description: data.value?.description
})
</script>

<template>
  <HeaderCompact :title="title" previous-link="/blog" />

  <div class="flex xl:flex-row flex-col-reverse xl:mt-20 sm:mt-10 mt-5 xl:mb-20 mb-5 m-auto">
    <ContentRenderer v-if="data" :value="data" class="max-w-4xl w-[90%] xl:mr-10 m-auto content" />
  
    <div v-if="data?.body.toc != undefined" class="xl:sticky xl:top-16 xl:visible xl:block collapse hidden xl:mt-0 mt-5 xl:ml-10 xl:mb-auto ml-5 mb-10 m-auto max-w-60">
      <ul>
        <BlogTocLink v-for="link of data.body.toc.links" :link="link" />
      </ul>
    </div>

  </div>

</template>

<style>
.content h2 {
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content h3 {
  font-size: 26px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content h4 {
  font-size: 23px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content h5 {
  font-size: 21px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.content p {
  font-size: 20px;

  margin-bottom: 20px;
}

.content ul {
  list-style-type: disc;
  list-style-position: inside;
  font-size: 20px;

  margin-bottom: 20px;
}
.content li {
  list-style-type: disc;
  list-style-position: inside;
}

.content a {
  color: initial;
}
.content a:link {
  color: initial;
}
.content a:visited {
  color: initial;
}
.content a:hover {
  color: initial;
}
.content a:active {
  color: initial;
}
.content p a {
    text-decoration: underline;
}

ul {
  list-style: none;
}
li {
  list-style: none;
}
</style>