diff --git a/.gitignore b/.gitignore index 1bd0165b..398406c6 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,6 @@ node_modules # system files .DS_Store + +# netlify +.netlify diff --git a/netlify/edge-functions/now-playing.js b/netlify/edge-functions/now-playing.js new file mode 100644 index 00000000..297ab4d1 --- /dev/null +++ b/netlify/edge-functions/now-playing.js @@ -0,0 +1,40 @@ +const emojiMap = (genre, artist) => { + if (artist === 'David Bowie') return '👨‍🎤' + if (genre.includes('metal')) return '🤘' + if (genre.includes('emo')) return '😢' + if (genre.includes('alternative')) return '🎸' + if (genre.includes('grind') || genre.includes('powerviolence')) return '🫨' + if (genre.includes('country') || genre.includes('americana') || genre.includes('bluegrass')) + return '🪕' + if (genre.includes('post-punk')) return '😔' + if (genre.includes('punk') || genre.includes('hardcore')) return '✊' + if (genre.includes('hip hop')) return '🎤' + if (genre.includes('dance') || genre.includes('electronic')) return '💻' + return '🎧' +} + +export default async () => { + // eslint-disable-next-line no-undef + const MUSIC_KEY = Netlify.env.get('API_KEY_LASTFM') + const trackUrl = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=cdrn_&api_key=${MUSIC_KEY}&limit=1&format=json` + const trackRes = await fetch(trackUrl, { + type: 'json', + }).catch() + const trackData = await trackRes.json() + const track = trackData['recenttracks']['track'][0] + const genreUrl = `https://musicbrainz.org/ws/2/artist/${track['artist']['mbid']}?inc=aliases+genres&fmt=json` + const genreRes = await fetch(genreUrl, { + type: 'json', + }).catch() + const genreData = await genreRes.json() + const genre = genreData.genres.sort((a, b) => b.count - a.count)[0]['name'] + + return Response.json({ + artist: track['artist']['#text'], + title: track['name'], + genre, + emoji: emojiMap(genre, track['artist']['#text']), + }) +} + +export const config = { path: '/api/now-playing' } diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid index c6d1f057..e204436c 100644 --- a/src/_includes/base.liquid +++ b/src/_includes/base.liquid @@ -69,5 +69,11 @@ {{ content }} + {% capture js %} + {% render "../assets/scripts/script.js" %} + {% endcapture %} + \ No newline at end of file diff --git a/src/_includes/partials/now-topper.liquid b/src/_includes/partials/now-topper.liquid index d1f2da6e..376f97af 100644 --- a/src/_includes/partials/now-topper.liquid +++ b/src/_includes/partials/now-topper.liquid @@ -15,5 +15,12 @@ {{ status.emoji }} {{ status.content }}

+

+ Loading... + + + + +

\ No newline at end of file diff --git a/src/assets/scripts/script.js b/src/assets/scripts/script.js new file mode 100644 index 00000000..f059231f --- /dev/null +++ b/src/assets/scripts/script.js @@ -0,0 +1,40 @@ +;(async function () { + const nowPlaying = document.getElementById('now-playing') + if (nowPlaying) { + const emoji = document.getElementById('now-playing-emoji') + const content = document.getElementById('now-playing-content') + const loading = document.getElementById('now-playing-loading') + + try { + const cache = JSON.parse(localStorage.getItem('now-playing')) + if (cache) { + loading.style.display = 'none' + emoji.innerText = cache.emoji + content.innerText = `${cache.title} by ${cache.artist}` + emoji.classList.remove('hidden') + content.classList.remove('hidden') + } + } catch (e) { + /* quiet catch */ + } + + const res = await fetch('/api/now-playing', { + type: 'json', + }).catch() + const data = await res.json() + + try { + localStorage.setItem('now-playing', JSON.stringify(data)) + } catch (e) { + /* quiet catch */ + } + + if (!JSON.parse(localStorage.getItem('now-playing')) && !data) nowPlaying.remove() + + loading.style.display = 'none' + emoji.innerText = data.emoji + content.innerText = `${data.title} by ${data.artist}` + emoji.classList.remove('hidden') + content.classList.remove('hidden') + } +})() diff --git a/tailwind.css b/tailwind.css index 34844030..8a558aab 100644 --- a/tailwind.css +++ b/tailwind.css @@ -174,6 +174,11 @@ code[class*=language-], pre[class*=language-] { color: theme(colors.pink.500) } +.text--blur { + color: transparent; + text-shadow: 0 0 5px rgba(0,0,0,0.5); +} + @media (prefers-color-scheme: dark) { body { --pagefind-ui-primary: theme(colors.purple.400); @@ -209,4 +214,8 @@ code[class*=language-], pre[class*=language-] { color: theme(colors.gray.900); background: theme(colors.purple.400); } + + .text--blur { + text-shadow: 0 0 5px rgba(255,255,255,0.5); + } } \ No newline at end of file