Displaying translators as twitter photos

backend/src/index.ts

@@ -229,6 +229,16 @@ class Server {
           res.status(500).end();
         }
       })
+      .get(config.MEMPOOL.API_URL_PREFIX + 'translators/images/:id', async (req, res) => {
+        try {
+          const response = await axios.get('https://mempool.space/api/v1/translators/images/' + req.params.id, {
+            responseType: 'stream', timeout: 10000
+          });
+          response.data.pipe(res);
+        } catch (e) {
+          res.status(500).end();
+        }
+      })
     ;
 
     if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED) {

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

@@ -165,16 +165,17 @@
   </div>
 
   <ng-container *ngIf="translators$ | async | keyvalue as translators else loadingSponsors">
-    <div class="maintainers">
+    <div class="community-sponsor">
       <h3 i18n="about.translators">Translators</h3>
       <div class="wrapper">
         <ng-template ngFor let-translator [ngForOf]="translators">
           <a [href]="'https://twitter.com/' + translator.value" target="_blank" [title]="translator.key">
-            <span>{{ translator.value }}</span>
-          </a>,
+            <img class="image" [src]="'/api/v1/translators/images/' + translator.value" />
+          </a>
         </ng-template>
       </div>
     </div>
+    <br>
   </ng-container>
   
   <ng-container *ngIf="allContributors$ | async as contributors else loadingSponsors">