From f8a3a6ac69bac2aa00699da4c7382332cfc9d7b3 Mon Sep 17 00:00:00 2001 From: Ruairi Date: Thu, 20 Jul 2023 23:22:18 +0100 Subject: [PATCH 1/3] feat: add display names to widget --- src/components/FrameCustomiser.svelte | 7 ++ src/discord_api.ts | 1 + src/pages/user.astro | 99 ++++++++++++++++++--------- 3 files changed, 73 insertions(+), 34 deletions(-) diff --git a/src/components/FrameCustomiser.svelte b/src/components/FrameCustomiser.svelte index 7d8be39..9cf6dfb 100644 --- a/src/components/FrameCustomiser.svelte +++ b/src/components/FrameCustomiser.svelte @@ -62,6 +62,7 @@ command: "setColors", backgroundColor: "#000000", foregroundColor: "#ffffff", + foregroundSecondary: "#fefefe", }, "*") `, }, @@ -121,6 +122,12 @@ placeholder: "#fff", value: "", }, + { + key: "foreground-secondary", + name: "Secondary Colour (for Display Name)", + placeholder: "#fff", + value: "", + } ]; let userId = "343383572805058560"; diff --git a/src/discord_api.ts b/src/discord_api.ts index 144ff4e..7fc58d7 100644 --- a/src/discord_api.ts +++ b/src/discord_api.ts @@ -37,6 +37,7 @@ export interface User { banner_color: string | null; accent_color: number; avatar_decoration: string; + global_name: string | null; } const flagNames: Record = { diff --git a/src/pages/user.astro b/src/pages/user.astro index aa88ff2..4ea16a2 100644 --- a/src/pages/user.astro +++ b/src/pages/user.astro @@ -40,14 +40,14 @@ if (!user) { const roundedCorners = Astro.url.searchParams.get("rounded-corners") !== "false"; -const fulllBanner = Astro.url.searchParams.get("full-banner") === "true"; +const fullBanner = Astro.url.searchParams.get("full-banner") === "true"; const showBanner = Astro.url.searchParams.get("banner") !== "false"; const showIcon = Astro.url.searchParams.get("discord-icon") === "true"; const showFlags = Astro.url.searchParams.get("badges") === "true"; const guessNitro = Astro.url.searchParams.get("guess-nitro") === "true"; let style = ""; -for (const key of ["background-color", "foreground-color"]) { +for (const key of ["background-color", "foreground-color", "foreground-secondary"]) { const value = Astro.url.searchParams.get(key); if (!value) continue; @@ -89,7 +89,7 @@ if (import.meta.env.PROD) "theme-light": theme === "light", "theme-dark": theme !== "light", "rounded-corners": roundedCorners, - "full-banner": fulllBanner, + "full-banner": fullBanner, "no-banner": !showBanner, }} style={style} @@ -103,34 +103,37 @@ if (import.meta.env.PROD) ) } -
- -
-

+

+
+ +
+ {user.global_name && {user.global_name}} + + { + user.username + + (isPomelod(user) + ? "" + : "#" + user.discriminator) + } + +
+
+
+
{ - user.username + - (isPomelod(user) - ? "" - : "#" + user.discriminator) - } -

- { - showFlags && ( -
- {getUserFlags(user, guessNitro).map(flag => ( + showFlags && ( + getUserFlags(user, guessNitro).map(flag => ( - ))} -
- ) - } -
- { - showIcon && ( + )) + ) + } +
+ {showIcon &&
- ) - } +
} +
@@ -163,7 +166,7 @@ if (import.meta.env.PROD) document.body.classList.toggle("theme-dark", theme !== "light"); break; case "setColors": - const { foregroundColor, backgroundColor } = data; + const { foregroundColor, backgroundColor, foregroundSecondary } = data; if (hexColorRegex.test(foregroundColor)) document.body.style.setProperty( @@ -177,6 +180,12 @@ if (import.meta.env.PROD) backgroundColor ); + if (hexColorRegex.test(foregroundSecondary)) + document.body.style.setProperty( + "--foreground-secondary", + foregroundSecondary + ); + break; } }); @@ -201,12 +210,14 @@ if (import.meta.env.PROD) .theme-dark { --background-color: #2b2d31; - --foreground-color: #f2f3f5; + --foreground-color: #dedede; + --foreground-secondary: #b5bac1; } .theme-light { --background-color: white; --foreground-color: #313338; + --foreground-secondary: #4e5058; } .root { @@ -254,19 +265,28 @@ if (import.meta.env.PROD) z-index: 2; } - .profile { + .container { + align-items: start; + justify-content: space-between; + flex-direction: row; + display: flex; + background: var(--background-color); color: var(--foreground-color); + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + } + + .profile { position: relative; display: flex; flex-direction: row; + justify-content: start; align-items: center; - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); } - .no-banner .profile { + .no-banner .container { border-radius: var(--border-radius); } @@ -277,11 +297,11 @@ if (import.meta.env.PROD) margin: 12px; } - p { + p, span { font-family: "gg sans", system-ui, sans-serif; font-size: 20px; font-weight: 600; - line-height: 24px; + line-height: 1; text-rendering: optimizeLegibility; } @@ -294,6 +314,11 @@ if (import.meta.env.PROD) filter: brightness(0.8); } + .flags { + margin-right: 10px; + margin-top: 10px; + } + .flags img { width: 18px; } @@ -302,6 +327,12 @@ if (import.meta.env.PROD) margin: 8px 0; } + .username.with-display-name { + color: var(--foreground-secondary); + font-size: 16px; + margin: 2px 0; + } + .userinfo { display: flex; flex-direction: column; From d2f0535a3ba01858bda586b5516d035d944a9444 Mon Sep 17 00:00:00 2001 From: splatter Date: Thu, 2 Jan 2025 17:39:02 +0000 Subject: [PATCH 2/3] made it toggleable Signed-off-by: splatter --- src/pages/user.astro | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/user.astro b/src/pages/user.astro index 4ea16a2..1417a18 100644 --- a/src/pages/user.astro +++ b/src/pages/user.astro @@ -45,6 +45,7 @@ const showBanner = Astro.url.searchParams.get("banner") !== "false"; const showIcon = Astro.url.searchParams.get("discord-icon") === "true"; const showFlags = Astro.url.searchParams.get("badges") === "true"; const guessNitro = Astro.url.searchParams.get("guess-nitro") === "true"; +const showDisplayName = Astro.url.searchParams.get("display-name") !== "false"; let style = ""; for (const key of ["background-color", "foreground-color", "foreground-secondary"]) { @@ -107,8 +108,8 @@ if (import.meta.env.PROD)
- {user.global_name && {user.global_name}} - + {user.global_name && showDisplayName && {user.global_name}} + { user.username + (isPomelod(user) From ee788ab062a6f96139e350395896448e5ff031e0 Mon Sep 17 00:00:00 2001 From: splatter Date: Thu, 2 Jan 2025 17:41:20 +0000 Subject: [PATCH 3/3] add toggle to customiser Signed-off-by: splatter --- src/components/FrameCustomiser.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/FrameCustomiser.svelte b/src/components/FrameCustomiser.svelte index 9cf6dfb..6bb9bd5 100644 --- a/src/components/FrameCustomiser.svelte +++ b/src/components/FrameCustomiser.svelte @@ -77,6 +77,11 @@ return `theme=${this.value ? "dark" : "light"}`; }, }, + { + key: "display-name", + name: "Show Display Name", + value: true, + }, { key: "banner", name: "Show Banner", @@ -127,7 +132,7 @@ name: "Secondary Colour (for Display Name)", placeholder: "#fff", value: "", - } + }, ]; let userId = "343383572805058560";