LAST.FM INTEGRATION (because of course)

This commit is contained in:
MeowcaTheoRange 2024-08-31 03:01:59 -05:00
parent 950dee968c
commit fa062a7235
4 changed files with 52 additions and 3 deletions

3
.env
View file

@ -1 +1,2 @@
PORT=3000
PORT=3000
LFM_API_KEY=8f9b0255cc55a19f82d37c22600aff1a

View file

@ -51,6 +51,7 @@ div {
img {
vertical-align: middle;
background-color: #fff8;
}
a {
@ -94,4 +95,14 @@ button, input[type=submit] {
button:active, input[type=submit]:active {
background-color: transparent;
color: var(--color-accent);
}
marquee {
vertical-align: top;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

View file

@ -95,13 +95,38 @@ app.get('/servers', async (req, res) => {
});
});
var units = {
year: 24 * 60 * 60 * 1000 * 365,
month: 24 * 60 * 60 * 1000 * 365 / 12,
day: 24 * 60 * 60 * 1000,
hour: 60 * 60 * 1000,
minute: 60 * 1000,
second: 1000
}
var rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
var getRelativeTime = (d1, d2 = new Date()) => {
var elapsed = d1 - d2
// "Math.abs" accounts for both "past" & "future" scenarios
for (var u in units)
if (Math.abs(elapsed) > units[u] || u == 'second')
return rtf.format(Math.round(elapsed / units[u]), u)
}
app.get('/about', async (req, res) => {
const linksJson = await fetch("https://cdn.abtmtr.link/site_content/v13/links.json")
.catch(() => res.status(500).send())
.then((res) => res.json());
const currentlyListeningJson = await fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=MeowcaTheoRange&api_key=${process.env.LFM_API_KEY}&format=json&limit=2&extended=1`)
.catch(() => res.status(500).send())
.then((res) => res.json());
res.render('about', {
links: linksJson
links: linksJson,
cl: currentlyListeningJson.recenttracks.track[0],
getRelativeTime
});
});

View file

@ -17,7 +17,7 @@
<span class="p-gender-identity">Non-binary</span>,
<span class="p-pronouns">they/them</span>
</p>
<p><img class="u-photo" src="https://abtmtr.link/favicon.ico" height="72"></p>
<p><img class="u-photo" src="https://abtmtr.link/favicon.ico" height="72" width="72"></p>
<p class="nomargin">
<a class="u-url" href="https://abtmtr.link/">website</a>,
<a class="u-email" href="mailto:me@abtmtr.link">email</a>
@ -30,6 +30,18 @@
<span class="p-country-name">USA</span>
</p>
</div>
<% if (cl["@attr"] != null && cl["@attr"].nowplaying) { %>
<h2>MeowcaTheoRange is currently listening to</h2>
<% } else { %>
<h2>MeowcaTheoRange last listened to (<%= getRelativeTime(cl.date.uts * 1000) %>)</h2>
<% } %>
<p style="float: inline-start; margin-block: 0; margin-inline-end: 2ch;"><img class="u-photo" src="<%= cl.image[2]["#text"] %>" height="72" width="72"></p>
<p class="clearfix">
<%= cl.name %><br />
<%= cl.album["#text"] %><br />
<%= cl.artist.name %><br />
<a href="<%= cl.url %>" target="_blank">See on Last.fm</a>
</p>
<h2>MeowcaTheoRange's links</h2>
<p>where else is MeowcaTheoRange?</p>
<ul>