<script setup>

  const products = await queryContent('products')
    .sort({ priority: 1 })
    .where({ public: true })
    .find()

</script>

<template>
  <div class="cards center">
    <div class="card" v-for="product in products" :key="product.slug">
      <div class="details">
        <h3>{{ product.project }} —</h3>
        <p class="desc">{{ product.description }}</p>
        <NuxtLink :to="'/products/' + product.slug" class="primary" >Overview <span class="icon-arrow-right"></span></NuxtLink>
        <NuxtLink :to="product.url" target="_BLANK" class="secondary" >Visit website</NuxtLink>
      </div>
    </div>
  </div>
</template>