fix(browser-extensions): don't render directly in body

2024-10-04 09:31:25 +02:00
parent b17d6a58f5
commit 50885b065d
5 changed files with 87 additions and 17 deletions
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -4,6 +4,8 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/reac
 import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
 import { themeStore } from './lib/stores/theme';
 import { stripIndents } from './utils/stripIndent';
+import { createHead } from 'remix-island';
+import { useEffect } from 'react';

 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
 import globalStyles from './styles/index.scss?url';
@@ -50,24 +52,29 @@ const inlineThemeCode = stripIndents`
  }
 `;

+export const Head = createHead(() => (
+  <>
+    <meta charSet="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <Meta />
+    <Links />
+    <script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
+  </>
+));
+
 export function Layout({ children }: { children: React.ReactNode }) {
  const theme = useStore(themeStore);

+  useEffect(() => {
+    document.querySelector('html')?.setAttribute('data-theme', theme);
+  }, [theme]);
+
  return (
-    <html lang="en" data-theme={theme}>
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <Meta />
-        <Links />
-        <script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
-      </head>
-      <body>
-        {children}
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
+    <>
+      {children}
+      <ScrollRestoration />
+      <Scripts />
+    </>
  );
 }