diff --git a/global.d.ts b/global.d.ts index 2c67759..b7d29bd 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1,5 +1,4 @@ declare global { let __BLOG_POSTS__: string[] - let __STICKERS__: string[] } export { }; diff --git a/src/plugins/variables.ts b/src/plugins/variables.ts index b83de4b..a73abfe 100644 --- a/src/plugins/variables.ts +++ b/src/plugins/variables.ts @@ -15,9 +15,6 @@ export default class Variables extends Plugin { this.variables["__BLOG_POSTS__"] = JSON.stringify( fs.readdirSync("./website/blogs").map((z) => z.replace(".md", "")) ); - this.variables["__STICKERS__"] = JSON.stringify( - fs.readdirSync("./website/assets/stickers") - ); const templatePath = path.resolve(__dirname, "../../website/templates"); if (fs.existsSync(templatePath)) { for (const file of fs.readdirSync(templatePath)) { diff --git a/website/assets/style.css b/website/assets/style.css index ac41f68..b92f9ff 100644 --- a/website/assets/style.css +++ b/website/assets/style.css @@ -18,9 +18,10 @@ a { grid-template-areas: "details skills" "details donations" + "details lastfm" "webrings webrings" "status binkies" - "stickers blog"; + "blog blog"; grid-gap: 5px; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(25vh, 6); @@ -57,14 +58,18 @@ a { background-position: 20px 20px; } -.paper > h1, +.paper > :nth-child(1) { + margin: 0; + padding: 0; +} + +h1, h2, h3, h4, h5, h6 { - margin: 0; - padding: 0; + text-shadow: 0px 0px 4px white; } .details { grid-area: details; @@ -72,20 +77,19 @@ h6 { .donations { grid-area: donations; } -.status { - grid-area: status; -} -.stickers { - grid-area: stickers; +.lastfm { + grid-area: lastfm; display: flex; - flex-direction: column; - max-height: 75vh; + flex-direction: row; gap: 20px; } -.stickers > img, -.stickers > video { - object-fit: scale-down; - height: 100%; +.lastfm > div { + display: flex; + flex-direction: column; + justify-content: center; +} +.status { + grid-area: status; } .skills { grid-area: skills; @@ -103,7 +107,7 @@ h6 { } .blog { grid-area: blog; - max-height: 75vh; + min-height: 75vh; } webring-container { @@ -117,20 +121,16 @@ webring-container { "status" "skills " "donations " + "lastfm" "webrings" - "blog " - "blog " "binkies" - "stickers"; + "blog " + "blog "; grid-template-columns: 1fr; } body { scrollbar-width: auto !important; } - .stickers { - flex-direction: row; - max-height: auto; - } .blog { max-height: unset; } diff --git a/website/index.html b/website/index.html index 23edd5a..10bef18 100644 --- a/website/index.html +++ b/website/index.html @@ -1,22 +1,10 @@ __TEMPLATE_HEAD__ + - - + @@ -90,7 +78,6 @@ __TEMPLATE_HEAD__
-
@@ -118,7 +105,9 @@ __TEMPLATE_HEAD__ +
+
diff --git a/website/scripts/lastfm.ts b/website/scripts/lastfm.ts new file mode 100644 index 0000000..255c75b --- /dev/null +++ b/website/scripts/lastfm.ts @@ -0,0 +1,104 @@ +import { timeAgo } from "./util"; + +interface GetRecentTracksType { + recenttracks: { + track: Array<{ + artist: { + mbid: string; + "#text": string; + }; + streamable: string; + image: Array<{ + size: string; + "#text": string; + }>; + mbid: string; + album: { + mbid: string; + "#text": string; + }; + name: string; + "@attr"?: { + nowplaying: string; + }; + url: string; + date?: { + uts: string; + "#text": string; + }; + }>; + "@attr": { + user: string; + totalPages: string; + page: string; + perPage: string; + total: string; + }; + }; +} +//https://ws.audioscrobbler.com/2.0/ +//?api_key=816cfe50ddeeb73c9987b85de5c19e71 +//&method=User.getrecenttracks +//&user=yourfriendoss +//&format=json +//&limit=1 + +const lastFM = { + apiKey: "816cfe50ddeeb73c9987b85de5c19e71", + constructUrl: (method: string, parameters: Record) => { + const defaultParams = { + format: "json", + api_key: lastFM.apiKey, + method + } + + Object.assign(parameters, defaultParams); + + return "https://ws.audioscrobbler.com/2.0/?" + new URLSearchParams(parameters).toString() + }, + getRecentTracks: async (user: string): Promise => { + const request = await fetch(lastFM.constructUrl("User.getrecenttracks", {user, limit: 1})); + return await request.json(); + }, +}; + +(async () => { + const recentTracks = await lastFM.getRecentTracks("yourfriendoss"); + const track = recentTracks.recenttracks.track[0]; + if(!track) return; + const lastFMElement = document.getElementById("lastfm")! + lastFMElement.innerHTML = ""; + const img = document.createElement("img"); + img.width = 150 + img.height = 150 + img.src = track.image.at(-1)?.["#text"]!; + lastFMElement?.appendChild(img); + + const div = document.createElement("div"); + const h1 = document.createElement("h1"); + const spanArtist = document.createElement("span"); + const spanTitle = document.createElement("span"); + + h1.innerText = track["@attr"]?.nowplaying ? "listening to Now" : "listened to " + timeAgo((+track.date?.uts!)*1000) + h1.style.margin = "0"; + + spanArtist.style.fontSize = "xx-large"; + spanTitle.style.fontSize = "x-large"; + + spanArtist.innerText = track.artist["#text"]; + spanTitle.innerText = track.name; + + div.appendChild(h1) + div.appendChild(spanArtist) + div.appendChild(spanTitle) + lastFMElement?.appendChild(div); + + + /* +
+

listening to now

+ Bladee + Open your Eyes (hymn) +
*/ + +})(); \ No newline at end of file diff --git a/website/scripts/status_cafe.ts b/website/scripts/status_cafe.ts index 77f5a90..545607e 100644 --- a/website/scripts/status_cafe.ts +++ b/website/scripts/status_cafe.ts @@ -1,3 +1,5 @@ +import { timeAgo } from "./util"; + interface LatestStatus { username: string; status: string; @@ -7,28 +9,6 @@ interface LatestStatus { } (async () => { - function timeAgo(input: number | Date) { - const date = input instanceof Date ? input : new Date(input); - const formatter = new Intl.RelativeTimeFormat("en"); - const ranges = [ - ["years", 3600 * 24 * 365], - ["months", 3600 * 24 * 30], - ["weeks", 3600 * 24 * 7], - ["days", 3600 * 24], - ["hours", 3600], - ["minutes", 60], - ["seconds", 1], - ] as const; - const secondsElapsed = (date.getTime() - Date.now()) / 1000; - - for (const [rangeType, rangeVal] of ranges) { - if (rangeVal < Math.abs(secondsElapsed)) { - const delta = secondsElapsed / rangeVal; - return formatter.format(Math.round(delta), rangeType); - } - } - } - const req = await fetch("https://status.cafe/users/sophie.atom"); const parser = new DOMParser(); const doc = parser.parseFromString(await req.text(), "text/xml"); diff --git a/website/scripts/util.ts b/website/scripts/util.ts new file mode 100644 index 0000000..9b541ae --- /dev/null +++ b/website/scripts/util.ts @@ -0,0 +1,21 @@ +export function timeAgo(input: number | Date) { + const date = input instanceof Date ? input : new Date(input); + const formatter = new Intl.RelativeTimeFormat("en"); + const ranges = [ + ["years", 3600 * 24 * 365], + ["months", 3600 * 24 * 30], + ["weeks", 3600 * 24 * 7], + ["days", 3600 * 24], + ["hours", 3600], + ["minutes", 60], + ["seconds", 1], + ] as const; + const secondsElapsed = (date.getTime() - Date.now()) / 1000; + + for (const [rangeType, rangeVal] of ranges) { + if (rangeVal < Math.abs(secondsElapsed)) { + const delta = secondsElapsed / rangeVal; + return formatter.format(Math.round(delta), rangeType); + } + } +}