lee/hpr_generator
1
0
Fork 0
forked from HPR/hpr_generator
Code Pull Requests Activity
Files
main
hpr_generator/NEW_DESIGN_INTEGRATION.md

3.4 KiB
Raw Permalink Blame History

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.