Something went wrong. Try again.
my website
Something went wrong. Try again.
1.9 kB · 73 lines
Astro
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374---import { getCollection } from "astro:content";import PrettyDate from "./PrettyDate.astro";// import Tags from "./Tags.astro";import type { CollectionEntry } from "astro:content";
interface Props { limit?: number;}
const { limit = Infinity } = Astro.props;
const posts = (await getCollection("blog")) .sort((a, b) => b.data.publish_date.valueOf() - a.data.publish_date.valueOf()) .slice(0, limit);
type Post = CollectionEntry<"blog">;
const postsByYear = Object.entries( posts.reduce( (acc, post) => { const year = post.data.publish_date.getFullYear().toString(); acc[year] ??= []; acc[year].push(post); return acc; }, {} as Record<string, Post[]>, ),).sort(([year1], [year2]) => year2.localeCompare(year1));---
<div class="posts"> { postsByYear.map(([year, posts]) => { if (!posts) return null;
return ( <> <h3>{year}</h3> <ul> {posts.map( ({ id, data: { title, description: snippet, publish_date, hero_image, // tags, }, }) => ( <li> <div class="flex gap-2 items-center"> <a href={`/blog/${id}`} class="leading-tight inline-block" transition:name={`post-title-${id}`} > {title} </a> <div class="border-b border-dashed self-center flex-1" /> <PrettyDate date={publish_date ?? new Date()} /> </div> <p transition:name={`post-snippet-${id}`}>{snippet}</p> </li> ), )} </ul> </> ); }) }</div>