Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-10 04:22:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: themes

Browse Source
This commit is contained in:
David Nguyen
2025-02-18 15:17:13 +11:00
parent fb16214dc5
commit dd602a7e1c
4 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/remix/app/entry.client.tsx
View File

@ -5,10 +5,17 @@ import { detect, fromHtmlTag } from '@lingui/detect-locale';
import { I18nProvider } from '@lingui/react'; import { I18nProvider } from '@lingui/react';
import { hydrateRoot } from 'react-dom/client'; import { hydrateRoot } from 'react-dom/client';
import { HydratedRouter } from 'react-router/dom'; import { HydratedRouter } from 'react-router/dom';
import { Theme, ThemeProvider } from 'remix-themes';
import { match } from 'ts-pattern';
import { dynamicActivate } from '@documenso/lib/utils/i18n'; import { dynamicActivate } from '@documenso/lib/utils/i18n';
async function main() { async function main() {
const theme = match(document.documentElement.getAttribute('data-theme'))
.with('dark', () => Theme.DARK)
.with('light', () => Theme.LIGHT)
.otherwise(() => null);
const locale = detect(fromHtmlTag('lang')) || 'en'; const locale = detect(fromHtmlTag('lang')) || 'en';
await dynamicActivate(locale); await dynamicActivate(locale);
@ -18,7 +25,9 @@ async function main() {
document, document,
<StrictMode> <StrictMode>
<I18nProvider i18n={i18n}> <I18nProvider i18n={i18n}>
<HydratedRouter /> <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
<HydratedRouter />
</ThemeProvider>
</I18nProvider> </I18nProvider>
</StrictMode>, </StrictMode>,
); );

10
apps/remix/app/entry.server.tsx
View File

@ -7,11 +7,13 @@ import type { RenderToPipeableStreamOptions } from 'react-dom/server';
import { renderToPipeableStream } from 'react-dom/server'; import { renderToPipeableStream } from 'react-dom/server';
import type { AppLoadContext, EntryContext } from 'react-router'; import type { AppLoadContext, EntryContext } from 'react-router';
import { ServerRouter } from 'react-router'; import { ServerRouter } from 'react-router';
import { ThemeProvider } from 'remix-themes';
import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n'; import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
import { dynamicActivate, extractLocaleData } from '@documenso/lib/utils/i18n'; import { dynamicActivate, extractLocaleData } from '@documenso/lib/utils/i18n';
import { langCookie } from './storage/lang-cookie.server'; import { langCookie } from './storage/lang-cookie.server';
import { themeSessionResolver } from './storage/theme-session.server';
export const streamTimeout = 5_000; export const streamTimeout = 5_000;
@ -30,6 +32,10 @@ export default async function handleRequest(
await dynamicActivate(language); await dynamicActivate(language);
const { getTheme } = await themeSessionResolver(request);
const theme = getTheme();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let shellRendered = false; let shellRendered = false;
const userAgent = request.headers.get('user-agent'); const userAgent = request.headers.get('user-agent');
@ -41,7 +47,9 @@ export default async function handleRequest(
const { pipe, abort } = renderToPipeableStream( const { pipe, abort } = renderToPipeableStream(
<I18nProvider i18n={i18n}> <I18nProvider i18n={i18n}>
<ServerRouter context={routerContext} url={request.url} /> <ThemeProvider specifiedTheme={theme} themeAction="/api/theme">
<ServerRouter context={routerContext} url={request.url} />
</ThemeProvider>
</I18nProvider>, </I18nProvider>,
{ {
[readyOption]() { [readyOption]() {

40
apps/remix/app/root.tsx
View File

@ -12,7 +12,7 @@ import {
useLoaderData, useLoaderData,
useLocation, useLocation,
} from 'react-router'; } from 'react-router';
import { PreventFlashOnWrongTheme, ThemeProvider, useTheme } from 'remix-themes'; import { PreventFlashOnWrongTheme, useTheme } from 'remix-themes';
import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session'; import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
import { SessionProvider } from '@documenso/lib/client-only/providers/session'; import { SessionProvider } from '@documenso/lib/client-only/providers/session';
@ -105,13 +105,21 @@ export async function loader({ request }: Route.LoaderArgs) {
); );
} }
export function App() { export function Layout({ children }: { children: React.ReactNode }) {
const { publicEnv, lang, session, ...data } = useLoaderData<typeof loader>() || {}; const { publicEnv, lang, session, ...data } = useLoaderData<typeof loader>() || {};
const [theme] = useTheme(); const [theme] = useTheme();
const location = useLocation();
useEffect(() => {
if (env('NODE_ENV') === 'production') {
trackPageview();
}
}, [location.pathname]);
return ( return (
<html translate="no" lang={lang} className={theme ?? ''}> <html translate="no" lang={lang} data-theme={theme} className={theme ?? ''}>
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@ -136,7 +144,8 @@ export function App() {
<SessionProvider initialSession={session}> <SessionProvider initialSession={session}>
<TooltipProvider> <TooltipProvider>
<TrpcProvider> <TrpcProvider>
<Outlet /> {children}
<Toaster /> <Toaster />
</TrpcProvider> </TrpcProvider>
</TooltipProvider> </TooltipProvider>
@ -157,27 +166,8 @@ export function App() {
); );
} }
/** export default function App() {
* We have this weird setup with: return <Outlet />;
* - No root layout
* - AppWithTheme
*
* To handle remix-themes.
*/
export default function AppWithTheme({ loaderData }: Route.ComponentProps) {
const location = useLocation();
useEffect(() => {
if (env('NODE_ENV') === 'production') {
trackPageview();
}
}, [location.pathname]);
return (
<ThemeProvider specifiedTheme={loaderData.theme} themeAction="/api/theme">
<App />
</ThemeProvider>
);
} }
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {

2
packages/lib/utils/env.ts
View File

@ -13,7 +13,7 @@ export const env = (variable: EnvironmentVariable | (string & object)): string |
return window.__ENV__[variable]; return window.__ENV__[variable];
} }
return process?.env?.[variable]; return typeof process !== 'undefined' ? process?.env?.[variable] : undefined;
}; };
export const createPublicEnv = () => export const createPublicEnv = () =>