crbtc.org/pages/event/[slug].vue

41 lines
945 B
Vue

<script setup>
const { path } = useRoute()
const { data, error } = await useAsyncData(`content-${path}`, () => {
return queryContent().where({ _path: path }).findOne()
})
if (error.value) {
showError(
createError({
statusCode: 404,
statusMessage: 'Not Found',
})
)
}
import { format } from "date-fns";
let formatDate = (date) => {
date = new Date(date)
return new Date(
date.valueOf() + date.getTimezoneOffset() * 60 * 1000
)
}
let date = formatDate(data.value.date)
data.value.date = format(date, 'EEE, MMMM do')
</script>
<template>
<div class="event" :id="data.slug">
<div class="hero">
<h3>{{ data.title }}</h3>
<h4><b>Location</b>: {{ data.location}}</h4>
<h4><b>Address</b>: {{ data.address }}</h4>
<h4><b>Date</b>: {{ data.date }} · {{ data.time }}</h4>
</div>
<ContentDoc class="details" />
</div>
</template>