fix(docs): restore theme switch without runtime warnings

Move html/body shell and global css to root app layout to avoid hydration/script warnings from nested document nodes. Disable provider theme injection and add a custom script-free theme switch in shared layout slots.

Also migrate docs search static client initializer to ZBSearch (initDB), add zbsearch dependency, and align docs lint tooling with ESLint 9 compatibility so npm run lint passes.
This commit is contained in:
Sanaei
2026-08-06 17:59:23 +02:00
parent 7eacce6a46
commit cb902314db
8 changed files with 828 additions and 579 deletions
+4 -16
View File
@@ -1,30 +1,18 @@
import '../global.css';
import { RootProvider } from 'fumadocs-ui/provider/next';
import { Inter, Vazirmatn } from 'next/font/google';
import { i18n, localeDirection } from '@/lib/i18n';
import { i18n } from '@/lib/i18n';
import { provider } from '@/lib/i18n-ui';
import SearchDialog from '@/components/search-dialog';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
// Persian UI font; covers Arabic + Latin glyphs so mixed content renders well.
const vazirmatn = Vazirmatn({ subsets: ['arabic'], display: 'swap' });
export function generateStaticParams() {
return i18n.languages.map((lang) => ({ lang }));
}
export default async function LangLayout({ params, children }: LayoutProps<'/[lang]'>) {
const { lang } = await params;
const dir = localeDirection(lang);
const fontClassName = lang === 'fa' ? vazirmatn.className : inter.className;
return (
<html lang={lang} dir={dir} className={fontClassName} suppressHydrationWarning>
<body className="flex min-h-screen flex-col" suppressHydrationWarning>
<RootProvider i18n={provider(lang)} search={{ SearchDialog }}>
{children}
</RootProvider>
</body>
</html>
<RootProvider i18n={provider(lang)} search={{ SearchDialog }} theme={{ enabled: false }}>
{children}
</RootProvider>
);
}
+30 -5
View File
@@ -1,10 +1,16 @@
import type { Metadata } from 'next';
import type { ReactNode } from 'react';
import { Inter, Vazirmatn } from 'next/font/google';
import './global.css';
import { appName, appTagline, siteUrl } from '@/lib/shared';
import { i18n, localeDirection } from '@/lib/i18n';
// Global SEO defaults. The real <html>/<body> live in `app/[lang]/layout.tsx`
// so we can set `lang`/`dir` per locale (RTL for fa); this root layout is a
// pass-through that only carries site-wide metadata.
const inter = Inter({ subsets: ['latin'], display: 'swap' });
// Persian UI font; covers Arabic + Latin glyphs so mixed content renders well.
const vazirmatn = Vazirmatn({ subsets: ['arabic'], display: 'swap' });
// Global SEO defaults and document shell. Locale-aware html attributes are
// computed from route params so RTL locales get a correct base direction.
export const metadata: Metadata = {
metadataBase: new URL(siteUrl),
title: {
@@ -26,6 +32,25 @@ export const metadata: Metadata = {
},
};
export default function RootLayout({ children }: { children: ReactNode }) {
return children;
export default async function RootLayout({
children,
params,
}: {
children: ReactNode;
params: Promise<{ lang?: string }>;
}) {
const { lang: rawLang } = await params;
const lang = i18n.languages.includes(rawLang as (typeof i18n.languages)[number])
? (rawLang as (typeof i18n.languages)[number])
: i18n.defaultLanguage;
const dir = localeDirection(lang);
const fontClassName = lang === 'fa' ? vazirmatn.className : inter.className;
return (
<html lang={lang} dir={dir} className={fontClassName} suppressHydrationWarning>
<body className="flex min-h-screen flex-col" suppressHydrationWarning>
{children}
</body>
</html>
);
}