45 lines
1.1 KiB
Vue
45 lines
1.1 KiB
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, getDay, parseISO } from "date-fns";
|
||
|
|
|
||
|
|
const nth = function(d) {
|
||
|
|
if (d > 3 && d < 21) return 'th';
|
||
|
|
switch (d % 10) {
|
||
|
|
case 1: return "st";
|
||
|
|
case 2: return "nd";
|
||
|
|
case 3: return "rd";
|
||
|
|
default: return "th";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let date = parseISO(data.value.date)
|
||
|
|
data.value.date = format(date, 'EEE, MMMM d')
|
||
|
|
data.value.ordinal = nth(getDay(date) - 1)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="event" :id="data.slug">
|
||
|
|
<div class="hero">
|
||
|
|
<h3>{{ data.title }}</h3>
|
||
|
|
<h4>Location: {{ data.location}}</h4>
|
||
|
|
<h4>Address: {{ data.address }}</h4>
|
||
|
|
<h4>Date: {{ data.date }}{{ data.ordinal }} at {{ data.time }}</h4>
|
||
|
|
<!-- <EventDate :date="data.date" :time="data.time" /> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|