From 98c9ce49abe2da5605550e6faf68a42f98f0aea0 Mon Sep 17 00:00:00 2001 From: looskie <50378828+Looskie@users.noreply.github.com> Date: Tue, 22 Jun 2021 14:10:58 -0400 Subject: [PATCH] Chore: Spacing and stuff --- pages/_app.tsx | 4 +- pages/_document.js | 49 ++++++------ src/LanyardTypes.ts | 2 +- src/renderCard.tsx | 185 ++++++++++++++++++++++++++++++-------------- src/toBase64.ts | 4 +- 5 files changed, 157 insertions(+), 87 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index ab0b18c..1750b19 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,5 +1,5 @@ -import type { AppProps } from 'next/app' +import type { AppProps } from "next/app"; export default function LanyardReadMe({ Component, pageProps }: AppProps) { - return + return ; } diff --git a/pages/_document.js b/pages/_document.js index 7511a5a..f967ac0 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,30 +1,29 @@ -import Document from 'next/document' -import { ServerStyleSheet } from 'styled-components' +import Document from "next/document"; +import { ServerStyleSheet } from "styled-components"; export default class MyDocument extends Document { - static async getInitialProps(ctx) { - const sheet = new ServerStyleSheet(), - originalRenderPage = ctx.renderPage + static async getInitialProps(ctx) { + const sheet = new ServerStyleSheet(), + originalRenderPage = ctx.renderPage; - try { - ctx.renderPage = () => - originalRenderPage({ - enhanceApp: (App) => (props) => - sheet.collectStyles(), - }) + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: App => props => sheet.collectStyles(), + }); - const initialProps = await Document.getInitialProps(ctx) - return { - ...initialProps, - styles: ( - <> - {initialProps.styles} - {sheet.getStyleElement()} - - ), - } - } finally { - sheet.seal() + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + {sheet.getStyleElement()} + + ), + }; + } finally { + sheet.seal(); + } } - } -} \ No newline at end of file +} diff --git a/src/LanyardTypes.ts b/src/LanyardTypes.ts index 674a604..c932646 100644 --- a/src/LanyardTypes.ts +++ b/src/LanyardTypes.ts @@ -75,4 +75,4 @@ export interface Assets { small_image?: string; large_text: string; large_image: string; -} \ No newline at end of file +} diff --git a/src/renderCard.tsx b/src/renderCard.tsx index 6ba7f9f..f654bfb 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 { encodeBase64 } from './toBase64'; +import { Badges } from "../public/assets/badges/BadgesEncoded"; +import { getFlags } from "./getFlags"; +import * as LanyardTypes from "./LanyardTypes"; +import { encodeBase64 } from "./toBase64"; type Parameters = { theme?: string; @@ -12,31 +12,36 @@ type Parameters = { hideDiscrim?: string; hideStatus?: string; borderRadius?: string; -} +}; 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="; + 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="; let avatarBorderColor: string = "#747F8D", userStatus: string = "", avatarExtension: string = "webp", statusExtension: string = "webp", activity: any = false, - backgroundColor: string = '1a1c1f', - theme = 'dark', - discrim = 'show', - hideStatus = 'false', - borderRadius = '10px'; + backgroundColor: string = "1a1c1f", + theme = "dark", + discrim = "show", + hideStatus = "false", + borderRadius = "10px"; 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 ( + 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.hideStatus === "true") hideStatus = "true"; if (params.hideDiscrim === "true") discrim = "hide"; - if (params.theme === 'light') { - backgroundColor = '#eee'; - theme = 'light'; + if (params.theme === "light") { + backgroundColor = "#eee"; + theme = "light"; } if (params.bg) backgroundColor = params.bg; if (params.borderRadius) borderRadius = params.borderRadius; @@ -58,7 +63,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise< 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); @@ -71,7 +77,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise< height: 200px; inset: 0; background-color: #${backgroundColor}; - color: ${theme === 'dark' ? '#fff' : '#000'}; + color: ${theme === "dark" ? "#fff" : "#000"}; font-family: 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; display: flex; @@ -86,7 +92,9 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise< display: flex; flex-direction: row; padding-bottom: 5px; - border-bottom: solid 0.5px ${theme === 'dark' ? 'hsl(0, 0%, 100%, 10%)' : 'hsl(0, 0%, 0%, 10%)'}; + border-bottom: solid 0.5px ${ + theme === "dark" ? "hsl(0, 0%, 100%, 10%)" : "hsl(0, 0%, 0%, 10%)" + }; ">
- - ${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) => ` + ${flags + .map( + v => ` `).join('')} + " />` + ) + .join("")}
- ${userStatus.length > 0 && hideStatus !== "true" ? ` + ${ + 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.replace(/\&/g, "and") : userStatus.replace(/\&/g, "and")} -

` : ``} + " />` + : `` + } + ${ + body.data.activities[0].emoji && !body.data.activities[0].emoji.id + ? body.data.activities[0].emoji.name + + " " + + userStatus.replace(/\&/g, "and") + : userStatus.replace(/\&/g, "and") + } + ` + : `` + } - ${activity ? ` + ${ + activity + ? `
- ${activity.assets && activity.assets.large_image ? ` - - ` : ` - - `} - ${activity.assets && activity.assets.small_image ? ` - `: ``} + "/>` + : `` + }
-

PLAYING A GAME...

+

PLAYING A GAME...

${activity.name}

- ${activity.details ? ` + ${ + 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...

+

LISTENING NOW...

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

- ` : ``} - ${!activity && body.data.listening_to_spotify === false ? - `
I'm not currently doing anything!

` - : ``} + : `` + } `; -} +}; export default renderCard; diff --git a/src/toBase64.ts b/src/toBase64.ts index cf7d98c..265c634 100644 --- a/src/toBase64.ts +++ b/src/toBase64.ts @@ -6,8 +6,8 @@ export const encodeBase64 = async (url: string): Promise => { try { response = await imageToBase64(url); } catch (e) { - console.log(e) + console.log(e); } return response; -} \ No newline at end of file +};