79 lines
2.9 KiB
Markdown
79 lines
2.9 KiB
Markdown
|
# 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
|