crbtc.org/components/index/Events.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-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>
    </div>
  </div>
</template>