Add Spotify integration, Next button navigation, and UI improvements

- Added Spotify links to all album cards with official green styling
- Implemented Next Album button for sequential navigation (albums 1-499)
- Fixed jump-to-rank to scroll to album card top instead of centering
- Moved share button to same row as album status for better layout
- Improved mobile UI: fixed theme selector overlap, full-width filter controls
- Grouped sort dropdown with reverse button for logical organization
- Updated README with new features and Spotify integration details
- Enhanced vertical alignment of status badges and share buttons
- Refined button sizing and spacing for consistent appearance

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Johan Lundberg 2025-07-02 01:18:42 +02:00
parent 2720eb1f4b
commit 75bbf157e7
7 changed files with 1118 additions and 77 deletions

View file

@ -7,6 +7,7 @@ A beautiful, interactive web application showcasing Rolling Stone's greatest alb
![Cover Art](https://img.shields.io/badge/Cover%20Art-500%20Albums-blue)
![Themes](https://img.shields.io/badge/Themes-8-purple)
![Wikipedia](https://img.shields.io/badge/Wikipedia-Integrated-orange)
![Spotify](https://img.shields.io/badge/Spotify-Integrated-1db954)
## ✨ Features
@ -15,6 +16,8 @@ A beautiful, interactive web application showcasing Rolling Stone's greatest alb
- **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
- **Spotify Integration**: Listen to albums directly on Spotify with one click
- **Sequential Navigation**: Next button on each album for easy browsing
- **Search & Filter**: Easy navigation with search, status filters, and sorting options
### Modern UI/UX
@ -54,6 +57,7 @@ python -m http.server 8000
- `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
- `spotify_urls_mapping.json` - Spotify album URL mappings for streaming integration
### Assets
- `covers/` - 500 high-quality album cover images (rank_XXX_Artist_Album.jpg)
@ -73,6 +77,7 @@ The repository includes various Python utilities for data management:
| `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 |
| `extract_spotify_urls.py` | Extract Spotify URLs using the Spotify Web API |
## 📈 Data Quality
@ -81,6 +86,7 @@ The repository includes various Python utilities for data management:
- **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)
- **500+ albums** with Spotify streaming links (100% coverage with search fallback)
## 🎯 Key Insights
@ -111,6 +117,7 @@ The repository includes various Python utilities for data management:
- **Python 3** scripts for data manipulation
- **CSV format** for easy data management
- **iTunes API** integration for cover art (100% success rate)
- **Spotify Web API** integration for streaming links
- **Wikipedia scraping** for accurate page URLs
- **Fuzzy string matching** for data correlation
- **JSON mapping files** for efficient lookups
@ -137,6 +144,7 @@ The application uses CSS custom properties for theming:
2. Run appropriate scripts from the `scripts/` folder
3. Regenerate cover art if needed using `download_all_covers.py`
4. Update Wikipedia mappings with `extract_wikipedia_urls.py`
5. Update Spotify mappings with `extract_spotify_urls.py`
### Contributing
- All album descriptions marked "(by Claude)" were AI-generated based on historical research
@ -156,11 +164,12 @@ This project is for educational and research purposes. Album artwork and descrip
- **Rolling Stone Magazine** for the original rankings and descriptions
- **iTunes API** for high-quality album artwork
- **Spotify** for streaming integration and album availability
- **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.*
*Explore the greatest albums of all time with beautiful themes, comprehensive data, seamless Wikipedia integration, and instant Spotify streaming. Discover how musical tastes and recognition have evolved between 2020 and 2023.*
🎧 **[Start Exploring →](index.html)** | 🎨 **Try Different Themes** | 🔗 **Share Your Favorites**