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

new param: hide status + color changes for light/dark theme

Browse Source
This commit is contained in:
Conrad
2021-06-20 20:47:55 -04:00
parent b9d2aca5b3
commit b52269c211
3 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -41,6 +41,10 @@ If you have an animated avatar, append the query param `animated=:bool` to the e
If you don't want people seeing your discriminator (most likely for privacy reasons), append the query param `hideDiscrim=true` to the end of the URL. Your discriminator is shown by default. If you don't want people seeing your discriminator (most likely for privacy reasons), append the query param `hideDiscrim=true` to the end of the URL. Your discriminator is shown by default.
### ___Hide Status
If you don't want people seeing your status, append the query param `hideStatus=true` to the end of the URL. Your status is shown by default if you have one.
## ___Example URL and result___ ## ___Example URL and result___
``` ```

2
pages/api/[...id].ts
View File

@@ -30,7 +30,7 @@ export default async function handler(
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
res.send({ error: 'Please provide a valid Discord user ID!' }) res.send({ error: `Something went wrong! If everything looks correct and this still occurs, please contact @cnraddd on Twitter.` })
}); });
let svg = await renderCard(lanyardData.data, params); let svg = await renderCard(lanyardData.data, params);

11
src/renderCard.tsx
View File

@@ -10,6 +10,7 @@ type Parameters = {
bg?: string; bg?: string;
animated?: string; animated?: string;
hideDiscrim?: string; hideDiscrim?: string;
hideStatus?: string;
} }
const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<any> => { const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<any> => {
@@ -22,6 +23,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
let backgroundColor: string = '1a1c1f'; let backgroundColor: string = '1a1c1f';
let theme = 'dark'; let theme = 'dark';
let discrim = 'show'; let discrim = 'show';
let hideStatus = 'false';
if(body.data.activities[0]){ if(body.data.activities[0]){
if(body.data.activities[0].emoji && body.data.activities[0].emoji.animated === true) statusExtension = "gif"; if(body.data.activities[0].emoji && body.data.activities[0].emoji.animated === true) statusExtension = "gif";
@@ -42,6 +44,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
theme = 'light'; theme = 'light';
} }
if(params.bg) backgroundColor = params.bg; if(params.bg) backgroundColor = params.bg;
if(params.hideStatus === 'true') hideStatus = 'true';
switch(body.data.discord_status){ switch(body.data.discord_status){
case "online": case "online":
@@ -118,7 +121,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
top: ${userStatus.length > 0 ? "35%" : "50%"}; top: ${userStatus.length > 0 && hideStatus !== "true" ? "35%" : "50%"};
transform: translate(0, -50%); transform: translate(0, -50%);
height: 25px; height: 25px;
"> ">
@@ -149,7 +152,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
</div> </div>
${userStatus.length > 0 ? ` ${userStatus.length > 0 && hideStatus !== "true" ? `
<h1 style=" <h1 style="
font-size: 0.9rem; font-size: 0.9rem;
margin-top: 16px; margin-top: 16px;
@@ -226,7 +229,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
line-height: 1; line-height: 1;
width: 279px; width: 279px;
"> ">
<p style="font-size: 0.7rem; color: #7289DA; margin-bottom: 15px;">PLAYING A GAME...</p> <p style="font-size: 0.7rem; color: ${theme === 'dark' ? '#7289DA' : '#334da6'}; margin-bottom: 15px;">PLAYING A GAME...</p>
<p style=" <p style="
color: ${theme === 'dark' ? '#fff' : '#000'}; \ color: ${theme === 'dark' ? '#fff' : '#000'}; \
font-weight: bold; font-weight: bold;
@@ -278,7 +281,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
line-height: 1; line-height: 1;
width: 279px; width: 279px;
"> ">
<p style="font-size: 0.75rem; color: #1CB853; margin-bottom: 15px;">LISTENING NOW...</p> <p style="font-size: 0.75rem; color: ${theme === 'dark' ? '#1CB853' : '#0d943d'}; margin-bottom: 15px;">LISTENING NOW...</p>
<p style=" <p style="
height: 15px; height: 15px;
color: ${theme === 'dark' ? '#fff' : '#000'}; color: ${theme === 'dark' ? '#fff' : '#000'};