ブログ一覧ページのデザイン改善 #426
ブログ一覧ページのデザイン改善 #426
Conversation
- Add new BlogCard component with featured image display - Update all blog list pages (index, paginated, tag pages) for consistency - Implement horizontal card layout on desktop, stacked on mobile - Add hover effects and improved visual presentation - Display fallback gradient placeholder when no featured image exists 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
- Add href="/posts" to Headline on individual blog post pages - Add hover effect to Headline component when it has a link 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add showMascots option to Headline component for displaying Suu and Toge - Enable mascots on Blog title header (desktop only) on blog list and article pages - Add MascotPeek peek-a-boo feature on blog list and individual article pages - Mascots link to /mascots page when clicked 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
Claudeのレビューも貼っておきます。 PR Review: fix/blog-list-design 概要 ブログ一覧ページのデザインリニューアルと、マスコットキャラクター（スー・トゲ）の追加を行う PR です。 変更ファイル: 7 ファイル (+194 / -143) コミット:
評価サマリー
🟢 low.nits: コードの重複 ファイル: 複数のブログ一覧ページ マスコットのひょっこり表示部分が複数ファイルで重複しています。 src/pages/posts/index.astro:62-68:
<a href="/mascots">
<MascotPeek character="suu" position="left" />
</a>
<a href="/mascots">
<MascotPeek character="toge" position="right" />
</a>これは src/pages/posts/[slug].astro:149-155 にも同様のコードがあります。 推奨: 将来的に BlogMascots.astro のような共通コンポーネントへの抽出を検討。ただし、現時点では 2 箇所のみなので必須ではありません。 🟢 low.nits: 未使用変数の削除漏れ ファイル: src/pages/posts/tag/[tag].astro currentTag 変数が削除されましたが、タグページで本当に不要か確認してください。元のコードではコメントアウトされていましたが、将来的にタグの色表示を復活させる可能性があります。 🔵 info.q: アクセシビリティの改善余地 ファイル: src/components/BlogCard.astro:25-26 <article class="bg-white rounded-xl ...">
<a href={postLink} class="block">カード全体がリンクになっていますが、スクリーンリーダーのユーザビリティ向上のため、以下を検討してください：
現状でも動作に問題はありませんが、ベストプラクティスとしてメモします。 🔵 info.q: 画像の alt 属性 ファイル: src/components/BlogCard.astro:33-36 <img
src={image}
alt={post.Title}
class="w-full h-full object-cover"
/>alt 属性に post.Title を使用していますが、アイキャッチ画像の場合、画像の内容を説明するテキストが別途あればそちらを使う方が適切です。現状は問題ありませんが、将来的に Notion 側で FeaturedImage.Caption ✅ 良い点
結論 Approve を推奨します。 コード品質、セキュリティ、パフォーマンスいずれも問題ありません。指摘事項はすべて low.nits または info.q レベルの軽微なもので、マージをブロックする理由はありません。 ブログページのデザインが統一され、マスコットの追加によりサイトの個性も向上しています。 |
Summary
Changes
src/components/BlogCard.astro- アイキャッチ画像付きブログカードコンポーネントsrc/pages/posts/index.astro- BlogCard使用に変更src/pages/posts/page/[page].astro- BlogCard使用に変更src/pages/posts/tag/[tag].astro- BlogCard使用に変更src/pages/posts/tag/[tag]/page/[page].astro- BlogCard使用に変更Test plan
/postsページでアイキャッチ画像が表示されることを確認🤖 Generated with Claude Code