From 8ec61965935c89d1bf4d31b7615a7f4cb3e2597a Mon Sep 17 00:00:00 2001 From: Hexagonn <128217934+hexaaagon@users.noreply.github.com> Date: Sun, 3 Nov 2024 03:08:32 +0000 Subject: [PATCH] fix(front): fix react hydration error --- src/app/layout.tsx | 7 +++++-- src/app/page.tsx | 17 +++++++++++++++-- src/utils/renderCard.tsx | 2 +- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c91abd8..709a61e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -26,8 +26,11 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - + + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index cd9b7b4..089fcd9 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -40,6 +40,13 @@ import { filterLetters } from "@/lib/utils"; import { Button } from "@/components/ui/button"; export default function Home() { + const originUrl = useMemo( + () => + typeof window !== "undefined" + ? window.location.origin + : "https://lanyard.cnrad.dev", + [], + ); const [userId, setUserId] = useState(null); const [userError, setUserError] = useState(); const [userData, setUserData] = useState<{ userId: string } | null>(null); @@ -63,7 +70,7 @@ export default function Home() { curve: [0, 1, 0, 1], }); - const url = `${typeof window !== "undefined" ? window.location?.origin : "https://lanyard.cnrad.dev"}/api/${userData?.userId}${option.length > 0 ? `?${option.map((o) => `${o.name}=${o.value}`).join("&")}` : ""}`; + const url = `${originUrl}/api/${userData?.userId}${option.length > 0 ? `?${option.map((o) => `${o.name}=${o.value}`).join("&")}` : ""}`; function outputText() { if (outputType === "html") { @@ -297,7 +304,12 @@ export default function Home() { URL -
{outputText()}
+
+ {outputText()} +
diff --git a/src/utils/renderCard.tsx b/src/utils/renderCard.tsx index 96656c1..cd01864 100644 --- a/src/utils/renderCard.tsx +++ b/src/utils/renderCard.tsx @@ -97,7 +97,7 @@ async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise< if (data.discord_user.avatar && data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif"; if (params.animated === "false") avatarExtension = "webp"; if (params.theme === "light") { - backgroundColor = "#eee"; + backgroundColor = "eee"; theme = "light"; } if (params.bg) backgroundColor = params.bg;