<script setup>

  const { isDesktopOrTablet } = useDevice();

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

  import { format, addMinutes, parseISO } from "date-fns";

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

</script>

<template>
  <div class="journal">
    <div class="msg">
      <h2><span>Get.Notified</span><br> by Inspin Digital</h2>
      <p>An epic chronicle of the decentralized web, <br v-if="isDesktopOrTablet">libre software, and community updates.</p>
    </div>
    <div class="cards-container">
      <div class="scroll">
        <a href="#first" aria-label="Scroll news articles right"><span class="icon-arrow-left"></span></a>
        <a href="#last" aria-label="Scroll news articles left"><span class="icon-arrow-right"></span></a>
      </div>
      <div class="cards">
        <div class="card" :id="index === 0 ? 'first' : null" v-for="(article, index) in articles" :key="index">
          <NuxtLink :href="'/articles/' + article.slug">
            <img :src="article.image.src" :alt="article.image.alt" />
            <h3>{{ article.preview }}</h3>
            <p class="date">{{ article.published }}</p>
            <p class="tags" v-for="tag in article.tags">
              {{ tag }}
            </p>
          </NuxtLink>
        </div>
        <div class="card card-last" id="last">
          <h4>Continue Reading</h4>
          <p>Explore resources, software <br/>guides, and community posts</p>
          <NuxtLink href="/articles">View More<span class="icon-chevron-right"></span></NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>