fix benchmark image

Author: jderochervlk

markdown-pages/docs/manual/build-performance.mdx

@@ -23,7 +23,8 @@ Run the above command at your ReScript project's root; it'll spit out a JSON fil
 
 <Image
   withShadow={true}
-  src="/static/img/bstracing.png"
+  src="/img/bstracing.png"
+  className="w-auto mx-auto md:mx-auto"
   caption="Screenshot of bstracing result"
 />
 

src/components/Image.res

@@ -1,4 +1,10 @@
 @react.component
-let default = (~src: string, ~size=#large, ~withShadow=false, ~caption: option<string>=?) => {
-  <Markdown.Image src size withShadow ?caption />
+let default = (
+  ~src: string,
+  ~size=#large,
+  ~withShadow=false,
+  ~caption: option<string>=?,
+  ~className: option<string>=?,
+) => {
+  <Markdown.Image src size withShadow ?caption ?className />
 }

src/components/Markdown.res

@@ -498,6 +498,7 @@ module Image = {
     ~withShadow=false,
     ~caption: option<string>=?,
     ~externalLink: option<string>=?,
+    ~className: option<string>=?,
   ) => {
     let width = switch size {
     | #large => "w-full"
@@ -512,9 +513,14 @@ module Image = {
 
     let target = externalLink->Option.isSome ? Some("_blank") : None
 
-    <div className={`mt-8 mb-12 ${size === #large ? "md:-mx-16" : ""}`}>
+    let className = `${switch className {
+      | Some(cn) => " " ++ cn
+      | None => ""
+      }}`
+
+    <div className={`mt-8 mb-12 ${size === #large ? "md:-mx-16" : ""}${className}`}>
       <a href={externalLink->Option.getOr(src)} rel="noopener noreferrer" ?target>
-        <img className={width ++ " " ++ shadow} src />
+        <img className={`${width} ${shadow}`} src />
       </a>
       {switch caption {
       | None => React.null

src/components/Markdown.resi

@@ -161,6 +161,7 @@ module Image: {
     ~withShadow: bool=?,
     ~caption: string=?,
     ~externalLink: string=?,
+    ~className: string=?,
   ) => React.element
 }
 

src/components/MarkdownComponents.res

@@ -12,7 +12,7 @@ type t = {
   intro?: React.componentLike<Intro.props<React.element>, React.element>,
   @as("Image")
   image?: React.componentLike<
-    Image.props<string, [#large | #small], bool, string, string>,
+    Image.props<string, [#large | #small], bool, string, string, string>,
     React.element,
   >,
   @as("Video")