This xhosi template represents the consolidation of three existing Eleventy websites, extracting their best practices while eliminating technical debt.

Project Goals

The main objectives were to:

  1. Reduce CSS complexity from 1000+ lines to ~800 lines across modular files
  2. Standardize dependencies with the latest stable versions
  3. Implement clean theming without CSS specificity battles
  4. Create maintainable architecture for future development
  5. Preserve essential features from all source websites

Source Analysis

xhosi analyzed three source websites:

  • pborenstein.com: Advanced features but high technical debt
  • pborenstein.dev: Clean implementation, used as foundation
  • plywoodviolin.com: Minimal but complete basic features

Architecture Decisions

CSS Strategy

The modular CSS approach provides clear separation of concerns while maintaining small file sizes and easy maintenance.

Theme Implementation

Clean light/dark/system preference support without the CSS specificity issues found in the source websites.

JavaScript Approach

Minimal, focused JavaScript for essential features like theme switching, with progressive enhancement principles.

Build Pipeline

Modern Eleventy configuration with image optimization, RSS generation, and development-friendly features.

Development Workflow

The project supports specialized agent workflows for maintenance:

  • CSS Agent: Stylesheet optimization and theming
  • Content Agent: Post and page management
  • Build Agent: Technical pipeline maintenance
  • Theme Agent: Visual consistency and design system

This approach ensures long-term maintainability and systematic improvements.