Add Layout to root.tsx

remix-run · Nov 25, 2024 · ac13f09 · ac13f09
1 parent 10469b3
commit ac13f09
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 33 deletions.
diff --git a/app/pages/docs-layout.tsx b/app/pages/docs-layout.tsx
@@ -10,6 +10,8 @@ import { loadDocsMenu } from "~/components/docs-menu/data.server";
 import { Menu } from "~/components/docs-menu/menu";
 import type { Route } from "./+types/docs-layout";
 import semver from "semver";
+import { useRef } from "react";
+import { useCodeBlockCopyButton } from "~/ui/utils";
 
 export let loader = async ({ params }: Route.LoaderArgs) => {
   // @ts-expect-error doesn't have potential child types
@@ -35,6 +37,10 @@ export let loader = async ({ params }: Route.LoaderArgs) => {
 
 export default function DocsLayout({ loaderData }: Route.ComponentProps) {
   const { menu } = loaderData;
+
+  let docsContainer = useRef<HTMLDivElement>(null);
+  useCodeBlockCopyButton(docsContainer);
+
   return (
     <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)] lg:m-auto lg:max-w-[90rem]">
       <div className="sticky top-0 z-20">
@@ -49,6 +55,7 @@ export default function DocsLayout({ loaderData }: Route.ComponentProps) {
           <Menu menu={menu} />
         </NavMenuDesktop>
         <div
+          ref={docsContainer}
           className={classNames(
             // add scroll margin to focused elements so that they aren't
             // obscured by the sticky header

diff --git a/app/root.tsx b/app/root.tsx
@@ -16,8 +16,6 @@ import {
 } from "./modules/color-scheme/components";
 import { isHost } from "./modules/http-utils/is-host";
 import iconsHref from "~/icons.svg";
-import { useRef } from "react";
-import { useCodeBlockCopyButton } from "./ui/utils";
 import { DocSearch } from "./modules/docsearch";
 
 import "~/styles/tailwind.css";
@@ -26,6 +24,7 @@ import "~/styles/docsearch.css";
 // FIXUP: Styles need to all be imported in root until this is fixed:
 // https://github.com/remix-run/react-router/issues/12382
 import "~/styles/docs.css";
+import type { Route } from "./+types/root";
 
 export async function loader({ request }: LoaderFunctionArgs) {
   await middlewares(request);
@@ -44,11 +43,12 @@ export function headers() {
   };
 }
 
-export default function App() {
-  let colorScheme = useColorScheme();
+export function meta({ error }: Route.MetaArgs) {
+  return [{ title: error ? "Oops | React Router" : "React Router" }];
+}
 
-  let docsContainer = useRef<HTMLBodyElement>(null);
-  useCodeBlockCopyButton(docsContainer);
+export function Layout({ children }: { children: React.ReactNode }) {
+  let colorScheme = useColorScheme();
 
   return (
     <html
@@ -75,10 +75,8 @@ export default function App() {
         <Meta />
         <Links />
       </head>
-      <body
-        ref={docsContainer}
-        className="bg-white text-black antialiased selection:bg-blue-200 selection:text-black dark:bg-gray-900 dark:text-white dark:selection:bg-blue-800 dark:selection:text-white"
-      >
+
+      <body className="bg-white text-black antialiased selection:bg-blue-200 selection:text-black dark:bg-gray-900 dark:text-white dark:selection:bg-blue-800 dark:selection:text-white">
         <img
           src={iconsHref}
           alt=""
@@ -89,37 +87,27 @@ export default function App() {
           // eslint-disable-next-line react/no-unknown-property
           fetchpriority="high"
         />
-        <DocSearch>
-          <Outlet />
-        </DocSearch>
+        <DocSearch>{children}</DocSearch>
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   );
 }
 
+export default function App() {
+  return <Outlet />;
+}
+
 export function ErrorBoundary({ error }: { error: Error }) {
   console.error(error);
   return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <title>Oops | React Router</title>
-        <Links />
-      </head>
-      <body className="flex bg-white text-black dark:bg-gray-900 dark:text-white">
-        <div className="absolute inset-0 flex flex-col items-center justify-center">
-          <div className="font-bold">Oops</div>
-          <div>Something went wrong</div>
-          <Link to="/" className="mt-8 underline">
-            Go Home
-          </Link>
-        </div>
-        <ScrollRestoration />
-        <Scripts />
-      </body>
-    </html>
+    <div className="absolute inset-0 flex flex-col items-center justify-center">
+      <div className="font-bold">Oops</div>
+      <div>Something went wrong</div>
+      <Link to="/" className="mt-8 underline">
+        Go Home
+      </Link>
+    </div>
   );
 }
diff --git a/app/ui/utils.ts b/app/ui/utils.ts
@@ -12,7 +12,7 @@ export function useHydrated() {
   return hydrated;
 }
 
-export function useCodeBlockCopyButton(ref: React.RefObject<HTMLBodyElement>) {
+export function useCodeBlockCopyButton(ref: React.RefObject<HTMLElement>) {
   let location = useLocation();
   useEffect(() => {
     let container = ref.current;