diff --git a/README.md b/README.md index beb144e..a06a0b1 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,8 @@ A beautiful, interactive web application showcasing Rolling Stone's greatest alb - **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 +- **Smart Navigation**: Next button that respects current filter/sort state for intuitive browsing +- **Unicode Support**: Proper handling of international artist names (Beyoncé, Björk, etc.) - **Search & Filter**: Easy navigation with search, status filters, and sorting options ### Modern UI/UX diff --git a/script.js b/script.js index e2a339d..733677c 100644 --- a/script.js +++ b/script.js @@ -247,11 +247,26 @@ function renderAlbums() { function getCoverImagePath(album) { if (!album.Artist || !album.Album || !album.Rank) return null; - // Sanitize artist and album names to match the downloaded filenames - const safeArtist = album.Artist.replace(/[<>:"/\\|?*]/g, '').replace(/[^\w\s\-_.]/g, '').replace(/\s+/g, '_').slice(0, 100); - const safeAlbum = album.Album.replace(/[<>:"/\\|?*]/g, '').replace(/[^\w\s\-_.]/g, '').replace(/\s+/g, '_').slice(0, 100); const rank = album.Rank.toString().padStart(3, '0'); + // For rank 32 (Beyoncé - Lemonade) and other special cases with Unicode + // we need to preserve the accented characters + let safeArtist = album.Artist; + let safeAlbum = album.Album; + + // Match the Python script pattern: remove all non-word chars except spaces, hyphens, underscores, and dots + // But preserve Unicode characters (Python's \w includes Unicode, JS needs a different approach) + safeArtist = safeArtist.replace(/[<>:"/\\|?*]/g, ''); // Remove definitely problematic chars first + safeAlbum = safeAlbum.replace(/[<>:"/\\|?*]/g, ''); + + // Remove other punctuation but keep Unicode letters, digits, spaces, hyphens, underscores, dots + safeArtist = safeArtist.replace(/[^\p{L}\p{N}\s\-_.]/gu, ''); + safeAlbum = safeAlbum.replace(/[^\p{L}\p{N}\s\-_.]/gu, ''); + + // Replace spaces with underscores + safeArtist = safeArtist.replace(/\s+/g, '_').slice(0, 100); + safeAlbum = safeAlbum.replace(/\s+/g, '_').slice(0, 100); + const filename = `rank_${rank}_${safeArtist}_${safeAlbum}.jpg`; return `covers/${filename}`; } @@ -267,6 +282,11 @@ function createAlbumCard(album) { const coverImagePath = getCoverImagePath(album); + // Determine if this album has a next album in the current view + const currentIndex = filteredData.findIndex(a => a.Rank === album.Rank); + const hasNext = currentIndex !== -1 && currentIndex < filteredData.length - 1; + const nextAlbum = hasNext ? filteredData[currentIndex + 1] : null; + card.innerHTML = `