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

show nitro badge if has animated avatar + prettier stuff

Browse Source
This commit is contained in:
cnrad
2022-03-25 21:39:31 -04:00
parent ea2a32880d
commit 611f97ba84
4 changed files with 122 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore Normal file
View File

@@ -0,0 +1 @@
src/renderCard.tsx

33
public/assets/badges/BadgesEncoded.ts
View File

File diff suppressed because one or more lines are too long

BIN
public/assets/badges/Nitro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

224
src/renderCard.tsx
View File

@@ -43,6 +43,8 @@ const elapsedTime = (timestamp: any) => {
}; };
const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => { const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => {
let { data } = body;
let avatarBorderColor: string = "#747F8D", let avatarBorderColor: string = "#747F8D",
userStatus: string = "", userStatus: string = "",
avatarExtension: string = "webp", avatarExtension: string = "webp",
@@ -57,8 +59,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
borderRadius = "10px", borderRadius = "10px",
idleMessage = "I'm not currently doing anything!"; idleMessage = "I'm not currently doing anything!";
if (body.data.activities[0]?.emoji?.animated) statusExtension = "gif"; if (data.activities[0]?.emoji?.animated) statusExtension = "gif";
if (body.data.discord_user.avatar && body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif"; if (data.discord_user.avatar && data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
if (params.animated === "false") avatarExtension = "webp"; if (params.animated === "false") avatarExtension = "webp";
if (params.hideStatus === "true") hideStatus = "true"; if (params.hideStatus === "true") hideStatus = "true";
if (params.hideTimestamp === "true") hideTimestamp = "true"; if (params.hideTimestamp === "true") hideTimestamp = "true";
@@ -73,14 +75,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
if (params.borderRadius) borderRadius = params.borderRadius; if (params.borderRadius) borderRadius = params.borderRadius;
let avatar: String; let avatar: String;
if (body.data.discord_user.avatar) { if (data.discord_user.avatar) {
avatar = await encodeBase64( avatar = await encodeBase64(
`https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${ `https://cdn.discordapp.com/avatars/${data.discord_user.id}/${
body.data.discord_user.avatar data.discord_user.avatar
}.${avatarExtension}?size=${avatarExtension === "gif" ? "128" : "256"}` }.${avatarExtension}?size=${avatarExtension === "gif" ? "128" : "256"}`
); );
} else { } else {
let lastDigit = Number(body.data.discord_user.discriminator.substr(-1)); let lastDigit = Number(data.discord_user.discriminator.substr(-1));
if (lastDigit >= 5) { if (lastDigit >= 5) {
lastDigit -= 5; lastDigit -= 5;
} }
@@ -103,7 +105,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
} }
} }
switch (body.data.discord_status) { switch (data.discord_status) {
case "online": case "online":
avatarBorderColor = "#43B581"; avatarBorderColor = "#43B581";
break; break;
@@ -118,13 +120,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
break; break;
} }
const flags: string[] = getFlags(body.data.discord_user.public_flags); let flags: string[] = getFlags(data.discord_user.public_flags);
if (data.discord_user.avatar.includes("a_")) flags.push("Nitro");
if (body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4) if (data.activities[0] && data.activities[0].state && data.activities[0].type === 4)
userStatus = body.data.activities[0].state; userStatus = data.activities[0].state;
// filter only type 0 // filter only type 0
const activities = body.data.activities.filter(activity => activity.type === 0); const activities = data.activities.filter(activity => activity.type === 0);
// take the highest one // take the highest one
activity = Array.isArray(activities) ? activities[0] : activities; activity = Array.isArray(activities) ? activities[0] : activities;
@@ -191,36 +194,29 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
font-size: 1.15rem; font-size: 1.15rem;
margin: 0 5px 0 0; margin: 0 5px 0 0;
"> ">
${escape(body.data.discord_user.username)}${ ${escape(data.discord_user.username)}${
discrim !== "hide" discrim !== "hide"
? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${ ? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${
body.data.discord_user.discriminator data.discord_user.discriminator
}</span>` }</span>`
: "" : ""
} }
</h1> </h1>
${ ${
hideBadges == "true" hideBadges == "true" ? "" : flags.map(v => `
? ""
: flags
.map(
v => `
<img src="data:image/png;base64,${Badges[v]}" style=" <img src="data:image/png;base64,${Badges[v]}" style="
width: 20px; width: auto;
height: 20px; height: 20px;
position: relative; position: relative;
top: 50%; top: 50%;
transform: translate(0%, -50%); transform: translate(0%, -50%);
margin: 0 0 0 4px; margin: 0 0 0 4px;
" />` " />`).join("")
)
.join("")
} }
</div> </div>
${ ${
userStatus.length > 0 && hideStatus !== "true" userStatus.length > 0 && hideStatus !== "true" ? `
? `
<h1 style=" <h1 style="
font-size: 0.9rem; font-size: 0.9rem;
margin-top: 16px; margin-top: 16px;
@@ -231,10 +227,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
text-overflow: ellipsis; text-overflow: ellipsis;
"> ">
${ ${
body.data.activities[0].emoji && body.data.activities[0].emoji.id data.activities[0].emoji && data.activities[0].emoji.id ? `
? `
<img src="data:image/png;base64,${await encodeBase64( <img src="data:image/png;base64,${await encodeBase64(
`https://cdn.discordapp.com/emojis/${body.data.activities[0].emoji.id}.${statusExtension}` `https://cdn.discordapp.com/emojis/${data.activities[0].emoji.id}.${statusExtension}`
)}" )}"
style=" style="
width: 15px; width: 15px;
@@ -243,23 +238,20 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
top: 10px; top: 10px;
transform: translate(0%, -50%); transform: translate(0%, -50%);
margin: 0 2px 0 0; margin: 0 2px 0 0;
" />` " />` : ``
: ``
} }
${ ${
body.data.activities[0].emoji && !body.data.activities[0].emoji.id data.activities[0].emoji && !data.activities[0].emoji.id
? body.data.activities[0].emoji.name + " " + escape(userStatus) ? data.activities[0].emoji.name + " " + escape(userStatus)
: escape(userStatus) : escape(userStatus)
} }
</h1>` </h1>` : ``
: ``
} }
</div> </div>
</div> </div>
${ ${
activity activity ? `
? `
<div style=" <div style="
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -273,25 +265,20 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
width: auto; width: auto;
height: auto; height: auto;
"> ">
${ ${
activity.assets && activity.assets.large_image activity.assets && activity.assets.large_image ? `
? ` <img src="data:image/png;base64,${await encodeBase64(
<img src="data:image/png;base64,${await encodeBase64(
activity.assets.large_image.startsWith("mp:external/") activity.assets.large_image.startsWith("mp:external/")
? `https://media.discordapp.net/external/${activity.assets.large_image.replace( ? `https://media.discordapp.net/external/${activity.assets.large_image.replace("mp:external/", "")}`
"mp:external/",
""
)}`
: `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp` : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`
)}" )}"
style=" style="
width: 80px; width: 80px;
height: 80px; height: 80px;
border: solid 0.5px #222; border: solid 0.5px #222;
border-radius: 10px; border-radius: 10px;
"/> "/>
` ` : `
: `
<img src="data:image/png;base64,${await encodeBase64( <img src="data:image/png;base64,${await encodeBase64(
`https://lanyard-profile-readme.vercel.app/assets/unknown.png` `https://lanyard-profile-readme.vercel.app/assets/unknown.png`
)}" style=" )}" style="
@@ -300,17 +287,12 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
margin-top: 4px; margin-top: 4px;
filter: invert(100); filter: invert(100);
"/> "/>
` `}
}
${ ${
activity.assets && activity.assets.small_image activity.assets && activity.assets.small_image ? `
? `
<img src="data:image/png;base64,${await encodeBase64( <img src="data:image/png;base64,${await encodeBase64(
activity.assets.small_image.startsWith("mp:external/") activity.assets.small_image.startsWith("mp:external/")
? `https://media.discordapp.net/external/${activity.assets.small_image.replace( ? `https://media.discordapp.net/external/${activity.assets.small_image.replace("mp:external/", "")}`
"mp:external/",
""
)}`
: `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp` : `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`
)}" )}"
style=" style="
@@ -319,8 +301,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
border-radius: 50%; border-radius: 50%;
margin-left: -26px; margin-left: -26px;
margin-bottom: -8px; margin-bottom: -8px;
"/>` "/>` : ``
: ``
} }
</div> </div>
<div style=" <div style="
@@ -343,62 +324,57 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
height: 15px; height: 15px;
margin: 7px 0; margin: 7px 0;
">${escape(activity.name)}</p> ">${escape(activity.name)}</p>
${ ${
activity.details activity.details
? ` ? `
<p style=" <p style="
color: ${theme === "dark" ? "#ccc" : "#777"}; color: ${theme === "dark" ? "#ccc" : "#777"};
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 0.85rem; font-size: 0.85rem;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 15px; height: 15px;
margin: 7px 0; margin: 7px 0;
">${escape(activity.details)}</p>` ">${escape(activity.details)}</p>`
: `` : ``
} }
${ ${
activity.state activity.state
? ` ? `
<p style=" <p style="
color: ${theme === "dark" ? "#ccc" : "#777"}; color: ${theme === "dark" ? "#ccc" : "#777"};
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 0.85rem; font-size: 0.85rem;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 15px; height: 15px;
margin: 7px 0; margin: 7px 0;
">${escape(activity.state)}${ ">${escape(activity.state)}${
activity.party && activity.party.size activity.party && activity.party.size
? ` (${activity.party.size[0]} of ${activity.party.size[1]})` ? ` (${activity.party.size[0]} of ${activity.party.size[1]})`
: "" : ""
}</p>` }</p>` : ``
: `` }
} ${
${ activity.timestamps && activity.timestamps.start && hideTimestamp !== "true" ? `
activity.timestamps && activity.timestamps.start && hideTimestamp !== "true" <p style="
? ` color: ${theme === "dark" ? "#ccc" : "#777"};
<p style=" overflow: hidden;
color: ${theme === "dark" ? "#ccc" : "#777"}; white-space: nowrap;
overflow: hidden; font-size: 0.85rem;
white-space: nowrap; text-overflow: ellipsis;
font-size: 0.85rem; height: 15px;
text-overflow: ellipsis; margin: 7px 0;
height: 15px; ">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>`
margin: 7px 0; : ``
">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>` }
: ``
}
</div> </div>
</div> </div>
` ` : ``
: ``
} }
${ ${
body.data.listening_to_spotify === true && data.listening_to_spotify === true && !activity && data.activities[Object.keys(data.activities).length - 1].type === 2
!activity &&
body.data.activities[Object.keys(body.data.activities).length - 1].type === 2
? ` ? `
<div style=" <div style="
display: flex; display: flex;
@@ -409,7 +385,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
padding-top: 18px; padding-top: 18px;
"> ">
<img src="${await (async () => { <img src="${await (async () => {
const album = await encodeBase64(body.data.spotify.album_art_url); const album = await encodeBase64(data.spotify.album_art_url);
if (album) return `data:image/png;base64,${album}" style="border: solid 0.5px #222;`; if (album) return `data:image/png;base64,${album}" style="border: solid 0.5px #222;`;
return 'https://lanyard-profile-readme.vercel.app/assets/unknown.png" style="filter: invert(100);'; return 'https://lanyard-profile-readme.vercel.app/assets/unknown.png" style="filter: invert(100);';
})()} })()}
@@ -437,7 +413,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 7px 0; margin: 7px 0;
">${escape(body.data.spotify.song)}</p> ">${escape(data.spotify.song)}</p>
<p style=" <p style="
margin: 7px 0; margin: 7px 0;
height: 15px; height: 15px;
@@ -446,14 +422,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
font-size: 0.85rem; font-size: 0.85rem;
text-overflow: ellipsis; text-overflow: ellipsis;
color: ${theme === "dark" ? "#ccc" : "#777"}; color: ${theme === "dark" ? "#ccc" : "#777"};
">By ${escape(body.data.spotify.artist)}</p> ">By ${escape(data.spotify.artist)}</p>
</div> </div>
</div> </div>
` ` : ``
: ``
} }
${ ${
!activity && body.data.listening_to_spotify === false !activity && data.listening_to_spotify === false
? `<div style=" ? `<div style="
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -470,8 +445,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
"> ">
${escape(idleMessage)} ${escape(idleMessage)}
</p> </p>
</div>` </div>` : ``
: ``
} }
</div> </div>