Website

Comparison website showcasing framework demos and performance metrics.

Structure

Templates: website/templates/ - base.html - Common layout and navigation - homepage.html - Framework grid with stats - framework.html - Individual framework pages - 404.html - Error page

Static Assets: website/static/ - css/ - Website styling - js/charts.js - Interactive visualizations
- charts/ - Chart.js configurations - Data files (stats, summaries, commentary)

Building

Development: Website built automatically with framework builds

npm run build -- --static-site

Production: Static site generation

python scripts/run/build_website.py

Output in dist-website/ ready for CDN deployment.

Features

Framework Grid

Homepage displays all 12 frameworks with: - Performance scores - Bundle sizes - Build times - Demo links

Individual Pages

Each framework gets dedicated page: - Live demo iframe - Detailed metrics - Source code links - Implementation notes

Interactive Charts

Chart.js visualizations with: - Performance radar charts - Bundle size comparisons - Build time distributions - Resource consumption - Framework toggling/filtering

Data Integration

Real-time stats from: - Latest benchmark results - GitHub metrics (stars, issues) - npm download counts - Build status indicators

Deployment

Static hosting: Optimized for CDN deployment Asset optimization: Minified CSS/JS, compressed images SEO friendly: Meta tags, structured data, sitemaps
Mobile responsive: Works on all device sizes

Templates

Jinja2 engine: scripts/run/generator.py - Framework metadata injection - Dynamic content generation - Template inheritance - Conditional rendering

Charts

Interactive features: - Framework show/hide toggles - Tooltip details - Responsive design - Color-coded metrics

Chart types: - Radar (performance overview)
- Bar (bundle sizes, build times) - Scatter (efficiency comparisons) - Pie/donut (distribution) - Treemap (complexity visualization)