import { Links, LiveReload, LoaderFunction, Meta, Outlet, Scripts, ScrollRestoration, useCatch, useLoaderData, } from 'remix'; import type { MetaFunction, LinksFunction } from 'remix'; import React from 'react'; import { Theme, ThemeProvider } from '~/components'; import { Navigation } from './components/Navigation'; import { getThemeSession } from '~/utils/theme.server'; import tailwind from './styles/app.css'; import { getMetaTagsForSite, getConfig, Config } from './utils'; import { ConfigProvider } from './components/ConfigProvider'; import { UiStateProvider } from './components/UiStateProvider'; export const meta: MetaFunction = ({ data }) => { return getMetaTagsForSite({ title: data?.config?.site?.name, twitter: data?.config?.site?.twitter, }); }; export const links: LinksFunction = () => { return [{ rel: 'stylesheet', href: tailwind }]; }; type DocumentData = { theme: Theme; config?: Config; }; export const loader: LoaderFunction = async ({ request }): Promise => { const [config, themeSession] = await Promise.all([ getConfig(request), getThemeSession(request), ]); const data = { theme: themeSession.getTheme(), config }; return data; }; function Document({ children, theme, config, title, }: { children: React.ReactNode; theme: Theme; config?: Config; title?: string; }) { return ( {title && {title}} {children} {process.env.NODE_ENV === 'development' && } ); } export default function App() { const { theme, config } = useLoaderData(); return ( ); } export function CatchBoundary() { const caught = useCatch(); return (

{caught.status} {caught.statusText}

); } export function ErrorBoundary() { return (

); }