fix: image rendering after Medium CDN breaking changes (#206)

* fix: image rendering after Medium CDN breaking changes

* chore: remove console log

* chore: fix image size

Author: bxcodec

app/util/medium.ts

@@ -4,6 +4,17 @@ import { feedToJSON } from './feedtojson';
 import { getRandomUserAgent } from './useragent';
 import { parse } from 'node-html-parser';
 
+// Convert cdn-images-1.medium.com URL to miro.medium.com format
+// Example: https://cdn-images-1.medium.com/max/1024/0*abc.png -> https://miro.medium.com/v2/resize:fit:150/0*abc.png
+function convertToMiroUrl(cdnUrl: string): string {
+  const match = cdnUrl.match(/cdn-images-\d\.medium\.com\/max\/\d+\/(.+)$/);
+  if (match) {
+    // Use smaller size (150px) for thumbnail to reduce payload
+    return `https://miro.medium.com/v2/resize:fit:800/${match[1]}`;
+  }
+  return cdnUrl;
+}
+
 export const getArticle = async (index: string, username: string) => {
   const rssUrl = `https://medium.com/feed/${username}`
   const res = await feedToJSON(rssUrl);
@@ -24,19 +35,30 @@ export const getArticle = async (index: string, username: string) => {
   ];
 
   const description = content || desc;
-  const responseThumbnail = await axios(thumbnail.src, {
-    responseType: 'arraybuffer',
-    headers: {
-      'User-Agent': getRandomUserAgent(),
-    }
-  });
-  const base64Img = Buffer.from(responseThumbnail.data, 'binary').toString('base64');
 
-  const imgTypeArr = thumbnail.src.split('.');
-  const imgType = imgTypeArr[imgTypeArr.length - 1];
+  // Medium placeholder SVG as fallback
+  const placeholderSvg = `data:image/svg+xml;base64,${Buffer.from(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><rect fill="#12100E" width="150" height="150"/><path fill="#fff" d="M40 45h10l22 35 22-35h10v60h-10V65L75 95h-2L55 65v40H40V45z"/></svg>`).toString('base64')}`;
 
-  const convertedThumbnail = `data:image/${imgType};base64,${base64Img}`;
+  let convertedThumbnail = placeholderSvg;
 
+  try {
+    // Use miro.medium.com which doesn't have Cloudflare bot protection
+    const miroUrl = convertToMiroUrl(thumbnail.src);
+
+    const responseThumbnail = await axios(miroUrl, {
+      responseType: 'arraybuffer',
+      timeout: 10000,
+      headers: {
+        'User-Agent': getRandomUserAgent(),
+      }
+    });
+    const base64Img = Buffer.from(responseThumbnail.data, 'binary').toString('base64');
+
+    // miro.medium.com returns JPEG images
+    convertedThumbnail = `data:image/jpeg;base64,${base64Img}`;
+  } catch (error) {
+    console.log('Failed to fetch thumbnail, using placeholder:', error instanceof Error ? error.message : 'Unknown error');
+  }
 
   const cleanedDescription = stripHTML(description);
   return {