ブログにドラフト機能を追加します。

Astro では frontmatter で draft: true を設定した上で、記事のリスト作成時にこれを考慮するようにします。

// src/pages/blog/index.astro
const posts = (await getCollection('blog'))
	.filter((post) => {
		// Show drafts in DEV mode, hide in PROD
		if (import.meta.env.DEV) return true;
		return !post.data.draft;
	})
	.map(getPostMetadata)
	.sort(sortPosts);

// src/utils/blog.ts
export function sortPosts(
	a: { data: { pubDate?: Date } },
	b: { data: { pubDate?: Date } },
) {
	const aDate = a.data.pubDate?.valueOf();
	const bDate = b.data.pubDate?.valueOf();

	if (aDate === undefined && bDate === undefined) return 0;
	if (aDate === undefined) return -1;
	if (bDate === undefined) return 1;

	return bDate - aDate;
}

また、プレビュー時にドラフトであることがわかるように表示します。

// src/pages/blog/index.astro
{
	post.data.draft && (
		<div class="absolute top-4 right-4 z-20 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded shadow-md">
			DRAFT
		</div>
	);
}

次のファイルにも同様の変更を行いました。

• src\pages\blog[…slug].astro
• src\pages\tags[tag].astro