markusgraf_ch/openspec/specs/blog-templates/spec.md

# blog-templates Specification

## Purpose
TBD - created by archiving change add-blog-section. Update Purpose after archive.
## Requirements
### Requirement: Blog List Template
A blog list template SHALL display all published blog posts in a organized, user-friendly format.

#### Scenario: Blog list page renders with posts
**Given** published blog posts exist in `content/blog/`
**When** a user navigates to `/de/blog/` or `/en/blog/`
**Then** a blog list page SHALL be rendered using `layouts/blog/list.html`
**And** the page SHALL display all non-draft blog posts
**And** posts SHALL be sorted by date (most recent first)

#### Scenario: Blog list shows post metadata
**Given** the blog list page
**When** displaying each blog post entry
**Then** each entry SHALL show the post title as a link to the full post
**And** each entry SHALL show the publication date
**And** each entry MAY show a summary or excerpt of the post
**And** the title link SHALL navigate to the full blog post page

#### Scenario: Blog list is responsive
**Given** the blog list page
**When** viewed on different screen sizes
**Then** the layout SHALL be responsive using Bootstrap grid
**And** the page SHALL be readable on mobile devices (≥320px width)
**And** the page SHALL adapt to tablet and desktop viewports
**And** spacing and typography SHALL remain consistent with site design

---

### Requirement: Blog Post Single Template
Individual blog posts SHALL be displayed with a dedicated single post template providing optimal reading experience.

#### Scenario: Blog post page renders content
**Given** a blog post at `content/blog/ki-generierte-website-praxisbeispiel/index.de.md`
**When** a user navigates to `/de/blog/ki-generierte-website-praxisbeispiel/`
**Then** the post SHALL be rendered using `layouts/blog/single.html`
**And** the page SHALL display the post title as the main heading (H1)
**And** the page SHALL display the publication date
**And** the page SHALL display the full post content with proper formatting

#### Scenario: Blog post content is readable
**Given** a rendered blog post
**When** viewing the post content
**Then** headings SHALL use appropriate hierarchy (H2, H3, etc. for sections)
**And** paragraphs SHALL have readable line height and spacing
**And** code blocks SHALL be distinguishable with appropriate styling
**And** links SHALL be clearly identifiable and accessible
**And** images SHALL be responsive and properly sized

#### Scenario: Blog post has navigation
**Given** a blog post page
**When** a user finishes reading
**Then** the page SHALL include a link back to the blog list
**And** the navigation link SHALL be clearly visible
**And** the site's main navigation SHALL remain accessible

---

### Requirement: Blog Navigation Integration
The blog section SHALL be accessible through the site's main navigation.

#### Scenario: Blog link in main navigation
**Given** the site configuration
**When** rendering the main navigation menu
**Then** a "Blog" link SHALL appear in the navigation for German pages
**And** a "Blog" link SHALL appear in the navigation for English pages
**And** the link SHALL point to `/de/blog/` for German
**And** the link SHALL point to `/en/blog/` for English

#### Scenario: Active state for blog pages
**Given** a user is on a blog page (list or single post)
**When** viewing the navigation menu
**Then** the "Blog" link SHALL have an active state indicator
**And** the active state SHALL use the same styling as other active navigation items
**And** the active state SHALL be maintained on both blog list and single post pages

---

### Requirement: Blog Template Semantic HTML
Blog templates SHALL use semantic HTML5 elements for accessibility and SEO.

#### Scenario: Blog list uses semantic structure
**Given** the blog list template
**When** rendering the page
**Then** the main content SHALL be wrapped in a `<main>` element
**And** individual blog post entries SHALL use `<article>` elements
**And** post metadata SHALL use appropriate semantic tags (e.g., `<time>` for dates)
**And** heading hierarchy SHALL be logical and sequential

#### Scenario: Blog post uses article structure
**Given** a blog post template
**When** rendering the page
**Then** the post SHALL be wrapped in an `<article>` element
**And** the post SHALL have a `<header>` with title and metadata
**And** the post content SHALL be in a `<div>` or `<section>` with clear semantic structure
**And** all headings SHALL follow proper hierarchy

---

### Requirement: Blog Styling Consistency
Blog templates SHALL maintain visual consistency with the rest of the site.

#### Scenario: Blog pages use site styling
**Given** any blog page (list or single)
**When** the page is rendered
**Then** the page SHALL use the site's base layout (`baseof.html`)
**And** the page SHALL include the site's header and footer partials
**And** the page SHALL use Bootstrap classes for styling
**And** typography SHALL be consistent with other site pages
**And** color scheme SHALL match the site's design

#### Scenario: Blog pages are accessible
**Given** any blog page
**When** evaluated for accessibility
**Then** the page SHALL meet WCAG 2.1 AA standards
**And** all interactive elements SHALL be keyboard accessible
**And** color contrast ratios SHALL meet minimum requirements
**And** images SHALL have appropriate alt text (if any)
**And** the page SHALL have appropriate semantic structure for screen readers