Added Img support to Markdown, added image formatting as webp

src/components/Markdown.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react"
 import ReactMarkdown, { Components } from "react-markdown"
 import remarkGfm from "remark-gfm"
-import { A, H1, H2, H3, H4, P, Pre } from "./typography"
+import { A, H1, H2, H3, H4, P, Pre, Img } from "./typography"
 
 const markdownComponents: Components = {
   h1: H1,
@@ -11,6 +11,7 @@ const markdownComponents: Components = {
   p: P,
   pre: Pre,
   a: A,
+  img: Img,
 }
 
 // Fragment is necessary for react-markdown typings

src/components/typography.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames"
-import { AnchorHTMLAttributes, HTMLAttributes } from "react"
+import { AnchorHTMLAttributes, HTMLAttributes, ImgHTMLAttributes } from "react"
+import parseImageUrl from "../utils/parseImageUrl"
 import Link from "./Link"
 
 // Not helpful here...
@@ -85,3 +86,14 @@ export const A = ({ children, className, href, ...props }: AnchorProps) =>
       {children}
     </Link>
   )
+
+type ImgProps = ImgHTMLAttributes<HTMLImageElement>
+
+export const Img = ({ className, alt, src, ...props }: ImgProps) => (
+  <img
+    alt={alt}
+    src={src && parseImageUrl(src)}
+    className={classNames("", className)}
+    {...props}
+  />
+)

src/utils/parseImageUrl.ts

@@ -1,6 +1,6 @@
 const parseImageUrl = (url: string) => {
   if (process.env.NODE_ENV === "development") {
-    return process.env.STRAPI_URL + url
+    return `${process.env.STRAPI_URL + url}?format=webp`
   }
   return url
 }