add spotify and placeholder

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

@@ -8,17 +8,23 @@ type Data = {
   error?: any;
 }
 
+type Parameters = {
+    animated?: string;
+}
+
 export default function handler(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
+
+    let params: Parameters = req.query;
     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) => {
         // let svg = renderCard(response.data);
-        res.send(renderCard(response.data));
+        res.send(renderCard(response.data, params));
     })
     .catch((err) => {
         console.log(err);

src/renderCard.tsx

@@ -1,11 +1,20 @@
 import * as LanyardTypes from './LanyardTypes';
 import { useState } from "react";
 import { getFlags } from "./getFlags";
-const renderCard = (body: LanyardTypes.Root): any => {
+
+type Parameters = {
+    animated?: string;
+}
+
+const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
     //create svg, foreign object almost everything lol
 
     let avatarBorderColor: string = "#747F8D";
     let userStatus: string = "";
+    let avatarExtension: string = "webp";
+
+    if(body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
+    if(params.animated === "false") avatarExtension = "webp";
 
     switch(body.data.discord_status){
         case "online": 
@@ -29,26 +38,37 @@ const renderCard = (body: LanyardTypes.Root): any => {
     console.log(flags);
 
     return `
-            <svg width="100px" height="100px">
+            <svg width="400px" height="218px">
                 <foreignObject>
                     <div xmlns="http://www.w3.org/1999/xhtml" style="
                         position: absolute;
                         width: 400px;
-                        height: 150px;
+                        height: 200px;
                         inset: 0;
                         background-color: #000;
                         color: #fff;
                         font-family: Century Gothic;
                         font-size: 16px;
                         display: flex;
+                        flex-direction: column;
+                        padding: 5px;
+                        border-radius: 10px;
+                    ">
+                        <div style="
+                            position: relative;
+                            width: 400px;
+                            height: 100px;
+                            inset: 0;
+                            display: flex;
                             flex-direction: row;
+                            border-bottom: solid 0.5px #333;
                         ">
                             <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="
+                                <img src="https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=2048" style="
                                     border: solid 3px ${avatarBorderColor};
                                     border-radius: 50%;
                                     width: 50px;
@@ -107,6 +127,58 @@ const renderCard = (body: LanyardTypes.Root): any => {
 
                             </div>
                         </div>
+
+                        ${body.data.spotify ? 
+
+                            `
+                            <div style="
+                                display: flex;
+                                flex-direction: row;
+                                height: 100px;
+                                margin-left: 15px;
+                                font-size: 0.75rem;
+                            ">
+                                <img src="${body.data.spotify.album_art_url}" style="
+                                    width: 80px; 
+                                    height: 80px; 
+                                    border: solid 0.5px #222;
+                                    border-radius: 10px; 
+                                    margin-right: 15px;
+                                
+                                "/>
+
+                                <div style="
+                                    color: #999;
+                                    line-height: 0.9rem;
+                                    margin-top: -5px;
+                                ">
+                                    <p style="color: #fff; font-weight: bold;">${body.data.spotify.song}</p>
+                                    <p>by <span style="color: #fff">${body.data.spotify.artist}</span></p>
+                                    <p style="font-style: italic;">on <span style="color: #e6e6e6">${body.data.spotify.album}</span></p> 
+                                </div>
+                            </div>
+                            `
+                        
+                        : `
+                            <div style="
+                                display: flex;
+                                flex-direction: row;
+                                height: 150px;
+                                justify-content: center;
+                                align-items: center;
+                            ">
+                                <p style="
+                                    font-style: italic; 
+                                    font-size: 0.75rem;
+                                    color: #777;
+                                    height: auto;
+                                ">
+                                    I'm not currently doing anything!
+                                </p>
+                            </div>
+                        `}
+
+                    </div>
                 </foreignObject>
             </svg>
         `;