markusgraf_ch/openspec/changes/archive/2025-10-31-homepage-recent-posts/tasks.md

# Tasks: Display Recent Blog Posts on Homepage

## Implementation Tasks

### 1. Update Homepage Template
- [x] Modify `layouts/index.html` to query recent blog posts
- [x] Add Hugo template logic to fetch 3 most recent posts from blog section
- [x] Filter posts by current language context
- [x] Sort posts by publication date (descending)

**Validation:**
- Template syntax is correct (no Hugo build errors)
- Recent posts query respects language context
- Exactly 3 posts are retrieved (or fewer if less exist)

### 2. Implement Recent Posts Section UI
- [x] Add semantic HTML structure for recent posts section
- [x] Include section heading (translatable: "Neueste Beiträge" / "Recent Posts")
- [x] Display each post as list item with title link and date
- [x] Apply Bootstrap classes for consistent styling
- [x] Add appropriate spacing after description section

**Validation:**
- Section heading displays correctly in both languages
- Post titles are clickable links using `relPermalink`
- Dates are formatted using Hugo's date formatting
- Bootstrap classes match existing site patterns
- Visual spacing separates description from recent posts

### 3. Add Multilingual Section Headings
- [x] Implement conditional heading based on language context
- [x] German: "Neueste Beiträge" or "Aktuelle Artikel"
- [x] English: "Recent Posts" or "Latest Articles"
- [x] Use Hugo's language detection (`{{ .Language.Lang }}`)

**Validation:**
- German homepage shows German heading
- English homepage shows English heading
- Heading style matches other section headings on the site

### 4. Test and Verify
- [x] Build site with `hugo` command
- [x] Verify German homepage (/de/) displays recent German posts
- [x] Verify English homepage (/en/) displays recent English posts
- [x] Test with different numbers of blog posts (0, 1, 2, 3, 5+)
- [x] Check responsive layout on mobile viewport
- [x] Verify all links navigate correctly

**Validation:**
- Hugo build completes without errors
- Both language versions render correctly
- Edge cases handled (0 posts, < 3 posts)
- Links preserve language context
- Layout is responsive and accessible

### 5. Performance Check
- [x] Measure HTML file size increase
- [x] Verify no new HTTP requests added
- [x] Confirm build time impact is negligible
- [x] Optional: Run Lighthouse audit

**Validation:**
- File size increase < 2KB
- No additional network requests
- Build time difference < 100ms
- Performance score remains high

## Dependencies
- Task 1 must complete before Task 2
- Task 2 and 3 can be done in parallel or sequentially
- Task 4 requires all implementation tasks (1-3) complete
- Task 5 can be done after Task 4

## Notes
- Keep implementation minimal and focused on title + date only
- Use existing blog post querying patterns if any exist in the codebase
- Ensure null/empty checks to handle cases with no blog posts
- Consider using Hugo's `.Site.RegularPages` or `.Site.Taxonomies` for blog queries