remix-demo

react router (remix) demo

git clone https://9o.is/git/remix-demo.git

root.tsx

(2988B)

      1 import type { LinksFunction, LoaderArgs, MetaFunction } from "@remix-run/node";
      2 import { json } from "@remix-run/node";
      3 import {
      4   Links,
      5   LiveReload,
      6   Meta,
      7   Outlet,
      8   Scripts,
      9   ScrollRestoration,
     10   useCatch,
     11 } from "@remix-run/react";
     12 import MainNavigation from "./components/MainNavigation";
     13 
     14 import tailwindStyles from "./styles/tailwind.css";
     15 import { getUser } from "./session.server";
     16 
     17 export const links: LinksFunction = () => {
     18   return [{ rel: "stylesheet", href: tailwindStyles }];
     19 };
     20 
     21 export const meta: MetaFunction = () => ({
     22   charset: "utf-8",
     23   title: "Calories Counter",
     24   viewport: "width=device-width,initial-scale=1",
     25 });
     26 
     27 export async function loader({ request }: LoaderArgs) {
     28   return json({
     29     user: await getUser(request),
     30   });
     31 }
     32 
     33 export default function App() {
     34   return (
     35     <html lang="en">
     36       <head>
     37         <Meta />
     38         <Links />
     39       </head>
     40       <body>
     41         <div className="px-2 md:container md:mx-auto">
     42           <header>
     43             <MainNavigation />
     44           </header>
     45           <main>
     46             <Outlet />
     47           </main>
     48         </div>
     49         <ScrollRestoration />
     50         <Scripts />
     51         <LiveReload />
     52       </body>
     53     </html>
     54   );
     55 }
     56 
     57 export function CatchBoundary() {
     58   const caught = useCatch();
     59   return (
     60     <html>
     61       <head>
     62         <title>{`Oops! ${caught.statusText}`}</title>
     63         <Meta />
     64         <Links />
     65       </head>
     66       <body>
     67         <main>
     68           <div className="mx-auto max-w-screen-xl py-8 px-4 lg:py-16 lg:px-6">
     69             <div className="mx-auto max-w-screen-sm text-center">
     70               <h1 className="mb-4 text-7xl font-extrabold tracking-tight text-gray-900 lg:text-9xl">
     71                 {caught.status}
     72               </h1>
     73               <p className="mb-4 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
     74                 {caught.statusText}
     75               </p>
     76               <p className="mb-4 text-lg font-light text-gray-500">
     77                 Sorry, something is missing with your request.
     78               </p>
     79             </div>
     80           </div>
     81         </main>
     82       </body>
     83     </html>
     84   );
     85 }
     86 
     87 export function ErrorBoundary() {
     88   return (
     89     <html>
     90       <head>
     91         <title>Internal Server Error</title>
     92         <Meta />
     93         <Links />
     94       </head>
     95       <body>
     96         <main>
     97           <div className="mx-auto max-w-screen-xl py-8 px-4 lg:py-16 lg:px-6">
     98             <div className="mx-auto max-w-screen-sm text-center">
     99               <h1 className="mb-4 text-7xl font-extrabold tracking-tight text-gray-900 lg:text-9xl">
    100                 500
    101               </h1>
    102               <p className="mb-4 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
    103                 Internal Server Error.
    104               </p>
    105               <p className="mb-4 text-lg font-light text-gray-500">
    106                 We are already working to solve the problem.{" "}
    107               </p>
    108             </div>
    109           </div>
    110         </main>
    111       </body>
    112     </html>
    113   );
    114 }