crbtc.org/components/index/Events.vue

42 lines
1.4 KiB
Vue
Raw Normal View History

2023-07-17 19:11:13 +00:00
<script setup>
const events = await queryContent('event')
.sort({ priority: 1 })
.only(['title', 'slug', 'location', 'date', 'day', 'time', 'meetup', 'priority'])
2023-07-17 19:11:13 +00:00
.limit(3)
.find()
2023-11-29 04:07:09 +00:00
import { format, isPast, addMinutes, addDays, parseISO } from "date-fns";
2023-07-17 19:11:13 +00:00
for (let i = 0; i < events.length; i++) {
let date = parseISO(events[i].date)
2023-11-29 04:07:09 +00:00
events[i].past = isPast(addDays(date, 1))
events[i].date = format(addMinutes(date, 240), 'EEE, MMM d')
}
// peterfisher.me.uk/blog/javascript-sort-by-soonest-date-object/
// Used for login redirect
// ?action=attend&ref=' + event.slug
2023-07-17 19:11:13 +00:00
</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>
2023-07-17 19:11:13 +00:00
</div>
<div v-bind:class="(event.meetup)?'attend both':'attend bottom'" >
<NuxtLink v-if="!event.past" href="/login" >Attend event</NuxtLink>
</div>
<div class="meetup bottom">
<NuxtLink v-if="event.meetup" target="_BLANK"
:to="'https://www.meetup.com/capitalregionbitcoinnetwork/events/' + event.meetup + '/'">Meetup.com</NuxtLink>
</div>
2023-07-17 19:11:13 +00:00
</div>
</div>
</template>