add badges, status message and indicator

next.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  reactStrictMode: true,
+  reactStrictMode: true
 }

pages/api/[...id].ts

@@ -13,14 +13,16 @@ export default function handler(
   res: NextApiResponse<Data>
 ) {
     let userid = req.query.id[0];
+    res.setHeader("Content-Type", "image/svg+xml; charset=utf-8");
 
     axios.get(`https://api.lanyard.rest/v1/users/${userid}`)
     .then((response) => {
-        renderCard(response.data);
+        // let svg = renderCard(response.data);
-        res.status(200).json(response.data);
+        res.send(renderCard(response.data));
     })
-    .catch((e) => {
+    .catch((err) => {
-        res.send({ error: {e} })
+        console.log(err);
+        res.send({ error: 'Please provide a valid Discord user ID!' })
     });
 
     console.log(req.query);

src/LanyardTypes.ts

@@ -1,3 +1,5 @@
+//thanks alistair @ uwu.red
+
 export interface Root {
     success: boolean;
     data: Data;

src/getFlags.ts

@@ -0,0 +1,36 @@
+export const getFlags = (flag:number): string[] => {
+    let flags: string[] = [];
+
+    if(flag & 1){
+        flags.push("Discord_Employee")
+    }
+    if(flag & 2){
+        flags.push("Partnered_Server_Owner")
+    }
+    if(flag & 4){
+        flags.push("HypeSquad_Events")
+    }
+    if(flag & 8){
+        flags.push("Bug_Hunter_Level_1")
+    }
+    if(flag & 64){
+        flags.push("House_Bravery")
+    }
+    if(flag & 128){
+        flags.push("House_Brilliance")
+    }
+    if(flag & 256){
+        flags.push("House_Balance")
+    }
+    if(flag & 512){
+        flags.push("Early_Supporter")
+    }
+    if(flag & 16384){
+        flags.push("Bug_Hunter_Level_2")
+    }
+    if(flag & 131072){
+        flags.push("Early_Verified_Bot_Developer")
+    }
+
+    return flags;
+}

src/renderCard.ts

@@ -1,8 +0,0 @@
-import * as LanyardTypes from './LanyardTypes';
-
-const renderCard = (data: LanyardTypes.Root): any => {
-    //create svg, foreign object almost everything lol
-    console.log(data);
-}
-
-export default renderCard;

src/renderCard.tsx

@@ -0,0 +1,115 @@
+import * as LanyardTypes from './LanyardTypes';
+import { useState } from "react";
+import { getFlags } from "./getFlags";
+const renderCard = (body: LanyardTypes.Root): any => {
+    //create svg, foreign object almost everything lol
+
+    let avatarBorderColor: string = "#747F8D";
+    let userStatus: string = "";
+
+    switch(body.data.discord_status){
+        case "online": 
+            avatarBorderColor = "#43B581";
+            break;
+        case "idle": 
+            avatarBorderColor = "#FAA61A";
+            break;
+        case "dnd": 
+            avatarBorderColor = "#F04747";
+            break;
+        case "offline": 
+            avatarBorderColor = "#747F8D";
+            break;
+    }
+
+    let flags: string[] = getFlags(body.data.discord_user.public_flags);
+
+    if(body.data.activities[0] && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state;
+
+    console.log(flags);
+
+    return `
+            <svg width="100px" height="100px">
+                <foreignObject>
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="
+                        position: absolute;
+                        width: 400px;
+                        height: 150px;
+                        inset: 0;
+                        background-color: #000;
+                        color: #fff;
+                        font-family: Century Gothic;
+                        font-size: 16px;
+                        display: flex;
+                        flex-direction: row;
+                    ">
+                        <div style="
+                            display: flex;
+                            flex-direction: row;
+                            height: auto;
+                        ">
+                            <img src="https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.webp?size=2048" style="
+                                border: solid 3px ${avatarBorderColor};
+                                border-radius: 50%;
+                                width: 50px;
+                                height: 50px;
+                                position: relative;
+                                top: 10px;
+                                left: 10px;
+                            "/>
+                        </div>
+                        <div style="
+                            margin-left: 1.75rem;
+                            height: 75px;
+                        ">
+                            <div style="
+                                display: flex;
+                                flex-direction: row;
+                                position: relative;
+                                top: ${userStatus.length > 0 ? "35%" : "50%"};
+                                transform: translate(0, -50%);
+                                height: 25px;
+                            ">
+
+                                <h1 style="
+                                    font-size: 1.15rem;
+                                    margin: 0 5px 0 0;
+                                ">
+                                    ${body.data.discord_user.username}<span style="color: #aaa; font-weight: lighter;">#${body.data.discord_user.discriminator}</span>
+                                </h1>
+
+                                ${
+                                    flags.map((v) => {
+                                        return(
+                                            `<img src="/assets/badges/${v}.png" style="
+                                                width: 15px; 
+                                                height: 15px; 
+                                                position: relative; 
+                                                top: 50%; 
+                                                transform: translate(0%, -50%);
+                                                margin: 0 0 0 4px;
+                                            " />`
+                                        )
+                                    }).join('')
+                                }
+
+                            </div>
+                        
+                            <h1 style="
+                                font-size: 0.9rem;
+                                margin-top: 15px;
+                                color: #888;
+                                font-weight: lighter;
+                                display: ${userStatus.length > 0 ? "inherit" : "none"}
+                            ">
+                                ${userStatus}
+                            </h1>
+
+                        </div>
+                    </div>
+                </foreignObject>
+            </svg>
+        `;
+}
+
+export default renderCard;