docs: update docusaurus to v3 (#5625)

* update dependencies

* update onboarding mdx

* fixes for mdx issues

* fixes for mdx compatibility

* resolve mdx errors

* fixes in reference

* fix check errors

* revert change in vale action

* fix node version in action

* fix summary in markdown

www/apps/docs/src/components/MobileLogo/index.tsx

@@ -0,0 +1,79 @@
+import React from "react"
+import Link from "@docusaurus/Link"
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+import { useThemeConfig, type NavbarLogo } from "@docusaurus/theme-common"
+import ThemedImage from "@theme/ThemedImage"
+import type { Props } from "@theme/Logo"
+import { ThemeConfig } from "@medusajs/docs"
+
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo
+  alt: string
+  imageClassName?: string
+}) {
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  }
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  )
+
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  )
+}
+
+export default function MobileLogo(props: Omit<Props, "key">): JSX.Element {
+  const {
+    siteConfig: { title },
+  } = useDocusaurusContext()
+  const {
+    navbar: { title: navbarTitle },
+    mobileLogo: logo,
+  } = useThemeConfig() as ThemeConfig
+
+  const { imageClassName, titleClassName, ...propsRest } = props
+  const logoLink = useBaseUrl(logo?.href || "/")
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? "" : title
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt
+
+  return (
+    <Link
+      to={logoLink}
+      {...propsRest}
+      {...(logo?.target && { target: logo.target })}
+    >
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
+      {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+    </Link>
+  )
+}