Display all Project Contributors on About page using GitHub API (#382)

frontend/src/app/components/about/about.component.html

@@ -281,19 +281,43 @@
       <div class="row row-cols-2" dir="ltr">
         <div class="col col-md-2 offset-md-4">
           <a href="https://twitter.com/softsimon_">
-            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile/softsimon.jpg)"></div>
-            @softsimon_
+            <div class="profile_photo d-inline-block" title="softsimon">
+              <img class="profile_img" src="resources/profile/softsimon.jpg" />
+              softsimon
+            </div>
           </a>
         </div>
         <div class="col col-md-2">
           <a href="https://twitter.com/wiz">
-            <div class="profile_photo mx-auto" style="background-image: url(/resources/profile/wiz.png)"></div>
-            @wiz
+            <div class="profile_photo d-inline-block" title="wiz">
+              <img class="profile_img" src="resources/profile/wiz.png" />
+              wiz
+            </div>
           </a>
         </div>
       </div>
     </div>
 
+    <br><br>
+
+    <h3 i18n="about.contributors">Project Contributors</h3>
+
+    <div *ngIf="contributors === null">
+      <br>
+      <div class="spinner-border text-light"></div>
+    </div>
+
+    <ng-template ngFor let-contributor [ngForOf]="contributors">
+      <a [href]="'https://github.com/' + contributor.name" target="_blank">
+        <div class="profile_photo d-inline-block" [title]="contributor.name">
+          <img class="profile_img" [src]="'/api/v1/contributors/images/' + contributor.id" />
+          {{ contributor.name }}
+        </div>
+      </a>
+    </ng-template>
+
+    <br><br>
+
   </div>
 
   <br><br>

frontend/src/app/components/about/about.component.ts

@@ -19,9 +19,11 @@ export class AboutComponent implements OnInit, OnDestroy {
   paymentForm: FormGroup;
   donationStatus = 1;
   sponsors$: Observable<any>;
+  contributors$: Observable<any>;
   donationObj: any;
   sponsorsEnabled = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
   sponsors = null;
+  contributors = null;
   requestSubscription: Subscription | undefined;
 
   constructor(
@@ -51,6 +53,11 @@ export class AboutComponent implements OnInit, OnDestroy {
       .subscribe((sponsors) => {
         this.sponsors = sponsors;
       });
+
+    this.apiService.getContributor$()
+      .subscribe((contributors) => {
+        this.contributors = contributors;
+      });
   }
 
   ngOnDestroy() {

frontend/src/app/services/api.service.ts

@@ -77,6 +77,10 @@ export class ApiService {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/donations');
   }
 
+  getContributor$(): Observable<any[]> {
+    return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/contributors');
+  }
+
   checkDonation$(orderId: string): Observable<any[]> {
     return this.httpClient.get<any[]>(this.apiBaseUrl + this.apiBasePath + '/api/v1/donations/check?order_id=' + orderId);
   }

nginx-mempool.conf

@@ -40,6 +40,12 @@
 	location /api/v1/donations/images {
 		proxy_pass https://mempool.space;
 	}
+	location /api/v1/contributors {
+		proxy_pass https://mempool.space;
+	}
+	location /api/v1/contributors/images {
+		proxy_pass https://mempool.space;
+	}
 	location /api/v1/ws {
 		proxy_pass http://127.0.0.1:8999/;
 		proxy_http_version 1.1;