96 lines
3.4 KiB
Markdown
96 lines
3.4 KiB
Markdown
|
# 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
|
||
|
|
```bash
|
||
|
|
# Install dependencies first (see GETTING_STARTED.md)
|
||
|
|
./site-generator --configuration=site-newdesign.cfg index
|
||
|
|
```
|
||
|
|
|
||
|
|
### Option 2: Generate Full Site with New Design
|
||
|
|
```bash
|
||
|
|
./site-generator --configuration=site-newdesign.cfg --all
|
||
|
|
```
|
||
|
|
|
||
|
|
### Option 3: Compare Designs
|
||
|
|
```bash
|
||
|
|
# 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.
|