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/CodeBlock/index.tsx

@@ -47,11 +47,23 @@ export type CodeBlockStyle = "loud" | "subtle" | "inline"
 export type CodeBlockProps = {
   source: string
   lang?: string
+  wrapperClassName?: string
+  innerClassName?: string
   className?: string
   collapsed?: boolean
   blockStyle?: CodeBlockStyle
   children?: React.ReactNode
   style?: React.HTMLAttributes<HTMLDivElement>["style"]
+  forceNoTitle?: boolean
+  animateTokenHighlights?: boolean
+  overrideColors?: {
+    bg?: string
+    innerBg?: string
+    lineNumbersBg?: string
+    border?: string
+    innerBorder?: string
+    boxShadow?: string
+  }
 } & CodeBlockMetaFields &
   Omit<HighlightProps, "code" | "language" | "children">
 
@@ -59,7 +71,10 @@ export const CodeBlock = ({
   source,
   hasTabs = false,
   lang = "",
+  wrapperClassName,
+  innerClassName,
   className,
+  overrideColors = {},
   collapsed = false,
   title = "",
   highlights = [],
@@ -73,6 +88,8 @@ export const CodeBlock = ({
   expandButtonLabel,
   isTerminal,
   style,
+  forceNoTitle = false,
+  animateTokenHighlights,
   ...rest
 }: CodeBlockProps) => {
   if (!source && typeof children === "string") {
@@ -94,6 +111,10 @@ export const CodeBlock = ({
       : isTerminal
   }, [isTerminal, lang])
   const codeTitle = useMemo(() => {
+    if (forceNoTitle) {
+      return ""
+    }
+
     if (title) {
       return title
     }
@@ -107,7 +128,7 @@ export const CodeBlock = ({
     }
 
     return "Code"
-  }, [title, isTerminalCode, hasTabs])
+  }, [title, isTerminalCode, hasTabs, forceNoTitle])
   const hasInnerCodeBlock = useMemo(
     () => hasTabs || codeTitle.length > 0,
     [hasTabs, codeTitle]
@@ -123,72 +144,90 @@ export const CodeBlock = ({
   const bgColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && "bg-medusa-contrast-bg-base",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "bg-medusa-bg-subtle",
-          colorMode === "dark" && "bg-medusa-code-bg-base",
+        overrideColors.bg,
+        !overrideColors.bg && [
+          blockStyle === "loud" && "bg-medusa-contrast-bg-base",
+          blockStyle === "subtle" && [
+            colorMode === "light" && "bg-medusa-bg-subtle",
+            colorMode === "dark" && "bg-medusa-code-bg-base",
+          ],
         ]
       ),
-    [blockStyle, colorMode]
+    [blockStyle, colorMode, overrideColors]
   )
 
   const lineNumbersColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-contrast-fg-secondary",
+        overrideColors.lineNumbersBg,
+        !overrideColors.lineNumbersBg && [
+          blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
+          blockStyle === "subtle" && [
+            colorMode === "light" && "text-medusa-fg-muted",
+            colorMode === "dark" && "text-medusa-contrast-fg-secondary",
+          ],
         ]
       ),
-    [blockStyle, colorMode]
+    [blockStyle, colorMode, overrideColors]
   )
 
   const borderColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && "border-0",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "border-medusa-border-base",
-          colorMode === "dark" && "border-medusa-code-border",
+        overrideColors.border,
+        !overrideColors.border && [
+          blockStyle === "loud" && "border-0",
+          blockStyle === "subtle" && [
+            colorMode === "light" && "border-medusa-border-base",
+            colorMode === "dark" && "border-medusa-code-border",
+          ],
         ]
       ),
-    [blockStyle, colorMode]
+    [blockStyle, colorMode, overrideColors]
   )
 
   const boxShadow = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" &&
-          "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
-        blockStyle === "subtle" && "shadow-none"
+        overrideColors.boxShadow,
+        !overrideColors.boxShadow && [
+          blockStyle === "loud" &&
+            "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
+          blockStyle === "subtle" && "shadow-none",
+        ]
       ),
-    [blockStyle]
+    [blockStyle, overrideColors]
   )
 
   const innerBgColor = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && [
-          hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
-          !hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
-        ],
-        blockStyle === "subtle" && bgColor
+        overrideColors.innerBg,
+        !overrideColors.innerBg && [
+          blockStyle === "loud" && [
+            hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
+            !hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
+          ],
+          blockStyle === "subtle" && bgColor,
+        ]
       ),
-    [blockStyle, bgColor, hasInnerCodeBlock]
+    [blockStyle, bgColor, hasInnerCodeBlock, overrideColors]
   )
 
   const innerBorderClasses = useMemo(
     () =>
       clsx(
-        blockStyle === "loud" && [
-          hasInnerCodeBlock &&
-            "border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
-          !hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
-        ],
-        blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT"
+        overrideColors.innerBorder,
+        !overrideColors.innerBorder && [
+          blockStyle === "loud" && [
+            hasInnerCodeBlock &&
+              "border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
+            !hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
+          ],
+          blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT",
+        ]
       ),
-    [blockStyle, hasInnerCodeBlock]
+    [blockStyle, hasInnerCodeBlock, overrideColors]
   )
 
   const language = useMemo(() => {
@@ -227,6 +266,7 @@ export const CodeBlock = ({
           lineNumberColorClassName={lineNumbersColor}
           lineNumberBgClassName={innerBgColor}
           isTerminal={isTerminalCode}
+          animateTokenHighlights={animateTokenHighlights}
           {...highlightProps}
         />
       )
@@ -309,7 +349,8 @@ export const CodeBlock = ({
           blockStyle === "loud" && "code-block-highlight",
           blockStyle === "subtle" &&
             colorMode === "light" &&
-            "code-block-highlight-light"
+            "code-block-highlight-light",
+          wrapperClassName
         )}
       >
         {codeTitle && (
@@ -327,7 +368,7 @@ export const CodeBlock = ({
         <div
           className={clsx(
             "relative mb-docs_1",
-            "w-full max-w-full border",
+            "w-full max-w-full border code-block-elm",
             bgColor,
             borderColor,
             collapsed && "max-h-[400px] overflow-auto",
@@ -350,7 +391,12 @@ export const CodeBlock = ({
               ...rest
             }) => (
               <div
-                className={clsx(innerBorderClasses, innerBgColor, "relative")}
+                className={clsx(
+                  innerBorderClasses,
+                  innerBgColor,
+                  "relative",
+                  innerClassName
+                )}
                 ref={codeContainerRef}
               >
                 {collapsibleType === "start" && (
@@ -406,13 +452,14 @@ export const CodeBlock = ({
                       })}
                   </code>
                 </pre>
-                {!hasInnerCodeBlock && (
-                  <CodeBlockActions
-                    {...actionsProps}
-                    inHeader={false}
-                    isSingleLine={tokens.length <= 1}
-                  />
-                )}
+                {!hasInnerCodeBlock &&
+                  (!noCopy || !noReport || canShowApiTesting) && (
+                    <CodeBlockActions
+                      {...actionsProps}
+                      inHeader={false}
+                      isSingleLine={tokens.length <= 1}
+                    />
+                  )}
                 {collapsibleType === "end" && (
                   <>
                     <CodeBlockCollapsibleFade