legends810/testingnew

1import { useStore } from '@nanostores/react';2import type { LinksFunction } from '@remix-run/cloudflare';3import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';4import tailwindReset from '@unocss/reset/tailwind-compat.css?url';5import { themeStore } from './lib/stores/theme';6import { stripIndents } from './utils/stripIndent';7import { createHead } from 'remix-island';8import { useEffect } from 'react';9import { DndProvider } from 'react-dnd';10import { HTML5Backend } from 'react-dnd-html5-backend';11 12import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';13import globalStyles from './styles/index.scss?url';14import xtermStyles from '@xterm/xterm/css/xterm.css?url';15 16import 'virtual:uno.css';17 18export const links: LinksFunction = () => [19  {20    rel: 'icon',21    href: '/favicon.svg',22    type: 'image/svg+xml',23  },24  { rel: 'stylesheet', href: reactToastifyStyles },25  { rel: 'stylesheet', href: tailwindReset },26  { rel: 'stylesheet', href: globalStyles },27  { rel: 'stylesheet', href: xtermStyles },28  {29    rel: 'preconnect',30    href: 'https://fonts.googleapis.com',31  },32  {33    rel: 'preconnect',34    href: 'https://fonts.gstatic.com',35    crossOrigin: 'anonymous',36  },37  {38    rel: 'stylesheet',39    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',40  },41];42 43const inlineThemeCode = stripIndents`44  setTutorialKitTheme();45 46  function setTutorialKitTheme() {47    let theme = localStorage.getItem('bolt_theme');48 49    if (!theme) {50      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';51    }52 53    document.querySelector('html')?.setAttribute('data-theme', theme);54  }55`;56 57export const Head = createHead(() => (58  <>59    <meta charSet="utf-8" />60    <meta name="viewport" content="width=device-width, initial-scale=1" />61    <Meta />62    <Links />63    <script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />64  </>65));66 67export function Layout({ children }: { children: React.ReactNode }) {68  const theme = useStore(themeStore);69 70  useEffect(() => {71    document.querySelector('html')?.setAttribute('data-theme', theme);72  }, [theme]);73 74  return (75    <DndProvider backend={HTML5Backend}>76      {children}77      <ScrollRestoration />78      <Scripts />79    </DndProvider>80  );81}82 83import { logStore } from './lib/stores/logs';84 85export default function App() {86  const theme = useStore(themeStore);87 88  useEffect(() => {89    logStore.logSystem('Application initialized', {90      theme,91      platform: navigator.platform,92      userAgent: navigator.userAgent,93      timestamp: new Date().toISOString(),94    });95  }, []);96 97  return (98    <Layout>99      <Outlet />100    </Layout>101  );102}103