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:
parent
5279d3bbba
commit
a3bdd4b217
5 changed files with 340 additions and 14 deletions
41
styles.css
41
styles.css
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue