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

const sortedPosts = computed(() => {
  return [...posts].sort((a, b) => b.date.time - a.date.time);
});
</script>

<template>
  <div class="blog-index">
    <h1>All Posts</h1>
    <ul class="blog-list">
      <li v-for="post in sortedPosts" :key="post.url">
        <BlogItem
          :url="post.url"
          :title="post.title"
          :date="post.date.string"
          :excerpt="post.excerpt"
        />
      </li>
    </ul>
  </div>
</template>

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