Add anchor links for about page sections

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

@@ -25,7 +25,7 @@
     </a>
   </div>
 
-  <div class="enterprise-sponsor">
+  <div class="enterprise-sponsor" id="enterprise-sponsors">
     <h3 i18n="about.sponsors.enterprise.withRocket">Enterprise Sponsors 🚀</h3>
     <div class="wrapper">
       <a href="https://spiral.xyz/" target="_blank" title="Spiral">
@@ -173,7 +173,7 @@
     </div>
   </div>
 
-  <div class="community-sponsor">
+  <div class="community-sponsor" id="community-sponsors">
     <h3 i18n="about.sponsors.withHeart">Community Sponsors ❤️</h3>
 
     <div class="wrapper">
@@ -187,7 +187,7 @@
     </div>
   </div>
 
-  <div class="community-integrations-sponsor">
+  <div class="community-integrations-sponsor" id="community-integrations">
     <h3 i18n="about.community-integrations">Community Integrations</h3>
     <div class="wrapper">
       <a href="https://github.com/getumbrel/umbrel" target="_blank" title="Umbrel">
@@ -281,7 +281,7 @@
     </div>
   </div>
 
-  <div class="alliances">
+  <div class="alliances" id="community-alliances">
     <h3 i18n="about.alliances">Community Alliances</h3>
     <div class="wrapper">
       <a href="https://liquid.net/" title="Liquid Network">
@@ -297,7 +297,7 @@
   </div>
 
   <ng-container *ngIf="translators$ | async | keyvalue as translators else loadingSponsors">
-    <div class="project-translators">
+    <div class="project-translators" id="project-translators">
       <h3 i18n="about.translators">Project Translators</h3>
       <div class="wrapper">
         <ng-template ngFor let-translator [ngForOf]="translators">
@@ -311,7 +311,7 @@
   </ng-container>
 
   <ng-container *ngIf="allContributors$ | async as contributors else loadingSponsors">
-    <div class="contributors">
+    <div class="contributors" id="project-contributors">
       <h3 i18n="about.contributors">Project Contributors</h3>
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.regular">
@@ -323,7 +323,7 @@
       </div>
     </div>
 
-    <div class="maintainers" *ngIf="contributors.core.length">
+    <div class="maintainers" *ngIf="contributors.core.length" id="project-members">
       <h3 i18n="about.project_members">Project Members</h3>
       <div class="wrapper">
         <ng-template ngFor let-contributor [ngForOf]="contributors.core">
@@ -336,7 +336,7 @@
     </div>
   </ng-container>
 
-  <div class="maintainers">
+  <div class="maintainers" id="project-maintainers">
     <h3 i18n="about.maintainers">Project Maintainers</h3>
     <div class="wrapper">
         <a href="https://twitter.com/softsimon_" target="_blank" title="softsimon">

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

@@ -46,6 +46,7 @@
   .maintainers {
     margin-top: 68px;
     margin-bottom: 68px;
+    scroll-margin: 30px;
   }
 
   .maintainers {
@@ -117,6 +118,7 @@
   .project-translators,
   .community-integrations-sponsor,
   .maintainers {
+    scroll-margin: 30px;
     .wrapper {
       display: inline-block;
       a {

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

@@ -5,7 +5,7 @@ import { StateService } from '../../services/state.service';
 import { Observable } from 'rxjs';
 import { ApiService } from '../../services/api.service';
 import { IBackendInfo } from '../../interfaces/websocket.interface';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { ITranslators } from '../../interfaces/node-api.interface';
 
@@ -31,6 +31,7 @@ export class AboutComponent implements OnInit {
     public stateService: StateService,
     private apiService: ApiService,
     private router: Router,
+    private route: ActivatedRoute,
     @Inject(LOCALE_ID) public locale: string,
   ) { }
 
@@ -60,6 +61,17 @@ export class AboutComponent implements OnInit {
       })
     );
   }
+  
+    ngAfterViewInit() {
+      const that = this;
+      setTimeout( () => {
+        if( this.route.snapshot.fragment ) {
+          if (document.getElementById( this.route.snapshot.fragment )) {
+            document.getElementById( this.route.snapshot.fragment ).scrollIntoView({behavior: "smooth", block: "center"});
+          }
+        }
+      }, 1 );
+    }
 
   sponsor(): void {
     if (this.officialMempoolSpace && this.stateService.env.BASE_MODULE === 'mempool') {