gurixandClaude
0cc6e6a75e
Archive blog section proposal and update main specs. Specs created: - openspec/specs/blog-content/ - openspec/specs/blog-templates/ Archived to: openspec/changes/archive/2025-10-31-add-blog-section/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
5.3 KiB
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