github.com

Getting Started

How to use

Run the following commands in the root directory.

npm install
npm run build
npm run start

npm instal npm run build npm run start import { useStore } from ‘@nanostores/react’; import type { LinksFunction } from ‘@remix-run/cloudflare’; import { Links, Meta, Outlet, Scripts, ScrollRestoration } from ‘@remix-run/react’; 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’; import xtermStyles from ‘@xterm/xterm/css/xterm.css?url’;

import ‘virtual:uno.css’;

export const links: LinksFunction = () => [ { rel: ‘icon’, href: ‘/favicon.svg’, type: ‘image/svg+xml’, }, { rel: ‘stylesheet’, href: reactToastifyStyles }, { rel: ‘stylesheet’, href: tailwindReset }, { rel: ‘stylesheet’, href: globalStyles }, { rel: ‘stylesheet’, href: xtermStyles }, { rel: ‘preconnect’, href: ‘https://fonts.googleapis.com’, }, { rel: ‘preconnect’, href: ‘https://fonts.gstatic.com’, crossOrigin: ‘anonymous’, }, { rel: ‘stylesheet’, href: ‘https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap’, }, ];

                                                            const inlineThemeCode = stripIndents`
                                                              setTutorialKitTheme();

                                                                function setTutorialKitTheme() {
                                                                    let theme = localStorage.getItem('bolt_theme');

                                                                        if (!theme) {
                                                                              theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                                                                                  }

                                                                                      document.querySelector('html')?.setAttribute('data-theme', theme);
                                                                                        }
                                                                                        `;

                                                                                        export const Head = createHead(() => (
                                                                                          <>
                                                                                              <meta charSet="utf-8" />
                                                                                                  <meta name="viewport" content="width=device-width, initial-scale=1" />
                                                                                                      <Meta />
                                                                                                          <Links />
                                                                                                              <script dangerouslySetInnerHTML= />
                                                                                                                </>
                                                                                                                ));

                                                                                                                export function Layout({ children }: { children: React.ReactNode }) {
                                                                                                                  const theme = useStore(themeStore);

                                                                                                                    useEffect(() => {
                                                                                                                        document.querySelector('html')?.setAttribute('data-theme', theme);
                                                                                                                          }, [theme]);

                                                                                                                            return (
                                                                                                                                <>
                                                                                                                                      {children}
                                                                                                                                            <ScrollRestoration />
                                                                                                                                                  <Scripts />
                                                                                                                                                      </>
                                                                                                                                                        );
                                                                                                                                                        }

                                                                                                                                                        export default function App() {
                                                                                                                                                          return <Outlet />;
                                                                                                                                                          }