Move docs.css to docs-layout.tsx (#173)

* Move docs css to `docs-layout.tsx`

* Add prefetch="intent" to links on splash page

* format

* Refactor docs layout structure and CSS placement

Author: brookslybrand

app/pages/docs-layout.tsx

@@ -13,6 +13,8 @@ import semver from "semver";
 import { useRef } from "react";
 import { useCodeBlockCopyButton } from "~/ui/utils";
 
+import docsCss from "~/styles/docs.css?url";
+
 export let loader = async ({ params }: Route.LoaderArgs) => {
   let splat = params["*"];
   let firstSegment = splat?.split("/")[0];
@@ -41,35 +43,38 @@ export default function DocsLayout({ loaderData }: Route.ComponentProps) {
   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">
-        <Header />
-        <NavMenuMobile>
-          <Menu menu={menu} />
-        </NavMenuMobile>
-      </div>
+    <>
+      <link rel="stylesheet" href={docsCss} />
+      <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">
+          <Header />
+          <NavMenuMobile>
+            <Menu menu={menu} />
+          </NavMenuMobile>
+        </div>
 
-      <div className="block lg:flex">
-        <NavMenuDesktop>
-          <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
-            "[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",
-            // Account for the left navbar
-            "min-h-[80vh] lg:ml-3 lg:w-[calc(100%-var(--nav-width))]",
-            "flex flex-col lg:pl-6 xl:pl-10 2xl:pl-12",
-          )}
-        >
-          <Outlet />
-          <div className="mt-auto px-4 pt-8 lg:pr-8 xl:pl-0">
-            <Footer />
+        <div className="block lg:flex">
+          <NavMenuDesktop>
+            <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
+              "[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",
+              // Account for the left navbar
+              "min-h-[80vh] lg:ml-3 lg:w-[calc(100%-var(--nav-width))]",
+              "flex flex-col lg:pl-6 xl:pl-10 2xl:pl-12",
+            )}
+          >
+            <Outlet />
+            <div className="mt-auto px-4 pt-8 lg:pr-8 xl:pl-0">
+              <Footer />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

app/pages/splash.tsx

@@ -135,6 +135,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
             <Link
               key={title}
               to={to}
+              prefetch="intent"
               className={
                 "flex gap-x-2 border border-gray-200 px-9 py-6 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:text-gray-700" +
                 (i === 0
@@ -190,6 +191,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
             <Link
               key={title}
               to={linkTo}
+              prefetch="intent"
               className="flex flex-col justify-between gap-y-6 rounded-lg border border-[#D9D9D9] p-8 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700"
             >
               <div className="flex flex-col gap-y-4">

app/root.tsx

@@ -21,9 +21,6 @@ import { DocSearch } from "./modules/docsearch";
 import "~/styles/tailwind.css";
 import "@docsearch/css/dist/style.css";
 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) {