<script setup>
  useHead({
    title: 'Inspin Digital | Get Notified',
    meta: [
      { 
        name: 'description', 
        content: `Get Notified by Inspin Digital. An epic chronicle of the dweb, libre software, and community updates.` 
      },      
    ],
  })

  const articles = await queryContent('articles')
    .sort({ date: -1 })
    .where({ public: true })
    .only(['slug','image', 'description', 'date', 'tags', 'heading'])
    .limit(4)
    .find()


  // Format article dates
  import { format } from "date-fns";

  let formatDate = (date) => {
    date = new Date(date)
    return new Date(
      date.valueOf() + date.getTimezoneOffset() * 60 * 1000
    )
  }

  for (let i = 0; i < articles.length; i++) {
    let date = formatDate(articles[i].date)
    articles[i].published = format(date, 'MMM do, yyy')
  }

</script>

<template>
  <div class="article">
    <div class="heading center">
      <h2>Get.Notified</h2>
      <p>An epic chronicle of the dweb, libre software, and community updates.</p>
    </div>
    <div class="cards center">
      <div class="card" :id="'card-' + index" v-for="(article, index) in articles" :key="index">
        <NuxtLink :href="'/articles/' + article.slug">
          <img :src="article.image.src" :alt="article.image.alt" />
          <div class="meta">
            <h3>{{ article.heading }}</h3>
            <p class="desc">{{ article.description }}</p>
            <p class="date">{{ article.published }}</p>
            <p class="tags" v-for="tag in article.tags">
              {{ tag }}
            </p>
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>