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

feat(front): using @emotion/css as css formatter

Browse Source
This commit is contained in:
Hexagonn
2024-11-02 04:29:09 +00:00
committed by GitHub
parent c276b9969b
commit 26ba7d280b
3 changed files with 870 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
package.json
View File

@@ -1,54 +1,50 @@
{ {
"name": "app-router", "name": "app-router",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbopack", "dev": "next dev --turbopack",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint" "lint": "next lint"
}, },
"packageManager": "pnpm@9.11.0", "packageManager": "pnpm@9.11.0",
"dependencies": { "dependencies": {
"@radix-ui/react-checkbox": "^1.1.2", "@emotion/css": "^11.13.4",
"@radix-ui/react-dialog": "^1.1.2", "@emotion/server": "^11.11.0",
"@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-tooltip": "^1.1.3", "@radix-ui/react-popover": "^1.1.2",
"@types/escape-html": "^1.0.4", "@radix-ui/react-slot": "^1.1.0",
"class-variance-authority": "^0.7.0", "@radix-ui/react-tooltip": "^1.1.3",
"clsx": "^2.1.1", "@types/escape-html": "^1.0.4",
"cmdk": "1.0.0", "class-variance-authority": "^0.7.0",
"escape-html": "^1.0.3", "clsx": "^2.1.1",
"framer-motion": "12.0.0-alpha.1", "cmdk": "1.0.0",
"ioredis": "^5.4.1", "escape-html": "^1.0.3",
"lucide-react": "^0.453.0", "framer-motion": "12.0.0-alpha.1",
"next": "15.0.2", "ioredis": "^5.4.1",
"react": "18.3.1", "lucide-react": "^0.453.0",
"react-dom": "18.3.1", "next": "15.0.2",
"sharp": "^0.33.5", "react": "18.3.1",
"swr": "^2.2.5", "react-dom": "18.3.1",
"tailwind-merge": "^2.5.4", "sharp": "^0.33.5",
"tailwindcss-animate": "^1.0.7", "swr": "^2.2.5",
"use-smooth-count": "^1.0.1" "tailwind-merge": "^2.5.4",
}, "tailwindcss-animate": "^1.0.7",
"devDependencies": { "use-smooth-count": "^1.0.1"
"@types/node": "^20", },
"@types/react": "18.3.12", "devDependencies": {
"@types/react-dom": "18.3.1", "@types/node": "^20",
"eslint": "^8", "@types/react": "18.3.12",
"eslint-config-next": "15.0.1", "@types/react-dom": "18.3.1",
"postcss": "^8", "eslint": "^8",
"prettier": "^3.3.3", "eslint-config-next": "15.0.1",
"prettier-plugin-tailwindcss": "^0.6.8", "postcss": "^8",
"tailwindcss": "^3.4.1", "prettier": "^3.3.3",
"typescript": "^5" "prettier-plugin-tailwindcss": "^0.6.8",
}, "tailwindcss": "^3.4.1",
"pnpm": { "typescript": "^5"
"overrides": {
"@types/react": "npm:types-react@19.0.0-rc.1",
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
} }
}
} }

1039
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

174
src/utils/renderCard.tsx
View File

