diff --git a/README.md b/README.md index 9356cec..07a3da4 100644 --- a/README.md +++ b/README.md @@ -54,4 +54,5 @@ If you don't want people seeing your status, append the query param `hideStatus= [![Discord Presence](https://lanyard-profile-readme.vercel.app/api/94490510688792576?theme=light&bg=809ecf&animated=false&hideDiscrim=true)](https://discord.com/users/94490510688792576) \ +Note: Discord nitro and Nitro Boosting badges do not work due to discord api limitations. _If you're using this in your profile, feel free to show support and give this repo a ⭐ star! It means a lot, thank you :)_ diff --git a/package.json b/package.json index e395c3b..3a41903 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "styled-components": "^5.3.0" }, "devDependencies": { + "@types/image-to-base64": "^2.1.0", "@types/react": "17.0.11", "eslint": "7.28.0", "eslint-config-next": "11.0.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 25a1e6e..ab0b18c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,5 @@ import type { AppProps } from 'next/app' -function MyApp({ Component, pageProps }: AppProps) { +export default function LanyardReadMe({ Component, pageProps }: AppProps) { return } -export default MyApp diff --git a/pages/_document.js b/pages/_document.js index f603062..7511a5a 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -3,8 +3,8 @@ import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { - const sheet = new ServerStyleSheet() - const originalRenderPage = ctx.renderPage + const sheet = new ServerStyleSheet(), + originalRenderPage = ctx.renderPage try { ctx.renderPage = () => diff --git a/pages/api/[...id].ts b/pages/api/[...id].ts index 6f25edd..b408e5d 100644 --- a/pages/api/[...id].ts +++ b/pages/api/[...id].ts @@ -9,7 +9,7 @@ type Data = { } type Parameters = { - animated?: string; + animated?: string; } export default async function handler( @@ -17,24 +17,20 @@ export default async function handler( res: NextApiResponse ) { - let params: Parameters = req.query; - let userid = req.query.id[0]; - res.setHeader("Content-Type", "image/svg+xml; charset=utf-8"); - res.setHeader("content-security-policy", "default-src 'none'; img-src * data:; style-src 'unsafe-inline'"); + let params: Parameters = req.query, + userid = req.query.id[0], + lanyardData: any; - let lanyardData: any; + res.setHeader("Content-Type", "image/svg+xml; charset=utf-8"); + res.setHeader("content-security-policy", "default-src 'none'; img-src * data:; style-src 'unsafe-inline'"); - await axios.get(`https://api.lanyard.rest/v1/users/${userid}`) - .then((response) => { - return lanyardData = response; - }) - .catch((err) => { - console.log(err); - res.send({ error: `Something went wrong! If everything looks correct and this still occurs, please contact @cnraddd on Twitter.` }) - }); + try { + lanyardData = await axios.get(`https://api.lanyard.rest/v1/users/${userid}`); + } catch (e) { + console.log(e) + 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); - res.status(200).send(svg); - - console.log(req.query); + let svg = await renderCard(lanyardData.data, params); + res.status(200).send(svg as any); } \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index 7773f2c..105b1a2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,15 +3,13 @@ import styled from 'styled-components'; import { useState } from 'react'; export default function Home() { - - let [userId, setUserId] = useState(':id') + const [userId, setUserId] = useState(':id') return ( <> - Lanyard for GitHub Profile @@ -19,28 +17,16 @@ export default function Home() {
🏷️ lanyard-profile-readme
- - -

Make sure you're in the Discord for this to work.

- - setUserId(e.target.value))}> - - - - Copy the following and paste it into your README.md - +

Make sure you're in the Discord for this to work.

