pl-fe: Do not nest body in PlFeHead

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-20 13:20:31 +02:00
parent 77c0689321
commit 7c2eaf5702
2 changed files with 12 additions and 21 deletions

View file

@ -12,12 +12,8 @@ import { generateThemeCss } from 'pl-fe/utils/theme';
const Helmet = React.lazy(() => import('pl-fe/components/helmet')); const Helmet = React.lazy(() => import('pl-fe/components/helmet'));
interface IPlFeHead {
children: React.ReactNode;
}
/** Injects metadata into site head with Helmet. */ /** Injects metadata into site head with Helmet. */
const PlFeHead: React.FC<IPlFeHead> = ({ children }) => { const PlFeHead = () => {
const { locale, direction } = useLocale(); const { locale, direction } = useLocale();
const { demo, reduceMotion, underlineLinks, demetricator, systemFont } = useSettings(); const { demo, reduceMotion, underlineLinks, demetricator, systemFont } = useSettings();
const plFeConfig = usePlFeConfig(); const plFeConfig = usePlFeConfig();
@ -43,17 +39,13 @@ const PlFeHead: React.FC<IPlFeHead> = ({ children }) => {
}, [dsn]); }, [dsn]);
return ( return (
<> <Helmet>
<Helmet> <html lang={locale} className={clsx('h-full', { 'dark': theme === 'dark', 'dark black': theme === 'black' })} />
<html lang={locale} className={clsx('h-full', { 'dark': theme === 'dark', 'dark black': theme === 'black' })} /> <body className={bodyClass} dir={direction} />
<body className={bodyClass} dir={direction} /> {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>} {['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
{['dark', 'black'].includes(theme) && <style type='text/css'>{':root { color-scheme: dark; }'}</style>} <meta name='theme-color' content={plFeConfig.brandColor} />
<meta name='theme-color' content={plFeConfig.brandColor} /> </Helmet>
</Helmet>
{children}
</>
); );
}; };

View file

@ -30,11 +30,10 @@ const PlFe: React.FC = () => (
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<StatProvider> <StatProvider>
<HelmetProvider> <HelmetProvider>
<PlFeHead> <PlFeHead />
<PlFeLoad> <PlFeLoad>
<PlFeMount /> <PlFeMount />
</PlFeLoad> </PlFeLoad>
</PlFeHead>
</HelmetProvider> </HelmetProvider>
</StatProvider> </StatProvider>
</QueryClientProvider> </QueryClientProvider>