docs: add OpenSpec proposal for homepage recent posts display
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
# Proposal: Display Recent Blog Posts on Homepage
|
||||
|
||||
## Problem
|
||||
When visitors land on the homepage, they need to navigate to the blog section through an additional click to discover recent content. This creates an unnecessary friction point and reduces content discoverability.
|
||||
|
||||
## Solution
|
||||
Display the 3 most recent blog posts directly on the homepage, right after the user's description section. The posts will be shown as a simple list containing:
|
||||
- Post title (linked to the full post)
|
||||
- Publication date
|
||||
|
||||
This provides immediate visibility of recent content without cluttering the homepage design.
|
||||
|
||||
## Scope
|
||||
|
||||
### In Scope
|
||||
- Modify homepage template to query and display 3 most recent blog posts
|
||||
- Display posts as a simple list with title and date
|
||||
- Ensure multilingual support (German/English)
|
||||
- Maintain responsive design and Bootstrap styling consistency
|
||||
|
||||
### Out of Scope
|
||||
- Post descriptions or summaries (only title and date)
|
||||
- Post thumbnails or images
|
||||
- Pagination or "view all" functionality beyond existing blog navigation
|
||||
- Filtering or categorization
|
||||
|
||||
## Success Criteria
|
||||
- Homepage displays exactly 3 most recent blog posts after the description section
|
||||
- Posts are displayed in both German and English versions of the homepage
|
||||
- Clicking a post title navigates to the full blog post
|
||||
- Design is consistent with existing site styling
|
||||
- Layout remains responsive on all device sizes
|
||||
- Hugo build completes without errors
|
||||
|
||||
## Dependencies
|
||||
- Existing blog section (already implemented)
|
||||
- Homepage template (layouts/index.html)
|
||||
- Blog content structure
|
||||
|
||||
## Impact
|
||||
- Improved content discoverability
|
||||
- Reduced friction for visitors discovering blog content
|
||||
- No breaking changes to existing functionality
|
||||
@@ -0,0 +1,87 @@
|
||||
# Spec: Homepage Recent Posts Display
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Display Recent Blog Posts on Homepage
|
||||
The homepage MUST display the 3 most recent blog posts immediately after the user's description content section.
|
||||
|
||||
#### Scenario: Three most recent posts are displayed
|
||||
**Given** the blog section contains 5 published posts
|
||||
**When** a visitor accesses the homepage
|
||||
**Then** exactly 3 most recent posts are displayed
|
||||
**And** posts are ordered by publication date (newest first)
|
||||
|
||||
#### Scenario: Fewer than three posts exist
|
||||
**Given** the blog section contains only 2 published posts
|
||||
**When** a visitor accesses the homepage
|
||||
**Then** all 2 posts are displayed
|
||||
**And** no error or empty slots are shown
|
||||
|
||||
#### Scenario: No blog posts exist
|
||||
**Given** the blog section contains no published posts
|
||||
**When** a visitor accesses the homepage
|
||||
**Then** the recent posts section is not displayed
|
||||
**And** the homepage layout remains intact
|
||||
|
||||
### Requirement: Post Display Format
|
||||
Each displayed blog post MUST show the post title as a clickable link and the publication date.
|
||||
|
||||
#### Scenario: Post title is clickable
|
||||
**Given** a blog post is displayed on the homepage
|
||||
**When** a visitor clicks the post title
|
||||
**Then** they are navigated to the full blog post page
|
||||
**And** the language context is preserved (German homepage → German post, English homepage → English post)
|
||||
|
||||
#### Scenario: Publication date is formatted correctly
|
||||
**Given** a blog post with date "2025-10-30" is displayed
|
||||
**When** viewing the German homepage
|
||||
**Then** the date is formatted as "30. October 2025"
|
||||
**When** viewing the English homepage
|
||||
**Then** the date is formatted as "October 30, 2025"
|
||||
|
||||
### Requirement: Multilingual Support
|
||||
The recent posts section MUST respect the site's multilingual configuration and display language-appropriate content.
|
||||
|
||||
#### Scenario: German homepage shows German posts
|
||||
**Given** the visitor accesses the German homepage (/de/)
|
||||
**When** the recent posts section is rendered
|
||||
**Then** only German blog posts are displayed
|
||||
**And** the section heading is in German (e.g., "Neueste Beiträge")
|
||||
|
||||
#### Scenario: English homepage shows English posts
|
||||
**Given** the visitor accesses the English homepage (/en/)
|
||||
**When** the recent posts section is rendered
|
||||
**Then** only English blog posts are displayed
|
||||
**And** the section heading is in English (e.g., "Recent Posts")
|
||||
|
||||
### Requirement: Visual Design and Layout
|
||||
The recent posts section MUST maintain consistency with the existing site design and remain responsive.
|
||||
|
||||
#### Scenario: Section styling matches site design
|
||||
**Given** the recent posts section is displayed
|
||||
**Then** it uses Bootstrap classes consistent with the rest of the site
|
||||
**And** spacing and typography match existing content sections
|
||||
**And** the section is visually distinct from the description section above
|
||||
|
||||
#### Scenario: Responsive layout on mobile devices
|
||||
**Given** the homepage is viewed on a mobile device (< 768px width)
|
||||
**When** the recent posts section is displayed
|
||||
**Then** the layout remains readable and properly formatted
|
||||
**And** no horizontal scrolling is required
|
||||
**And** links are easily tappable
|
||||
|
||||
### Requirement: Performance and Build
|
||||
The implementation MUST not negatively impact Hugo build performance or site load times.
|
||||
|
||||
#### Scenario: Hugo build completes successfully
|
||||
**Given** the homepage template includes recent posts query
|
||||
**When** running `hugo build`
|
||||
**Then** the build completes without errors or warnings
|
||||
**And** the homepage HTML is generated correctly for both languages
|
||||
|
||||
#### Scenario: Site performance remains optimal
|
||||
**Given** the homepage includes recent posts section
|
||||
**When** measuring page load performance
|
||||
**Then** Lighthouse performance score remains >90
|
||||
**And** no additional HTTP requests are made
|
||||
**And** HTML file size increase is minimal (< 2KB)
|
||||
@@ -0,0 +1,78 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user