add discord status
Some checks failed
Publish Docker Image / docker (push) Failing after 37s

This commit is contained in:
Lee 2023-07-12 17:58:47 +01:00
parent d6122ff404
commit c01035676a
6 changed files with 4729 additions and 4670 deletions

@ -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

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

15
package-lock.json generated

@ -1,12 +1,12 @@
{
"name": "simple-links",
"version": "0.1.1",
"version": "0.1.7",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "simple-links",
"version": "0.1.1",
"version": "0.1.7",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
@ -26,7 +26,8 @@
"react-dom": "18.2.0",
"sharp": "^0.32.1",
"tailwindcss": "3.3.2",
"typescript": "5.1.6"
"typescript": "5.1.6",
"use-lanyard": "^1.4.4"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@ -4552,6 +4553,14 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-lanyard": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/use-lanyard/-/use-lanyard-1.4.4.tgz",
"integrity": "sha512-QceDXahv4LlEt+0cTbLwOTgeCA+83BEi26m//2mu/bZkmiHyiF3ZsUYGeukkc0cCLwGm4mm5XVgy71YO6PINxQ==",
"engines": {
"node": ">=14"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

@ -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"
}
}

@ -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>
);
}

@ -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>