feat: initialize Hugo static site with Bootstrap 5.x
Initialize minimal Hugo site structure with Bootstrap 5.3.2 integration for markusgraf.ch conversion. Implements OpenSpec proposal add-minimal-hugo-site. Features: - Hugo project structure with standard directories - Base layout template (baseof.html) with Bootstrap 5.3.2 via CDN - Homepage (index.html) and single page (single.html) templates - Reusable partials: header, footer, navigation - Responsive Bootstrap grid layout - Mobile-first design with semantic HTML5 - Valid HTML output with basic accessibility features - Taxonomies disabled for minimal site (see docs/TAXONOMIES.md) Documentation: - IMPLEMENTATION_SUMMARY.md - Complete implementation guide - docs/TAXONOMIES.md - Guide for re-enabling categories/tags - static/README.md - Guide for placing static assets Configuration: - hugo.toml configured for markusgraf.ch - .gitignore for Hugo build artifacts All 24 tasks from OpenSpec proposal completed successfully. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Markus Graf
@@ -0,0 +1,129 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Hugo Project Structure
|
||||
The system SHALL initialize a Hugo static site with the standard directory structure including layouts, content, static, and data directories.
|
||||
|
||||
#### Scenario: Hugo site initialized
|
||||
- **WHEN** Hugo site is created
|
||||
- **THEN** the following directories exist: layouts/, content/, static/, data/
|
||||
- **AND** a hugo.toml configuration file is present at the root
|
||||
|
||||
#### Scenario: Hugo builds successfully
|
||||
- **WHEN** running `hugo` command
|
||||
- **THEN** the site builds without errors
|
||||
- **AND** generates static HTML files in the public/ directory
|
||||
|
||||
### Requirement: Base Layout Template
|
||||
The system SHALL provide a baseof.html template that defines the common HTML structure for all pages, including Bootstrap 5.x integration.
|
||||
|
||||
#### Scenario: Base layout includes Bootstrap
|
||||
- **WHEN** any page is rendered
|
||||
- **THEN** the HTML output includes Bootstrap 5.x CSS from CDN
|
||||
- **AND** the page has proper HTML5 doctype and meta tags
|
||||
- **AND** the page is responsive with Bootstrap's viewport meta tag
|
||||
|
||||
#### Scenario: Base layout includes header and footer
|
||||
- **WHEN** any page is rendered
|
||||
- **THEN** the page includes the header partial
|
||||
- **AND** the page includes the footer partial
|
||||
- **AND** the main content block is properly positioned between them
|
||||
|
||||
### Requirement: Reusable Partials
|
||||
The system SHALL provide reusable partial templates for header, footer, and navigation components.
|
||||
|
||||
#### Scenario: Header partial exists
|
||||
- **WHEN** baseof.html calls the header partial
|
||||
- **THEN** the header is rendered with consistent styling across all pages
|
||||
|
||||
#### Scenario: Footer partial exists
|
||||
- **WHEN** baseof.html calls the footer partial
|
||||
- **THEN** the footer is rendered with consistent styling across all pages
|
||||
|
||||
#### Scenario: Navigation partial exists
|
||||
- **WHEN** header includes navigation
|
||||
- **THEN** the navigation menu renders with links to main pages
|
||||
- **AND** uses Bootstrap navigation components
|
||||
|
||||
### Requirement: Homepage Template
|
||||
The system SHALL provide an index.html template for the homepage that extends baseof.html and displays the main landing content.
|
||||
|
||||
#### Scenario: Homepage renders correctly
|
||||
- **WHEN** accessing the root URL
|
||||
- **THEN** the homepage template is used
|
||||
- **AND** displays content from content/_index.md
|
||||
- **AND** matches the structure of the existing markusgraf.ch homepage
|
||||
|
||||
### Requirement: Single Page Template
|
||||
The system SHALL provide a default single.html template for individual content pages.
|
||||
|
||||
#### Scenario: Single page renders correctly
|
||||
- **WHEN** accessing any content page
|
||||
- **THEN** the single page template is used
|
||||
- **AND** displays the page title
|
||||
- **AND** renders the markdown content as HTML
|
||||
|
||||
### Requirement: Static Assets
|
||||
The system SHALL serve static assets (images, fonts, CSS files) from the static/ directory.
|
||||
|
||||
#### Scenario: Static files are accessible
|
||||
- **WHEN** a static file is placed in static/
|
||||
- **THEN** it is accessible at the site root in the built site
|
||||
- **AND** preserves the directory structure from static/
|
||||
|
||||
### Requirement: Content Management
|
||||
The system SHALL support markdown files in the content/ directory that are rendered into HTML pages.
|
||||
|
||||
#### Scenario: Markdown content is rendered
|
||||
- **WHEN** a markdown file exists in content/
|
||||
- **THEN** Hugo processes it into an HTML page
|
||||
- **AND** front matter variables are accessible in templates
|
||||
|
||||
#### Scenario: Page metadata
|
||||
- **WHEN** a content file has front matter
|
||||
- **THEN** title, date, and other metadata are available in templates
|
||||
- **AND** can be used for page titles and navigation
|
||||
|
||||
### Requirement: Configuration
|
||||
The system SHALL use hugo.toml for site configuration including baseURL, title, and language settings.
|
||||
|
||||
#### Scenario: Site configuration is applied
|
||||
- **WHEN** hugo.toml contains site settings
|
||||
- **THEN** those settings are used during site generation
|
||||
- **AND** site title appears in page titles
|
||||
- **AND** baseURL is used for absolute URLs
|
||||
|
||||
### Requirement: Responsive Design
|
||||
The system SHALL render pages that are responsive and mobile-friendly using Bootstrap's grid system and responsive utilities.
|
||||
|
||||
#### Scenario: Mobile viewport
|
||||
- **WHEN** viewing the site on mobile devices
|
||||
- **THEN** the layout adapts to small screens
|
||||
- **AND** navigation is accessible
|
||||
- **AND** content is readable without horizontal scrolling
|
||||
|
||||
#### Scenario: Tablet and desktop viewports
|
||||
- **WHEN** viewing the site on larger screens
|
||||
- **THEN** the layout utilizes available space appropriately
|
||||
- **AND** maintains readability and visual hierarchy
|
||||
|
||||
### Requirement: HTML Validity
|
||||
The system SHALL generate valid HTML5 markup that passes standard validation.
|
||||
|
||||
#### Scenario: Valid HTML output
|
||||
- **WHEN** pages are generated
|
||||
- **THEN** HTML is well-formed
|
||||
- **AND** includes required DOCTYPE and meta tags
|
||||
- **AND** uses semantic HTML5 elements where appropriate
|
||||
|
||||
### Requirement: Accessibility Basics
|
||||
The system SHALL implement basic accessibility features including semantic HTML and proper heading hierarchy.
|
||||
|
||||
#### Scenario: Semantic HTML structure
|
||||
- **WHEN** pages are rendered
|
||||
- **THEN** content uses appropriate semantic elements (header, nav, main, footer, article)
|
||||
- **AND** maintains logical heading hierarchy (h1, h2, h3)
|
||||
|
||||
#### Scenario: Navigation accessibility
|
||||
- **WHEN** keyboard navigation is used
|
||||
- **THEN** all interactive elements are focusable
|
||||
- **AND** focus order is logical
|
||||
Reference in New Issue
Block a user