moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move SoapboxHead into a separate file

This commit is contained in:
Alex Gleason 2023-10-07 18:41:39 -05:00
parent 111428f46d
commit 76578c64c5
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/containers/soapbox-head.tsx Normal file
View File

@ -0,0 +1,53 @@
import clsx from 'clsx';
import React from 'react';
import {
useSentry,
useSettings,
useSoapboxConfig,
useTheme,
useLocale,
} from 'soapbox/hooks';
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
import { generateThemeCss } from 'soapbox/utils/theme';
const Helmet = React.lazy(() => import('soapbox/components/helmet'));
interface ISoapboxHead {
children: React.ReactNode;
}
/** Injects metadata into site head with Helmet. */
const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
const { locale, direction } = useLocale();
const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
const demo = !!settings.get('demo');
const darkMode = useTheme() === 'dark';
const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
const bodyClass = clsx('h-full bg-white text-base dark:bg-gray-800', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
'demetricator': settings.get('demetricator'),
});
useSentry(soapboxConfig.sentryDsn);
return (
<>
<Helmet>
<html lang={locale} className={clsx('h-full', { dark: darkMode })} />
<body className={bodyClass} dir={direction} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
{darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} />
</Helmet>
{children}
</>
);
};
export default SoapboxHead;

49
src/containers/soapbox.tsx
View File

@ -1,63 +1,16 @@
import { QueryClientProvider } from '@tanstack/react-query'; import { QueryClientProvider } from '@tanstack/react-query';
import clsx from 'clsx';
import React from 'react'; import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { StatProvider } from 'soapbox/contexts/stat-context'; import { StatProvider } from 'soapbox/contexts/stat-context';
import {
useSentry,
useSettings,
useSoapboxConfig,
useTheme,
useLocale,
} from 'soapbox/hooks';
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
import { queryClient } from 'soapbox/queries/client'; import { queryClient } from 'soapbox/queries/client';
import { generateThemeCss } from 'soapbox/utils/theme';
import { store } from '../store'; import { store } from '../store';
import SoapboxHead from './soapbox-head';
import SoapboxLoad from './soapbox-load'; import SoapboxLoad from './soapbox-load';
import SoapboxMount from './soapbox-mount'; import SoapboxMount from './soapbox-mount';
const Helmet = React.lazy(() => import('soapbox/components/helmet'));
interface ISoapboxHead {
children: React.ReactNode;
}
/** Injects metadata into site head with Helmet. */
const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
const { locale, direction } = useLocale();
const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
const demo = !!settings.get('demo');
const darkMode = useTheme() === 'dark';
const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
const bodyClass = clsx('h-full bg-white text-base dark:bg-gray-800', {
'no-reduce-motion': !settings.get('reduceMotion'),
'underline-links': settings.get('underlineLinks'),
'demetricator': settings.get('demetricator'),
});
useSentry(soapboxConfig.sentryDsn);
return (
<>
<Helmet>
<html lang={locale} className={clsx('h-full', { dark: darkMode })} />
<body className={bodyClass} dir={direction} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
{darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} />
</Helmet>
{children}
</>
);
};
/** The root React node of the application. */ /** The root React node of the application. */
const Soapbox: React.FC = () => { const Soapbox: React.FC = () => {
return ( return (