docs-template/app/layout.tsx

import type { ReactNode } from 'react'
import { RootProvider } from '@hanzo/docs/ui/provider/next'
import '@hanzo/docs/ui/css/neutral.css'
import './globals.css'

// ============================================================================
// CONFIGURE YOUR DOCS SITE HERE
// ============================================================================
const SITE_CONFIG = {
  name: 'Docs Template',
  description: 'Documentation template for Lux Network projects',
  url: 'https://docs.example.com',
  keywords: ['documentation', 'Lux Network', 'blockchain'],
}

export const metadata = {
  title: {
    default: SITE_CONFIG.name,
    template: `%s | ${SITE_CONFIG.name}`,
  },
  description: SITE_CONFIG.description,
  keywords: SITE_CONFIG.keywords,
  authors: [{ name: 'Lux Network' }],
  metadataBase: new URL(SITE_CONFIG.url),
  icons: {
    icon: '/favicon.svg',
    apple: '/favicon.svg',
  },
  openGraph: {
    title: SITE_CONFIG.name,
    description: SITE_CONFIG.description,
    type: 'website',
    siteName: SITE_CONFIG.name,
    images: [
      {
        url: '/og.png',
        width: 1200,
        height: 630,
        alt: SITE_CONFIG.name,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: SITE_CONFIG.name,
    description: SITE_CONFIG.description,
    images: ['/og.png'],
  },
}

export default function RootLayout({
  children
}: {
  children: ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        {/* Prevent flash - respect system preference */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                document.documentElement.classList.add('dark');
              })();
            `,
          }}
        />
      </head>
      <body className="min-h-screen bg-background font-sans antialiased">
        <RootProvider
          theme={{
            enabled: true,
            defaultTheme: 'dark',
          }}
        >
          <div className="relative flex min-h-screen flex-col">
            {children}
          </div>
        </RootProvider>
      </body>
    </html>
  )
}