Files
mariosant.dev/pages/articles/[...slug].vue
Marios Antonoudiou 19c3158f56 feat: add articles
2023-12-20 16:52:33 +02:00

47 lines
1.1 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" 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>