docs: fix download button + other fixes (#8032)

- Fix text of download button
- Small fix to styling on small devies
- Fix mobile sidebar items using incorrect base url

www/apps/api-reference/app/admin/page.tsx

@@ -22,7 +22,11 @@ const ReferencePage = async () => {
               <AdminContentV2 />
             </Section>
           }
-          codeContent={<ClientLibrariesV2 />}
+          codeContent={
+            <div className="mb-1 lg:mb-0">
+              <ClientLibrariesV2 />
+            </div>
+          }
           className="flex-col-reverse"
         />
         <Tags />

www/apps/api-reference/app/store/page.tsx

@@ -22,7 +22,11 @@ const ReferencePage = async () => {
               <StoreContentV2 />
             </Section>
           }
-          codeContent={<ClientLibrariesV2 />}
+          codeContent={
+            <div className="mb-1 lg:mb-0">
+              <ClientLibrariesV2 />
+            </div>
+          }
           className="flex-col-reverse"
         />
         <Tags />

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

@@ -14,7 +14,7 @@ const DownloadFull = () => {
         download
         target="_blank"
       >
-        Download openapi.yaml
+        Download OpenApi Specs Collection
       </Link>
     </Button>
   )

www/apps/api-reference/config/index.ts

@@ -1,8 +1,10 @@
 import { DocsConfig } from "types"
-import { mobileSidebarItemsV2 } from "docs-ui"
+import { getMobileSidebarItems } from "docs-ui"
+
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
 
 export const config: DocsConfig = {
-  baseUrl: process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000",
+  baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   // sidebar is auto generated
   sidebar: {
@@ -14,6 +16,9 @@ export const config: DocsConfig = {
       },
     ],
     bottom: [],
-    mobile: mobileSidebarItemsV2,
+    mobile: getMobileSidebarItems({
+      baseUrl,
+      version: "v2",
+    }),
   },
 }

www/apps/book/components/Navbar/index.tsx

@@ -13,7 +13,7 @@ const Navbar = () => {
     () =>
       getNavbarItems({
         basePath: config.baseUrl,
-        activePath: basePathUrl(""),
+        activePath: basePathUrl(),
         version: "v2",
       }),
     []

www/apps/book/config/index.ts

@@ -1,9 +1,11 @@
 import { DocsConfig } from "types"
 import { sidebarConfig } from "./sidebar"
 
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
+
 export const config: DocsConfig = {
   titleSuffix: "Medusa v2 Docs",
-  baseUrl: process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000",
+  baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
-  sidebar: sidebarConfig,
+  sidebar: sidebarConfig(baseUrl),
 }

www/apps/book/config/sidebar.tsx

@@ -1,4 +1,4 @@
-import { Badge, mobileSidebarItemsV2 } from "docs-ui"
+import { Badge, getMobileSidebarItems } from "docs-ui"
 import type { SidebarConfig, SidebarItemType } from "@/types"
 import { sidebar } from "../sidebar.mjs"
 
@@ -17,8 +17,13 @@ const normalizeSidebarItems = (items: SidebarItemType[]) =>
     return item
   })
 
-export const sidebarConfig: SidebarConfig = {
+export const sidebarConfig = (baseUrl: string): SidebarConfig => {
-  top: normalizeSidebarItems(sidebar),
+  return {
-  bottom: [],
+    top: normalizeSidebarItems(sidebar),
-  mobile: mobileSidebarItemsV2,
+    bottom: [],
+    mobile: getMobileSidebarItems({
+      baseUrl,
+      version: "v2",
+    }),
+  }
 }

www/apps/resources/config/index.ts

@@ -1,14 +1,19 @@
 import { DocsConfig } from "types"
-import { mobileSidebarItemsV2 } from "docs-ui"
+import { getMobileSidebarItems } from "docs-ui"
 import { generatedSidebar } from "../generated/sidebar.mjs"
 
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
+
 export const config: DocsConfig = {
   titleSuffix: "Medusa Learning Resources",
-  baseUrl: process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000",
+  baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   sidebar: {
     top: generatedSidebar,
     bottom: [],
-    mobile: mobileSidebarItemsV2,
+    mobile: getMobileSidebarItems({
+      baseUrl,
+      version: "v2",
+    }),
   },
 }

www/apps/ui/src/config/docs.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpRightOnBox } from "@medusajs/icons"
-import { NavbarItem, getNavbarItems, mobileSidebarItemsV1 } from "docs-ui"
+import { NavbarItem, getMobileSidebarItems, getNavbarItems } from "docs-ui"
 import { SidebarSectionItemsType } from "types"
 import { siteConfig } from "./site"
 
