Feature: Create blog post header with author, date, and tags #4
Description
Feature Description
Create a comprehensive blog post header section that displays author information, publication date, and tags in a clean, readable layout.
Requirements
- Display author name with profile link/avatar
- Show publication date in readable format
- Display post tags as clickable elements
- Responsive design for mobile and desktop
- Support for both English and Korean content
Header Components
- Author section: Name, avatar/profile image (optional)
- Publication date: Formatted date display
- Tags: Clickable tag pills/badges
- Reading time (optional): Estimated read time
- Last updated (optional): If different from publication date
Implementation Details
- Create reusable header component (
BlogPostHeader.astro) - Extract data from frontmatter (author, date, tags)
- Style with Tailwind CSS for consistent design
- Add TypeScript types for header props
- Implement responsive layout (mobile-first)
Technical Tasks
- Design header layout and spacing
- Create author data structure
- Format date display (locale-aware for i18n)
- Style tags with hover effects
- Add semantic HTML structure
- Ensure accessibility (proper headings, ARIA labels)
Design Requirements
- Clean, modern typography
- Consistent spacing and alignment
- Tag styling with hover states
- Mobile-responsive layout
- Dark theme support (if applicable)
- Visual hierarchy (title → author → date → tags)
Acceptance Criteria
- Header displays all required information clearly
- Tags are clickable and lead to filtered post views
- Responsive design works on all screen sizes
- Date formatting respects current language locale
- Component is reusable across all blog posts
- Accessible and semantic HTML structure
Reference
Based on the header layout shown in the provided screenshot with Korean blog post example.