markusgraf_ch/openspec/specs/homepage-recent-posts/spec.md

# homepage-recent-posts Specification

## Purpose
TBD - created by archiving change homepage-recent-posts. Update Purpose after archive.
## 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)