SUSI AI Web Chat

FOSSASIA is maintaining a superior blog and it contains blog posts about projects and programs run by FOSSASIA. While we were implementing SUSI Web Chat Application we got a requirement to implement a blog page. Speciality of this blog page is it is not a separate blog page, it fetches blog posts and other related data by filtering the FOSSASIA’s main blog. In this blog post I’ll discuss how we fetched and managed those data on front-end and how we made the appearance same as the FOSSASIA main blog. First we get blog posts as a JSON. For that we used rss2json API. we can get the RSS feed as a JSON by sending our RSS feed URL to the rss2json API. Check the rss2json API documentation here. It produces all posts as items array. Next we store this array of responses in our application as a state. This response contains blog post titles featured images’ details and post content and other metadata such as tags, author name and published date. We had few requirements to fulfill. First one is to show full content of the blogpost in a new blog page. We can take the full content from response like this, this.state.posts.slice(this.state.startPage, this.state.startPage + 10).map((posts, i) => { let content = posts.content; }) We can use “cintent” variable to show content but it contains the featured image. We have to skip that image. For that, let htmlContent = content.replace(/<img.*?>/, ''); Now we have to render this string value as HTML. For that we have to install “test-to-html” package using below command. npm install html-to-text --save Now we can convert text into html like this htmlContent = renderHTML(htmlContent); We used this HTML content inside the “CardText” tag. <CardText> {htmlContent} </CardText> At the bottom of the post we needed to show author name, tags list and categories list. Since tags and categories come in one array, we have to separate them. First we defined an array which contains all the categories in Fossasia blog. Then we compared that array with the categories we got like this. const allCategories = ['FOSSASIA','GSoC','SUSI.AI'] Compare two arrays, posts.categories.map((cat) => { let k = 0; for (k = 0; k < allCategories.length; k++) { if (cat === allCategories[k]) { category.push(cat); } } }); we defined this “arrDiff” simple function to get the difference of two arrays. var tags=arrDiff(category,posts.categories) Make the list of categories let fCategory=category.map((cat) => <span key={cat} ><a className="tagname" href={'https://blog.fossasia.org/category/' + cat.replace(/\s+/g, '-').toLowerCase()} rel="noopener noreferrer">{cat}</a></span> ); We can use above step to make tags list. Then after used it in the “CardActions” <span className='categoryContainer'> <i className="fa fa-folder-open-o tagIcon"></i> {fCategory} </span>   According to the final requirement we needed to add social media share buttons for Facebook and Twitter. If we need to make a twitter share button we have to follow up this method. But we can use “react-share” npm package to make these kind of share buttons. This is how we made Facebook and Twitter share buttons. First of all we have to install…