refactor: upgrade fontawesome

Author: d-koppenhagen

package-lock.json

@@ -42,21 +42,19 @@
     "@angular/service-worker": "^19.0.3",
     "@angular/youtube-player": "^19.0.2",
     "@fortawesome/angular-fontawesome": "^1.0.0",
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "@fortawesome/fontawesome-svg-core": "~1.3.0",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@nx/angular": "^19.8.14",
     "animate.css": "^4.1.1",
     "clipboard": "^2.0.11",
     "feed": "^4.2.2",
     "front-matter": "^4.0.2",
-    "marked": "^7.0.0",
-    "marked-gfm-heading-id": "^3.1.0",
-    "marked-highlight": "^2.0.1",
-    "marked-mangle": "^1.1.7",
-    "marked-shiki": "^1.1.0",
+    "marked": "^13.0.0",
+    "marked-gfm-heading-id": "4.1.1",
+    "marked-highlight": "^2.2.1",
+    "marked-mangle": "^1.1.10",
+    "marked-shiki": "^1.1.1",
     "mermaid": "^10.9.3",
     "ngx-sharebuttons": "^13.0.0",
     "rxjs": "~7.8.1",

package.json

@@ -52,19 +52,22 @@ <h4>
               class="button small"
               href="https://open.spotify.com/episode/4n6qXpYtCZ9UQACbUPNMpG?si=fIldVBQhR_e8Vw4iStiBSw"
             >
-              <i class="icon brands fa-spotify"></i> Spotify
+              <fa-icon [icon]="['fab', 'spotify']"></fa-icon>
+              Spotify
             </a>
             <a
               class="button small"
               href="https://podcasts.apple.com/de/podcast/digitale-barrierefreiheit-danny-koppenhagen-und-maximilian/id1462447493?i=1000642092259"
             >
-              <i class="icon brands fa-apple"></i>Apple Podcasts
+              <fa-icon [icon]="['fab', 'apple']"></fa-icon>
+              Apple Podcasts
             </a>
             <a
               class="button small"
               href="https://deezer.page.link/MZaQ2c5YqQ28vcdn6"
             >
-              <i class="icon brands fa-deezer"></i>Deezer
+              <fa-icon [icon]="['fab', 'deezer']"></fa-icon>
+              Deezer
             </a>
           </div>
         </div>
@@ -86,7 +89,7 @@ <h4>#000000 c0ffee Tech-Talk der DB Systel</h4>
             Anwendungszwecke eignet. Außerdem erläutere ich, wie der aktuelle
             Stand der Technik für Progressive Webapps (PWA) ist. Im letzten Teil
             sprechen wir über die Anbindung von APIs und über das
-            Architekturmuster \"Backend For Frontends\" (BFF).
+            Architekturmuster "Backend For Frontends" (BFF).
           </p>
         </article>
         <article class="grid-description-2">

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

@@ -12,14 +12,23 @@ import {
   AfterViewChecked,
 } from '@angular/core';
 import { YouTubePlayerModule } from '@angular/youtube-player';
+import {
+  FaIconLibrary,
+  FontAwesomeModule,
+} from '@fortawesome/angular-fontawesome';
+import {
+  faSpotify,
+  faDeezer,
+  faApple,
+} from '@fortawesome/free-brands-svg-icons';
 
 import { PersonalTimelineComponent } from '../personal-timeline/personal-timeline.component';
 
 @Component({
   selector: 'dk-about',
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss',
-  imports: [YouTubePlayerModule, PersonalTimelineComponent],
+  imports: [YouTubePlayerModule, PersonalTimelineComponent, FontAwesomeModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AboutComponent implements OnInit, AfterViewChecked {
@@ -29,9 +38,11 @@ export class AboutComponent implements OnInit, AfterViewChecked {
   readonly videoBox = viewChild<ElementRef>('videoBox');
   youtubePlayerWidth = 300;
   isBrowser = false;
+  faLib = inject(FaIconLibrary);
 
   constructor() {
     this.isBrowser = isPlatformBrowser(this.platformId);
+    this.faLib.addIcons(faSpotify, faDeezer, faApple);
   }
 
   @HostListener('window:resize', ['$event'])

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

@@ -20,15 +20,17 @@ <h3 class="major">{{ post.attributes.title }}</h3>
           [href]="externalUrl"
           [lang]="post.attributes.language || 'de'"
           target="_blank"
-          >Weiterlesen...</a
         >
+          <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon> Weiterlesen...
+        </a>
       } @else {
         <a
           class="special read-on"
           [lang]="post.attributes.language || 'de'"
           [routerLink]="routeToPost"
-          >Weiterlesen...</a
         >
+          <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon> Weiterlesen...
+        </a>
       }
       @if (
         post.attributes.publishedAt &&

src/app/components/card/card.component.html

@@ -37,6 +37,8 @@ img.card-image {
   .read-on {
     white-space: nowrap;
     margin-right: 10px;
+    display: flex;
+    gap: 0.75rem;
   }
 
   .published-at-link {
@@ -48,6 +50,7 @@ img.card-image {
     > img.published-at-logo {
       float: right;
       max-height: 50px;
+      padding-bottom: 0.75rem;
     }
   }
 }

src/app/components/card/card.component.scss

@@ -1,17 +1,27 @@
 import { ContentFile } from '@analogjs/content';
-import { Component, input } from '@angular/core';
+import { Component, inject, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
+import {
+  FaIconLibrary,
+  FontAwesomeModule,
+} from '@fortawesome/angular-fontawesome';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 
 import { PostAttributes } from '../../types';
 
 @Component({
   selector: 'dk-card',
   templateUrl: './card.component.html',
   styleUrl: './card.component.scss',
-  imports: [RouterLink],
+  imports: [RouterLink, FontAwesomeModule],
 })
 export class CardComponent {
   readonly post = input.required<ContentFile<PostAttributes>>();
+  private faLib = inject(FaIconLibrary);
+
+  constructor() {
+    this.faLib.addIcons(faChevronRight);
+  }
 
   get routeToPost() {
     // Extracting the last part between slashes and excluding the file extension