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

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

const { path } = useRoute();
</script>

<template>
  <ContentDoc :path="path" v-slot="{ doc }">
    <UContainer class="flex flex-col gap-3 prose" as="article">
      <div class="text-sm text-slate-500">
        Published at {{ formatDate(new Date(doc.date), "Do of MMMM YYYY") }}
      </div>
      <h1>{{ doc.title }}</h1>
    </UContainer>

    <UContainer class="hidden md:block" as="figure" v-if="doc.coverImage?.url">
      <NuxtImg
        placeholder
        :src="doc.coverImage.url ?? ''"
        :alt="doc.title"
        height="1000"
        width="1700"
        class="rounded-lg"
      />
      <ULink
        :to="doc.coverImage.authorUrl"
        target="_blank"
        class="text-xs text-slate-500 italic font-serif hover:underline"
      >
        Photo by {{ doc.coverImage.author }}
      </ULink>
    </UContainer>
    <UContainer
      class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
      as="article"
    >
      <ContentRenderer :value="doc" />
    </UContainer>
  </ContentDoc>

  <Footer />
</template>
