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

feat: avatar decoration

Browse Source
This commit is contained in:
Hexagonn
2024-09-28 15:48:49 +07:00
parent 7c3aba4851
commit e4842100f1
2 changed files with 54 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/LanyardTypes.ts
View File

@@ -38,6 +38,7 @@ export interface DiscordUser {
global_name: string;
display_name: string;
clan: ClanTag | null;
avatar_decoration_data: AvatarDecoration | null;
}
export interface ClanTag {
@@ -47,6 +48,12 @@ export interface ClanTag {
identity_guild_id: number;
}
export interface AvatarDecoration {
sku_id: string;
asset: string;
expires_at: number;
}
export interface Activity {
type: number;
state: string;

48
src/renderCard.tsx
View File

@@ -19,6 +19,7 @@ type Parameters = {
hideActivity?: string;
hideSpotify?: string;
hideClan?: string;
hideDecoration?: string;
ignoreAppId?: string;
showDisplayName?: string;
borderRadius?: string;
@@ -74,10 +75,12 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
let hideActivity = params.hideActivity ?? "false";
let hideSpotify = parseBool(params.hideSpotify);
let hideClan = parseBool(params.hideClan);
let hideDecoration = parseBool(params.hideDecoration);
let ignoreAppId = parseAppId(params.ignoreAppId);
let hideDiscrim = parseBool(params.hideDiscrim);
let showDisplayName = parseBool(params.showDisplayName);
if (!data.discord_user.avatar_decoration_data || params.hideDecoration) hideDecoration = true;
if (parseBool(params.hideDiscrim) || body.data.discord_user.discriminator === "0") hideDiscrim = true;
if (!body.data.discord_user.clan) hideClan = true;
if (data.activities[0]?.emoji?.animated) statusExtension = "gif";
@@ -115,6 +118,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
);
}
let avatarDecoration: string;
if (data.discord_user.avatar_decoration_data) {
avatarDecoration = await encodeBase64(
`https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}.png?size=64&passthrough=true`
);
}
switch (data.discord_status) {
case "online":
avatarBorderColor = "#43B581";
@@ -165,6 +175,19 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
return `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${svgHeight()}px">
<defs>
<style>
.hover-opacity:hover {
opacity: 0.25;
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
</style>
</defs>
<foreignObject x="0" y="0" width="410" height="${svgHeight()}">
<div xmlns="http://www.w3.org/1999/xhtml" style="
position: absolute;
@@ -200,13 +223,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
">
<div style="
display: flex;
position: relative;
flex-direction: row;
height: 80px;
width: 80px;
">
<img src="data:image/png;base64,${avatar}"
style="
border: solid 3px ${avatarBorderColor};
border-radius: 50%;
width: 50px;
height: 50px;
@@ -215,6 +238,29 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
left: 50%;
transform: translate(-50%, -50%);
"/>
${hideDecoration || !data.discord_user.avatar_decoration_data ? "" : `
<img src="data:image/png;base64,${avatarDecoration!}"
class="hover-opacity transition"
style="
display: block;
width: 64px;
height: 64px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
"/>
`}
<span style="
position: absolute;
bottom: 14px;
right: 14px;
height: 13px;
width: 13px;
background-color: ${avatarBorderColor};
border-radius: 50%;
border: 3px solid #${backgroundColor};
" />
</div>
<div style="
height: 80px;