Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Root mobile detection and some theming fixes
  • Loading branch information
regalijan committed Oct 19, 2023
1 parent 9e753e0 commit 672cd0c
Showing 1 changed file with 27 additions and 2 deletions.
29 changes: 27 additions & 2 deletions app/root.tsx
Expand Up @@ -22,6 +22,7 @@ import {
} from "@remix-run/react";
import { type ErrorResponse } from "@remix-run/router";
import { LinksFunction } from "@remix-run/cloudflare";
import MobileDetect from "mobile-detect";
import Login from "../components/Login.js";
import Navigation from "../components/Navigation.js";

Expand Down Expand Up @@ -117,6 +118,18 @@ export async function loader({
if (context.env.DSN) data.dsn = context.env.DSN;
if (context.data.theme) data.theme = context.data.theme;

const isMobileCH = context.request.headers.get("sec-ch-ua-mobile");

if (isMobileCH) {
data.mobile = isMobileCH;
return data;
}

const ua = context.request.headers.get("user-agent");

if (!ua) data.mobile = "?0";
else data.mobile = `?${Number(new MobileDetect(ua).mobile())}`;

return data;
}

Expand Down Expand Up @@ -164,7 +177,13 @@ function getMarkup(
);

return (
<html lang="en-US">
<html
lang="en-US"
{...(loaderData.theme && {
"data-theme": loaderData.theme,
style: { colorScheme: loaderData.theme },
})}
>
<head>
<Links />
{serverStyleData?.map(({ key, ids, css }) => (
Expand All @@ -186,7 +205,13 @@ function getMarkup(
/>
<Meta />
</head>
<body>{body}</body>
<body
{...(loaderData.theme && {
className: `chakra-ui-${loaderData.theme}`,
})}
>
{body}
</body>
</html>
);
}
Expand Down

0 comments on commit 672cd0c

Please sign in to comment.