<script setup lang="ts">
import { formatDate } from "@vueuse/core";

definePageMeta({
  layout: "content",
});

const { path } = useRoute();

const { data: article } = useAsyncData(path, async () => {
  const article = await queryCollection("articles").path(path).first();

  return article;
});
</script>

<template>
  <UContainer
    v-motion-fade
    class="flex flex-col gap-3 prose dark:prose-invert"
    as="article"
  >
    <div class="text-sm text-slate-500">
      {{ formatDate(new Date(article.date), "Do of MMMM YYYY") }}
    </div>
    <h1>{{ article.title }}</h1>
  </UContainer>

  <UContainer
    class="hidden md:block"
    as="figure"
    v-if="article.coverImage?.url"
    v-motion-fade
    :delay="500"
  >
    <NuxtImg
      placeholder
      :src="article.coverImage?.url ?? ''"
      :alt="article.title"
      height="1000"
      width="1700"
      class="rounded-lg"
    />
    <ULink
      :to="article.coverImage.authorUrl"
      target="_blank"
      class="text-xs text-slate-500 italic font-serif hover:underline"
    >
      Photo by {{ article.coverImage.author }}
    </ULink>
  </UContainer>

  <UContainer
    v-motion-fade
    :delay="500"
    class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
    as="article"
  >
    <ContentRenderer :value="article" />
  </UContainer>

  <Footer v-motion-fade :delay="500" />
</template>

<style scoped>
article.prose {
  h2 {
    font-weight: bold !important;

    a {
      font-weight: bold !important;
    }
  }
}
</style>
s
