add discord status

README.md

@@ -33,6 +33,10 @@ Simple Links is a lightweight alternative to Linktree and others.
 
 Just simply remove it from the config and it will not show anymore
 
+## Showing Discord status
+
+You must be in the [lanyard server](https://discord.gg/UrXF2cfJ7F) for it to work.
+
 ## Help!!! I'm getting an error when launching it
 
 ### Config Issue
@@ -74,6 +78,11 @@ simple-links | Type error: Property 'theme' does not exist on type '{ name: stri
   "options": {
     "showSourceLink": true // Should we show the "Source Code" link
   },
+  // Show your discord status on the site (You MUST be in the Lanyard server)
+  // https://discord.gg/UrXF2cfJ7F
+  "discord": {
+    "id": "474221560031608833" // Your discord ID
+  },
   // Search engine and embedding metadata (discord, twitter, etc embeds)
   "metadata": {
     "title": "Your Name", // The title of the embed

config.json

@@ -16,6 +16,9 @@
   "infoCard": {
     "transparency": 0.85
   },
+  "discord": {
+    "id": "474221560031608833"
+  },
   "options": {
     "showSourceLink": true
   },

package.json

@@ -14,19 +14,20 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@types/node": "20.3.3",
+    "@types/node": "20.4.1",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
     "eslint": "8.44.0",
-    "eslint-config-next": "13.4.7",
-    "next": "13.4.7",
-    "next-plausible": "^3.8.0",
-    "postcss": "8.4.24",
+    "eslint-config-next": "13.4.9",
+    "next": "13.4.9",
+    "next-plausible": "^3.9.1",
+    "postcss": "8.4.25",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sharp": "^0.32.1",
+    "sharp": "^0.32.2",
     "tailwindcss": "3.3.2",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "use-lanyard": "^1.4.4"
   }
 }

src/app/components/Avatar.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Image from "next/image";
+import { useLanyardWS } from "use-lanyard";
+
+import Config from "../../../config.json";
+
+export default function Avatar(props: any) {
+  const { avatar } = props;
+
+  const discordId: any = Config.discord.id;
+  const lanyardData = useLanyardWS(discordId);
+  const hasLanyard = lanyardData != undefined;
+
+  const statusColor = {
+    online: "bg-green-400",
+    offline: "bg-slate-400",
+    dnd: "bg-red-500",
+    idle: "bg-orange-400",
+  };
+  const currentStatus =
+    lanyardData != undefined
+      ? statusColor[lanyardData.discord_status]
+      : undefined;
+
+  return (
+    <div className="relative inline-block">
+      <Image
+        src={avatar}
+        alt="Avatar"
+        width={120}
+        height={120}
+        className="rounded-full"
+      />
+      {hasLanyard && (
+        <div
+          className={`absolute bottom-2 right-2 w-4 h-4 rounded-full transition ${currentStatus}`}
+        />
+      )}
+    </div>
+  );
+}

src/app/page.tsx

@@ -5,6 +5,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import Config from "../../config.json";
+import Avatar from "./components/Avatar";
 
 library.add(fab, far, fas); // Loading in the icons from FontAwesome
 
@@ -77,13 +78,7 @@ export default function Home() {
         >
           <div className="m-5">
             <div className="flex flex-col items-center justify-center">
-              <Image
-                src={avatar}
-                alt="Avatar"
-                width={120}
-                height={120}
-                className="rounded-full"
-              />
+              <Avatar avatar={avatar} />
               <div className="mb-3"></div>
               <h1 className="text-4xl font-bold">{name}</h1>
             </div>