Task 1.8: HTML Templating and Inheritance

Summary

Implement HTML templating system for buylater.email with proper template inheritance, layout structure, and dynamic content rendering.

Motivation

Following Let’s Go Chapter 2.8, we need to move beyond hardcoded HTML strings to a proper templating system. This will enable clean separation of presentation logic, reusable layouts, and dynamic content for the buylater.email service pages.

Acceptance Criteria

Create HTML template files in ui/html/pages/ directory
Implement base layout template with common HTML structure
Create home page template for buylater.email landing page
Add form submission page template for URL entry
Implement template parsing and execution in handlers
Use Go’s html/template package for safe HTML rendering
Apply buylater.email branding and clean design
Ensure templates are mobile-responsive

Technical Requirements

Template Structure

ui/html/
├── layouts/
│   └── base.tmpl
├── pages/
│   ├── home.tmpl
│   └── submit.tmpl
└── partials/
    └── nav.tmpl

Implementation Details

Use Go’s html/template package for template parsing
Implement template inheritance with {{template}} actions
Create reusable base layout with header, navigation, and footer
Design clean, minimal UI reflecting “buy less, buy better” philosophy
Include proper form for URL submission with email input
Add responsive CSS classes for mobile compatibility

Dependencies

Task 1.7 completed (project structure organization)

Testing Strategy

Unit Tests

Verify template parsing doesn’t return errors
Test template execution with sample data
Validate HTML output structure

Integration Tests

All routes render templates correctly
Template inheritance works as expected

Manual Testing

Home page displays properly formatted buylater.email content
Form submission page renders correctly
Templates look good on desktop and mobile
Verify form elements have proper styling and labels
Check that template errors are handled gracefully

Definition of Done

All acceptance criteria met
All specified tests pass
Code follows project conventions (go fmt, go vet)
Templates validate as proper HTML5
Mobile-responsive design implemented
No template parsing or execution errors
Human verification completed successfully
Git commit created with proper message format

Implementation Notes

Approach

Create a clean, minimal design that reflects the buylater.email philosophy of intentional consumption. Focus on usability and clear call-to-action for URL submission.

Key Files to Create

ui/html/layouts/base.tmpl - Base layout template
ui/html/pages/home.tmpl - Home page content
ui/html/pages/submit.tmpl - Form submission page
Updated cmd/web/handlers.go - Template execution logic

Template Data Structure

type PageData struct {
    Title       string
    ServiceName string
    Content     interface{}
}

Potential Risks

Template parsing errors at runtime
XSS vulnerabilities if not using html/template correctly
Mobile responsiveness issues
Template file path resolution in different environments

Success Metrics

Professional-looking buylater.email website with clean, functional HTML templates that properly represent the service concept and enable user interaction.

Blocks: Future advanced templating features and dynamic content
Blocked by: Task 1.7 (needs organized project structure)
Related: User experience design and service branding

Implementation Log

Implementation details will be recorded here during development.

Final Verification

Human Tester: [Name]
Date Completed: [YYYY-MM-DD]
Verification Result: [Pass/Fail]
Notes: [Any issues found or additional observations]

task_id: “1.8” title: “HTML Templating and Inheritance” status: “pending” priority: “high” estimated_effort: “medium” created: “2025-07-22” assigned_to: “pair” related_rfds: “RFD 003”