Merge pull request 'Add Discord status' (#5) from development into master
All checks were successful
Publish Docker Image / docker (push) Successful in 1m40s

Reviewed-on: #5
This commit is contained in:
Lee 2023-07-12 17:25:59 +00:00
commit 82e8d97858
6 changed files with 4779 additions and 4672 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

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

9351
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,6 +1,6 @@
{
"name": "simple-links",
"version": "0.1.7",
"version": "0.1.8",
"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.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",
"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,61 @@
"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>
);
}

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