80 lines
2.2 KiB
Plaintext
80 lines
2.2 KiB
Plaintext
---
|
|
import type { BlogPost } from '@/lib/posts';
|
|
|
|
interface Props {
|
|
posts: BlogPost[];
|
|
}
|
|
|
|
type ArchiveMonth = {
|
|
key: string;
|
|
label: string;
|
|
posts: BlogPost[];
|
|
};
|
|
|
|
type ArchiveYear = {
|
|
year: number;
|
|
count: number;
|
|
months: ArchiveMonth[];
|
|
};
|
|
|
|
const { posts } = Astro.props;
|
|
const monthFormatter = new Intl.DateTimeFormat('zh-CN', { month: 'long' });
|
|
const dayFormatter = new Intl.DateTimeFormat('zh-CN', { day: '2-digit' });
|
|
const archiveYears = posts.reduce<ArchiveYear[]>((years, post) => {
|
|
const year = post.date.getFullYear();
|
|
const monthKey = `${year}-${String(post.date.getMonth() + 1).padStart(2, '0')}`;
|
|
let yearGroup = years.find((item) => item.year === year);
|
|
|
|
if (!yearGroup) {
|
|
yearGroup = { year, count: 0, months: [] };
|
|
years.push(yearGroup);
|
|
}
|
|
|
|
let monthGroup = yearGroup.months.find((item) => item.key === monthKey);
|
|
|
|
if (!monthGroup) {
|
|
monthGroup = {
|
|
key: monthKey,
|
|
label: monthFormatter.format(post.date),
|
|
posts: [],
|
|
};
|
|
yearGroup.months.push(monthGroup);
|
|
}
|
|
|
|
yearGroup.count += 1;
|
|
monthGroup.posts.push(post);
|
|
|
|
return years;
|
|
}, []);
|
|
---
|
|
|
|
<div class="archive-timeline">
|
|
{archiveYears.map((yearGroup) => (
|
|
<section class="archive-year" aria-labelledby={`archive-year-${yearGroup.year}`}>
|
|
<div class="archive-year-marker" aria-hidden="true"></div>
|
|
<header class="archive-year-head">
|
|
<h2 id={`archive-year-${yearGroup.year}`}>{yearGroup.year}</h2>
|
|
<span>{yearGroup.count} 篇</span>
|
|
</header>
|
|
<div class="archive-months">
|
|
{yearGroup.months.map((monthGroup) => (
|
|
<section class="archive-month" aria-label={`${yearGroup.year} ${monthGroup.label}`}>
|
|
<div class="archive-month-label">
|
|
<span>{monthGroup.label}</span>
|
|
<small>{monthGroup.posts.length} 篇</small>
|
|
</div>
|
|
<div class="archive-list">
|
|
{monthGroup.posts.map((post) => (
|
|
<a href={post.href}>
|
|
<time datetime={post.date.toISOString()}>{dayFormatter.format(post.date)}</time>
|
|
<span>{post.title}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|