lunasqu.ee-nuxt/components/blog-archive.vue

<template>
  <div class="blog-archives" v-for="entry in yearGroup">
    <div class="blog-archives__year">
      <NuxtLink :to="'/blog/archive/' + entry.year">{{ entry.year }}</NuxtLink>
    </div>
    <div class="blog-archives__posts">
      <article class="blog-archives__post" v-for="post in entry.posts">
        <header>
          <NuxtLink
            :to="'/blog/' + post.fullSlug"
            class="blog-archives__time"
            >{{ getStamp(post) }}</NuxtLink
          >
          <h1>
            <NuxtLink :to="'/blog/' + post.fullSlug">{{ post.title }}</NuxtLink>
          </h1>
        </header>
      </article>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { BlogPost } from '~~/lib/types/post';

interface Archive {
  year: number;
  posts: BlogPost[];
}

const props = defineProps<{ posts: BlogPost[] | null }>();

const monthNames = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const yearGroup = computed<Archive[]>(() => {
  const groups: Archive[] = [];

  props.posts
    ?.sort((a, b) =>
      new Date(b.date)
        .toISOString()
        .localeCompare(new Date(a.date).toISOString(), 'en', { numeric: true }),
    )
    .forEach((post) => {
      const date = new Date(post.date);
      const year = date.getFullYear();

      const contains = groups.find((item) => item.year === year);

      if (contains) {
        contains.posts.push(post);
        return;
      }

      groups.push({
        year,
        posts: [post],
      });
    });

  return groups;
});

const getStamp = (post: BlogPost) => {
  const date = new Date(post.date);
  return `${monthNames[date.getMonth()]} ${date.getDate()}`;
};
</script>