Merge branch 'main' of https://github.com/thajj/thajj.github.io

thajj · Sep 22, 2024 · 53e69ac · 53e69ac
2 parents dd91220 + fd14e1c
commit 53e69ac
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 51 deletions.
diff --git a/src/app/CNAME b/src/app/CNAME
@@ -0,0 +1 @@
+toufichajj.dev
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,6 +13,7 @@ import { Source_Code_Pro } from "next/font/google";
 
 import { Metadata } from "next";
 import Head from "next/head";
+import { ThemeProvider } from "next-themes";
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://" + baseURL),
@@ -71,60 +72,64 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <>
-      <Head>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Flex
-        as="html"
-        lang="en"
-        background="page"
-        data-neutral={style.neutral}
-        data-brand={style.brand}
-        data-accent={style.accent}
-        data-solid={style.solid}
-        data-solid-style={style.solidStyle}
-        data-theme={style.theme}
-        data-border={style.border}
-        data-surface={style.surface}
-        data-transition={style.transition}
-        className={classNames(
-          primary.variable,
-          secondary ? secondary.variable : "",
-          tertiary ? tertiary.variable : "",
-          code.variable
-        )}
-      >
-        <Flex
-          style={{ minHeight: "100vh" }}
-          as="body"
-          fillWidth
-          margin="0"
-          padding="0"
-          direction="column"
-        >
-          <Background
-            gradient={effects.gradient}
-            dots={effects.dots}
-            lines={effects.lines}
-          />
-          <Flex fillWidth minHeight="16"></Flex>
-          <Header />
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <Head>
+            <link rel="icon" href="/favicon.ico" />
+          </Head>
           <Flex
-            zIndex={0}
-            fillWidth
-            paddingY="l"
-            paddingX="l"
-            justifyContent="center"
-            flex={1}
+            as="html"
+            lang="en"
+            background="page"
+            data-neutral={style.neutral}
+            data-brand={style.brand}
+            data-accent={style.accent}
+            data-solid={style.solid}
+            data-solid-style={style.solidStyle}
+            data-theme={style.theme}
+            data-border={style.border}
+            data-surface={style.surface}
+            data-transition={style.transition}
+            className={classNames(
+              primary.variable,
+              secondary ? secondary.variable : "",
+              tertiary ? tertiary.variable : "",
+              code.variable
+            )}
           >
-            <Flex justifyContent="center" fillWidth minHeight="0">
-              <RouteGuard>{children}</RouteGuard>
+            <Flex
+              style={{ minHeight: "100vh" }}
+              as="body"
+              fillWidth
+              margin="0"
+              padding="0"
+              direction="column"
+            >
+              <Background
+                gradient={effects.gradient}
+                dots={effects.dots}
+                lines={effects.lines}
+              />
+              <Flex fillWidth minHeight="16"></Flex>
+              <Header />
+              <Flex
+                zIndex={0}
+                fillWidth
+                paddingY="l"
+                paddingX="l"
+                justifyContent="center"
+                flex={1}
+              >
+                <Flex justifyContent="center" fillWidth minHeight="0">
+                  <RouteGuard>{children}</RouteGuard>
+                </Flex>
+              </Flex>
+              <Footer />
             </Flex>
           </Flex>
-          <Footer />
-        </Flex>
-      </Flex>
-    </>
+        </ThemeProvider>
+      </body>
+    </html>
   );
 }