fix: Giving profile pic as Placehoder when thumbnail not present

Author: imsaravana369

index.js

@@ -11,14 +11,13 @@ http.createServer(async (req, res) => {
   const timestamp = Math.floor(Date.now() / 1000);
   let articles = [];
 
-
   if (!username) {
     res.write(JSON.stringify({ error: 'Add your medium username as query string' }));
     res.end();
 
     return;
   }
-  const responseArticles = await userArticles(`${username}?t=${timestamp}`);
+  const {articles: responseArticles, profileImgUrl} = await userArticles(`${username}?t=${timestamp}`);
 
   if (!responseArticles || responseArticles.length === 0) {
 
@@ -44,7 +43,7 @@ http.createServer(async (req, res) => {
   let result = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="390px" version="1.2" height="${articles.length * 120}">`;
 
   await asyncForEach(articles, async (article, index) => {
-    const articleCard = await ArticleCard(article, colors);
+    const articleCard = await ArticleCard(article, colors,profileImgUrl);
     result += `<g transform="translate(0, ${index * 120})">${articleCard}</g>`;
   });
 

src/ArticleCard.js

@@ -1,7 +1,12 @@
 const { readingTimeCalc, imgToDataURL } = require('./utils');
 
-const ArticleCard = async (data, colors) => {
-  const thumbnailBase64 = await imgToDataURL(data.thumbnail);
+function trimText(text, threshold) {
+  if (text.length <= threshold) return text;
+  return text.substr(0, threshold).concat("...");
+}
+
+const ArticleCard = async (data, colors, placeHolderImgUrl) => {
+  const thumbnailBase64 = await imgToDataURL(data.thumbnail,placeHolderImgUrl);
   const articleDate = new Date(data.pubDate);
   const readingTime = readingTimeCalc(data.content);
   const re = /[0-9A-Fa-f]{6}/g; //hex code format 
@@ -31,7 +36,7 @@ const ArticleCard = async (data, colors) => {
         
         <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)">
         
-          <text fill="${hexText ? hexText : colors.text}" fill-opacity="1" stroke="none" xml:space="preserve" x="110" y="20" font-family="Arial" font-size="15" font-weight="700" font-style="normal" >${data.title.replace(/&(?!#?[a-z0-9]+;)/g, '&amp;')}</text>
+          <text fill="${hexText ? hexText : colors.text}" fill-opacity="1" stroke="none" xml:space="preserve" x="110" y="20" font-family="Arial" font-size="15" font-weight="700" font-style="normal" text-overflow ="ellipsis">${trimText(data.title.replace(/&(?!#?[a-z0-9]+;)/g, '&amp;'),33)}</text>
           </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/mediumAPI.js

@@ -7,6 +7,7 @@ const userArticles = async (username) => {
 
   const feed = await parser.parseURL(`https://medium.com/feed/@${username}`);
   let result = [];
+  const imgUrl = feed.image.url;
 
   feed.items.forEach((item) => {
     const imageObj = imageRegex.exec(item['content:encoded']);
@@ -18,7 +19,7 @@ const userArticles = async (username) => {
     result = [...result, item];
   });
 
-  return result;
+  return {profileImgUrl: imgUrl, articles: result};
 
 };
 

src/utils.js

@@ -31,8 +31,21 @@ const readingTimeCalc = (text) => {
   return `${displayed} min read`;
 }
 
-const imgToDataURL = url => {
-  return axios.get(url, { responseType: 'arraybuffer' }).then(({ data }) => sharp(data).resize(200).toBuffer()).then(data => `data:image/png;base64,${data.toString('base64')}`);
+const imgToDataURL = async (url,placeHolder) => {
+  async function processImage(url) {
+    let {data} = await axios.get(url, { responseType: 'arraybuffer' });
+    let sharpedData = await sharp(data).resize(200).toBuffer();
+    return `data:image/png;base64,${sharpedData.toString('base64')}`
+  }
+  try{
+    return await  processImage(url);
+  }catch(e){
+    try{
+      return await processImage(placeHolder);
+    }catch(e){
+      return await processImage("https://lippianfamilydentistry.net/wp-content/uploads/2015/11/user-default.png");
+    }
+  }
 };
 
 const asyncForEach = async (array, callback) => {