From f2a5ab90740abc0d2a3e1328407ac7ec6153985c Mon Sep 17 00:00:00 2001
From: callumok2004 <callumokane123@gmail.com>
Date: Mon, 21 Jun 2021 03:56:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9F=20Code=20Cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_app.tsx     |   2 +-
 src/renderCard.tsx | 204 ++++++++++++++++++++-------------------------
 src/toBase64.ts    |  12 ++-
 3 files changed, 103 insertions(+), 115 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6af3199..ab0b18c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app'
 
-export default function LandyardReadMe({ Component, pageProps }: AppProps) {
+export default function LanyardReadMe({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />
 }
diff --git a/src/renderCard.tsx b/src/renderCard.tsx
index a4b0573..b6ace86 100644
--- a/src/renderCard.tsx
+++ b/src/renderCard.tsx
@@ -116,32 +116,28 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                     transform: translate(0, -50%);
                                     height: 25px;
                                 ">
-
                                     <h1 style="
                                         font-size: 1.15rem;
                                         margin: 0 5px 0 0;
                                     ">
-                                        ${body.data.discord_user.username}${discrim !== 'hide' ?
-            `<span style="color: ${theme === 'dark' ? '#ccc' : '#666'}; font-weight: lighter;">#${body.data.discord_user.discriminator}</span>`
-            : ''}
+                                    ${body.data.discord_user.username}${discrim !== 'hide' ? `
+                                        <span style="color: ${theme === 'dark' ? '#ccc' : '#666'}; font-weight: lighter;">#${body.data.discord_user.discriminator}</span>` : ''}
                                     </h1>
 
                                     ${flags.map((v) => {
-                return (
-                    `<img src="data:image/png;base64,${Badges[v]}" style="
-                                                    width: 20px; 
-                                                    height: 20px; 
-                                                    position: relative; 
-                                                    top: 50%; 
-                                                    transform: translate(0%, -50%);
-                                                    margin: 0 0 0 4px;
-                                                " />`
+                return (`
+                                            <img src="data:image/png;base64,${Badges[v]}" style="
+                                                width: 20px; 
+                                                height: 20px; 
+                                                position: relative; 
+                                                top: 50%; 
+                                                transform: translate(0%, -50%);
+                                                margin: 0 0 0 4px;
+                                            " />`
                 )
             }).join('')
         }
-
                                 </div>
-                                
                                 ${userStatus.length > 0 && hideStatus !== "true" ? `
                                     <h1 style="
                                         font-size: 0.9rem;
@@ -152,31 +148,27 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         white-space: nowrap;
                                         text-overflow: ellipsis;
                                     ">
-                                        ${body.data.activities[0].emoji && body.data.activities[0].emoji.id ?
-                `<img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/emojis/${body.data.activities[0].emoji.id}.${statusExtension}`)}" style="
-                                                width: 15px; 
-                                                height: 15px; 
-                                                position: relative; 
-                                                top: 10px; 
-                                                transform: translate(0%, -50%);
-                                                margin: 0 2px 0 0;
-                                            " />`
+                                    ${body.data.activities[0].emoji && body.data.activities[0].emoji.id ? `
+                                        <img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/emojis/${body.data.activities[0].emoji.id}.${statusExtension}`)}" style="
+                                            width: 15px; 
+                                            height: 15px; 
+                                            position: relative; 
+                                            top: 10px; 
+                                            transform: translate(0%, -50%);
+                                            margin: 0 2px 0 0;
+                                        " />`
                 : ``}
 
-                                        ${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
             }
-
-                                    </h1>`
-            : ``}
+                                </h1>` : ``}
                             </div>
                         </div>
 
-                        ${activity ?
-
-            `
+                        ${activity ? `
                             <div style="
                                 display: flex;
                                 flex-direction: row;
@@ -190,16 +182,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                     width: auto;
                                     height: auto;
                                 ">
-                                ${activity.assets && activity.assets.large_image ?
-                `
+                                ${activity.assets && activity.assets.large_image ? `
                                     <img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`)}" style="
                                         width: 80px; 
                                         height: 80px; 
                                         border: solid 0.5px #222;
                                         border-radius: 10px; 
                                     "/>
-                                    `
-                : `
+                                    ` : `
                                     <img src="data:image/png;base64,${await encodeBase64(`https://lanyard-profile-readme.vercel.app/assets/unknown.png`)}" style="
                                         width: 70px; 
                                         height: 70px; 
@@ -207,17 +197,14 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         filter: invert(100);
                                     "/>
                                 `}
-
-                                ${activity.assets && activity.assets.small_image ?
-                `<img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`)}" style="
+                                ${activity.assets && activity.assets.small_image ? `
+                                    <img src="data:image/png;base64,${await encodeBase64(`https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`)}" style="
                                         width: 30px;
                                         height: 30px;
                                         border-radius: 50%;
                                         margin-left: -26px;
                                         margin-bottom: -8px;
-                                    "/>`
-                : ``}
-
+                                    "/>`: ``}
                                 </div>
                                 <div style="
                                     color: #999;
@@ -235,89 +222,80 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         height: 15px;
                                         margin: 7px 0;
                                     ">${activity.name}</p>
-                                    ${activity.details ?
-                `<p style="
+                                    ${activity.details ? `
+                                        <p style="
                                             color: ${theme === 'dark' ? '#ccc' : '#777'};
                                             overflow: hidden;
                                             white-space: nowrap;
                                             text-overflow: ellipsis;
                                             height: 15px;
                                             margin: 7px 0;
-                                        ">${activity.details}</p>`
-                : ``}
-                                   
+                                        ">${activity.details}</p>` : ``}
                                 </div>
                             </div>
-                            `
+                            `: ``}
 
-            : ``}
+            ${body.data.listening_to_spotify === true && body.data.activities[Object.keys(body.data.activities).length - 1].type === 2 ? `
+                <div style="
+                    display: flex;
+                    flex-direction: row;
+                    height: 120px;
+                    margin-left: 15px;
+                    font-size: 0.8rem;
+                    padding-top: 18px;
+                ">
+                    <img src="data:image/png;base64,${await encodeBase64(body.data.spotify.album_art_url)}" style="
+                        width: 80px; 
+                        height: 80px; 
+                        border: solid 0.5px #222;
+                        border-radius: 10px; 
+                        margin-right: 15px;
+                    "/>
 
-                        ${body.data.listening_to_spotify === true && body.data.activities[Object.keys(body.data.activities).length - 1].type === 2 ?
-
-            `
-                            <div style="
-                                display: flex;
-                                flex-direction: row;
-                                height: 120px;
-                                margin-left: 15px;
-                                font-size: 0.8rem;
-                                padding-top: 18px;
-                            ">
-                                <img src="data:image/png;base64,${await encodeBase64(body.data.spotify.album_art_url)}" style="
-                                    width: 80px; 
-                                    height: 80px; 
-                                    border: solid 0.5px #222;
-                                    border-radius: 10px; 
-                                    margin-right: 15px;
-                                "/>
-
-                                <div style="
-                                    color: #999;
-                                    margin-top: -3px;
-                                    line-height: 1;
-                                    width: 279px;
-                                ">
-                                    <p style="font-size: 0.75rem; color: ${theme === 'dark' ? '#1CB853' : '#0d943d'}; margin-bottom: 15px;">LISTENING NOW...</p> 
-                                    <p style="
-                                        height: 15px; 
-                                        color: ${theme === 'dark' ? '#fff' : '#000'}; 
-                                        font-weight: bold; 
-                                        overflow: hidden;
-                                        white-space: nowrap;
-                                        text-overflow: ellipsis;
-                                        margin: 7px 0;
-                                    ">${body.data.spotify.song.replace(/\&/g, "and")}</p>
-                                    <p style="
-                                        margin: 7px 0;
-                                        height: 15px; 
-                                        overflow: hidden;
-                                        white-space: nowrap;
-                                        text-overflow: ellipsis;
-                                        color: ${theme === 'dark' ? '#ccc' : '#777'}; 
-                                    ">By ${body.data.spotify.artist.replace(/\;/g, ",").replace(/\&/g, "and")}</p>
-                                </div>
-                            </div>
-                            `
-
-            : ``}
-
-                        ${!activity && body.data.listening_to_spotify === false ?
+                    <div style="
+                        color: #999;
+                        margin-top: -3px;
+                        line-height: 1;
+                        width: 279px;
+                    ">
+                        <p style="font-size: 0.75rem; color: ${theme === 'dark' ? '#1CB853' : '#0d943d'}; margin-bottom: 15px;">LISTENING NOW...</p> 
+                        <p style="
+                            height: 15px; 
+                            color: ${theme === 'dark' ? '#fff' : '#000'}; 
+                            font-weight: bold; 
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            margin: 7px 0;
+                        ">${body.data.spotify.song.replace(/\&/g, "and")}</p>
+                        <p style="
+                            margin: 7px 0;
+                            height: 15px; 
+                            overflow: hidden;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            color: ${theme === 'dark' ? '#ccc' : '#777'}; 
+                        ">By ${body.data.spotify.artist.replace(/\;/g, ",").replace(/\&/g, "and")}</p>
+                    </div>
+                </div>
+            ` : ``}
+            ${!activity && body.data.listening_to_spotify === false ?
             `<div style="
-                                display: flex;
-                                flex-direction: row;
-                                height: 150px;
-                                justify-content: center;
-                                align-items: center;
-                            ">
-                                <p style="
-                                    font-style: italic; 
-                                    font-size: 0.8rem;
-                                    color: ${theme === 'dark' ? '#aaa' : '#444'};
-                                    height: auto;
-                                ">
-                                    I'm not currently doing anything!
-                                </p>
-                            </div>`
+                    display: flex;
+                    flex-direction: row;
+                    height: 150px;
+                    justify-content: center;
+                    align-items: center;
+                ">
+                    <p style="
+                        font-style: italic; 
+                        font-size: 0.8rem;
+                        color: ${theme === 'dark' ? '#aaa' : '#444'};
+                        height: auto;
+                    ">
+                        I'm not currently doing anything!
+                    </p>
+                </div>`
             : ``}
 
                     </div>
diff --git a/src/toBase64.ts b/src/toBase64.ts
index 94c9b96..cf7d98c 100644
--- a/src/toBase64.ts
+++ b/src/toBase64.ts
@@ -1,3 +1,13 @@
 import imageToBase64 from "image-to-base64";
 
-export const encodeBase64 = async (url: string): Promise<string> => await imageToBase64(url);
\ No newline at end of file
+export const encodeBase64 = async (url: string): Promise<string> => {
+    let response = "";
+
+    try {
+        response = await imageToBase64(url);
+    } catch (e) {
+        console.log(e)
+    }
+
+    return response;
+}
\ No newline at end of file