レイアウトを整えるためのメモ

コンポーネントを分けすぎると管理が大変ですが、最低限のレイアウト分離は保守性を高めます。

分割の指針

1. サイト全体で共有する部分はBaseLayout
2. 記事に特化した枠組みはPostLayout
3. 個別ページの細かい装飾は、各ページで完結させる

小さなコンポーネントで整える

HeaderやFooterはガラス風のカードにし、テーマ切り替えとナビゲーションを持たせます。カード風のリストにするだけで、情報がまとまり読みやすくなります。

---
import PostLayout from '@layouts/PostLayout.astro';
const { Content, headings } = await Astro.props.post.render();
---

<PostLayout post={Astro.props.post} headings={headings}>
  <Content />
</PostLayout>

細かなデザインはTailwindのユーティリティを少し足す程度で十分。まずは文章を書いて、後で磨くのがおすすめです。