From 76578c64c535e40eddcf3a7a719a34a4e64a02b9 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 Oct 2023 18:41:39 -0500 Subject: [PATCH] Move SoapboxHead into a separate file --- src/containers/soapbox-head.tsx | 53 +++++++++++++++++++++++++++++++++ src/containers/soapbox.tsx | 49 +----------------------------- 2 files changed, 54 insertions(+), 48 deletions(-) create mode 100644 src/containers/soapbox-head.tsx diff --git a/src/containers/soapbox-head.tsx b/src/containers/soapbox-head.tsx new file mode 100644 index 000000000..0039404e0 --- /dev/null +++ b/src/containers/soapbox-head.tsx @@ -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 = ({ 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 ( + <> + + + + {themeCss && } + {darkMode && } + + + + {children} + + ); +}; + +export default SoapboxHead; diff --git a/src/containers/soapbox.tsx b/src/containers/soapbox.tsx index 63cfb3d9e..5877cbd88 100644 --- a/src/containers/soapbox.tsx +++ b/src/containers/soapbox.tsx @@ -1,63 +1,16 @@ import { QueryClientProvider } from '@tanstack/react-query'; -import clsx from 'clsx'; import React from 'react'; import { Provider } from 'react-redux'; 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 { generateThemeCss } from 'soapbox/utils/theme'; import { store } from '../store'; +import SoapboxHead from './soapbox-head'; import SoapboxLoad from './soapbox-load'; 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 = ({ 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 ( - <> - - - - {themeCss && } - {darkMode && } - - - - {children} - - ); -}; - /** The root React node of the application. */ const Soapbox: React.FC = () => { return (