fix: add support for newer medium rss feed format (#150)

bxcodec · web-flow · commit f0947535c5a9 · 2024-12-14T20:19:10.000+02:00
diff --git a/app/util/medium.ts b/app/util/medium.ts
@@ -11,18 +11,20 @@ export const getArticle = async (index: string, username: string) => {
 
   // @ts-ignore
   res?.items.forEach(element => {
-    const thumbnail = extractFirstImageFromHTML(element.content)
+    const thumbnail = extractFirstImageFromHTML(element.content || element.description)
     if (thumbnail) {
       element.thumbnail = thumbnail
       fixItem.push(element)
     }
   });
 
-  const { title, published: pubDate, link: url, thumbnail, content: description } = fixItem[
+  const { title, published: pubDate, link: url, thumbnail, content: content, description: desc } = fixItem[
     // @ts-ignore
     index || 0
   ];
 
+  const description = content || desc;
+
 
   const responseThumbnail = await axios(thumbnail.src, { responseType: 'arraybuffer' });
   const base64Img = Buffer.from(responseThumbnail.data, 'binary').toString('base64');
@@ -32,19 +34,27 @@ export const getArticle = async (index: string, username: string) => {
   const imgType = imgTypeArr[imgTypeArr.length - 1];
 
   const convertedThumbnail = `data:image/${imgType};base64,${base64Img}`;
+
+
+  const cleanedDescription = stripHTML(description);
   return {
     title: title.length > 80 ? title.substring(0, 80) + ' ...' : title,
     thumbnail: convertedThumbnail,
     url,
     date: moment(pubDate).format('DD MMM YYYY, HH:mm'),
     description:
-      description
-        .replace(/<h3>.*<\/h3>|<figcaption>.*<\/figcaption>|<[^>]*>/gm, '')
+      cleanedDescription
         .substring(0, 60) + '...',
   };
 };
 
 
+function stripHTML(text: string) {
+  const dom = new JSDOM(text);
+  const textContent = dom.window.document.body.textContent || '';
+  const cleanText = textContent.trim();
+  return cleanText;
+}
 
 
 // Define a type for the image data
@@ -58,15 +68,21 @@ function extractFirstImageFromHTML(html: string): ImageData | null {
   const dom = new JSDOM(html);
   const document = dom.window.document;
 
-  // Select the first figure that contains an image
-  const figure = document.querySelector('figure img');
-  if (figure) {
-    const img = figure as HTMLImageElement; // Ensure it's treated as an image element
-    // const figcaption = figure.parentElement ? figure.parentElement.querySelector('figcaption') : null;
-    return {
-      src: img.src,
-      alt: img.alt || '', // Use an empty string if alt is not present 
-    };
+  // Try different strategies to find the first image
+  const imageSelectors = [
+    'figure img',          // Case 1: Image inside figure
+    '.medium-feed-image img',  // Case 2: Medium feed specific
+    'img'                  // Case 3: Any image as fallback
+  ];
+
+  for (const selector of imageSelectors) {
+    const img = document.querySelector(selector) as HTMLImageElement;
+    if (img) {
+      return {
+        src: img.src,
+        alt: img.alt || '', // Use empty string if alt is not present
+      };
+    }
   }
 
   return null; // Return null if no images are found
diff --git a/test.html b/test.html
@@ -0,0 +1,13 @@
+<html>
+    <head>
+        <title>Test</title>
+    </head>
+    <body>
+        <h1>Test</h1>
+        <h2>Iman Example for Medium Feed Older Version</h2>
+        <img src="http://localhost:3000/medium/@imantumorang/0">
+        <h2>aarafat27 Example for Medium Newer Version</h2>
+        <img src="http://localhost:3000/medium/@aarafat27/0">
+    </body>
+</html>
+
