chore: archive completed OpenSpec change add-blog-section
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>
This commit is contained in:
Claude
@@ -0,0 +1,83 @@
|
||||
# blog-content Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change add-blog-section. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Blog Section Organization
|
||||
Blog posts SHALL be organized in a dedicated `content/blog/` directory following Hugo's content organization conventions.
|
||||
|
||||
#### Scenario: Blog section exists in content directory
|
||||
**Given** the Hugo site structure
|
||||
**When** examining the content directory
|
||||
**Then** a `content/blog/` directory SHALL exist
|
||||
**And** section index files `_index.de.md` and `_index.en.md` SHALL exist in `content/blog/`
|
||||
**And** these index files SHALL contain appropriate front matter (title, description)
|
||||
|
||||
#### Scenario: Blog posts use page bundles
|
||||
**Given** a blog post to be published
|
||||
**When** adding the post to the site
|
||||
**Then** the post SHALL be organized as a page bundle (directory with `index.de.md` or `index.en.md`)
|
||||
**And** the bundle directory name SHALL be URL-friendly (lowercase, hyphens, no special characters)
|
||||
**And** any post-specific assets (images, files) CAN be stored within the bundle directory
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Blog Post Front Matter
|
||||
Each blog post SHALL include properly structured front matter with essential metadata.
|
||||
|
||||
#### Scenario: Blog post front matter is complete
|
||||
**Given** a blog post markdown file
|
||||
**When** the post is processed by Hugo
|
||||
**Then** the front matter SHALL include a `title` field
|
||||
**And** the front matter SHALL include a `date` field in ISO 8601 format (YYYY-MM-DD)
|
||||
**And** the front matter MAY include a `description` or `summary` field for excerpts
|
||||
**And** the front matter MAY include a `draft` field to control publication status
|
||||
|
||||
#### Scenario: First blog post is ready
|
||||
**Given** the Notion article "KI Generierte Website - ein Praxisbeispiel"
|
||||
**When** converting it to Hugo format
|
||||
**Then** a blog post SHALL exist at `content/blog/ki-generierte-website-praxisbeispiel/index.de.md`
|
||||
**And** the post SHALL contain the full article content from Notion
|
||||
**And** the front matter SHALL include title "KI Generierte Website - ein Praxisbeispiel"
|
||||
**And** the front matter SHALL include an appropriate publication date
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Multilingual Blog Support
|
||||
Blog content SHALL support both German and English following the site's internationalization pattern.
|
||||
|
||||
#### Scenario: Blog section metadata is multilingual
|
||||
**Given** the blog section
|
||||
**When** accessing the blog in different languages
|
||||
**Then** `content/blog/_index.de.md` SHALL exist with German metadata
|
||||
**And** `content/blog/_index.en.md` SHALL exist with English metadata
|
||||
**And** both SHALL have appropriate translated titles and descriptions
|
||||
|
||||
#### Scenario: Blog posts can exist in multiple languages
|
||||
**Given** a blog post
|
||||
**When** translations are available
|
||||
**Then** the post MAY have both `index.de.md` and `index.en.md` in the same bundle
|
||||
**And** Hugo SHALL serve the appropriate language version based on the URL path
|
||||
**And** language switching SHALL work between translated blog posts
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Content Formatting
|
||||
Blog post content SHALL be written in Markdown with proper formatting support.
|
||||
|
||||
#### Scenario: Markdown content renders correctly
|
||||
**Given** a blog post with Markdown content
|
||||
**When** Hugo processes the post
|
||||
**Then** headings (H1-H6) SHALL be rendered correctly
|
||||
**And** paragraphs, lists, and emphasis SHALL be formatted properly
|
||||
**And** code blocks with syntax highlighting SHALL be supported
|
||||
**And** links and images SHALL be rendered correctly
|
||||
**And** HTML content SHALL be allowed (Hugo's unsafe renderer is enabled in config)
|
||||
|
||||
#### Scenario: Special characters and formatting are preserved
|
||||
**Given** blog post content with German special characters (ä, ö, ü, ß)
|
||||
**When** the post is rendered
|
||||
**Then** all special characters SHALL display correctly
|
||||
**And** quotation marks and em dashes SHALL be preserved
|
||||
**And** UTF-8 encoding SHALL be maintained throughout
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
# 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
|
||||
|
||||
Reference in New Issue
Block a user