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/apps/api-reference/app/layout.tsx

@@ -1,6 +1,6 @@
 import "./globals.css"
 import Providers from "../providers"
-import { WideLayout } from "docs-ui"
+import { BareboneLayout, WideLayout } from "docs-ui"
 import { Inter, Roboto_Mono } from "next/font/google"
 import clsx from "clsx"
 
@@ -26,17 +26,18 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <WideLayout
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
-      ProvidersComponent={Providers}
+      <WideLayout
-      sidebarProps={{
+        sidebarProps={{
-        expandItems: false,
+          expandItems: false,
-      }}
+        }}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
+        showToc={false}
-      showToc={false}
+        showBanner={false}
-      showBanner={false}
+        showBreadcrumbs={false}
-      showBreadcrumbs={false}
+        ProvidersComponent={Providers}
-    >
+      >
-      {children}
+        {children}
-    </WideLayout>
+      </WideLayout>
+    </BareboneLayout>
   )
 }

www/apps/api-reference/components/DownloadFull/index.tsx

@@ -9,11 +9,7 @@ const DownloadFull = () => {
 
   return (
     <Button variant="secondary">
-      <Link
+      <Link href={`/api/download/${area}`} download target="_blank">
-        href={`${process.env.NEXT_PUBLIC_BASE_PATH}/download/${area}`}
-        download
-        target="_blank"
-      >
         Download OpenApi Specs Collection
       </Link>
     </Button>

www/apps/book/app/fonts.ts

@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+})

www/apps/book/app/globals.css

@@ -16,10 +16,14 @@
     @apply bg-medusa-bg-highlight;
   }
 
-  * {
+  *:not(.code-block-elm) {
     scrollbar-color: var(--docs-border-base) var(--docs-bg-base);
   }
 
+  .code-block-elm {
+    scrollbar-color: var(--docs-contrast-border-base) transparent;
+  }
+
   aside * {
     scrollbar-color: var(--docs-border-base) var(--docs-bg-subtle);
   }

www/apps/book/app/layout.tsx

@@ -1,12 +1,9 @@
 import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"
-import Providers from "@/providers"
 import "./globals.css"
-import { TightLayout } from "docs-ui"
 import { config } from "@/config"
+import { BareboneLayout } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
 import clsx from "clsx"
-import Feedback from "@/components/Feedback"
-import EditButton from "@/components/EditButton"
 
 export const metadata: Metadata = {
   title: {
@@ -19,34 +16,14 @@ export const metadata: Metadata = {
   ),
 }
 
-export const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-  weight: ["400", "500"],
-})
-
-export const robotoMono = Roboto_Mono({
-  subsets: ["latin"],
-  variable: "--font-roboto-mono",
-})
-
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <TightLayout
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: true,
-      }}
-      showPagination={true}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
-    >
       {children}
-    </TightLayout>
+    </BareboneLayout>
   )
 }