noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-26 04:17:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

add activity + unknown activity

Browse Source
This commit is contained in:
Conrad
2021-06-18 22:51:13 -04:00
parent cdfa522feb
commit c2c307ffe9
2 changed files with 104 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/unknown.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

125
src/renderCard.tsx
View File

@@ -7,11 +7,13 @@ type Parameters = {
} }
const renderCard = (body: LanyardTypes.Root, params: Parameters): any => { const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
//create svg, foreign object almost everything lol
let avatarBorderColor: string = "#747F8D"; let avatarBorderColor: string = "#747F8D";
let userStatus: string = ""; let userStatus: string = "";
let avatarExtension: string = "webp"; let avatarExtension: string = "webp";
let activity: any = false;
if(body.data.activities[Object.keys(body.data.activities).length - 1].type === 0) activity = body.data.activities[Object.keys(body.data.activities).length - 1];
if(body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif"; if(body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
if(params.animated === "false") avatarExtension = "webp"; if(params.animated === "false") avatarExtension = "webp";
@@ -35,19 +37,20 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
if(body.data.activities[0] && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state; if(body.data.activities[0] && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state;
console.log(flags); console.log(Object.keys(body.data.activities).length);
return ` return `
<svg width="400px" height="218px"> <svg width="400px" height="218px">
<foreignObject> <foreignObject>
<div xmlns="http://www.w3.org/1999/xhtml" style=" <div xmlns="http://www.w3.org/1999/xhtml" style="
position: absolute; position: absolute;
width: 400px; width: 400px;
height: 200px; height: 200px;
inset: 0; inset: 0;
background-color: #000; background-color: #1a1c1f;
color: #fff; color: #fff;
font-family: Century Gothic; font-family: 'Century Gothic';
font-size: 16px; font-size: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -55,18 +58,19 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
border-radius: 10px; border-radius: 10px;
"> ">
<div style=" <div style="
position: relative;
width: 400px; width: 400px;
height: 100px; height: 100px;
inset: 0; inset: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 5px;
border-bottom: solid 0.5px #333; border-bottom: solid 0.5px #333;
"> ">
<div style=" <div style="
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: auto; height: 80px;
width: 80px;
"> ">
<img src="https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?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: solid 3px ${avatarBorderColor};
@@ -74,13 +78,14 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
width: 50px; width: 50px;
height: 50px; height: 50px;
position: relative; position: relative;
top: 10px; top: 50%;
left: 10px; left: 50%;
transform: translate(-50%, -50%);
"/> "/>
</div> </div>
<div style=" <div style="
margin-left: 1.75rem; height: 80px;
height: 75px; width: 240px;
"> ">
<div style=" <div style="
display: flex; display: flex;
@@ -126,17 +131,35 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
</h1> </h1>
</div> </div>
<a style="
position: relative;
top: 50%;
width: 30px;
height: 15px;
transform: translate(0, -50%);
background-color: #3BA55D;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 0.75rem;
padding: 5px 10px;
"
href="https://discord.com/users/${body.data.discord_user.id}">
ADD
</a>
</div> </div>
${body.data.spotify ? ${body.data.spotify && !body.data.activities[1] ?
` `
<div style=" <div style="
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100px; height: 120px;
margin-left: 15px; margin-left: 15px;
font-size: 0.75rem; font-size: 0.75rem;
padding-top: 18px;
"> ">
<img src="${body.data.spotify.album_art_url}" style=" <img src="${body.data.spotify.album_art_url}" style="
width: 80px; width: 80px;
@@ -144,23 +167,83 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
border: solid 0.5px #222; border: solid 0.5px #222;
border-radius: 10px; border-radius: 10px;
margin-right: 15px; margin-right: 15px;
"/> "/>
<div style=" <div style="
color: #999; color: #999;
line-height: 0.9rem; line-height: 0.5rem;
margin-top: -5px;
"> ">
<p style="font-size: 0.7rem; color: #1CB853; margin-bottom: 20px;">LISTENING NOW...</p>
<p style="color: #fff; font-weight: bold;">${body.data.spotify.song}</p> <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="color: #ccc">${body.data.spotify.artist}</p>
<p style="font-style: italic;">on <span style="color: #e6e6e6">${body.data.spotify.album}</span></p>
</div> </div>
</div> </div>
` `
: ` : ``}
${activity ?
`
<div style=" <div style="
display: flex;
flex-direction: row;
height: 120px;
margin-left: 15px;
font-size: 0.75rem;
padding-top: 18px;
">
<div style="
margin-right: 15px;
width: auto;
height: auto;
">
${activity.assets > 0 ?
`
<img src="https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp" style="
width: 80px;
height: 80px;
border: solid 0.5px #222;
border-radius: 10px;
"/>
`
: `
<img src="/assets/unknown.png" style="
width: 80px;
height: 80px;
filter: invert(100);
"/>
`}
${activity.assets ?
`<img src="https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp" style="
width: 30px;
height: 30px;
border-radius: 50%;
margin-left: -26px;
margin-bottom: -8px;
"/>`
: ``}
</div>
<div style="
color: #999;
line-height: 0.5rem;
">
<p style="font-size: 0.7rem; color: #7289DA; margin-bottom: 20px;">PLAYING A GAME...</p>
<p style="color: #fff; font-weight: bold;">${activity.name}</p>
${activity.details ?
`<p style="color: #ccc">${activity.details}</p>`
: ``}
</div>
</div>
`
: ``}
${!activity && !body.data.listening_to_spotify === false ?
`<div style="
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 150px; height: 150px;
@@ -175,8 +258,8 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
"> ">
I'm not currently doing anything! I'm not currently doing anything!
</p> </p>
</div> </div>`
`} : ``}
</div> </div>
</foreignObject> </foreignObject>