# 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