Fix MDX image rendering

Author: youngsm

sites/docs/app/global.css

@@ -1173,7 +1173,7 @@ figure.shiki code {
   line-height: 1.45;
 }
 
-.docs-physics-image {
+.docs-mdx-image {
   display: block;
   max-width: 100%;
   height: auto;

sites/docs/lib/mdx-components.tsx

@@ -2,16 +2,48 @@ import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { ComponentProps } from 'react';
 import { withBasePath } from './paths';
 
+type StaticImageLike = {
+  src: string;
+  width?: number;
+  height?: number;
+};
+
+type MdxImageProps = Omit<ComponentProps<'img'>, 'src'> & {
+  src?: ComponentProps<'img'>['src'] | StaticImageLike;
+};
+
 function Anchor({ href, ...props }: ComponentProps<'a'>) {
   return <a href={href ? withBasePath(href) : href} {...props} />;
 }
 
-function Image({ className, src, ...props }: ComponentProps<'img'>) {
+function resolveImage(src: MdxImageProps['src']) {
+  if (!src) return {};
+
+  if (typeof src === 'string') {
+    return { src: withBasePath(src) };
+  }
+
+  if (typeof src === 'object' && 'src' in src && typeof src.src === 'string') {
+    return {
+      src: withBasePath(src.src),
+      width: src.width,
+      height: src.height,
+    };
+  }
+
+  return {};
+}
+
+function Image({ className, height, src, width, ...props }: MdxImageProps) {
+  const image = resolveImage(src);
+
   return (
     <img
-      className={className ?? 'docs-physics-image'}
-      src={typeof src === 'string' ? withBasePath(src) : src}
       {...props}
+      className={className ?? 'docs-mdx-image'}
+      height={height ?? image.height}
+      src={image.src}
+      width={width ?? image.width}
     />
   );
 }

sites/docs/lib/paths.ts

@@ -1,7 +1,13 @@
 export const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';
 
 export function withBasePath(path: string): string {
-  if (!basePath || !path.startsWith('/') || path.startsWith('//')) {
+  if (
+    !basePath ||
+    !path.startsWith('/') ||
+    path.startsWith('//') ||
+    path === basePath ||
+    path.startsWith(`${basePath}/`)
+  ) {
     return path;
   }