docs: add routing page

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
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: false,
-      }}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      showToc={false}
-      showBanner={false}
-      showBreadcrumbs={false}
-    >
-      {children}
-    </WideLayout>
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
+      <WideLayout
+        sidebarProps={{
+          expandItems: false,
+        }}
+        showToc={false}
+        showBanner={false}
+        showBreadcrumbs={false}
+        ProvidersComponent={Providers}
+      >
+        {children}
+      </WideLayout>
+    </BareboneLayout>
   )
 }

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
-      ProvidersComponent={Providers}
-      sidebarProps={{
-        expandItems: true,
-      }}
-      showPagination={true}
-      bodyClassName={clsx(inter.variable, robotoMono.variable)}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
-    >
+    <BareboneLayout htmlClassName={clsx(inter.variable, robotoMono.variable)}>
       {children}
-    </TightLayout>
+    </BareboneLayout>
   )
 }

www/apps/book/app/learn/layout.tsx

@@ -0,0 +1,24 @@
+import { TightLayout } from "docs-ui"
+import Feedback from "@/components/Feedback"
+import EditButton from "@/components/EditButton"
+import Providers from "../../providers"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <TightLayout
+      sidebarProps={{
+        expandItems: true,
+      }}
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+      ProvidersComponent={Providers}
+    >
+      {children}
+    </TightLayout>
+  )
+}

www/apps/book/app/not-found.tsx

@@ -0,0 +1,23 @@
+import { TightLayout } from "docs-ui"
+import Feedback from "../components/Feedback"
+import EditButton from "../components/EditButton"
+import NotFoundContent from "./_not-found.mdx"
+import Providers from "../providers"
+
+const NotFoundPage = () => {
+  return (
+    <TightLayout
+      sidebarProps={{
+        expandItems: true,
+      }}
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+      ProvidersComponent={Providers}
+    >
+      <NotFoundContent />
+    </TightLayout>
+  )
+}
+
+export default NotFoundPage

www/apps/book/app/page.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx"
+import { MainNav, RootProviders } from "docs-ui"
+import HomepageTopSection from "../components/Homepage/TopSection"
+import Providers from "../providers"
+import HomepageLinksSection from "../components/Homepage/LinksSection"
+import HomepageRecipesSection from "../components/Homepage/RecipesSection"
+import HomepageModulesSection from "../components/Homepage/ModulesSection"
+import HomepageFooter from "../components/Homepage/Footer"
+
+const Homepage = () => {
+  return (
+    <body
+      className={clsx(
+        "bg-medusa-bg-subtle font-base text-medium w-full",
+        "text-medusa-fg-subtle px-0.25 pt-0.25",
+        "h-screen overflow-hidden"
+      )}
+    >
+      <RootProviders>
+        <Providers>
+          <div
+            className={clsx(
+              "rounded-t bg-medusa-bg-base",
+              "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+              "h-full w-full",
+              "overflow-y-scroll overflow-x-hidden"
+            )}
+            id="main"
+          >
+            <MainNav
+              className="border-b border-medusa-border-base"
+              itemsClassName={clsx(
+                "!my-1 [&_li_div]:!text-medusa-fg-subtle [&_li_a]:!text-medusa-fg-subtle",
+                "hover:[&_li_div]:!text-medusa-fg-base hover:[&_li_a]:!text-medusa-fg-base"
+              )}
+            />
+            <HomepageTopSection />
+            <HomepageLinksSection />
+            <HomepageRecipesSection />
+            <HomepageModulesSection />
+            <HomepageFooter />
+          </div>
+        </Providers>
+      </RootProviders>
+    </body>
+  )
+}
+
+export default Homepage