Astro のブログを「トップページ＋セクション」構成に作り替える（ツール一覧も追加）

export const SITE_NAME = 'cyber-blow';
export const SITE_DESCRIPTION =
	'実際に手を動かして確かめたIT技術の情報と、Webツールを公開しているサイトです。';
export const BLOG_DESCRIPTION =
	'エラー解決・検証・比較・AIツール活用術など、実際に手を動かして確かめたIT技術情報を発信するブログ。';

---
import ArticleList from '../components/blog/ArticleList.astro';
import { SITE_DESCRIPTION, SITE_NAME } from '../consts';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getBlogSummaries } from '../lib/microcms';

const LATEST_POST_COUNT = 3;
const posts = (await getBlogSummaries()).slice(0, LATEST_POST_COUNT);
---

<BaseLayout>
	<section class="hero">
		<h1 class="hero-title">{SITE_NAME}</h1>
		<p class="hero-lead">{SITE_DESCRIPTION}</p>
	</section>

	<!-- セクション（/tools など）を増やしたら、ここに同じ形で並べる -->
	<section class="home-section">
		<div class="home-section-header">
			<h2>ブログ</h2>
			<a href="/blog/">すべての記事 →</a>
		</div>
		<ArticleList posts={posts} headingLevel={3} />
	</section>
</BaseLayout>

<BaseLayout title="ブログ" description={BLOG_DESCRIPTION}>
	<h1 class="page-title">ブログ</h1>
	<p class="page-lead">{BLOG_DESCRIPTION}</p>
	<ArticleList posts={posts.slice(0, POSTS_PER_PAGE)} />
	<Pagination currentPage={1} totalPages={totalPages} />
</BaseLayout>

src/components/
├── blog/
│   ├── ArticleCard.astro
│   ├── ArticleList.astro
│   ├── Pagination.astro
│   └── SeriesNav.astro
└── tools/          ← 後でツール一覧を作るときに追加
    ├── ToolCard.astro
    └── ToolList.astro

/** ヘッダーのナビゲーション。/tools などのセクションを増やしたらここに追加する */
export const NAV_ITEMS = [{ href: '/blog/', label: 'ブログ' }];

<nav class="site-nav">
	{
		NAV_ITEMS.map((item) => (
			<a
				href={item.href}
				aria-current={Astro.url.pathname.startsWith(item.href) ? 'true' : undefined}
			>
				{item.label}
			</a>
		))
	}
</nav>

.site-nav a[aria-current] {
	font-weight: 700;
}

interface Props {
	post: BlogSummary;
	/** 記事タイトルの見出しレベル。ページ内の見出し構造に合わせる */
	headingLevel?: 2 | 3;
}

const { post, headingLevel = 2 } = Astro.props;
const Heading = `h${headingLevel}` as const;

<Heading class="card-title">{post.title}</Heading>

export type Tool = MicroCMSListContent & {
	name: string;
	/** 一覧に出す説明 */
	description: string;
	/** ツール本体のURL */
	url: string;
	thumbnail?: MicroCMSImage;
	/** 使い方などの関連記事 */
	relatedBlogs?: Pick<Blog, 'id' | 'title'>[];
};

// 関連記事は本文まで返ってくると重いので、id と title だけに絞る
const TOOL_FIELDS = ['id', 'name', 'description', 'url', 'thumbnail', 'relatedBlogs.id', 'relatedBlogs.title'];

/** 全ツール。orders を指定しないので、microCMS 管理画面での並び順になる */
export function getTools(): Promise<Tool[]> {
	return client.getAllContents<Tool>({
		endpoint: 'tools',
		queries: { fields: TOOL_FIELDS },
	});
}

<article class="card">
	<a href={tool.url}>
		{/* …省略（サムネイル） */}
		<div class="card-body">
			<Heading class="card-title">{tool.name}</Heading>
			<p class="tool-description">{tool.description}</p>
		</div>
	</a>
	{
		relatedBlogs.length > 0 && (
			<div class="tool-related">
				<p class="tool-related-heading">関連記事</p>
				<ul>
					{relatedBlogs.map((blog) => (
						<li>
							<a href={`/blog/${blog.id}/`}>{blog.title}</a>
						</li>
					))}
				</ul>
			</div>
		)
	}
</article>

.card {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: box-shadow 0.15s;
}

.card:hover {
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

.card > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

---
import ToolList from '../../components/tools/ToolList.astro';
import { TOOLS_DESCRIPTION } from '../../consts';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getTools } from '../../lib/microcms';

const tools = await getTools();
---

<BaseLayout title="ツール" description={TOOLS_DESCRIPTION}>
	<h1 class="page-title">ツール</h1>
	<p class="page-lead">{TOOLS_DESCRIPTION}</p>
	<ToolList tools={tools} />
</BaseLayout>

/** ヘッダーのナビゲーション。セクションを増やしたらここに追加する */
export const NAV_ITEMS = [
	{ href: '/blog/', label: 'ブログ' },
	{ href: '/tools/', label: 'ツール' },
];

{
	tools.length > 0 && (
		<section class="home-section">
			<div class="home-section-header">
				<h2>ツール</h2>
				<a href="/tools/">すべてのツール →</a>
			</div>
			<ToolList tools={tools} headingLevel={3} />
		</section>
	)
}