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

82 lines
1.7 KiB
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 { 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>