@@ -280,6 +280,9 @@ export const docsConfig: DocsConfig = {
         ],
       },
     ],
-    mobile: mobileSidebarItemsV1,
+    mobile: getMobileSidebarItems({
+      baseUrl: siteConfig.baseUrl,
+      version: "v1",
+    }),
   },
 }

www/apps/user-guide/config/index.ts

@@ -1,14 +1,19 @@
 import { DocsConfig } from "types"
-import { mobileSidebarItemsV2 } from "docs-ui"
+import { getMobileSidebarItems } from "docs-ui"
 import { generatedSidebar as sidebar } from "@/generated/sidebar.mjs"
 
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
+
 export const config: DocsConfig = {
   titleSuffix: "Medusa Admin User Guide",
-  baseUrl: process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000",
+  baseUrl,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   sidebar: {
     top: sidebar,
     bottom: [],
-    mobile: mobileSidebarItemsV2,
+    mobile: getMobileSidebarItems({
+      baseUrl,
+      version: "v2",
+    }),
   },
 }

www/packages/docs-ui/src/constants.tsx

@@ -52,23 +52,22 @@ export const navbarItemsV1: NavbarItem[] = [
       href: `/ui`,
     },
   },
-  // TODO enable them later
+  {
-  // {
+    type: "divider",
-  //   type: "divider",
+  },
-  // },
+  {
-  // {
+    type: "link",
-  //   type: "link",
+    props: {
-  //   props: {
+      label: "Learn Medusa v2",
-  //     label: "Learn Medusa v2",
+      target: "_blank",
-  //     target: "_blank",
+      rel: "noreferrer",
-  //     rel: "noreferrer",
+      href: `/v2`,
-  //     href: `/v2`,
+      badge: {
-  //     badge: {
+        variant: "blue",
-  //       variant: "blue",
+        children: "New",
-  //       children: "New",
+      },
-  //     },
+    },
-  //   },
+  },
-  // },
 ]
 
 export const navbarItemsV2: NavbarItem[] = [
@@ -162,13 +161,13 @@ export const mobileSidebarItemsV1: SidebarItemType[] = [
     loaded: true,
     isPathHref: true,
   },
-  // {
+  {
-  //   title: "Learn Medusa V2",
+    title: "Learn Medusa V2",
-  //   path: `/v2`,
+    path: `/v2`,
-  //   loaded: true,
+    loaded: true,
-  //   isPathHref: true,
+    isPathHref: true,
-  //   additionalElms: <Badge variant="blue">v2</Badge>,
+    additionalElms: <Badge variant="blue">v2</Badge>,
-  // },
+  },
 ]
 
 export const mobileSidebarItemsV2: SidebarItemType[] = [

www/packages/docs-ui/src/utils/get-mobile-sidebar-items.ts

@@ -0,0 +1,21 @@
+import { SidebarItemType } from "types"
+import { mobileSidebarItemsV1, mobileSidebarItemsV2 } from ".."
+
+type Options = {
+  baseUrl: string
+  version?: "v1" | "v2"
+}
+
+export function getMobileSidebarItems({
+  baseUrl,
+  version = "v1",
+}: Options): SidebarItemType[] {
+  const mobileItems =
+    version === "v2" ? mobileSidebarItemsV2 : mobileSidebarItemsV1
+  return mobileItems.map((item) => {
+    return {
+      ...item,
+      path: `${baseUrl}${item.path}`,
+    }
+  })
+}

www/packages/docs-ui/src/utils/index.ts

@@ -5,6 +5,7 @@ export * from "./decode-str"
 export * from "./dom-utils"
 export * from "./format-report-link"
 export * from "./get-link-with-base-path"
+export * from "./get-mobile-sidebar-items"
 export * from "./get-navbar-items"
 export * from "./get-os-shortcut"
 export * from "./get-scrolled-top"