noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-25 04:17:18 +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; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body className={`${poppins.className} antialiased`}> <body
className={`${poppins.className} antialiased`}
suppressHydrationWarning
>
{children} {children}
</body> </body>
</html> </html>

17
src/app/page.tsx
View File

@@ -40,6 +40,13 @@ import { filterLetters } from "@/lib/utils";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
export default function Home() { 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 [userId, setUserId] = useState<null | string>(null);
const [userError, setUserError] = useState<string | JSX.Element>(); const [userError, setUserError] = useState<string | JSX.Element>();
const [userData, setUserData] = useState<{ userId: string } | null>(null); const [userData, setUserData] = useState<{ userId: string } | null>(null);
@@ -63,7 +70,7 @@ export default function Home() {
curve: [0, 1, 0, 1], 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() { function outputText() {
if (outputType === "html") { if (outputType === "html") {
@@ -297,7 +304,12 @@ export default function Home() {
URL URL
</button> </button>
</div> </div>
<div className="output bg-black">{outputText()}</div> <div
className="output bg-black"
suppressHydrationWarning
>
{outputText()}
</div>
<div className="mt-4 flex gap-2"> <div className="mt-4 flex gap-2">
<button className="action" onClick={copy}> <button className="action" onClick={copy}>
{copyState} {copyState}
@@ -485,6 +497,7 @@ export default function Home() {
width={500} width={500}
alt="Your Lanyard Banner" alt="Your Lanyard Banner"
onLoad={() => setOnImageLoaded(true)} onLoad={() => setOnImageLoaded(true)}
suppressHydrationWarning
/> />
</div> </div>
</motion.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 (data.discord_user.avatar && data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
if (params.animated === "false") avatarExtension = "webp"; if (params.animated === "false") avatarExtension = "webp";
if (params.theme === "light") { if (params.theme === "light") {
backgroundColor = "#eee"; backgroundColor = "eee";
theme = "light"; theme = "light";
} }
if (params.bg) backgroundColor = params.bg; if (params.bg) backgroundColor = params.bg;