50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<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 dark:prose-invert"
|
|
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>
|