README.md

@@ -33,10 +33,6 @@ 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
@@ -78,11 +74,6 @@ 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

@@ -1,5 +1,5 @@
 {
-  "configVersion": "0.1.4",
+  "configVersion": "0.1.3",
   "name": "Your Name",
   "description": "A description about yourself",
   "avatar": "/avatar.webp",
@@ -16,9 +16,6 @@
   "infoCard": {
     "transparency": 0.85
   },
-  "discord": {
-    "id": "set me"
-  },
   "options": {
     "showSourceLink": true
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-links",
-  "version": "0.1.8",
+  "version": "0.1.7",
   "private": false,
   "scripts": {
     "dev": "next dev",
@@ -14,19 +14,19 @@
     "@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.4.1",
+    "@types/node": "20.3.3",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
     "eslint": "8.44.0",
-    "eslint-config-next": "13.4.9",
-    "next": "13.4.9",
-    "postcss": "8.4.25",
+    "eslint-config-next": "13.4.7",
+    "next": "13.4.7",
+    "next-plausible": "^3.8.0",
+    "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sharp": "^0.32.2",
+    "sharp": "^0.32.1",
     "tailwindcss": "3.3.2",
-    "typescript": "5.1.6",
-    "use-lanyard": "^1.4.4"
+    "typescript": "5.1.6"
   }
 }

src/app/components/Avatar.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { Fragment } from "react";
-import { useLanyardWS } from "use-lanyard";
-
-import Config from "../../../config.json";
-
-function LanyardWrapper(props: { children: any }) {
-  return <Fragment>{props.children}</Fragment>;
-}
-
-export default function Avatar(props: any) {
-  const { avatar } = props;
-  const { discord }: any = Config;
-
-  return (
-    <div className="relative inline-block">
-      <Image
-        src={avatar}
-        alt="Avatar"
-        width={120}
-        height={120}
-        className="rounded-full"
-      />
-      {discord ? (
-        <LanyardWrapper>
-          <LanyardComponent discord={discord} />
-        </LanyardWrapper>
-      ) : null}
-    </div>
-  );
-}
-
-function LanyardComponent(props: { discord: any }) {
-  const { discord } = props;
-  const discordId = 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>
-      {hasLanyard && (
-        <div
-          className={`absolute bottom-2 right-2 w-4 h-4 rounded-full transition ${currentStatus}`}
-        />
-      )}
-    </div>
-  );
-}

src/app/page.tsx

@@ -5,7 +5,6 @@ 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
 
@@ -78,7 +77,13 @@ export default function Home() {
         >
           <div className="m-5">
             <div className="flex flex-col items-center justify-center">
-              <Avatar avatar={avatar} />
+              <Image
+                src={avatar}
+                alt="Avatar"
+                width={120}
+                height={120}
+                className="rounded-full"
+              />
               <div className="mb-3"></div>
               <h1 className="text-4xl font-bold">{name}</h1>
             </div>