From 959ebcf37f9de8c2877fa5a661523f3fa03863fc Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 14 Jun 2023 03:50:07 +0200
Subject: [PATCH] feat: change main layout with added theme provider
---
app/layout.tsx | 88 +++++++++++++++++++++++++++++------
components/theme-provider.tsx | 9 ++++
2 files changed, 82 insertions(+), 15 deletions(-)
create mode 100644 components/theme-provider.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
index 71b3fbf..8636523 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,21 +1,79 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import { Inter, Fjalla_One } from "next/font/google";
-const inter = Inter({ subsets: ['latin'] })
+import { ThemeProvider } from "@/components/theme-provider";
+import "tailwindcss/tailwind.css";
-export const metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: {
+ default: "hellob.art",
+ template: "%s | hellob.art",
+ },
+ description: "a simple portfolio made by bart van der braak",
+ metadataBase: new URL("https://hellob.art"),
+ openGraph: {
+ title: "hellob.art",
+ description: "a simple portfolio made by bart van der braak",
+ url: "https://hellob.art",
+ siteName: "hellob.art",
+ locale: "en-US",
+ type: "website",
+ },
+ robots: {
+ index: true,
+ follow: true,
+ googleBot: {
+ index: true,
+ follow: true,
+ "max-video-preview": -1,
+ "max-image-preview": "large",
+ "max-snippet": -1,
+ },
+ },
+ twitter: {
+ title: "hellob.art",
+ card: "summary_large_image",
+ },
+ icons: {
+ shortcut: "/favicon.png",
+ },
+};
+
+interface RootLayoutProps {
+ children: React.ReactNode;
}
-export default function RootLayout({
- children,
-}: {
- children: React.ReactNode
-}) {
+const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+});
+
+const fjallaOne = Fjalla_One({
+ subsets: ["latin"],
+ weight: "400",
+ variable: "--font-fjalla-one",
+});
+
+interface RootLayoutProps {
+ children: React.ReactNode;
+}
+
+export default async function RootLayout({ children }: RootLayoutProps) {
return (
- <html lang="en">
- <body className={inter.className}>{children}</body>
- </html>
- )
+ <>
+ <html
+ lang="en"
+ suppressHydrationWarning
+ className={[inter.variable, fjallaOne.variable].join(" ")}
+ >
+ <head />
+ <body className="min-h-screen antialiased">
+ <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
+ {children}
+ </ThemeProvider>
+ </body>
+ </html>
+ </>
+ );
}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..b4e8e4f
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}