@@ -7,6 +7,14 @@ import * as LanyardTypes from "@/utils/LanyardTypes";
import { encodeBase64 } from "@/utils/toBase64"; import { encodeBase64 } from "@/utils/toBase64";
import escape from "escape-html"; import escape from "escape-html";
import createEmotion from '@emotion/css/create-instance'
import createEmotionServer from '@emotion/server/create-instance'
const key = 'render-card'
const { css, cache } = createEmotion({ key })
const { extractCritical } = createEmotionServer(cache)
export type Parameters = { export type Parameters = {
theme?: string; theme?: string;
bg?: string; bg?: string;
@@ -35,7 +43,7 @@ const parseAppId = (string: string | undefined): Array<string> => {
return string.split(","); return string.split(",");
} }
const elapsedTime = (timestamp: any) => { const elapsedTime = (timestamp: any): string => {
let startTime = timestamp; let startTime = timestamp;
let endTime = Number(new Date()); let endTime = Number(new Date());
let difference = (endTime - startTime) / 1000; let difference = (endTime - startTime) / 1000;
@@ -58,7 +66,7 @@ const elapsedTime = (timestamp: any) => {
)}:${("0" + secondsDifference).slice(-2)}`; )}:${("0" + secondsDifference).slice(-2)}`;
}; };
const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => { async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise<string> {
let { data } = body; let { data } = body;
let avatarBorderColor: string = "#747F8D", let avatarBorderColor: string = "#747F8D",
@@ -175,7 +183,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
return "200"; return "200";
} }
return ` const renderSVG = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${svgHeight()}px"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${svgHeight()}px">
<defs> <defs>
<style> <style>
@@ -189,9 +197,10 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
transition-duration: 200ms; transition-duration: 200ms;
} }
</style> </style>
{{ emotion-css }}
</defs> </defs>
<foreignObject x="0" y="0" width="410" height="${svgHeight()}"> <foreignObject x="0" y="0" width="410" height="${svgHeight()}">
<div xmlns="http://www.w3.org/1999/xhtml" style=" <div xmlns="http://www.w3.org/1999/xhtml" class="${css`
position: absolute; position: absolute;
width: 400px; width: 400px;
height: ${divHeight()}px; height: ${divHeight()}px;
@@ -204,11 +213,11 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
flex-direction: column; flex-direction: column;
padding: 5px; padding: 5px;
border-radius: ${borderRadius}; border-radius: ${borderRadius};
"> `}">
${ ${
hideProfile ? "" : ` hideProfile ? "" : `
<div style=" <div class="${css`
width: 400px; width: 400px;
height: 100px; height: 100px;
inset: 0; inset: 0;
@@ -221,17 +230,17 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
"hsl(0, 0%, 100%, 10%)" "hsl(0, 0%, 100%, 10%)"
: "hsl(0, 0%, 0%, 10%)" : "hsl(0, 0%, 0%, 10%)"
}` }`
} }`
"> }">
<div style=" <div class="${css`
display: flex; display: flex;
position: relative; position: relative;
flex-direction: row; flex-direction: row;
height: 80px; height: 80px;
width: 80px; width: 80px;
"> `}">
<img src="data:image/png;base64,${avatar}" <img src="data:image/png;base64,${avatar}"
style=" class="${css`
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@@ -239,11 +248,10 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
"/> `}"/>
${hideDecoration || !data.discord_user.avatar_decoration_data ? "" : ` ${hideDecoration || !data.discord_user.avatar_decoration_data ? "" : `
<img src="data:image/png;base64,${avatarDecoration!}" <img src="data:image/png;base64,${avatarDecoration!}"
class="hover-opacity transition" class="${css`
style="
display: block; display: block;
width: 64px; width: 64px;
height: 64px; height: 64px;
@@ -251,9 +259,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
"/> `} hover-opacity transition"/>
`} `}
<span style=" <span class="${css`
position: absolute; position: absolute;
bottom: 14px; bottom: 14px;
right: 14px; right: 14px;
@@ -262,28 +270,28 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
background-color: ${avatarBorderColor}; background-color: ${avatarBorderColor};
border-radius: 50%; border-radius: 50%;
border: 3px solid #${backgroundColor}; border: 3px solid #${backgroundColor};
" /> `}" />
</div> </div>
<div style=" <div class="${css`
height: 80px; height: 80px;
width: 260px; width: 260px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
"> `}">
<div style=" <div class="${css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 25px; height: 25px;
"> `}">
<h1 style=" <h1 class="${css`
font-size: 1.15rem; font-size: 1.15rem;
margin: 0 12px 0 0; margin: 0 12px 0 0;
white-space: nowrap; white-space: nowrap;
"> `}">
${escape(showDisplayName ? data.discord_user.global_name : data.discord_user.username)}${ ${escape(showDisplayName ? data.discord_user.global_name : data.discord_user.username)}${
!hideDiscrim && !showDisplayName !hideDiscrim && !showDisplayName
? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${ ? `<span class="${css`color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;"`}">#${
data.discord_user.discriminator data.discord_user.discriminator
}</span>` }</span>`
: "" : ""
@@ -291,7 +299,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
</h1> </h1>
${hideClan || !data.discord_user.clan?.tag && !data.discord_user.clan?.badge ? "" : ` ${hideClan || !data.discord_user.clan?.tag && !data.discord_user.clan?.badge ? "" : `
<span style=" <span class="${css`
background-color: ${clanBackgroundColor}; background-color: ${clanBackgroundColor};
border-radius: 0.375rem; border-radius: 0.375rem;
padding-left: 0.5rem; padding-left: 0.5rem;
@@ -305,37 +313,37 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
font-weight: 500; font-weight: 500;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
height: 100%; height: 100%;
"> `}">
<img src="data:image/png;base64,${clanBadge!}" /> <img src="data:image/png;base64,${clanBadge!}" />
<p style="margin-bottom: 1.1rem">${escape(data.discord_user.clan!.tag)}</p> <p class="${css`margin-bottom: 1.1rem`}">${escape(data.discord_user.clan!.tag)}</p>
</span> </span>
`} `}
${hideBadges ? "" : flags.map(v => ` ${hideBadges ? "" : flags.map(v => `
<img src="data:image/png;base64,${Badges[v]}" style=" <img src="data:image/png;base64,${Badges[v]}" class="${css`
width: auto; width: auto;
height: 20px; height: 20px;
position: relative; position: relative;
top: 50%; top: 50%;
transform: translate(0%, -50%); transform: translate(0%, -50%);
margin-right: 7px; margin-right: 7px;
" />`).join("") `}" />`).join("")
} }
</div> </div>
${showDisplayName ? ${showDisplayName ?
`<h2 style=" `<h2 class="${css`
font-size: 0.95rem; font-size: 0.95rem;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
font-weight: 400; font-weight: 400;
"> `}">
${escape(data.discord_user.username)} ${escape(data.discord_user.username)}
</h2>` </h2>`
: `` : ``
} }
${ ${
userStatus && !hideStatus ? ` userStatus && !hideStatus ? `
<p style=" <p class="${css`
font-size: 0.9rem; font-size: 0.9rem;
margin: 0; margin: 0;
color: ${theme === "dark" ? "#aaa" : "#333"}; color: ${theme === "dark" ? "#aaa" : "#333"};
@@ -343,20 +351,20 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
"> `}">
${ ${
userStatus.emoji?.id ? ` userStatus.emoji?.id ? `
<img src="data:image/png;base64,${await encodeBase64( <img src="data:image/png;base64,${await encodeBase64(
`https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}` `https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}`
)}" )}"
style=" class="${css`
width: 15px; width: 15px;
height: 15px; height: 15px;
position: relative; position: relative;
top: 10px; top: 10px;
transform: translate(0%, -50%); transform: translate(0%, -50%);
margin: 0 2px 0 0; margin: 0 2px 0 0;
" />` : '' `}" />` : ''
} }
${ ${
userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
@@ -375,19 +383,19 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
${ ${
activity ? ` activity ? `
<div style=" <div class="${css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 120px; height: 120px;
margin-left: 15px; margin-left: 15px;
font-size: 0.75rem; font-size: 0.75rem;
padding-top: 18px; padding-top: 18px;
"> `}">
<div style=" <div class="${css`
margin-right: 15px; margin-right: 15px;
width: auto; width: auto;
height: auto; height: auto;
"> `}">
${ ${
activity.assets?.large_image ? ` activity.assets?.large_image ? `
<img src="data:image/png;base64,${await encodeBase64( <img src="data:image/png;base64,${await encodeBase64(
@@ -395,21 +403,21 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
? `https://media.discordapp.net/external/${activity.assets.large_image.replace("mp:external/", "")}` ? `https://media.discordapp.net/external/${activity.assets.large_image.replace("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=" class="${css`
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=" )}" class="${css`
width: 70px; width: 70px;
height: 70px; height: 70px;
margin-top: 4px; margin-top: 4px;
filter: invert(100); filter: invert(100);
"/> `}"/>
`} `}
${ ${
activity.assets?.small_image ? ` activity.assets?.small_image ? `
@@ -418,16 +426,16 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
? `https://media.discordapp.net/external/${activity.assets.small_image.replace("mp:external/", "")}` ? `https://media.discordapp.net/external/${activity.assets.small_image.replace("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=" class="${css`
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
margin-left: -26px; margin-left: -26px;
margin-bottom: -8px; margin-bottom: -8px;
"/>` : `` `}"/>` : ``
} }
</div> </div>
<div style=" <div class="${css`
color: #999; color: #999;
margin-top: ${ margin-top: ${
activity.timestamps?.start && !hideTimestamp activity.timestamps?.start && !hideTimestamp
@@ -436,8 +444,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
}; };
line-height: 1; line-height: 1;
width: 279px; width: 279px;
"> `}">
<p style=" <p class="${css`
color: ${theme === "dark" ? "#fff" : "#000"}; color: ${theme === "dark" ? "#fff" : "#000"};
font-size: 0.85rem; font-size: 0.85rem;
font-weight: bold; font-weight: bold;
@@ -446,11 +454,11 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
text-overflow: ellipsis; text-overflow: ellipsis;
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 class="${css`
color: ${theme === "dark" ? "#ccc" : "#777"}; color: ${theme === "dark" ? "#ccc" : "#777"};
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@@ -458,13 +466,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
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 class="${css`
color: ${theme === "dark" ? "#ccc" : "#777"}; color: ${theme === "dark" ? "#ccc" : "#777"};
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@@ -472,7 +480,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
text-overflow: ellipsis; text-overflow: ellipsis;
height: 15px; height: 15px;
margin: 7px 0; margin: 7px 0;
">${escape(activity.state)}${ `}">${escape(activity.state)}${
activity.party?.size activity.party?.size
? ` (${activity.party.size[0]} of ${activity.party.size[1]})` ? ` (${activity.party.size[0]} of ${activity.party.size[1]})`
: "" : ""
@@ -480,7 +488,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
} }
${ ${
activity.timestamps?.start && !hideTimestamp ? ` activity.timestamps?.start && !hideTimestamp ? `
<p style=" <p class="${css`
color: ${theme === "dark" ? "#ccc" : "#777"}; color: ${theme === "dark" ? "#ccc" : "#777"};
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@@ -488,7 +496,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
text-overflow: ellipsis; text-overflow: ellipsis;
height: 15px; height: 15px;
margin: 7px 0; margin: 7px 0;
">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>` `}">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>`
: `` : ``
} }
</div> </div>
@@ -499,35 +507,39 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
${ ${
data.listening_to_spotify && !activity && !hideSpotify && data.activities[Object.keys(data.activities).length - 1].type === 2 data.listening_to_spotify && !activity && !hideSpotify && data.activities[Object.keys(data.activities).length - 1].type === 2
? ` ? `
<div style=" <div class="${css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 120px; height: 120px;
margin-left: 15px; margin-left: 15px;
font-size: 0.8rem; font-size: 0.8rem;
padding-top: 18px; padding-top: 18px;
"> `}">
<img src="${await (async () => { <img
const album = await encodeBase64(data.spotify.album_art_url); src="${await (async () => {
if (album) return `data:image/png;base64,${album}" style="border: solid 0.5px #222;`; const album = await encodeBase64(data.spotify.album_art_url);
return 'https://lanyard-profile-readme.vercel.app/assets/unknown.png" style="filter: invert(100);'; if (album) return `data:image/png;base64,${album}`;
})()} return 'https://lanyard-profile-readme.vercel.app/assets/unknown.png';
width: 80px; })()}"
height: 80px; class="${css`
border-radius: 10px; ${data.spotify.album_art_url ? "border: solid 0.5px #222;" : "filter: invert(100);"}
margin-right: 15px; width: 80px;
"/> height: 80px;
border-radius: 10px;
margin-right: 15px;
`}"
/>
<div style=" <div class="${css`
color: #999; color: #999;
margin-top: -3px; margin-top: -3px;
line-height: 1; line-height: 1;
width: 279px; width: 279px;
"> `}">
<p style="font-size: 0.75rem; font-weight: bold; color: ${ <p class="${css`font-size: 0.75rem; font-weight: bold; color: ${
theme === "dark" ? "#1CB853" : "#0d943d" theme === "dark" ? "#1CB853" : "#0d943d"
}; margin-bottom: 15px;">LISTENING TO SPOTIFY...</p> }; margin-bottom: 15px;`}">LISTENING TO SPOTIFY...</p>
<p style=" <p class="${css`
height: 15px; height: 15px;
color: ${theme === "dark" ? "#fff" : "#000"}; color: ${theme === "dark" ? "#fff" : "#000"};
font-weight: bold; font-weight: bold;
@@ -536,8 +548,8 @@ 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(data.spotify.song)}</p> `}">${escape(data.spotify.song)}</p>
<p style=" <p class="${css`
margin: 7px 0; margin: 7px 0;
height: 15px; height: 15px;
overflow: hidden; overflow: hidden;
@@ -545,27 +557,27 @@ 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(data.spotify.artist)}</p> `}">By ${escape(data.spotify.artist)}</p>
</div> </div>
</div> </div>
` : `` ` : ``
} }
${ ${
!activity && (!data.listening_to_spotify || hideSpotify) && hideActivity === "false" !activity && (!data.listening_to_spotify || hideSpotify) && hideActivity === "false"
? `<div style=" ? `<div class="${css`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 150px; height: 150px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
"> `}">
<p style=" <p class="${css`
font-style: italic; font-style: italic;
font-size: 0.8rem; font-size: 0.8rem;
color: ${theme === "dark" ? "#aaa" : "#444"}; color: ${theme === "dark" ? "#aaa" : "#444"};
height: auto; height: auto;
text-align: center; text-align: center;
"> `}">
${escape(idleMessage)} ${escape(idleMessage)}
</p> </p>
</div>` : `` </div>` : ``
@@ -575,6 +587,10 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
</foreignObject> </foreignObject>
</svg> </svg>
`; `;
let emotion = extractCritical(renderSVG);
return renderSVG.replace("{{ emotion-css }}", `<style data-emotion="${key} ${emotion.ids.join(' ')}">${emotion.css}</style>`)
}; };
export default renderCard; export default renderCard;