noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-24 20:00:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(front): fix react hydration error

Browse Source
This commit is contained in:
Hexagonn
2024-11-03 03:08:32 +00:00
committed by GitHub
parent 347ced2c65
commit 8ec6196593
3 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/layout.tsx
View File

@@ -26,8 +26,11 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${poppins.className} antialiased`}>
<html lang="en" suppressHydrationWarning>
<body
className={`${poppins.className} antialiased`}
suppressHydrationWarning
>
{children}
</body>
</html>

17
src/app/page.tsx
View File

@@ -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 | string>(null);
const [userError, setUserError] = useState<string | JSX.Element>();
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
</button>
</div>
<div className="output bg-black">{outputText()}</div>
<div
className="output bg-black"
suppressHydrationWarning
>
{outputText()}
</div>
<div className="mt-4 flex gap-2">
<button className="action" onClick={copy}>
{copyState}
@@ -485,6 +497,7 @@ export default function Home() {
width={500}
alt="Your Lanyard Banner"
onLoad={() => setOnImageLoaded(true)}
suppressHydrationWarning
/>
</div>
</motion.div>

2
src/utils/renderCard.tsx
View File

@@ -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;