+ setUserId(e.target.value))} /> + Copy the following and paste it into your README.md [![Discord Presence](https://lanyard-profile-readme.vercel.app/api/{userId})](https://discord.com/users/{userId}) - - For further customization, check out the repo! - - - - + For further customization, check out the repo! + - ) diff --git a/src/getFlags.ts b/src/getFlags.ts index 6f9ed82..77b749f 100644 --- a/src/getFlags.ts +++ b/src/getFlags.ts @@ -1,36 +1,16 @@ -export const getFlags = (flag:number): string[] => { +export const getFlags = (flag: number): string[] => { let flags: string[] = []; - if(flag & 1){ - flags.push("Discord_Employee") - } - if(flag & 2){ - flags.push("Partnered_Server_Owner") - } - if(flag & 4){ - flags.push("HypeSquad_Events") - } - if(flag & 8){ - flags.push("Bug_Hunter_Level_1") - } - if(flag & 64){ - flags.push("House_Bravery") - } - if(flag & 128){ - flags.push("House_Brilliance") - } - if(flag & 256){ - flags.push("House_Balance") - } - if(flag & 512){ - flags.push("Early_Supporter") - } - if(flag & 16384){ - flags.push("Bug_Hunter_Level_2") - } - if(flag & 131072){ - flags.push("Early_Verified_Bot_Developer") - } + if (flag & 1) flags.push("Discord_Employee") + if (flag & 2) flags.push("Partnered_Server_Owner") + if (flag & 4) flags.push("HypeSquad_Events") + if (flag & 8) flags.push("Bug_Hunter_Level_1") + if (flag & 64) flags.push("House_Bravery") + if (flag & 128) flags.push("House_Brilliance") + if (flag & 256) flags.push("House_Balance") + if (flag & 512) flags.push("Early_Supporter") + if (flag & 16384) flags.push("Bug_Hunter_Level_2") + if (flag & 131072) flags.push("Early_Verified_Bot_Developer") return flags; } \ No newline at end of file diff --git a/src/renderCard.tsx b/src/renderCard.tsx index 41b3fb4..6713051 100644 --- a/src/renderCard.tsx +++ b/src/renderCard.tsx @@ -1,9 +1,9 @@ //probably the messiest code i've ever written but it works so :) +import { Badges } from '../public/assets/badges/BadgesEncoded'; +import { getFlags } from './getFlags'; import * as LanyardTypes from './LanyardTypes'; -import { getFlags } from "./getFlags"; -import encodeBase64 from './toBase64'; -import { Badges } from '../public/assets/badges/BadgesEncoded' +import { encodeBase64 } from './toBase64'; type Parameters = { theme?: string; @@ -13,57 +13,49 @@ type Parameters = { hideStatus?: string; } -const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise => { - - let avatarBorderColor: string = "#747F8D"; - let userStatus: string = ""; - let avatarExtension: string = "webp"; - let statusExtension: string = "webp"; - let activity: any = false; - let backgroundColor: string = '1a1c1f'; - let theme = 'dark'; - let discrim = 'show'; - let hideStatus = 'false'; +const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise => { + const defaultAvatar: string = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAY1BMVEVYZfJib/OMlfahqPeWn/eBi/XLz/vq6/7////19f5tePTq7P22vPnV2Pyrsvirsvl3gvT09f7Axfp3gfRtePNsePPg4v22vPq2u/qCi/WhqPjf4/zf4v2Xn/essvjLzvuXnvdbidFTAAAETElEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAIDZudMtV1UlDuCFRKlWIEJ6uOwbzXn/lzzzYc/GWiT6zya/79WrLeYSc5Vq9IFWa3Sr6JehWt0ZZn5RtFJvmHnodPsrPLx1/B9PKx1ziLOPnIRRO84EXaAP/CWnR3pArTWcybpA5G8NsX20pw+cSbpAngEeOQenY+Cf8KIZ4FuDfSV4Ko/7hS7wNjYH7W3MvNeHtn2jvxn+OXcgaP0x8KJo43vgnwqu85EXDfGVULWON9G1BOmDN/M/AnTgDSWC0xve0KAITeSsykFw4qzOQWB4YwNBOfLmPAHpeXsvr5XOgJkjGA3vIlU6A2bvOHvAnXwiCMrwTl5UpUtg5us7BAB2gcg78nXugaC6QORd+bo7AEAXiLwzX+8SANEFNHPdXcAwV90FDgxA037+zwAc7aZlCKnSNTDrADZBdU6DBwbha5wCAabBkWGkSqfAzFa6C8xeADYB9Y2ByEBsbSMAYAy0zHWPActQLPQuKBh3DiwiDRlwzwFOv9JfTpORh5x5rVfQc8CQiLLJiEMaA1oW6XgVq+grVh4yY56JA68x07fm8hCIhXCUPn823zgkG/HK4Rf6kYv8YBt5BQ03BQyv9CMq8M/JQ7IItw+e6cd8QQjKTqCX3OMTtOdCCNZOoCnqkrYgZEFD2/FF/08qDAE4Dji+TtHPKHknVmBboVB2i9HI9zIGahZUhaVqVxCyQEEVQ7rSBMj3QiPUUTCWJkC+8zrQVjzmELBYG2H5jDYUFqAiQDlMtAwKQgjr+nwoq9O2BSEQJQFVWKeNBSEQ6+BYeG3BFIUAHIfasmsLh7IQgLcjDZd0AWXEIZRDMDYCuuj73g95yJGxEuBLPmr6VBSyzMO9Fpzko3kqeA1r8W4GHOWNKQ/JIl4COL4SZf2lPAQhAY4lYrv860rlIVmHlYAsuBhjFwpCwO4LOkb0TMAzAc8EPBPwTMAGngl4JuCZgMig4jMB27AMykJUhCr4ekwzKI10T9hpwzcz6DNSUbRdORzThW/CJSKagd4LjKurof1suFCYVR54MDckpsBXDLk3pliQgxBTHneBrwiaNtOfeUUKCnMQYlKC32x2r7SlmSUpoOQdi5xtoqx1DNP8WW9kKSCVvAu8QnC2USR4/I2bP5vDmhS80pdOjXULw8dc7HSiL6ljYLTmz/ooKvJTdkqTt9G5s/mHczH6qXlV9I32Ehi0+QVfQbn7HryHhvY033V1Tuu3CRncOIj3rL3EV9pf7+53ced0bY+MIZm7ndEt9uNnkxN8OSWhAvjjZ8ktnIoKaMDHF0yH8S416C4Rpv7bU094pWJ9QFv4BJOBvnkFzjWKMvhu4G78IibMIz2EFM3KFUAwCEI+ID9MDia6kd/+enpFj+YE+af+aA8OZAAAAAAG+Vvf46sAAAAAAAAAAAAAAAAAAAAAAFYCeHSjWah9hFcAAAAASUVORK5CYII="; - if(body.data.activities[0]){ - if(body.data.activities[0].emoji && body.data.activities[0].emoji.animated === true) statusExtension = "gif"; - } + let avatarBorderColor: string = "#747F8D", + userStatus: string = "", + avatarExtension: string = "webp", + statusExtension: string = "webp", + activity: any = false, + backgroundColor: string = '1a1c1f', + theme = 'dark', + discrim = 'show', + hideStatus = 'false'; - if(body.data.activities.length > 0) { - if(body.data.activities[Object.keys(body.data.activities).length - 1].type === 0) activity = body.data.activities[Object.keys(body.data.activities).length - 1]; - } - - let defaultAvatar: string = "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAY1BMVEVYZfJib/OMlfahqPeWn/eBi/XLz/vq6/7////19f5tePTq7P22vPnV2Pyrsvirsvl3gvT09f7Axfp3gfRtePNsePPg4v22vPq2u/qCi/WhqPjf4/zf4v2Xn/essvjLzvuXnvdbidFTAAAETElEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAIDZudMtV1UlDuCFRKlWIEJ6uOwbzXn/lzzzYc/GWiT6zya/79WrLeYSc5Vq9IFWa3Sr6JehWt0ZZn5RtFJvmHnodPsrPLx1/B9PKx1ziLOPnIRRO84EXaAP/CWnR3pArTWcybpA5G8NsX20pw+cSbpAngEeOQenY+Cf8KIZ4FuDfSV4Ko/7hS7wNjYH7W3MvNeHtn2jvxn+OXcgaP0x8KJo43vgnwqu85EXDfGVULWON9G1BOmDN/M/AnTgDSWC0xve0KAITeSsykFw4qzOQWB4YwNBOfLmPAHpeXsvr5XOgJkjGA3vIlU6A2bvOHvAnXwiCMrwTl5UpUtg5us7BAB2gcg78nXugaC6QORd+bo7AEAXiLwzX+8SANEFNHPdXcAwV90FDgxA037+zwAc7aZlCKnSNTDrADZBdU6DBwbha5wCAabBkWGkSqfAzFa6C8xeADYB9Y2ByEBsbSMAYAy0zHWPActQLPQuKBh3DiwiDRlwzwFOv9JfTpORh5x5rVfQc8CQiLLJiEMaA1oW6XgVq+grVh4yY56JA68x07fm8hCIhXCUPn823zgkG/HK4Rf6kYv8YBt5BQ03BQyv9CMq8M/JQ7IItw+e6cd8QQjKTqCX3OMTtOdCCNZOoCnqkrYgZEFD2/FF/08qDAE4Dji+TtHPKHknVmBboVB2i9HI9zIGahZUhaVqVxCyQEEVQ7rSBMj3QiPUUTCWJkC+8zrQVjzmELBYG2H5jDYUFqAiQDlMtAwKQgjr+nwoq9O2BSEQJQFVWKeNBSEQ6+BYeG3BFIUAHIfasmsLh7IQgLcjDZd0AWXEIZRDMDYCuuj73g95yJGxEuBLPmr6VBSyzMO9Fpzko3kqeA1r8W4GHOWNKQ/JIl4COL4SZf2lPAQhAY4lYrv860rlIVmHlYAsuBhjFwpCwO4LOkb0TMAzAc8EPBPwTMAGngl4JuCZgMig4jMB27AMykJUhCr4ekwzKI10T9hpwzcz6DNSUbRdORzThW/CJSKagd4LjKurof1suFCYVR54MDckpsBXDLk3pliQgxBTHneBrwiaNtOfeUUKCnMQYlKC32x2r7SlmSUpoOQdi5xtoqx1DNP8WW9kKSCVvAu8QnC2USR4/I2bP5vDmhS80pdOjXULw8dc7HSiL6ljYLTmz/ooKvJTdkqTt9G5s/mHczH6qXlV9I32Ehi0+QVfQbn7HryHhvY033V1Tuu3CRncOIj3rL3EV9pf7+53ced0bY+MIZm7ndEt9uNnkxN8OSWhAvjjZ8ktnIoKaMDHF0yH8S416C4Rpv7bU094pWJ9QFv4BJOBvnkFzjWKMvhu4G78IibMIz2EFM3KFUAwCEI+ID9MDia6kd/+enpFj+YE+af+aA8OZAAAAAAG+Vvf46sAAAAAAAAAAAAAAAAAAAAAAFYCeHSjWah9hFcAAAAASUVORK5CYII="; - - if(body.data.discord_user.avatar !== null && body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif"; - - if(params.animated === "false") avatarExtension = "webp"; - if(params.hideDiscrim === "true") discrim = "hide"; - if(params.theme === 'light'){ + if (body.data.activities[0]?.emoji?.animated) statusExtension = "gif"; + if (body.data.discord_user.avatar && body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif"; + if (body.data.activities.length > 0 && body.data.activities[Object.keys(body.data.activities).length - 1].type === 0) activity = body.data.activities[Object.keys(body.data.activities).length - 1]; + if (params.animated === "false") avatarExtension = "webp"; + if (params.hideStatus === 'true') hideStatus = 'true'; + if (params.hideDiscrim === "true") discrim = "hide"; + if (params.bg) backgroundColor = params.bg; + if (params.theme === 'light') { backgroundColor = '#eee'; theme = 'light'; } - if(params.bg) backgroundColor = params.bg; - if(params.hideStatus === 'true') hideStatus = 'true'; - switch(body.data.discord_status){ - case "online": + switch (body.data.discord_status) { + case "online": avatarBorderColor = "#43B581"; break; - case "idle": + case "idle": avatarBorderColor = "#FAA61A"; break; - case "dnd": + case "dnd": avatarBorderColor = "#F04747"; break; - case "offline": + case "offline": avatarBorderColor = "#747F8D"; break; } - let flags: string[] = getFlags(body.data.discord_user.public_flags); + const flags: string[] = getFlags(body.data.discord_user.public_flags); - if(body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state; + if (body.data.activities[0] && body.data.activities[0].state && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state; console.log(Object.keys(body.data.activities).length); @@ -100,8 +92,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise< width: 80px; "> -

- ${body.data.discord_user.username}${discrim !== 'hide' ? - `#${body.data.discord_user.discriminator}` - : ''} + ${body.data.discord_user.username}${discrim !== 'hide' ? ` + #${body.data.discord_user.discriminator}` : ''}

- ${ - flags.map((v) => { - return( - `` - ) - }).join('') - } - + ${flags.map((v) => ` + `).join('')} - ${userStatus.length > 0 && hideStatus !== "true" ? `

- ${body.data.activities[0].emoji && body.data.activities[0].emoji.id ? - `` - : ``} - - ${body.data.activities[0].emoji && !body.data.activities[0].emoji.id ? - body.data.activities[0].emoji.name + ' ' + userStatus - : - userStatus - } - -

` - : ``} + ${body.data.activities[0].emoji && body.data.activities[0].emoji.id ? ` + `: ``} + ${body.data.activities[0].emoji && !body.data.activities[0].emoji.id ? body.data.activities[0].emoji.name + ' ' + userStatus : userStatus} + ` : ``} - ${activity ? - - ` + ${activity ? `
- ${activity.assets && activity.assets.large_image ? - ` + ${activity.assets && activity.assets.large_image ? ` - ` - : ` + ` : ` `} - - ${activity.assets && activity.assets.small_image ? - `` - : ``} - + "/>`: ``}
${activity.name}

- ${activity.details ? - `

${activity.details}

` - : ``} - + ">${activity.details}

` : ``}
- ` - - : ``} + `: ``} - ${body.data.listening_to_spotify === true && body.data.activities[Object.keys(body.data.activities).length - 1].type === 2 ? + ${body.data.listening_to_spotify === true && body.data.activities[Object.keys(body.data.activities).length - 1].type === 2 ? ` +
+ - ` -
- - -
-

LISTENING NOW...

-

${body.data.spotify.song.replace(/\&/g, "and")}

-

By ${body.data.spotify.artist.replace(/\;/g, ",").replace(/\&/g, "and")}

-
-
- ` - - : ``} - - ${!activity && body.data.listening_to_spotify === false ? - `
-

- I'm not currently doing anything! -

-
` - : ``} +
+

LISTENING NOW...

+

${body.data.spotify.song.replace(/\&/g, "and")}

+

By ${body.data.spotify.artist.replace(/\;/g, ",").replace(/\&/g, "and")}

+
+
+ ` : ``} + ${!activity && body.data.listening_to_spotify === false ? + `
+

+ I'm not currently doing anything! +

+
` + : ``} diff --git a/src/toBase64.ts b/src/toBase64.ts index b801dbc..cf7d98c 100644 --- a/src/toBase64.ts +++ b/src/toBase64.ts @@ -1,22 +1,13 @@ -const imageToBase64 = require('image-to-base64'); +import imageToBase64 from "image-to-base64"; -const encodeBase64 = async (url: string): Promise => { +export const encodeBase64 = async (url: string): Promise => { + let response = ""; - let encoded: string = ''; + try { + response = await imageToBase64(url); + } catch (e) { + console.log(e) + } - await imageToBase64(url) - .then( - (response: string) => { - return encoded = response; - } - ) - .catch( - (error: any) => { - console.log(error); - } - ) - - return encoded; -} - -export default encodeBase64; \ No newline at end of file + return response; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 4fa631c..fd21301 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -14,6 +18,13 @@ "isolatedModules": true, "jsx": "preserve" }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] -} + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + "pages/_document.js" + ], + "exclude": [ + "node_modules" + ] +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ce3d853..c71d69f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -279,6 +279,11 @@ "@types/react" "*" hoist-non-react-statics "^3.3.0" +"@types/image-to-base64@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@types/image-to-base64/-/image-to-base64-2.1.0.tgz#8c77b09b7988df3a9a2a4278bbcc27efabbec379" + integrity sha512-UgmqJVJyPIkzzI23TWqLc9iO+hZTzNoVD0rEf+I70FeKtcxxvLIlKJ5CrejkxkvDc/8/lk9yswSYZoAv8eyOYQ== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"