Added presence

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "7.css": "^0.16.0",
     "@astrojs/node": "^8.3.2",
-    "astro": "^4.12.2"
+    "astro": "^4.12.2",
+    "lanyard-wrapper": "^2.0.1"
   }
 }

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       astro:
         specifier: ^4.12.2
         version: 4.12.2
+      lanyard-wrapper:
+        specifier: ^2.0.1
+        version: 2.0.1
 
 packages:
 
@@ -1062,6 +1065,9 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  lanyard-wrapper@2.0.1:
+    resolution: {integrity: sha512-wDMqGTEzc1AXvs3i2JaVkDHCzA7FCkpsdlJIpypOiDhhkIYJhhnDzOo91FQ3E6u5fQiF1Q8vfOOKm3kZ3peQSw==}
+
   load-yaml-file@0.2.0:
     resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
     engines: {node: '>=6'}
@@ -2741,6 +2747,8 @@ snapshots:
 
   kleur@4.1.5: {}
 
+  lanyard-wrapper@2.0.1: {}
+
   load-yaml-file@0.2.0:
     dependencies:
       graceful-fs: 4.2.11

src/components/Me.astro

@@ -1,4 +1,24 @@
-<style>
+---
+import {fetchUserData, type DiscordStatus} from "lanyard-wrapper";
+
+const rawUserData = await fetchUserData("886685857560539176");
+const statusColor = () => {
+    switch (rawUserData.discord_status) {
+        case "online":
+        return "#23a55a";
+        case "idle":
+        return "#f0b232";
+        case "dnd":
+        return "#f23f43";
+        case "offline":
+        return "#80848e";
+        default:
+        return "#80848e";
+    }   
+};
+---
+
+<style define:vars={{statusColor: statusColor()}}>
     div {
         display: flex;
     }
@@ -13,7 +33,7 @@
         height: 90px;
         border-radius: 6px;
         box-shadow: 10px black;
-        border-color: var(--offline-color);
+        border-color: var(--statusColor);
         border-style: solid;
         border-width: 2px;
     }

src/components/Presence.astro

@@ -0,0 +1,55 @@
+---
+import {fetchUserData} from "lanyard-wrapper";
+
+const rawUserData = await fetchUserData("886685857560539176");
+const activity = (() => {
+    let finalActivity = {
+        type: undefined,
+        name: undefined,
+        artist: undefined
+    };
+    rawUserData.activities.some((activity => {
+        if(activity.type === 0) {
+            finalActivity = {
+                type: "playing",
+                name: activity.name,
+                artist: undefined
+            };
+            return;
+        }
+    }));
+    if(finalActivity.type !== undefined) return finalActivity;
+    if(rawUserData.listening_to_spotify) {
+        finalActivity = {
+            type: "listening",
+            name: rawUserData.spotify.song,
+            artist: rawUserData.spotify.artist
+        };
+    };
+    return finalActivity;
+})();
+---
+
+<style>
+    div {
+        margin-top: 10px;
+        display: flex;
+    }
+    p {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-left: 10px;
+    }
+    img {
+        width: 30px;
+        height: 30px;
+    }
+</style>
+
+{
+    activity.type !== undefined &&
+    <div>
+        <img src={activity.type === "playing" ? "/game.ico" : "/music.ico"}>
+        <p>{`${activity.type === "playing" ? "Playing" : "Listening to"} ${activity.name}${activity.type === "listening" ? ` - ${activity.artist}` : ""}`}</p>
+    </div>
+}

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Me from "../components/Me.astro";
+import Presence from "../components/Presence.astro";
 import Window from "../components/Window.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
@@ -7,5 +8,6 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 <BaseLayout tabTitle="Home - nin0dev">
 	<Window title="Home" maxWidth="600px">
 		<Me />
+		<Presence />
 	</Window>
 </BaseLayout>