<script setup lang="ts">
import { computed } from "vue";
import { data as posts } from "../composables/posts.data.js";

import BlogItem from "./BlogItem.vue";

const latestPosts = computed(() => {
  return posts.slice(0, 3);
});
</script>
<template>
  <Content />
  <div v-if="posts.length">
    <h1>Latest Blog Posts</h1>
    <ul class="blog-list">
      <li v-for="{ title, url, date, excerpt } of posts" :key="url">
        <BlogItem
          :url="url"
          :title="title"
          :date="date.string"
          :excerpt="excerpt"
        />
      </li>
    </ul>
  </div>
</template>

<style scoped>
.blog-list {
  list-style: none;
  margin: 1em;
  padding: 0;
}
</style>
