feat: add image component for mdx content

content/blog/part-batiment-ges-en-france.mdx

@@ -13,9 +13,7 @@ Le secteur du bâtiment représente aujourd'hui environ 18 % des émissions de g
 
 Pour atteindre la neutralité carbone d'ici 2050, la France doit drastiquement réduire les émissions de GES provenant des bâtiments, en les faisant passer de 75 millions de tonnes de CO2 (MtCO2) à 30 MtCO2 d'ici 2030.
 
-<div className="mb-8 relative w-full h-[400px]">
-  <Image src={"/img/blog/aaron-burden-bcn5fhJGtD8-unsplash.jpg"} alt="Image de décoration de l'article" fill className="rounded-lg" />
-</div>
+<Image src="aaron-burden-bcn5fhJGtD8-unsplash.jpg" />
 
 ### L’état actuel des bâtiments en France
 

src/components/mdx/MdxImage.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image";
+
+type Props = {
+  alt?: string;
+  src: string;
+};
+
+/**
+ * Image component for MDX file.
+ *
+ * NB: the images must be in the `public/img/blog` folder.
+ *
+ * Ex:
+ * <MdxImage src="aaron-burden-bcn5fhJGtD8-unsplash.jpg" alt="Photo of project X"/>
+ */
+export const MdxImage = ({ src, alt }: Props) => {
+  return (
+    <div className="mb-8 relative w-full h-[400px]">
+      <Image src={"/img/blog/" + src} alt={alt ?? "Image de décoration de l'article"} fill className="rounded-lg" />
+    </div>
+  );
+};

src/mdx-components.tsx

@@ -1,5 +1,4 @@
 import { type MDXComponents } from "mdx/types";
-import Image from "next/image";
 import { Fragment } from "react";
 
 import { MdxLink } from "@/components/mdx/Link";
@@ -9,6 +8,7 @@ import { slugify } from "@/utils/string";
 import { CTA } from "./components/CTA";
 import { MdxCard } from "./components/mdx/MdxCard";
 import { MdxDetails } from "./components/mdx/MdxDetails";
+import { MdxImage } from "./components/mdx/MdxImage";
 import { MdxSpacer } from "./components/mdx/MdxSpacer";
 import { AnchorLink } from "./dsfr/client";
 
@@ -31,8 +31,8 @@ export const defaultMdxComponents: MDXComponents = {
   Card: MdxCard,
   Details: MdxDetails,
   Spacer: MdxSpacer,
-  // eslint-disable-next-line jsx-a11y/alt-text
-  Image: props => <Image {...props} />,
+
+  Image: props => <MdxImage {...props} />,
   ...anchorHeadingMDXComponents,
 };