From 7e0bd75fab368c158e449e393b35859a17f54801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Otto=20S=C3=B6derman?= <ottoj.soderman@gmail.com>
Date: Thu, 2 Feb 2023 21:39:07 +0200
Subject: [PATCH] Added Img support to Markdown, added image formatting as webp

---
 src/components/Markdown.tsx   |  3 ++-
 src/components/typography.tsx | 14 +++++++++++++-
 src/utils/parseImageUrl.ts    |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
index d5bd109..327d99f 100644
--- a/src/components/Markdown.tsx
+++ b/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
diff --git a/src/components/typography.tsx b/src/components/typography.tsx
index 40ad1e2..b3bbe0f 100644
--- a/src/components/typography.tsx
+++ b/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}
+  />
+)
diff --git a/src/utils/parseImageUrl.ts b/src/utils/parseImageUrl.ts
index 9c9d192..053e532 100644
--- a/src/utils/parseImageUrl.ts
+++ b/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
 }