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..6af3199 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 LandyardReadMe({ Component, pageProps }: AppProps) { return } -export default MyApp diff --git a/pages/_document.js b/pages/_document.tsx similarity index 75% rename from pages/_document.js rename to pages/_document.tsx index f603062..4a48cfe 100644 --- a/pages/_document.js +++ b/pages/_document.tsx @@ -2,14 +2,14 @@ import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { - static async getInitialProps(ctx) { - const sheet = new ServerStyleSheet() - const originalRenderPage = ctx.renderPage + static async getInitialProps(ctx: any) { + const sheet = new ServerStyleSheet(), + originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ - enhanceApp: (App) => (props) => + enhanceApp: (App: any) => (props: any) => sheet.collectStyles(), }) diff --git a/pages/api/[...id].ts b/pages/api/[...id].ts index c7c7b67..eabbb91 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,21 @@ 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 *; style-src 'unsafe-inline'"); + let params: Parameters = req.query, + userid = req.query.id[0], + lanyardData: any; - let lanyardData: any; - 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.` }) - }); + 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 svg = await renderCard(lanyardData.data, params); - res.status(200).send(svg); + try { + lanyardData = (await axios.get(`https://api.lanyard.rest/v1/users/${userid}`)).data; + } catch (e) { + console.log(e) + res.send({ error: `Something went wrong! If everything looks correct and this still occurs, please contact @cnraddd on Twitter.` }) + } - 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 c507724..a4b0573 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,48 @@ 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] && body.data.activities[0].emoji && body.data.activities[0].emoji.animated) statusExtension = "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].type === 4) userStatus = body.data.activities[0].state; + if (body.data.activities[0] && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state; console.log(Object.keys(body.data.activities).length); @@ -100,8 +91,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.discriminator}` + : ''} - ${ - flags.map((v) => { - return( - `` - ) - }).join('') - } + ) + }).join('') + } @@ -163,7 +153,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise< text-overflow: ellipsis; "> ${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.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}

` - : ``} + : ``}
` - - : ``} - ${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 ? + + `
=> { - - let encoded: string = ''; - - 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 +export const encodeBase64 = async (url: string): Promise => await imageToBase64(url); \ 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"