hpr_generator/NEW_DESIGN_INTEGRATION.md

New Design Integration

This branch integrates the modern design from DraftHPRSplash (hobbypublicradio.org) into the hpr_generator system.

What's Been Done

1. Design Assets Added

• CSS: New responsive design stylesheet at public_html/css/new-design.css
• Images: New banner logo at public_html/images/logo.png
• Icons: Complete icon set from Remix Icons in public_html/icons/

2. New Templates Created

• Main Template: templates/page-newdesign.tpl.html - Main page layout with new design
• Index Content: templates/content-index-newdesign.tpl.html - Homepage with card-based layout
• Navigation: templates/navigation-newdesign.tpl.html - Simplified navigation

3. Configuration

• New Config: site-newdesign.cfg - Configuration file to use new design templates

Key Design Changes

Navigation

• Before: Complex multi-level navigation with detailed menu structure
• After: Simple 4-item top navigation (Home, Upload, Download, About)

Layout

• Before: Traditional header with logo + complex navigation + main content + detailed footer
• After: Clean banner image + simplified navigation + card-based sections + minimal footer

Homepage Content

• Before: Text-heavy with detailed episode listings
• After: Card-based sections for podcast functions (Record, Schedule, Subscribe, Listen) + streamlined episode/comment lists

How to Use

Option 1: Test New Design

# Install dependencies first (see GETTING_STARTED.md)
./site-generator --configuration=site-newdesign.cfg index

Option 2: Generate Full Site with New Design

./site-generator --configuration=site-newdesign.cfg --all

Option 3: Compare Designs

# Generate with old design
./site-generator index

# Generate with new design  
./site-generator --configuration=site-newdesign.cfg index

# Compare the generated index.html files

Compatibility

• Database: Uses same database and queries as original
• Functionality: All existing features preserved
• RSS/XML: Uses same RSS templates (no changes needed)
• URLs: All URL structures remain the same
• Templates: Original templates unchanged, new design uses separate template files

Next Steps

1. Testing: Generate and test all page types with new design
2. Content Templates: Create new design versions for other content templates as needed
3. Refinement: Adjust styling and layout based on testing
4. Documentation: Update any template documentation

Files Added/Modified

New Files

• public_html/css/new-design.css
• public_html/images/logo.png
• public_html/icons/ (directory with SVG icons)
• templates/page-newdesign.tpl.html
• templates/content-index-newdesign.tpl.html
• templates/navigation-newdesign.tpl.html
• site-newdesign.cfg
• NEW_DESIGN_INTEGRATION.md (this file)

No Existing Files Modified

This integration preserves all existing functionality while adding the new design as an option.

Design Principles Maintained

1. Responsive: Mobile-first responsive design
2. Accessible: Maintains accessibility features
3. Performance: Optimized CSS and minimal JavaScript
4. Standards: Valid HTML5 and modern CSS
5. Compatibility: Works with existing generator system

The integration allows switching between designs via configuration, enabling easy testing and gradual migration.