Add Discord status #5

Merged
Fascinated merged 7 commits from development into master 2023-07-12 17:25:59 +00:00
6 changed files with 4729 additions and 4670 deletions
Showing only changes of commit c01035676a - Show all commits

@ -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 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 ## Help!!! I'm getting an error when launching it
### Config Issue ### Config Issue
@ -74,6 +78,11 @@ simple-links | Type error: Property 'theme' does not exist on type '{ name: stri
"options": { "options": {
"showSourceLink": true // Should we show the "Source Code" link "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) // Search engine and embedding metadata (discord, twitter, etc embeds)
"metadata": { "metadata": {
"title": "Your Name", // The title of the embed "title": "Your Name", // The title of the embed

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

15
package-lock.json generated

@ -1,12 +1,12 @@
{ {
"name": "simple-links", "name": "simple-links",
"version": "0.1.1", "version": "0.1.7",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "simple-links", "name": "simple-links",
"version": "0.1.1", "version": "0.1.7",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-brands-svg-icons": "^6.4.0",
@ -26,7 +26,8 @@
"react-dom": "18.2.0", "react-dom": "18.2.0",
"sharp": "^0.32.1", "sharp": "^0.32.1",
"tailwindcss": "3.3.2", "tailwindcss": "3.3.2",
"typescript": "5.1.6" "typescript": "5.1.6",
"use-lanyard": "^1.4.4"
} }
}, },
"node_modules/@aashutoshrathi/word-wrap": { "node_modules/@aashutoshrathi/word-wrap": {
@ -4552,6 +4553,14 @@
"punycode": "^2.1.0" "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": { "node_modules/util-deprecate": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "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-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@types/node": "20.3.3", "@types/node": "20.4.1",
"@types/react": "18.2.14", "@types/react": "18.2.14",
"@types/react-dom": "18.2.6", "@types/react-dom": "18.2.6",
"autoprefixer": "10.4.14", "autoprefixer": "10.4.14",
"eslint": "8.44.0", "eslint": "8.44.0",
"eslint-config-next": "13.4.7", "eslint-config-next": "13.4.9",
"next": "13.4.7", "next": "13.4.9",
"next-plausible": "^3.8.0", "next-plausible": "^3.9.1",
"postcss": "8.4.24", "postcss": "8.4.25",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"sharp": "^0.32.1", "sharp": "^0.32.2",
"tailwindcss": "3.3.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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image"; import Image from "next/image";
import Config from "../../config.json"; import Config from "../../config.json";
import Avatar from "./components/Avatar";
library.add(fab, far, fas); // Loading in the icons from FontAwesome 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="m-5">
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
<Image <Avatar avatar={avatar} />
src={avatar}
alt="Avatar"
width={120}
height={120}
className="rounded-full"
/>
<div className="mb-3"></div> <div className="mb-3"></div>
<h1 className="text-4xl font-bold">{name}</h1> <h1 className="text-4xl font-bold">{name}</h1>
</div> </div>