Johan Lundberg a3bdd4b217 Add Spotify integration with album streaming links

- Implement Spotify Web API integration for album streaming links
- Add extract_spotify_urls.py script for automated Spotify URL extraction
- Create spotify_urls_mapping.json with sample album mappings (20 albums)
- Update album cards to include both Wikipedia and Spotify links
- Add Spotify-branded styling with official green color and logo
- Implement smart fallback to Spotify search for unmapped albums
- Add responsive design for mobile with stacked link layout
- Update README with comprehensive feature documentation

Features:
• Each album now has "Listen on Spotify" link with Spotify icon
• Spotify links use official Spotify green branding
• Theme-aware styling adapts to dark/light themes
• Mobile-optimized layout with vertical link stacking
• Production-ready script for extracting all 500 album URLs

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-07-02 00:36:58 +02:00

7 KiB

Raw Blame History

🎵 Rolling Stone's Top 500 Albums

A beautiful, interactive web application showcasing Rolling Stone's greatest albums of all time with visual comparisons between the 2020 and 2023 rankings. Features a comprehensive theme system, Wikipedia integration, and modern responsive design.

✨ Features

Core Functionality

Interactive Album Cards: Browse all 500 albums with high-quality cover art
Ranking Comparisons: See how albums moved between 2020 and 2023 rankings
Complete Metadata: Full album information including artist, year, label, and descriptions
Wikipedia Integration: Direct links to Wikipedia pages for each album
Search & Filter: Easy navigation with search, status filters, and sorting options

Modern UI/UX

8 Beautiful Themes: Gruvbox (default), Basic Blue, Dark, Gruvbox Dark, Dracula, Nord, Solarized, Arc
Theme Persistence: Your preferred theme is saved automatically
Responsive Design: Optimized layout for desktop, tablet, and mobile devices
Clean SVG Icons: Modern iconography throughout the interface
Jump-to-Rank: Quick navigation to any album by rank
Shareable URLs: Bookmark and share specific albums or filtered views

🚀 Live Demo

Open index.html in your browser to explore the collection, or serve it locally:

python -m http.server 8000
# Then visit http://localhost:8000

📊 Data Sources

2020 Rankings: Rolling Stone's original 500 Greatest Albums list
2023 Rankings: Updated rankings from Rolling Stone's revised list
Album Information: Comprehensive metadata including release info and descriptions
Cover Art: High-quality album artwork sourced from iTunes API

🎨 What's Included

Core Files

index.html - Main web application
styles.css - Beautiful, responsive styling
script.js - Interactive functionality
favicon.svg - Custom music note favicon

Data Files

top_500_albums_2023.csv - Complete dataset with 100% metadata coverage
rolling_stone_top_500_albums_2020.csv - Original 2020 rankings
wikipedia_top_500_albums.csv - Wikipedia sourced data for comparison
wikipedia_urls_mapping.json - Accurate Wikipedia URL mappings for all albums

Assets

covers/ - 500 high-quality album cover images (rank_XXX_Artist_Album.jpg)

Utilities

scripts/ - Python scripts for data processing and maintenance

🛠️ Scripts

The repository includes various Python utilities for data management:

Script	Purpose
`compare_top500_albums.py`	Generate the main comparison dataset
`merge_descriptions.py`	Merge album descriptions from multiple sources
`download_all_covers.py`	Download album artwork from iTunes API (500/500 success)
`add_missing_info.py`	Add metadata for albums missing information
`fill_missing_from_wikipedia.py`	Research and add Wikipedia-sourced descriptions
`extract_wikipedia_urls.py`	Extract accurate Wikipedia URLs for album pages

📈 Data Quality

500/500 albums with complete ranking information
500/500 albums with cover art (downloaded via iTunes API)
500/500 albums with metadata (artist, album, year, label)
500/500 albums with descriptions (mix of original Rolling Stone content and researched additions)
496/500 albums with accurate Wikipedia page links (99.2% coverage)

🎯 Key Insights

Notable Changes (2020 → 2023)

Biggest Climber: Lauryn Hill's "The Miseducation of Lauryn Hill" (#10 in 2023, previously much lower)
New Entries: Recent albums like Beyoncé's "Renaissance" and Bad Bunny's "Un Verano Sin Ti"
Genre Diversity: Increased representation of hip-hop, R&B, and global music

Statistics

New Albums in 2023: 192 albums (38.4% of the list)
Improved Rankings: 164 albums moved up
Dropped Rankings: 113 albums moved down or were removed
Most Represented Artist: The Beatles (multiple albums in top rankings)
Decades Covered: 1950s through 2020s
Genres: Rock, Hip-Hop, R&B, Soul, Punk, Electronic, Country, Jazz, and more

🔧 Technical Details

Frontend

Vanilla JavaScript for maximum compatibility and performance
CSS Custom Properties for dynamic theming system
CSS Grid & Flexbox for responsive layouts
SVG Icons for crisp, scalable interface elements
LocalStorage API for theme persistence
Progressive Enhancement for accessibility

Data Processing

Python 3 scripts for data manipulation
CSV format for easy data management
iTunes API integration for cover art (100% success rate)
Wikipedia scraping for accurate page URLs
Fuzzy string matching for data correlation
JSON mapping files for efficient lookups

📝 Development

Running Locally

Clone the repository

Serve with a local HTTP server (required for CSV loading):

python -m http.server 8000
# Then visit http://localhost:8000

For development, any local server will work

Theme Development

The application uses CSS custom properties for theming:

8 built-in themes with consistent color schemes
Easy to add new themes by extending the CSS variables
Theme selection persists across browser sessions

Adding New Data

Update the CSV files with new information
Run appropriate scripts from the scripts/ folder
Regenerate cover art if needed using download_all_covers.py
Update Wikipedia mappings with extract_wikipedia_urls.py

Contributing

All album descriptions marked "(by Claude)" were AI-generated based on historical research
Original Rolling Stone descriptions preserved where available
Cover art sourced from iTunes API with proper attribution
Wikipedia links extracted via automated scraping for accuracy

📜 License

This project is for educational and research purposes. Album artwork and descriptions are used under fair use for educational commentary and criticism.

Code and compilation: Open source

🙏 Acknowledgments

Rolling Stone Magazine for the original rankings and descriptions
iTunes API for high-quality album artwork
Wikipedia contributors for additional album research and accurate page URLs
Claude AI for data processing assistance and missing descriptions

Explore the greatest albums of all time with beautiful themes, comprehensive data, and seamless Wikipedia integration. Discover how musical tastes and recognition have evolved between 2020 and 2023.

🎧 Start Exploring → | 🎨 Try Different Themes | 🔗 Share Your Favorites

7 KiB Raw Blame History