From 0ef232b1d0051867a7e0669efb455b6a49941efc Mon Sep 17 00:00:00 2001
From: Suvansh Rana <suvansh.rana@peoplegrove.com>
Date: Fri, 20 Dec 2024 01:57:53 +0530
Subject: [PATCH] fix: medium images not working

---
 components/BlogCard.js     | 5 ++++-
 utils/extractImagePaths.js | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 utils/extractImagePaths.js

diff --git a/components/BlogCard.js b/components/BlogCard.js
index 6da0ab6..8f8cc00 100644
--- a/components/BlogCard.js
+++ b/components/BlogCard.js
@@ -12,6 +12,7 @@ import { htmlToText } from "html-to-text";
 import OuterLink from "./OuterLink";
 import Margin from "./Margin";
 import { OpenInNewOutlined } from "@material-ui/icons";
+import { extractImagePaths } from "../utils/extractImagePaths";
 
 const useStyles = makeStyles({
   root: {
@@ -57,12 +58,14 @@ export default function BlogCard({
     });
   }, []);
 
+  const imagePaths = extractImagePaths(description)
+
   return (
     <Card className={classes.root}>
       <CardMedia
         component="img"
         height="140"
-        image={thumbnail}
+        image={thumbnail || imagePaths?.[0]}
         className={classes.media}
         alt={title}
         title={title}
diff --git a/utils/extractImagePaths.js b/utils/extractImagePaths.js
new file mode 100644
index 0000000..a44bfbe
--- /dev/null
+++ b/utils/extractImagePaths.js
@@ -0,0 +1,6 @@
+export function extractImagePaths(inputString) {
+  const regex =
+    /(?:https?:\/\/.*\.(?:jpg|jpeg|png|gif|bmp|svg))|(?:\/[^\s]*\.(?:jpg|jpeg|png|gif|bmp|svg))/gi;
+  const imagePaths = inputString.match(regex);
+  return imagePaths || [];
+}