<template>
  <div>
    <h1 class="text-4xl font-bold mb-8">最新文章</h1>
    <div class="grid gap-6">
      <ContentList path="/" v-slot="{ list }">
        <div v-for="article in list" :key="article._path" class="bg-white shadow rounded-lg p-6">
          <NuxtLink :to="article._path">
            <h2 class="text-2xl font-bold mb-2">{{ article.title }}</h2>
            <p class="text-gray-600">{{ article.description }}</p>
            <div class="mt-4 text-sm text-gray-500">
              {{ new Date(article.date).toLocaleDateString() }}
            </div>
          </NuxtLink>
        </div>
      </ContentList>
    </div>
  </div>
</template>
