feat(): add discord "profile"

package.json

@@ -16,7 +16,8 @@
     "i18next-browser-languagedetector": "^8.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-i18next": "^15.4.1"
+    "react-i18next": "^15.4.1",
+    "use-lanyard": "^1.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

src/components/Whoami.tsx

@@ -1,13 +1,57 @@
 import { useTranslation } from 'react-i18next'
+import { useLanyardWS } from 'use-lanyard';
+// import data from '../data.ts';
+
 
 export const Whoami = () => {
     const { t } = useTranslation();
 
-    return <div className="flex flex-row gap-4">
+    const data = useLanyardWS('821421438719492136', {
+        api: { hostname: 'api.lanyard.alekswilc.dev' }
+    });
+
+    const customStatus = data && data.activities.find(x => x.id === 'custom');
+
+
+
+    return <div className="flex flex-col md:flex-row gap-4 ">
         <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
             <h1 className='text-xl font-bold'>{t('landing.title')}</h1>
 
             <p className='font-light'>{t('landing.whoami')}</p>
         </div>
+
+        { data && <div className='bg-[#1C1C1C] text-white flex flex-col border-1 border-[#757575] rounded-xl text-left p-4 grow basis-1'>
+            <div className="flex flex-row gap-6">
+                <div className="flex-col justify-center hidden md:flex">
+                    <img src="https://www.alekswilc.dev/avatar.jpg" alt="avatar" className='max-w-42 rounded-xl' />
+                </div>
+                 <div className='flex flex-col justify-center'>
+                    <h1 className='text-xl font-bold'>{data.discord_user.global_name} - Discord Profile</h1>
+
+                    <div className="flex flex-col justify-center">
+                        {
+                            customStatus &&
+                            <p className='font-extralight text-gray-300'>{customStatus.state}</p>
+                        }
+                        {
+                            data.spotify &&
+                            <>
+                                <p className='font-bold'>{t("landing.discord.listening")}</p>
+                                <p className='font-light'>{t("landing.discord.song", { song: data.spotify.song, artist: data.spotify.artist })}</p>
+                            </>
+                        }
+                        {
+                            data.activities.filter(x => x.name !== 'Spotify' && x.id !== 'custom').sort((a, b) => a.state ? b.state ? 1 : -1 : -1).map((activity) =>
+                                <>
+                                    <p className='font-bold'>{t("landing.discord.playing", { app: `${activity.name}${activity.state ? ':' : ''}` })}</p>
+                                    {activity.details && <p className='font-light'>{activity.state ? `${activity.state} - ${activity.details}` : activity.details }</p>}
+                                </>
+                            )
+                        }
+                    </div>
+                </div>
+            </div> 
+        </div> }
     </div>;
 }

src/data.ts

@@ -0,0 +1,6 @@
+export default {
+    "data": {
+        "kv": {},
+        "discord_user": { "id": "821421438719492136", "username": "alekswilc", "avatar": "e9e4e01403ee4df2a1640cf3a4a29944", "discriminator": "0", "clan": null, "avatar_decoration_data": { "sku_id": "1144308439720394944", "asset": "a_3c97a2d37f433a7913a1c7b7a735d000", "expires_at": null }, "bot": false, "global_name": "Aleks", "primary_guild": null, "collectibles": null, "display_name": "Aleks", "public_flags": 64 }, "activities": [{ "id": "custom", "name": "Custom Status", "type": 4, "state": "wilczyński.me", "created_at": 1744575326522 }, { "id": "e2bd7c8d56594a7b", "name": "VALORANT", "type": 0, "application_id": "700136079562375258", "timestamps": { "start": 1744581097726 }, "created_at": 1744581098777 }, { "flags": 1, "id": "2b3b54ae31f53860", "name": "Code", "type": 0, "state": "Working on data.ts", "session_id": "2d2ae694f307658b026593b10b285227", "details": "In wilczynski.me", "application_id": "782685898163617802", "timestamps": { "start": 1744578380512 }, "assets": { "large_image": "mp:external/ThZlJE1QK8kC3PSrVycZRD_WzkmIOqC9U200K-27eXU/https/raw.githubusercontent.com/LeonardSSH/vscord/main/assets/icons/ts.png", "large_text": "Editing a TS file", "small_image": "mp:external/mr2xO8pjEeofBvwXeZvC4ZqILJpGBRwl4Sm57OVkln4/https/raw.githubusercontent.com/LeonardSSH/vscord/main/assets/icons/vscode-insiders.png", "small_text": "Visual Studio Code - Insiders" }, "created_at": 1744581250652, "buttons": ["Website"] }, { "flags": 48, "id": "spotify:1", "name": "Spotify", "type": 2, "state": "Kuban; Favst", "session_id": "2d2ae694f307658b026593b10b285227", "details": "gdzieś wyjedźmy już", "timestamps": { "start": 1744581133536, "end": 1744581300445 }, "assets": { "large_image": "spotify:ab67616d0000b2739486fb8846b49c619bce4f46", "large_text": "spokój." }, "sync_id": "6eA0Akxpaepsh6cGOSRMAo", "created_at": 1744581134993, "party": { "id": "spotify:821421438719492136" } }], "discord_status": "dnd", "active_on_discord_web": false, "active_on_discord_desktop": true, "active_on_discord_mobile": false, "listening_to_spotify": true, "spotify": { "timestamps": { "start": 1744581133536, "end": 1744581300445 }, "album": "spokój.", "album_art_url": "https://i.scdn.co/image/ab67616d0000b2739486fb8846b49c619bce4f46", "artist": "Kuban; Favst", "song": "gdzieś wyjedźmy już", "track_id": "6eA0Akxpaepsh6cGOSRMAo" }
+    }, "success": true
+}

src/i18n/en.json

@@ -36,6 +36,12 @@
             "title": "Contact Me",
             "email": "Send me an email: aleks@wilczynski.me",
             "support": "Contact support: support@alekswilc.dev"
+        },
+        "discord": {
+            "profile": "Discord Profile",
+            "listening": "Listening to:",
+            "song": "{{song}} by {{artist}}",
+            "playing": "Playing {{app}}"
         }
     }
 }

src/i18n/pl.json

@@ -36,6 +36,12 @@
             "title": "Skontaktuj się ze mną",
             "email": "Wyślij mi E-Mail: aleks@wilczynski.me",
             "support": "Skontaktuj się z supportem: support@alekswilc.dev"
+        },
+        "discord": {
+            "profile": "Profil Discord",
+            "listening": "Słucham:",
+            "song": "{{song}} od {{artist}}",
+            "playing": "Gram w {{app}}"
         }
     }
 }

yarn.lock

@@ -1851,6 +1851,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-lanyard@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/use-lanyard/-/use-lanyard-1.5.2.tgz#e02a40b0703e30a098ce77c6d8f785119741f32d"
+  integrity sha512-clxZoUrzgvGa+9IAOv39e4yNjUEvmk/BjBbpIZ/0ymLmclypJkKJ86j5okEjBAACMkw+u1c4gf/zCifpOSwyDA==
+
 vite@^6.2.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/vite/-/vite-6.2.2.tgz#8098b12a6bfd95abe39399aa7d5faa56545d7a1a"