Add authors for nimbus

public/static/css/main.scss

@@ -78,10 +78,6 @@ li {
                     background-position: center;
                 }
             }
-            .author{
-                color: grey;
-                font-size: 1rem;
-            }
             h4{
                 margin: 15px 0;
             }
@@ -95,6 +91,23 @@ li {
     }
 }
 
+.author{
+    font-size: 1rem;
+    margin-bottom: 10px;
+}
+
+.author-name{
+    display: inline-block;
+    background: #e7e7e7;
+    padding: 2px 6px;
+    border-radius: 5px;
+}
+
+.description{
+    color: grey;
+    font-size: 1rem;
+}
+
 .post-title {
     margin: 10px 0;
     color: black !important;

src/Actions/HomeActions/index.ts

@@ -19,7 +19,7 @@ const CORS_PROXY = "https://cors-fix.status.im/";
 const embarkBlog = "https://blog.embarklabs.io/atom.xml";
 const embarkOldBlog = "https://framework.embarklabs.io/atom.xml";
 
-const nimbusBlog = "https://our.status.im/ghost/api/v2/content/posts/?key=10e7f8c1f793d2945ea1177076&filter=tag:nim";
+const nimbusBlog = "https://our.status.im/ghost/api/v2/content/posts/?key=10e7f8c1f793d2945ea1177076&filter=tag:nim&limit=all&include=authors";
 
 let embarkData: any = '';
 let parsedEmbarkData:any = [];
@@ -27,6 +27,15 @@ let parsedEmbarkData:any = [];
 let nimbusData: any = '';
 let parsedNimbusData:any = [];
 
+interface NimbusBlog {
+    title: string; 
+    published_at: string; 
+    primary_author: any; 
+    excerpt: string; 
+    feature_image: string; 
+    url: string;
+}
+
 export const FetchEmbark = async () => {
     await fetch(`${CORS_PROXY}`+ `${embarkBlog}`)
     .then(response => response.text())
@@ -82,16 +91,17 @@ export const FetchNimbus = async () => {
     .then(response => response.json())
     .then(data => {
         nimbusData = data.posts
-        nimbusData.forEach((entry: { title: string; published_at: string; excerpt: string; feature_image: string; url: string; }) => {
+        nimbusData.forEach((entry: NimbusBlog) => {
             const postData: any = {}
             postData.title = entry.title;
             postData.published_at = entry.published_at;
             postData.excerpt = entry.excerpt;
+            postData.author = entry.primary_author.name;
             postData.feature_image = entry.feature_image;
             postData.url = entry.url;
             parsedNimbusData.push(postData);
         })
-    });
+    })
 }
 
 export const HomeActions = {

src/Components/Blogs/Nimbus.tsx

@@ -23,12 +23,13 @@ const Nimbus = () => {
                     <div className="row">
                         <div className="col-md-12">
                             <ul>
-                                {nimbusData.map((data: { url: string ; title: string; published_at: string; excerpt: string; }, i: any) => (
+                                {nimbusData.map((data: { url: string ; title: string; published_at: string; excerpt: string; author: string;}, i: any) => (
                                     <li key={i}>
                                         <div className="post">
                                             <div className="meta"><time>{data.published_at.substring(0,10)}</time> / <a href="https://nimbus.team/">Nimbus</a></div>
                                             <h4 ><a className="post-title" href={data.url}>{data.title}</a></h4>
-                                            <div className="author" style={{ paddingRight: '10px' }}>{reduceExcerpt(data.excerpt)}</div>
+                                            <div className="author" style={{ paddingRight: '10px' }}>By <div className="author-name">{data.author}</div></div>
+                                            <div className="description" style={{ paddingRight: '10px' }}>{reduceExcerpt(data.excerpt)}</div>
                                         </div>                                    
                                     </li>
                                 ))}