Merge branch 'main' of https://github.com/cnrad/lanyard-profile-readme

.gitignore

@@ -3,6 +3,7 @@
 
 # dependencies
 /node_modules
+/.yarn
 /.pnp
 .pnp.js
 

README.md

@@ -65,6 +65,14 @@ If you don't want people seeing the badges you have on Discord, append the query
 
 If you don't want people seeing the profile you have on Discord, append the query param `hideProfile=true` to the end of the URL. Profile are shown by default.
 
+### ___Hide Activity___
+
+If you don't want people seeing the your activity, append the query param `hideActivity=true` to the end of the URL or use `hideActivity=whenNotUsed` to hide activity section when there's no activity to display. Activity are shown by default.
+
+### ___Hide App by ID___
+
+If you don't want display a specific application, append the query param `ignoreAppId=:app_id` to the end of the URL, IDs separate by `,`.
+
 ### ___Hide Discriminator___ (DEPRECATED soon)
 
 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. 

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -17,16 +17,16 @@
     "framer-motion": "^4.1.17",
     "image-to-base64": "^2.2.0",
     "ioredis": "^4.28.5",
-    "next": "11.0.0",
+    "next": "12.2.5",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "styled-components": "^5.3.0",
     "use-smooth-count": "^0.3.0"
   },
   "devDependencies": {
     "@types/escape-html": "^1.0.1",
     "@types/image-to-base64": "^2.1.0",
-    "@types/react": "17.0.11",
+    "@types/react": "^18.2.45",
     "eslint": "7.28.0",
     "eslint-config-next": "11.0.0",
     "prettier": "^2.3.1",

pages/api/[...id].ts

@@ -22,6 +22,12 @@ type Parameters = {
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
     let getUser;
+
+    if (!req.query.id)
+        return res.send({
+            error: `No ID provided.`,
+        });
+
     const params: Parameters = req.query,
         userId = req.query.id[0];
 

pages/index.tsx

@@ -91,7 +91,7 @@ export default function Home({ userCount }: { userCount: number }) {
                 </Container>
             </Main>
             <FooterStat>
-                Lanyard Profile Readme has <div style={{ fontWeight: "bold", width: "2.75rem" }} ref={countRef} /> total
+                Lanyard Profile Readme has <div style={{ fontWeight: "bold", width: "3.2rem" }} ref={countRef} /> total
                 users!
             </FooterStat>
         </>
@@ -171,16 +171,16 @@ const Input = styled.input`
     border: none;
     width: 100%;
     font-size: 0.9rem;
-    padding: 5px 10px;
+    padding: 0.45rem 0.75rem;
     color: #aaabaf;
-    border: solid 1px #333;
+    border: solid 1px rgba(255, 255, 255, 0.2);
     background: #000;
     box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-    transition: all ease-in-out 0.2s;
+    transition: all ease-in-out 0.1s;
 
     &:focus {
         outline: 0;
-        border-color: #ccc;
+        border-color: rgba(255, 255, 255, 0.5);
     }
 `;
 
@@ -236,7 +236,7 @@ const FooterStat = styled.div`
     background: #000;
     padding: 1rem 1.25rem;
     color: #fff;
-    border-radius: 0.5rem;
+    border-radius: 0.55rem;
     text-align: center;
     box-shadow: 0 2px 15px -10px #a21caf;
     min-width: 400px;
@@ -254,7 +254,7 @@ const FooterStat = styled.div`
         left: 0;
         right: 0;
         bottom: 0;
-        border-radius: 0.35rem;
+        border-radius: 0.55rem;
         border: 2px solid transparent;
         background: linear-gradient(45deg, #be123c, #6b21a8, #3730a3) border-box;
         -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);

src/renderCard.tsx

@@ -15,6 +15,8 @@ type Parameters = {
     hideTimestamp?: string;
     hideBadges?: string;
     hideProfile?: string;
+    hideActivity?: string;
+    ignoreAppId?: string;
     showDisplayName?: string;
     borderRadius?: string;
     idleMessage?: string;
@@ -22,6 +24,11 @@ type Parameters = {
 
 const parseBool = (string: string | undefined): boolean => string === "true" ? true : false;
 
+const parseAppId = (string: string | undefined): Array<string> => {
+    if (string === undefined) return [];
+    return string.split(",");
+}
+
 const elapsedTime = (timestamp: any) => {
     let startTime = timestamp;
     let endTime = Number(new Date());
@@ -61,6 +68,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     let hideTimestamp = parseBool(params.hideTimestamp);
     let hideBadges = parseBool(params.hideBadges);
     let hideProfile = parseBool(params.hideProfile);
+    let hideActivity = params.hideActivity ?? "false";
+    let ignoreAppId = parseAppId(params.ignoreAppId);
     let hideDiscrim = parseBool(params.hideDiscrim);
     let showDisplayName = parseBool(params.showDisplayName);
 
@@ -113,19 +122,38 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
     let userStatus: Record<string, any> | null = null;
     if (data.activities[0] && data.activities[0].type === 4) userStatus = data.activities[0];
 
+    const activities = data.activities
         // Filter only type 0
-    const activities = data.activities.filter(activity => activity.type === 0);
+        .filter(activity => activity.type === 0)
+        // Filter ignored app ID
+        .filter(activity => !ignoreAppId.includes(activity.application_id ?? ""));
 
     // Take the highest one
     activity = Array.isArray(activities) ? activities[0] : activities;
 
+    // Calculate height of parent SVG element
+    const svgHeight = (): string => {
+        if (hideProfile) return "130";
+        if (hideActivity === "true") return "91";
+        if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "91";
+        return "210";
+    }
+
+    // Calculate height of main div element
+    const divHeight = (): string => {
+        if (hideProfile) return "120";
+        if (hideActivity === "true") return "81";
+        if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "81";
+        return "200";
+    }
+
     return `
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${hideProfile ? "130px" : "210px"}">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${svgHeight()}px">
-                <foreignObject x="0" y="0" width="410" height="${hideProfile ? "130" : "210"}">
+                <foreignObject x="0" y="0" width="410" height="${svgHeight()}">
                     <div xmlns="http://www.w3.org/1999/xhtml" style="
                         position: absolute;
                         width: 400px;
-                        height: ${hideProfile ? "120px" : "200px"};
+                        height: ${divHeight()}px;
                         inset: 0;
                         background-color: #${backgroundColor};
                         color: ${theme === "dark" ? "#fff" : "#000"};
@@ -146,9 +174,13 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                             display: flex;
                             flex-direction: row;
                             padding-bottom: 5px;
-                            border-bottom: solid 0.5px ${
+                            ${hideActivity !== "false" && !activity && !data.listening_to_spotify ?
-                                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%)"
+                                }`
+                            }
                         ">
                             <div style="
                                 display: flex;
@@ -380,7 +412,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                         }
 
             ${
-                data.listening_to_spotify === true && !activity && data.activities[Object.keys(data.activities).length - 1].type === 2
+                data.listening_to_spotify && !activity && data.activities[Object.keys(data.activities).length - 1].type === 2
                     ? `
                 <div style="
                     display: flex;
@@ -434,7 +466,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
             ` : ``
             }
             ${
-                !activity && data.listening_to_spotify === false
+                !activity && !data.listening_to_spotify && hideActivity === "false"
                     ? `<div style="
                     display: flex;
                     flex-direction: row;