Astro × microCMS でブログに連載機能を作る（第N回の自動採番・目次・前後リンク）

export type Series = MicroCMSListContent & {
	name: string;
	description?: string;
};

export type Blog = MicroCMSListContent & {
	// …省略（title・content など）
	/** 連載の記事なら、その連載 */
	series?: Series | null;
	/** 連載内の並び順（小さい順に第1回、第2回…） */
	seriesOrder?: number;
};

const SUMMARY_FIELDS = [
	'id',
	'title',
	'description',
	'eyecatch',
	'category',
	'pr',
	'series',
	'seriesOrder',
	// …省略（createdAt などの日時）
];

import type { BlogSummary, Series } from './microcms';

export type SeriesEntry<T extends BlogSummary = BlogSummary> = {
	series: Series;
	/** 第1回から順に並んだ記事 */
	posts: T[];
};

/** 記事を連載ごとにまとめる（連載に属さない記事は含まない） */
export function groupBySeries<T extends BlogSummary>(posts: T[]): SeriesEntry<T>[] {
	const entries = new Map<string, SeriesEntry<T>>();
	for (const post of posts) {
		if (!post.series) continue;
		const entry = entries.get(post.series.id) ?? { series: post.series, posts: [] };
		entry.posts.push(post);
		entries.set(post.series.id, entry);
	}
	for (const { posts } of entries.values()) posts.sort(compareSeriesOrder);
	return [...entries.values()];
}

// seriesOrder の小さい順。未入力の記事は後ろに回し、公開日順に並べる
function compareSeriesOrder(a: BlogSummary, b: BlogSummary): number {
	return (a.seriesOrder ?? Infinity) - (b.seriesOrder ?? Infinity) || publishedTime(a) - publishedTime(b);
}

function publishedTime(post: BlogSummary): number {
	return Date.parse(post.publishedAt ?? post.createdAt);
}

export const getStaticPaths = (async () => {
	const blogs = await getAllBlogs();
	const seriesById = new Map(groupBySeries(blogs).map((entry) => [entry.series.id, entry]));
	return blogs.map((blog) => ({
		params: { id: blog.id },
		props: { blog, seriesEntry: blog.series ? seriesById.get(blog.series.id) : undefined },
	}));
}) satisfies GetStaticPaths;

const { blog, seriesEntry } = Astro.props;
const seriesNumber = seriesEntry ? seriesEntry.posts.findIndex((post) => post.id === blog.id) + 1 : 0;

{
	seriesEntry && (
		<a class="series-label" href={`/blog/series/${seriesEntry.series.id}/`}>
			連載「{seriesEntry.series.name}」第{seriesNumber}回
		</a>
	)
}

---
import type { SeriesEntry } from '../lib/series';

interface Props {
	entry: SeriesEntry;
	currentId: string;
}

const { entry, currentId } = Astro.props;
const { series, posts } = entry;
const index = posts.findIndex((post) => post.id === currentId);
const prev = posts[index - 1];
const next = posts[index + 1];
---

<nav class="series-nav" aria-label="連載の目次">
	<p class="series-nav-heading">
		連載「<a href={`/blog/series/${series.id}/`}>{series.name}</a>」
	</p>
	<ol class="series-parts">
		{
			posts.map((post) => (
				<li>
					{post.id === currentId ? (
						<span aria-current="page">{post.title}</span>
					) : (
						<a href={`/blog/${post.id}/`}>{post.title}</a>
					)}
				</li>
			))
		}
	</ol>
	<div class="series-nav-pager">
		{
			prev ? (
				<a href={`/blog/${prev.id}/`} rel="prev">
					← 前の回
				</a>
			) : (
				<span />
			)
		}
		{
			next ? (
				<a href={`/blog/${next.id}/`} rel="next">
					次の回 →
				</a>
			) : (
				<span />
			)
		}
	</div>
</nav>

<div class="prose" set:html={content} />

{seriesEntry && <SeriesNav entry={seriesEntry} currentId={blog.id} />}

/* 「第1回」「第2回」…を自動で振る */
.series-parts {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: part;
}

.series-parts li {
	counter-increment: part;
}

.series-parts li::before {
	content: '第' counter(part) '回';
	margin-right: 0.75em;
	color: var(--color-muted);
	font-size: 0.85em;
	white-space: nowrap;
}

---
import type { GetStaticPaths } from 'astro';
import BaseLayout from '../../../layouts/BaseLayout.astro';
import { formatDate } from '../../../lib/date';
import { getBlogSummaries } from '../../../lib/microcms';
import { groupBySeries } from '../../../lib/series';

export const getStaticPaths = (async () => {
	const posts = await getBlogSummaries();
	return groupBySeries(posts).map((entry) => ({
		params: { id: entry.series.id },
		props: entry,
	}));
}) satisfies GetStaticPaths;

const { series, posts } = Astro.props;
---

<BaseLayout title={`連載「${series.name}」`} description={series.description}>
	<div class="series-page">
		<h1 class="page-title">連載「{series.name}」</h1>
		{series.description && <p class="series-description">{series.description}</p>}
		<ol class="series-parts series-parts-large">
			{
				posts.map((post) => {
					const publishedAt = post.publishedAt ?? post.createdAt;
					return (
						<li>
							<a href={`/blog/${post.id}/`}>{post.title}</a>
							<time datetime={publishedAt}>{formatDate(publishedAt)}</time>
						</li>
					);
				})
			}
		</ol>
	</div>
</BaseLayout>