<script setup lang="ts">
definePageMeta({
  layout: "content",
});
</script>

<template>
  <UContainer v-motion-fade class="prose dark:prose-invert">
    <h1>Articles</h1>
  </UContainer>

  <UContainer
    v-motion-fade
    :delay="500"
    class="flex flex-col md:gap-10 gap-5 !pt-0"
  >
    <ContentList :query="{ sort: [{ date: -1 }] }" v-slot="{ list }">
      <div v-for="article in list" :key="article._path">
        <ArticleListing
          :article="article"
          v-if="article._path?.startsWith('/articles')"
        />
      </div>
    </ContentList>
  </UContainer>

  <Footer v-motion-fade :delay="500" />
</template>
