49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<v-container>
|
|
<div class="max-w-[720px] mx-auto">
|
|
<v-card>
|
|
<v-img
|
|
v-if="post?.thumbnail"
|
|
cover
|
|
class="align-end"
|
|
height="180"
|
|
:src="post?.thumbnail"
|
|
/>
|
|
|
|
<div class="pa-5">
|
|
<v-card-text class="pt-0 pb-1">
|
|
<h2 class="text-xl font-medium">{{ post?.title }}</h2>
|
|
<p class="opacity-80">{{ post?.description }}</p>
|
|
</v-card-text>
|
|
|
|
<v-divider class="mx-[-20px] my-3 border-opacity-75" />
|
|
|
|
<v-card-text>
|
|
<content-renderer :value="post">
|
|
<template #empty>
|
|
<p>No content found.</p>
|
|
</template>
|
|
</content-renderer>
|
|
</v-card-text>
|
|
|
|
<v-divider class="mx-[-20px] my-4 border-opacity-75" />
|
|
|
|
<div class="mt-3 flex justify-between items-center">
|
|
<p class="ps-3.5 text-sm">
|
|
{{ new Date(post?.date).toLocaleString() }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</v-card>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const route = useRoute();
|
|
|
|
const { data: post } = await useAsyncData("post", () =>
|
|
queryContent("posts").where({ slug: route.params.slug }).findOne()
|
|
);
|
|
</script>
|