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 (