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__
-
+
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);
+ }
+ }
+}