xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix hydration error

Browse Source
This commit is contained in:
DefectingCat
2023-03-21 16:25:19 +08:00
parent 62b5d0480f
commit cde9f4cca7
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/fonts.ts
View File

@ -1,50 +0,0 @@
import {
Aleo,
Aref_Ruqaa,
Barlow,
JetBrains_Mono,
Poppins,
} from 'next/font/google';
export const aleo = Aleo({
weight: ['300', '400', '700'],
variable: '--font-aleo',
display: 'swap',
subsets: ['latin'],
});
export const aref_ruqaa = Aref_Ruqaa({
weight: ['400', '700'],
variable: '--font-aref-ruqaa',
display: 'swap',
subsets: ['latin'],
});
export const barlow = Barlow({
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
variable: '--font-barlow',
display: 'swap',
subsets: ['latin'],
});
export const jetbrains_mono = JetBrains_Mono({
display: 'swap',
variable: '--font-jetbrains-mono',
subsets: ['latin'],
});
export const poppins = Poppins({
weight: ['300', '400', '700', '100', '200', '500', '600', '800', '900'],
variable: '--font-poppins',
subsets: ['latin'],
});
const fonts = {
aleo,
aref_ruqaa,
barlow,
jetbrains_mono,
poppins,
};
export default fonts;

13
app/layout.tsx
View File

@ -5,7 +5,7 @@ import HeadBar from './nav-bar';
import Footer from './footer';
import BackToTop from 'components/common/back-to-top';
import clsx from 'clsx';
import fonts from './fonts';
import fonts from 'lib/fonts';
export default function RootLayout({
children,
@ -16,6 +16,7 @@ export default function RootLayout({
<html
lang="en"
className={clsx(Object.values(fonts).map((font) => font.variable))}
suppressHydrationWarning
>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
@ -27,10 +28,12 @@ export default function RootLayout({
/>
</head>
<body>
<HeadBar />
<RUAThemeProvider>{children}</RUAThemeProvider>
<Footer />
<BackToTop />
<RUAThemeProvider>
<HeadBar />
{children}
<Footer />
<BackToTop />
</RUAThemeProvider>
</body>
</html>
);