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

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

9351
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,6 +1,6 @@
{ {
"name": "simple-links", "name": "simple-links",
"version": "0.1.7", "version": "0.1.8",
"private": false, "private": false,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
@ -14,19 +14,19 @@
"@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", "postcss": "8.4.25",
"postcss": "8.4.24",
"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,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 { 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>