fix thumbnail images

Author: omidnikrah

index.js

@@ -1,6 +1,5 @@
 const http = require('http');
 const url = require('url');
-const fetch = require('node-fetch');
 const ArticleCard = require('./src/ArticleCard');
 const { userArticles } = require('./src/mediumAPI');
 const { asyncForEach } = require('./src/utils');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-readme-medium",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -18,7 +18,8 @@
   },
   "homepage": "https://github.com/omidnikrah/github-readme-medium#readme",
   "dependencies": {
-    "node-fetch": "^2.6.0",
-    "rss-parser": "^3.9.0"
+    "axios": "^0.24.0",
+    "rss-parser": "^3.9.0",
+    "sharp": "^0.29.3"
   }
-}
+}

src/ArticleCard.js

@@ -1,14 +1,12 @@
 const { readingTimeCalc, imgToDataURL } = require('./utils');
 
 const ArticleCard = async (data, colors) => {
-
   const thumbnailBase64 = await imgToDataURL(data.thumbnail);
   const articleDate = new Date(data.pubDate);
   const readingTime = readingTimeCalc(data.content);
-  var re = /[0-9A-Fa-f]{6}/g; //hex code format 
-  var hexBg = null
-  var hexText = null
-  console.log(colors)
+  const re = /[0-9A-Fa-f]{6}/g; //hex code format 
+  let hexBg = null;
+  let hexText = null;
   if (re.test(colors.bg)) {        //converted to hex format 
     hexBg = `#${colors.bg}`
   }
@@ -18,7 +16,7 @@ const ArticleCard = async (data, colors) => {
 
   return `
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="390px" height="100px" version="1.2" baseProfile="tiny" style="margin: 10px">
-  <rect width="100%" height="100%" fill="${hexBg ? hexBg : colors.bg}" style="padding:10px;"/>
+    <rect width="100%" height="100%" fill="${hexBg ? hexBg : colors.bg}" style="padding:10px;"/>
       <g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel">
       
         <g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
@@ -28,9 +26,7 @@ const ArticleCard = async (data, colors) => {
         </g>
         
         <g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="2" transform="matrix(1,0,0,1,0,0)">
-          <pattern patternUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
-            <image x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice" xlink:href="${thumbnailBase64}"/>
-          </pattern>
+          <image x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice" xlink:href="${thumbnailBase64}"/>
         </g>
         
         <g fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="square" stroke-linejoin="bevel" transform="matrix(1,0,0,1,0,0)">

src/utils.js

@@ -1,4 +1,5 @@
-const fetch = require('node-fetch');
+const axios = require('axios');
+const sharp = require('sharp');
 
 const ansiWordBound = (c) => (
   (' ' === c) ||
@@ -31,7 +32,7 @@ const readingTimeCalc = (text) => {
 }
 
 const imgToDataURL = url => {
-  return fetch(url).then(response => response.buffer()).then(buffer => `data:image/png;base64,${buffer.toString('base64')}`);
+  return axios.get(url, { responseType: 'arraybuffer' }).then(({ data }) => sharp(data).resize(200).toBuffer()).then(data => `data:image/png;base64,${data.toString('base64')}`);
 };
 
 const asyncForEach = async (array, callback) => {