snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/docs/app/layout.tsx

@@ -0,0 +1,102 @@
+import { GeistSans } from 'geist/font/sans'
+import { Metadata, Viewport } from 'next'
+import { ThemeProvider } from 'next-themes'
+import localFont from 'next/font/local'
+import AutoRefresh from '@/components/common/autorefresh'
+import { Footer } from '@/components/navigation/footer'
+import { Header } from '@/components/navigation/header'
+import { assetUrl } from '@/utils/asset-url'
+import { cn } from '@/utils/cn'
+import Analytics from './analytics'
+import './globals.css'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+	if (process.env.NODE_ENV === 'development') {
+		return <AutoRefresh>{children}</AutoRefresh>
+	}
+
+	return children
+}
+
+export const metadata: Metadata = {
+	metadataBase: new URL('https://tldraw.dev'),
+	title: {
+		default: 'tldraw: Build whiteboards in React with the tldraw SDK',
+		template: `%s • tldraw`,
+	},
+	description:
+		'The tldraw SDK provides tools, services, and APIs to build beautiful whiteboards and infinite canvas applications with real-time collaboration and a powerful React-based canvas.',
+	twitter: {
+		creator: '@tldraw',
+	},
+	applicationName: 'tldraw SDK',
+	appleWebApp: {
+		capable: true,
+		title: 'tldraw SDK',
+		statusBarStyle: 'black',
+	},
+	icons: [
+		{ rel: 'shortcut icon', url: assetUrl('/favicon.svg') },
+		{ rel: 'icon', url: assetUrl('/favicon-32x32.svg'), sizes: '32x32' },
+		{ rel: 'icon', url: assetUrl('/favicon-16x16.svg'), sizes: '16x16' },
+		{ rel: 'apple-touch-icon', url: assetUrl('/apple-touch-icon.png') },
+		{
+			rel: 'apple-touch-icon',
+			url: assetUrl('/apple-touch-icon-152x152.svg'),
+			sizes: '152x152',
+		},
+		{
+			rel: 'apple-touch-icon',
+			url: assetUrl('/apple-touch-icon-180x180.svg'),
+			sizes: '180x180',
+		},
+		{
+			rel: 'apple-touch-icon',
+			url: assetUrl('/apple-touch-icon-167x167.svg'),
+			sizes: '167x167',
+		},
+	],
+}
+
+export const viewport: Viewport = {
+	initialScale: 1,
+	maximumScale: 1,
+	width: 'device-width',
+	height: 'device-height',
+	themeColor: '#ffffff',
+}
+
+const ShantellSans = localFont({
+	src: './shantell-sans.woff2',
+	weight: '400',
+	display: 'swap',
+	variable: '--font-shantell-sans',
+})
+
+export default async function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<Wrapper>
+			<html
+				lang="en"
+				className={cn(GeistSans.variable, ShantellSans.variable, 'font-sans antialiased')}
+			>
+				<body className="overflow-x-hidden bg-white text-zinc-800 dark:bg-zinc-950 dark:text-zinc-300">
+					<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+						<Header />
+						{children}
+						<Footer />
+						<Analytics />
+					</ThemeProvider>
+					<noscript>
+						<iframe
+							src="https://www.googletagmanager.com/ns.html?id=GTM-KMMLPMMN"
+							height="0"
+							width="0"
+							style={{ display: 'none', visibility: 'hidden' }}
+						/>
+					</noscript>
+				</body>
+			</html>
+		</Wrapper>
+	)
+}