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>
This commit is contained in:
Johan Lundberg 2025-07-02 00:36:58 +02:00
parent 5279d3bbba
commit a3bdd4b217
5 changed files with 340 additions and 14 deletions

View file

@ -729,6 +729,10 @@ body {
text-align: center;
padding-top: 1rem;
border-top: 1px solid #eee;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.wikipedia-link {
@ -754,6 +758,38 @@ body {
transform: translateY(0);
}
.spotify-link {
display: inline-block;
color: #1db954; /* Spotify green */
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 20px;
background: rgba(29, 185, 84, 0.1);
transition: all 0.3s ease;
}
.spotify-link:hover {
background: rgba(29, 185, 84, 0.2);
opacity: 0.8;
transform: translateY(-1px);
}
.spotify-link:active {
transform: translateY(0);
}
/* Dark theme adjustments for Spotify link */
[data-theme="dark"] .spotify-link,
[data-theme="gruvbox"] .spotify-link,
[data-theme="gruvbox-dark"] .spotify-link,
[data-theme="dracula"] .spotify-link,
[data-theme="nord"] .spotify-link,
[data-theme="solarized"] .spotify-link {
color: #1ed760; /* Slightly brighter Spotify green for dark themes */
}
/* Loading and error states */
.loading {
@ -918,4 +954,9 @@ body {
opacity: 1;
transform: scale(1);
}
.album-links {
flex-direction: column;
gap: 0.5rem;
}
}