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

• Modify layouts/index.html to query recent blog posts
• Add Hugo template logic to fetch 3 most recent posts from blog section
• Filter posts by current language context
• 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

• Add semantic HTML structure for recent posts section
• Include section heading (translatable: "Neueste Beiträge" / "Recent Posts")
• Display each post as list item with title link and date
• Apply Bootstrap classes for consistent styling
• 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

• Implement conditional heading based on language context
• German: "Neueste Beiträge" or "Aktuelle Artikel"
• English: "Recent Posts" or "Latest Articles"
• 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

• Build site with hugo command
• Verify German homepage (/de/) displays recent German posts
• Verify English homepage (/en/) displays recent English posts
• Test with different numbers of blog posts (0, 1, 2, 3, 5+)
• Check responsive layout on mobile viewport
• 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

• Measure HTML file size increase
• Verify no new HTTP requests added
• Confirm build time impact is negligible
• 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