50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script setup>
|
|
|
|
const events = await queryContent('event')
|
|
.sort({ priority: 1 })
|
|
.only(['title', 'slug', 'location', 'date', 'day', 'time', 'meetup', 'priority'])
|
|
.limit(3)
|
|
.find()
|
|
|
|
import { format, isPast, addDays } from "date-fns";
|
|
|
|
let formatDate = (date) => {
|
|
date = new Date(date)
|
|
return new Date(
|
|
date.valueOf() + date.getTimezoneOffset() * 60 * 1000
|
|
)
|
|
}
|
|
|
|
for (let i = 0; i < events.length; i++) {
|
|
|
|
let date = formatDate(events[i].date)
|
|
events[i].past = isPast(addDays(date, 1))
|
|
events[i].date = format(date, 'EEE, MMM d')
|
|
}
|
|
|
|
// peterfisher.me.uk/blog/javascript-sort-by-soonest-date-object/
|
|
|
|
// Used for login redirect
|
|
// ?action=attend&ref=' + event.slug
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="events" id="events">
|
|
<h4>Upcoming Events</h4>
|
|
<div v-bind:class="(event.past)?'event past':'event'" v-for="event in events" :key="event.slug">
|
|
<div class="info">
|
|
<NuxtLink :to="'/event/' + event.slug"><h5>{{ event.title }}</h5></NuxtLink>
|
|
<p class="location">{{ event.location }}</p>
|
|
<p>{{ event.date }} · {{ event.time }}</p>
|
|
</div>
|
|
<div v-if="!event.past" v-bind:class="(event.meetup)?'attend both':'attend bottom'" >
|
|
<NuxtLink href="/login" >Attend event</NuxtLink>
|
|
</div>
|
|
<div v-if="event.meetup" class="meetup bottom">
|
|
<NuxtLink target="_BLANK"
|
|
:to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |