docs: move edit date to footer (#11667)

* docs: move edit date to footer

* fix build error

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

@@ -1,7 +1,6 @@
 import { TightLayout } from "docs-ui"
-import Feedback from "@/components/Feedback"
-import EditButton from "@/components/EditButton"
 import Providers from "../../providers"
+import Footer from "../../components/Footer"
 
 export default function RootLayout({
   children,
@@ -13,10 +12,8 @@ export default function RootLayout({
       sidebarProps={{
         expandItems: true,
       }}
-      showPagination={true}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
       ProvidersComponent={Providers}
+      footerComponent={<Footer />}
     >
       {children}
     </TightLayout>

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

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 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"
+import Footer from "../components/Footer"
 
 const NotFoundPage = () => {
   return (
@@ -11,9 +10,7 @@ const NotFoundPage = () => {
       sidebarProps={{
         expandItems: true,
       }}
-      showPagination={true}
-      feedbackComponent={<Feedback className="my-2" />}
-      editComponent={<EditButton />}
+      footerComponent={<Footer />}
       ProvidersComponent={Providers}
     >
       {/* @ts-ignore React v19 doesn't recognize MDX import as component */}

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

@@ -2,13 +2,24 @@
 
 import { EditButton as UiEditButton } from "docs-ui"
 import { usePathname } from "next/navigation"
+import { useMemo } from "react"
+import { generatedEditDates } from "../../generated/edit-dates.mjs"
 
 const EditButton = () => {
   const pathname = usePathname()
 
+  const editDate = useMemo(
+    () =>
+      (generatedEditDates as Record<string, string>)[
+        `app${pathname.replace(/\/$/, "")}/page.mdx`
+      ],
+    [pathname]
+  )
+
   return (
     <UiEditButton
       filePath={`/www/apps/book/app${pathname.replace(/\/$/, "")}/page.mdx`}
+      editDate={editDate}
     />
   )
 }

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

@@ -0,0 +1,17 @@
+"use client"
+
+import { Footer as UiFooter } from "docs-ui"
+import Feedback from "../Feedback"
+import EditButton from "../EditButton"
+
+const Footer = () => {
+  return (
+    <UiFooter
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+    />
+  )
+}
+
+export default Footer

www/apps/book/providers/main-nav.tsx

@@ -6,15 +6,12 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { config } from "../config"
-import { usePathname } from "next/navigation"
-import { generatedEditDates } from "../generated/edit-dates.mjs"
 
 type MainNavProviderProps = {
   children?: React.ReactNode
 }
 
 export const MainNavProvider = ({ children }: MainNavProviderProps) => {
-  const pathname = usePathname()
   const navigationDropdownItems = useMemo(
     () =>
       getNavDropdownItems({
@@ -23,16 +20,8 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     []
   )
 
-  const editDate = useMemo(
-    () =>
-      (generatedEditDates as Record<string, string>)[
-        `app${pathname.replace(/\/$/, "")}/page.mdx`
-      ],
-    [pathname]
-  )
-
   return (
-    <UiMainNavProvider navItems={navigationDropdownItems} editDate={editDate}>
+    <UiMainNavProvider navItems={navigationDropdownItems}>
       {children}
     </UiMainNavProvider>
   )

www/apps/resources/app/layout.tsx

@@ -5,8 +5,7 @@ import "./globals.css"
 import { BareboneLayout, TightLayout } from "docs-ui"
 import { config } from "@/config"
 import clsx from "clsx"
-import { Feedback } from "@/components/Feedback"
-import EditButton from "@/components/EditButton"
+import Footer from "../components/Footer"
 
 const ogImage =
   "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -68,9 +67,8 @@ export default function RootLayout({
         sidebarProps={{
           expandItems: true,
         }}
-        feedbackComponent={<Feedback className="my-2" />}
-        editComponent={<EditButton />}
         ProvidersComponent={Providers}
+        footerComponent={<Footer />}
       >
         {children}
       </TightLayout>

www/apps/resources/components/EditButton/index.tsx

@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation"
 import { useMemo } from "react"
 import { EditButton as UiEditButton } from "docs-ui"
 import { filesMap } from "../../generated/files-map.mjs"
+import { generatedEditDates } from "../../generated/edit-dates.mjs"
 
 const EditButton = () => {
   const pathname = usePathname()
@@ -12,11 +13,19 @@ const EditButton = () => {
     [pathname]
   )
 
+  const editDate = useMemo(
+    () =>
+      (generatedEditDates as Record<string, string>)[
+        `app${pathname.replace(/\/$/, "")}/page.mdx`
+      ],
+    [pathname]
+  )
+
   if (!filePath) {
     return <></>
   }
 
-  return <UiEditButton filePath={filePath.filePath} />
+  return <UiEditButton filePath={filePath.filePath} editDate={editDate} />
 }
 
 export default EditButton

www/apps/resources/components/Footer/index.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { Footer as UiFooter } from "docs-ui"
+import { Feedback } from "../Feedback"
+import EditButton from "../EditButton"
+
+const Footer = () => {
+  return (
+    <UiFooter
+      showPagination={false}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+    />
+  )
+}
+
+export default Footer

www/apps/resources/providers/main-nav.tsx

@@ -6,15 +6,12 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { config } from "../config"
-import { usePathname } from "next/navigation"
-import { generatedEditDates } from "../generated/edit-dates.mjs"
 
 type MainNavProviderProps = {
   children?: React.ReactNode
 }
 
 export const MainNavProvider = ({ children }: MainNavProviderProps) => {
-  const pathname = usePathname()
   const navigationDropdownItems = useMemo(
     () =>
       getNavDropdownItems({
@@ -23,16 +20,8 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     []
   )
 
-  const editDate = useMemo(
-    () =>
-      (generatedEditDates as Record<string, string>)[
-        `app${pathname.replace(/\/$/, "")}/page.mdx`
-      ],
-    [pathname]
-  )
-
   return (
-    <UiMainNavProvider navItems={navigationDropdownItems} editDate={editDate}>
+    <UiMainNavProvider navItems={navigationDropdownItems}>
       {children}
     </UiMainNavProvider>
   )

www/apps/user-guide/app/layout.tsx

@@ -7,6 +7,7 @@ import { config } from "@/config"
 import clsx from "clsx"
 import Feedback from "../components/Feedback"
 import EditButton from "../components/EditButton"
+import Footer from "../components/Footer"
 
 const ogImage =
   "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -68,6 +69,7 @@ export default function RootLayout({
           expandItems: true,
         }}
         ProvidersComponent={Providers}
+        footerComponent={<Footer />}
       >
         {children}
         <Feedback className="my-2" />

www/apps/user-guide/components/EditButton/index.tsx

@@ -2,16 +2,27 @@
 
 import { EditButton as UiEditButton } from "docs-ui"
 import { usePathname } from "next/navigation"
+import { useMemo } from "react"
+import { generatedEditDates } from "../../generated/edit-dates.mjs"
 
 const EditButton = () => {
   const pathname = usePathname()
 
+  const editDate = useMemo(
+    () =>
+      (generatedEditDates as Record<string, string>)[
+        `app${pathname.replace(/\/$/, "")}/page.mdx`
+      ],
+    [pathname]
+  )
+
   return (
     <UiEditButton
       filePath={`/www/apps/user-guide/app${pathname.replace(
         /\/$/,
         ""
       )}/page.mdx`}
+      editDate={editDate}
     />
   )
 }

www/apps/user-guide/components/Footer/index.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { Footer as UiFooter } from "docs-ui"
+import Feedback from "../Feedback"
+import EditButton from "../EditButton"
+
+const Footer = () => {
+  return (
+    <UiFooter
+      showPagination={true}
+      feedbackComponent={<Feedback className="my-2" />}
+      editComponent={<EditButton />}
+    />
+  )
+}
+
+export default Footer

www/apps/user-guide/providers/main-nav.tsx

@@ -6,15 +6,12 @@ import {
 } from "docs-ui"
 import { useMemo } from "react"
 import { config } from "../config"
-import { generatedEditDates } from "../generated/edit-dates.mjs"
-import { usePathname } from "next/navigation"
 
 type MainNavProviderProps = {
   children?: React.ReactNode
 }
 
 export const MainNavProvider = ({ children }: MainNavProviderProps) => {
-  const pathname = usePathname()
   const navigationDropdownItems = useMemo(
     () =>
       getNavDropdownItems({
@@ -23,16 +20,8 @@ export const MainNavProvider = ({ children }: MainNavProviderProps) => {
     []
   )
 
-  const editDate = useMemo(
-    () =>
-      (generatedEditDates as Record<string, string>)[
-        `app${pathname.replace(/\/$/, "")}/page.mdx`
-      ],
-    [pathname]
-  )
-
   return (
-    <UiMainNavProvider navItems={navigationDropdownItems} editDate={editDate}>
+    <UiMainNavProvider navItems={navigationDropdownItems}>
       {children}
     </UiMainNavProvider>
   )

www/packages/docs-ui/src/components/EditButton/index.tsx

@@ -2,23 +2,29 @@ import React from "react"
 import Link from "next/link"
 import clsx from "clsx"
 import { ArrowUpRightOnBox } from "@medusajs/icons"
+import { EditDate } from "../EditDate"
 
 type EditButtonProps = {
   filePath: string
+  editDate?: string
 }
 
-export const EditButton = ({ filePath }: EditButtonProps) => {
+export const EditButton = ({ filePath, editDate }: EditButtonProps) => {
   return (
-    <Link
-      href={`https://github.com/medusajs/medusa/edit/develop${filePath}`}
-      className={clsx(
-        "flex w-fit gap-docs_0.25 my-docs_2 items-center",
-        "text-medusa-fg-muted hover:text-medusa-fg-subtle",
-        "text-compact-small-plus"
-      )}
-    >
-      <span>Edit this page</span>
-      <ArrowUpRightOnBox />
-    </Link>
+    <div className="flex flex-wrap gap-docs_0.5 mt-docs_2 text-medusa-fg-subtle">
+      {editDate && <EditDate date={editDate} />}
+
+      <Link
+        href={`https://github.com/medusajs/medusa/edit/develop${filePath}`}
+        className={clsx(
+          "flex w-fit gap-docs_0.25 items-center",
+          "text-medusa-fg-subtle hover:text-medusa-fg-base",
+          "text-compact-small-plus"
+        )}
+      >
+        <span>Edit this page</span>
+        <ArrowUpRightOnBox />
+      </Link>
+    </div>
   )
 }

www/packages/docs-ui/src/components/EditDate/index.tsx

@@ -2,11 +2,11 @@ import React from "react"
 
 const DATE_REGEX = /^[a-zA-Z]+ (?<month>[a-zA-Z]+)/
 
-type MainNavEditDateProps = {
+type EditDateProps = {
   date: string
 }
 
-export const MainNavEditDate = ({ date }: MainNavEditDateProps) => {
+export const EditDate = ({ date }: EditDateProps) => {
   const today = new Date(date)
   const dateObj = new Date(date)
   const formattedDate = dateObj.toString()

www/packages/docs-ui/src/components/Footer/index.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { Pagination } from "../Pagination"
+
+export type FooterProps = {
+  editComponent?: React.ReactNode
+  showPagination?: boolean
+  feedbackComponent?: React.ReactNode
+  editDate?: string
+}
+
+export const Footer = ({
+  editComponent,
+  showPagination,
+  feedbackComponent,
+}: FooterProps) => {
+  return (
+    <>
+      {feedbackComponent}
+      {showPagination && <Pagination />}
+      {editComponent}
+    </>
+  )
+}

www/packages/docs-ui/src/components/MainNav/Version/index.tsx

@@ -36,35 +36,30 @@ export const MainNavVersion = () => {
   }
 
   return (
-    <>
-      <Link
-        href={version.releaseUrl}
-        target="_blank"
-        className={clsx(version.hide && "hidden")}
-      >
-        <Tooltip html="View the release notes<br/>on GitHub">
-          <span
-            className="relative text-compact-small-plus block"
-            onMouseOut={afterHover}
-          >
-            <span className="flex justify-center items-center">
-              v{version.number}
-            </span>
-            {showNewBadge && (
-              <span
-                className={clsx(
-                  "bg-medusa-tag-blue-icon w-[10px] h-[10px]",
-                  "absolute -top-docs_0.25 -right-docs_0.5",
-                  "animate-pulse rounded-full"
-                )}
-              ></span>
-            )}
+    <Link
+      href={version.releaseUrl}
+      target="_blank"
+      className={clsx(version.hide && "hidden")}
+    >
+      <Tooltip html="View the release notes<br/>on GitHub">
+        <span
+          className="relative text-compact-small-plus block"
+          onMouseOut={afterHover}
+        >
+          <span className="flex justify-center items-center">
+            v{version.number}
           </span>
-        </Tooltip>
-      </Link>
-      <span className={clsx("text-compact-small", version.hide && "hidden")}>
-        &#183;
-      </span>
-    </>
+          {showNewBadge && (
+            <span
+              className={clsx(
+                "bg-medusa-tag-blue-icon w-[10px] h-[10px]",
+                "absolute -top-docs_0.25 -right-docs_0.5",
+                "animate-pulse rounded-full"
+              )}
+            ></span>
+          )}
+        </span>
+      </Tooltip>
+    </Link>
   )
 }

www/packages/docs-ui/src/components/MainNav/index.tsx

@@ -8,11 +8,9 @@ import {
   GITHUB_ISSUES_LINK,
   SearchModalOpener,
   useLayout,
-  useMainNav,
   useSidebar,
   useSiteConfig,
 } from "../.."
-import { MainNavEditDate } from "./EditDate"
 import { MainNavItems } from "./Items"
 import { MainNavDesktopMenu } from "./DesktopMenu"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
@@ -28,7 +26,6 @@ type MainNavProps = {
 }
 
 export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
-  const { editDate } = useMainNav()
   const { setMobileSidebarOpen, isSidebarShown } = useSidebar()
   const { config } = useSiteConfig()
   const { showCollapsedNavbar } = useLayout()
@@ -68,13 +65,20 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
         )}
         <div
           className={clsx(
-            "flex items-center gap-docs_0.75 my-docs_0.75",
+            "flex items-center my-docs_0.75",
             showCollapsedNavbar && "flex-grow justify-between"
           )}
         >
-          <div className="lg:flex items-center gap-docs_0.5 text-medusa-fg-subtle hidden">
+          <div className="lg:flex items-center gap-[6px] text-medusa-fg-subtle hidden">
             <MainNavVersion />
-            {editDate && <MainNavEditDate date={editDate} />}
+            <span
+              className={clsx(
+                "text-compact-small",
+                config.version.hide && "hidden"
+              )}
+            >
+              &#183;
+            </span>
             <MainNavItemDropdown
               item={{
                 type: "dropdown",
@@ -109,8 +113,11 @@ export const MainNav = ({ className, itemsClassName }: MainNavProps) => {
               className="text-medusa-fg-subtle"
               wrapperClassName="z-10"
             />
+            {!showCollapsedNavbar && (
+              <span className={clsx("text-compact-small")}>&#183;</span>
+            )}
           </div>
-          <div className="flex items-center gap-docs_0.25">
+          <div className="flex items-center">
             <AiAssistantTriggerButton />
             <SearchModalOpener />
             <MainNavDesktopMenu />

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

@@ -24,6 +24,7 @@ export * from "./ExpandableNotice"
 export * from "./FeatureFlagNotice"
 export * from "./Feedback"
 export * from "./Feedback/Solutions"
+export * from "./Footer"
 export * from "./Heading"
 export * from "./HooksLoader"
 export * from "./IconHeadline"

www/packages/docs-ui/src/layouts/root.tsx

@@ -9,11 +9,9 @@ export type RootLayoutProps = {
   bodyClassName?: string
   showToc?: boolean
   sidebarProps?: SidebarProps
-  showPagination?: boolean
-  feedbackComponent?: React.ReactNode
-  editComponent?: React.ReactNode
   showBreadcrumbs?: boolean
   ProvidersComponent: React.FC<{ children: React.ReactNode }>
+  footerComponent?: React.ReactNode
 } & MainContentLayoutProps
 
 export const RootLayout = ({

www/packages/docs-ui/src/layouts/tight.tsx

@@ -1,13 +1,11 @@
 import React from "react"
 import { RootLayout, RootLayoutProps } from "./root"
 import clsx from "clsx"
-import { Breadcrumbs, Pagination } from ".."
+import { Breadcrumbs } from ".."
 
 export const TightLayout = ({
   children,
-  showPagination,
-  feedbackComponent,
-  editComponent,
+  footerComponent,
   showBreadcrumbs = true,
   ...props
 }: RootLayoutProps) => {
@@ -24,9 +22,7 @@ export const TightLayout = ({
       >
         {showBreadcrumbs && <Breadcrumbs />}
         {children}
-        {feedbackComponent}
-        {showPagination && <Pagination />}
-        {editComponent}
+        {footerComponent}
       </div>
     </RootLayout>
   )

www/packages/docs-ui/src/layouts/wide.tsx

@@ -1,13 +1,11 @@
 import React from "react"
 import { RootLayout, RootLayoutProps } from "./root"
 import clsx from "clsx"
-import { Breadcrumbs, Pagination } from ".."
+import { Breadcrumbs } from ".."
 
 export const WideLayout = ({
   children,
-  showPagination,
-  feedbackComponent,
-  editComponent,
+  footerComponent,
   showBreadcrumbs = true,
   ...props
 }: RootLayoutProps) => {
@@ -20,9 +18,7 @@ export const WideLayout = ({
       <main className={clsx("relative mt-4 w-full flex-1 lg:mt-7")}>
         {showBreadcrumbs && <Breadcrumbs />}
         {children}
-        {feedbackComponent}
-        {showPagination && <Pagination />}
-        {editComponent}
+        {footerComponent}
       </main>
     </RootLayout>
   )

www/packages/docs-ui/src/providers/MainNav/index.tsx

@@ -16,14 +16,12 @@ const MainNavContext = createContext<MainNavContext | null>(null)
 
 export type MainNavProviderProps = {
   navItems: NavigationItem[]
-  editDate?: string
   children?: React.ReactNode
 }
 
 export const MainNavProvider = ({
   navItems,
   children,
-  editDate,
 }: MainNavProviderProps) => {
   const pathname = usePathname()
   const { config } = useSiteConfig()
@@ -87,7 +85,6 @@ export const MainNavProvider = ({
       value={{
         navItems,
         activeItemIndex,
-        editDate,
         activeItem,
       }}
     >