small changes for new menu hierarchy

remix-run · Nov 2, 2024 · 5d8654d · 5d8654d
1 parent 064ece2
commit 5d8654d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/app/components/docs-menu/menu.tsx b/app/components/docs-menu/menu.tsx
@@ -9,16 +9,14 @@ import type { DocsMenu, ReferenceMenu } from "./data.server";
 import invariant from "tiny-invariant";
 import { useNavigation } from "~/hooks/use-navigation";
 import { useDelayedValue } from "~/hooks/use-delayed-value";
-import { useHeaderData } from "~/components/docs-header/use-header-data";
 
 export function useMenuData() {
   let { menu } = useLoaderData() as { menu: DocsMenu | ReferenceMenu };
   invariant(menu, "Expected `menu` in loader data");
   return menu;
 }
 
-export function Menu() {
-  let { isV7 } = useHeaderData();
+export function Menu({ open }: { open: boolean }) {
   let menu = useMenuData();
 
   // github might be down but the menu but the doc could be cached in memory, so
@@ -33,7 +31,7 @@ export function Menu() {
     <nav>
       {menu.map((category, index) => (
         <div key={category.attrs.title} className="mb-3">
-          <MenuCategory category={category} open={isV7 ? index === 0 : true} />
+          <MenuCategory category={category} open={open} />
         </div>
       ))}
     </nav>
@@ -60,7 +58,7 @@ function MenuCategory({
       </MenuSummary>
 
       {category.children.sort(sortDocs).map((doc, index) => (
-        <div key={index}>
+        <React.Fragment key={index}>
           {doc.children.length > 0 ? (
             <>
               <MenuHeading label={doc.attrs.title} />
@@ -75,15 +73,15 @@ function MenuCategory({
               {doc.attrs.title} {doc.attrs.new && "🆕"}
             </MenuLink>
           )}
-        </div>
+        </React.Fragment>
       ))}
     </MenuCategoryDetails>
   );
 }
 
 function MenuHeading({ label }: { label: string }) {
   return (
-    <div className="mt-3 pb-2 pt-2 text-xs font-bold uppercase tracking-wider">
+    <div className="mx-2 mt-3 pb-2 pt-2 text-xs font-bold uppercase tracking-wider">
       {label}
     </div>
   );
@@ -126,7 +124,7 @@ function MenuSummary({ children }: { children: React.ReactNode }) {
     <summary
       className={classNames(
         sharedClassName,
-        "_no-triangle block cursor-pointer select-none",
+        "_no-triangle my-1 block cursor-pointer select-none",
         "outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-brand  dark:focus-visible:ring-gray-100",
         "hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800 dark:active:bg-gray-700"
       )}
@@ -147,7 +145,7 @@ function MenuLink({ to, children }: { to: string; children: React.ReactNode }) {
       prefetch="intent"
       to={to}
       className={classNames(
-        "group relative flex items-center justify-between rounded-md border-transparent px-4 py-1.5 lg:text-sm",
+        "group relative flex items-center justify-between rounded-md border-transparent px-2 py-1.5 lg:text-sm",
         isActive
           ? "bg-gray-50 font-semibold text-red-brand dark:bg-gray-800"
           : "text-gray-400 hover:text-gray-800 active:text-red-brand dark:text-gray-400 dark:hover:text-gray-50 dark:active:text-red-brand"

diff --git a/app/components/package-select.tsx b/app/components/package-select.tsx
@@ -6,8 +6,9 @@ import { DetailsMenu } from "~/modules/details-menu";
 import { DetailsPopup } from "./details-popup";
 import { PopupLabel } from "./popup-label";
 import { type Pkg } from "~/components/docs-menu/data.server";
+import { type SerializeFrom } from "@remix-run/node";
 
-export function PackageSelect({ pkgs }: { pkgs: Pkg[] }) {
+export function PackageSelect({ pkgs }: { pkgs: SerializeFrom<Pkg[]> }) {
   let { pkg } = useParams();
 
   let pkgName = pkg === "react-router" ? pkg : `@react-router/${pkg}`;

diff --git a/app/pages/api-layout.tsx b/app/pages/api-layout.tsx
@@ -61,7 +61,7 @@ export default function DocsLayout() {
           >
             <PackageSelect pkgs={pkgs} />
           </div>
-          <Menu />
+          <Menu open />
         </NavMenuDesktop>
         <div
           className={classNames(

diff --git a/app/pages/docs-index.tsx b/app/pages/docs-index.tsx
@@ -51,7 +51,7 @@ function V7() {
       title: "I'm New!",
       description: (
         <div>
-          We recommend you go through the{" "}
+          We recommend you use React Router as your framework. Check out the{" "}
           <span className="underline">Getting Started</span> docs where you'll
           get familiar with installation, routes, data handling, pending UI and
           more.
@@ -77,18 +77,17 @@ function V7() {
       svg: undefined,
     },
     {
-      title: "New Framework Features",
+      title: "Framework or Library?",
       description: (
         <div>
-          v7 includes optional, incrementally-adoptable features like code
-          splitting, data loading, actions, server rendering, static
-          pre-rendering, pending states, optimistic UI, RSC and more. To enaable
-          these features, check out the{" "}
-          <span className="underline">Adopting Vite</span> guide.
+          React Router can be used maximally as a framework or minimally as a
+          set of declarative routing components just like previous versions. To
+          figure out how you'd like to use it, check out the{" "}
+          <span className="underline">Routing Strategies</span> guide.
         </div>
       ),
 
-      slug: "upgrading/vite-router-provider",
+      slug: "explanation/strategies",
       className: "text-pink-brand",
       svg: undefined,
     },
@@ -120,6 +119,7 @@ function V7() {
           the final release. Thanks for your patience!
         </p>
       </div>
+
       <div className="my-4 grid max-w-[60ch] gap-y-10 md:max-w-none md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
         {mainLinks.map(({ title, description, slug, className, svg }) => (
           <Link