docs: add routing page (#9550)

- Add a new homepage to `book` project for the routing page
- Move all main doc pages to be under `/v2/learn` (and added redirects + fixed links across docs)
- Other: add admin components to resources dropdown + fixes to search on mobile.

Closes DX-955

Preview: https://docs-v2-git-docs-router-page-medusajs.vercel.app/v2

www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx

@@ -42,10 +42,7 @@ export const CardDefaultLayout = ({
       )}
       {image && (
         <BorderedIcon
-          wrapperClassName={clsx(
-            "p-[4.5px] bg-medusa-bg-component-hover",
-            iconClassName
-          )}
+          wrapperClassName={clsx("bg-medusa-bg-base", iconClassName)}
           icon={image}
         />
       )}
@@ -53,19 +50,17 @@ export const CardDefaultLayout = ({
         className={clsx("flex flex-col flex-1 overflow-auto", contentClassName)}
       >
         {title && (
-          <div className="text-compact-small-plus text-medusa-fg-base truncate">
+          <div className="text-small-plus text-medusa-fg-base truncate">
             {title}
           </div>
         )}
         {text && (
-          <span className="text-compact-small text-medusa-fg-subtle">
-            {text}
-          </span>
+          <span className="text-small-plus text-medusa-fg-subtle">{text}</span>
         )}
         {children}
       </div>
       {badge && <Badge {...badge} />}
-      <span className="text-medusa-fg-muted">
+      <span className="text-medusa-fg-subtle">
         {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
       </span>
 

www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { CardProps } from "../.."
 import { useIsExternalLink } from "../../../.."
 import clsx from "clsx"
-import { ArrowRightMini, ArrowUpRightOnBox } from "@medusajs/icons"
+import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
 import Link from "next/link"
 
 export const CardLargeLayout = ({
@@ -30,11 +30,16 @@ export const CardLargeLayout = ({
           "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
           href &&
             "group-hover:shadow-elevation-card-hover group-hover:dark:shadow-elevation-card-hover-dark",
-          "px-docs_0.75 py-docs_0.5 flex justify-center items-center"
+          "px-docs_0.75 py-docs_0.5 flex justify-center items-center w-full"
         )}
       >
         {IconComponent && (
-          <IconComponent className="w-docs_2 h-docs_2 text-medusa-fg-subtle" />
+          <IconComponent
+            className="text-medusa-fg-subtle"
+            width={32}
+            height={32}
+            viewBox="0 0 32 32"
+          />
         )}
         {image && (
           <img src={image} alt={title || text || ""} className="w-[144px]" />
@@ -44,12 +49,12 @@ export const CardLargeLayout = ({
         <div className="flex gap-docs_0.25 items-center text-medusa-fg-base">
           {title && <span className="text-compact-small-plus">{title}</span>}
           {href && isExternal && <ArrowUpRightOnBox />}
-          {href && !isExternal && <ArrowRightMini />}
+          {href && !isExternal && (
+            <TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
+          )}
         </div>
         {text && (
-          <span className="text-compact-small text-medusa-fg-subtle">
-            {text}
-          </span>
+          <span className="text-small-plus text-medusa-fg-subtle">{text}</span>
         )}
       </div>
       {href && (

www/packages/docs-ui/src/components/Card/Layout/Mini/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import React from "react"
+import clsx from "clsx"
+import { CardProps } from "../.."
+import { BorderedIcon, ThemeImage, useIsExternalLink } from "../../../.."
+import Link from "next/link"
+import Image from "next/image"
+import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
+
+export const CardLayoutMini = ({
+  icon,
+  image,
+  themeImage,
+  title,
+  text,
+  href,
+}: CardProps) => {
+  const isExternal = useIsExternalLink({ href })
+
+  return (
+    <div
+      className={clsx(
+        "relative rounded-docs_DEFAULT border-medusa-fg-on-inverted border",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
+        "bg-medusa-tag-neutral-bg dark:bg-medusa-bg-component",
+        "hover:bg-medusa-tag-neutral-bg-hover dark:hover:bg-medusa-bg-component-hover",
+        "w-fit transition-all"
+      )}
+    >
+      <div
+        className={clsx(
+          "rounded-docs_DEFAULT flex gap-docs_0.75 py-docs_0.25",
+          "pl-docs_0.25 pr-docs_0.75 items-center"
+        )}
+      >
+        {icon && (
+          <BorderedIcon
+            wrapperClassName={clsx("p-[4.5px] bg-medusa-bg-component-hover")}
+            IconComponent={icon}
+          />
+        )}
+        {image && (
+          <Image
+            src={image}
+            className={clsx(
+              "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+              "rounded-docs_xs"
+            )}
+            width={45}
+            height={36}
+            alt={title || text || ""}
+            style={{
+              width: "45px",
+              height: "36px",
+            }}
+          />
+        )}
+        {themeImage && (
+          <ThemeImage
+            {...themeImage}
+            className={clsx(
+              "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+              "rounded-docs_xs"
+            )}
+            width={45}
+            height={36}
+            alt={title || text || ""}
+            style={{
+              width: "45px",
+              height: "36px",
+            }}
+          />
+        )}
+        <div className="flex flex-col">
+          {title && (
+            <span className="text-x-small-plus text-medusa-fg-base">
+              {title}
+            </span>
+          )}
+          {text && (
+            <span className="text-x-small-plus text-medusa-fg-subtle">
+              {text}
+            </span>
+          )}
+        </div>
+        <span className="text-medusa-fg-subtle">
+          {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
+        </span>
+        {href && (
+          <Link href={href} className="absolute left-0 top-0 w-full h-full" />
+        )}
+      </div>
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Card/index.tsx

@@ -4,11 +4,16 @@ import { CardDefaultLayout } from "./Layout/Default"
 import { IconProps } from "@medusajs/icons/dist/types"
 import { CardLargeLayout } from "./Layout/Large"
 import { CardFillerLayout } from "./Layout/Filler"
+import { CardLayoutMini } from "./Layout/Mini"
 
 export type CardProps = {
-  type?: "default" | "large" | "filler"
+  type?: "default" | "large" | "filler" | "mini"
   icon?: React.FC<IconProps>
   image?: string
+  themeImage?: {
+    light: string
+    dark: string
+  }
   title?: string
   text?: string
   href?: string
@@ -25,6 +30,8 @@ export const Card = ({ type = "default", ...props }: CardProps) => {
       return <CardLargeLayout {...props} />
     case "filler":
       return <CardFillerLayout {...props} />
+    case "mini":
+      return <CardLayoutMini {...props} />
     default:
       return <CardDefaultLayout {...props} />
   }