feat: root layout with fonts, @wrksz/themes, motion, metadata

This commit is contained in:
2026-06-01 19:40:16 -05:00
parent 4b10e357a4
commit c8ec2735d2

View File

@@ -1,33 +1,48 @@
import type { Metadata } from "next"; import type { Metadata } from 'next'
import { Geist, Geist_Mono } from "next/font/google"; import { Inter, Merriweather, JetBrains_Mono } from 'next/font/google'
import "./globals.css"; import { ThemeProvider } from '@wrksz/themes/next'
import { Providers } from './providers'
import './globals.css'
import 'katex/dist/katex.min.css'
import { useMDXComponents } from '@/mdx-components'
const geistSans = Geist({ const inter = Inter({
variable: "--font-geist-sans", subsets: ['latin'],
subsets: ["latin"], display: 'swap',
}); variable: '--font-inter',
})
const geistMono = Geist_Mono({ const merriweather = Merriweather({
variable: "--font-geist-mono", weight: ['400', '700'],
subsets: ["latin"], subsets: ['latin'],
}); display: 'swap',
variable: '--font-merriweather',
})
const jetbrainsMono = JetBrains_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-jetbrains-mono',
})
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: { template: '%s | blog', default: 'blog' },
description: "Generated by create next app", description: 'A sleek static blog with code and math.',
}; }
export default function RootLayout({ export default function RootLayout({ children }: { children: React.ReactNode }) {
children, return (
}: Readonly<{ <html lang="en" className={`${inter.variable} ${merriweather.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
children: React.ReactNode; <body className="antialiased bg-canvas text-ink font-serif">
}>) { <ThemeProvider
return ( attribute="class"
<html defaultTheme="system"
lang="en" enableSystem
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} disableTransitionOnChange
> >
<body className="min-h-full flex flex-col">{children}</body> <Providers>{children}</Providers>
</html> </ThemeProvider>
); </body>
</html>
)
} }