123 lines
5.2 KiB
Markdown
123 lines
5.2 KiB
Markdown
 
|
# Blog Templates
|
||
|
|
|
||
|
|
## ADDED 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
|