api-ref: added syncing between code tabs (#4786)

* api-ref: added syncing between code tabs

* updated comment

* resolve metadata warning

* fix colors

www/api-reference/app/api/[area]/layout.tsx

@@ -10,6 +10,7 @@ import { Roboto_Mono } from "next/font/google"
 import AnalyticsProvider from "@/providers/analytics"
 import NavbarProvider from "@/providers/navbar"
 import ModalProvider from "../../../providers/modal"
+import { ScrollControllerProvider } from "../../../hooks/scroll-utils"
 
 export const metadata = {
   title: "Medusa API Reference",
@@ -48,15 +49,17 @@ export default function RootLayout({
               <BaseSpecsProvider>
                 <SidebarProvider>
                   <NavbarProvider>
-                    <div className="w-full">
-                      <Navbar />
-                      <div className="max-w-xxl mx-auto flex w-full px-1.5">
-                        <Sidebar />
-                        <main className="lg:w-api-ref-main relative mt-4 w-full flex-1 lg:mt-7">
-                          {children}
-                        </main>
+                    <ScrollControllerProvider>
+                      <div className="w-full">
+                        <Navbar />
+                        <div className="max-w-xxl mx-auto flex w-full px-1.5">
+                          <Sidebar />
+                          <main className="lg:w-api-ref-main relative mt-4 w-full flex-1 lg:mt-7">
+                            {children}
+                          </main>
+                        </div>
                       </div>
-                    </div>
+                    </ScrollControllerProvider>
                   </NavbarProvider>
                 </SidebarProvider>
               </BaseSpecsProvider>

www/api-reference/app/api/[area]/page.tsx

@@ -47,6 +47,7 @@ export function generateMetadata({ params: { area } }: ReferencePageProps) {
   return {
     title: `Medusa ${capitalize(area)} API Reference`,
     description: `REST API reference for the Medusa ${area} API. This reference includes code snippets and examples for Medusa JS Client and cURL.`,
+    metadataBase: process.env.NEXT_PUBLIC_BASE_URL,
   }
 }