feat: implement social card meta tags

src/app/app.routing.ts

@@ -19,34 +19,49 @@ export const routes: Routes = [
     {
         path: 'home',
         title: 'Home // Pascal Iske',
+        data: {
+            description: `Hi there, I'm a Cloud Engineer from Frankfurt/Main, Germany.`,
+        },
         loadComponent: () => {
             return import('./pages/home/home.component').then(m => m.HomeComponent)
         },
     },
     {
         path: 'skills',
         title: 'Skills // Pascal Iske',
+        data: {
+            description: 'Container & Orchestration, Infrastructure as Code, GitOps and more...',
+        },
         loadComponent: () => {
             return import('./pages/skills/skills.component').then(m => m.SkillsComponent)
         },
     },
     {
         path: 'work',
         title: 'Work // Pascal Iske',
+        data: {
+            description: `A list of projects I am currently working on and have worked on in the past...`,
+        },
         loadComponent: () => {
             return import('./pages/work/work.component').then(m => m.WorkComponent)
         },
     },
     {
         path: 'contact',
         title: 'Contact // Pascal Iske',
+        data: {
+            description: 'Want to get in touch? You can contact me through the contact form.',
+        },
         loadComponent: () => {
             return import('./pages/contact/contact.component').then(m => m.ContactComponent)
         },
     },
     {
         path: 'legal-notice',
         title: 'Legal notice // Pascal Iske',
+        data: {
+            description: 'Legal information pursuant to § 5 TMG.',
+        },
         loadComponent: () => {
             return import('./pages/legal-notice/legal-notice.component').then(
                 m => m.LegalNoticeComponent,

src/app/pages/contact/contact.component.ts

@@ -13,6 +13,7 @@ import {
     faInfoCircle,
 } from '@fortawesome/free-solid-svg-icons'
 import { timer } from 'rxjs'
+import { MetadataService } from 'shared/metadata/metadata.service'
 import { HeadlineComponent } from 'components/headline/headline.component'
 import { CopyComponent } from 'components/copy/copy.component'
 import { InputComponent } from 'components/input/input.component'
@@ -41,6 +42,7 @@ export interface ContactFormGroup {
         InputComponent,
         SocialsComponent,
     ],
+    providers: [MetadataService],
 })
 export class ContactComponent {
     @HostBinding('class')
@@ -65,7 +67,10 @@ export class ContactComponent {
         message: new FormControl(null, [Validators.required]),
     })
 
-    public constructor(private readonly http: HttpClient) {}
+    public constructor(
+        private readonly http: HttpClient,
+        private readonly metadata: MetadataService,
+    ) {}
 
     public submit(): void {
         this.state = 'loading'

src/app/pages/home/home.component.ts

@@ -1,4 +1,5 @@
 import { Component, HostBinding } from '@angular/core'
+import { MetadataService } from 'shared/metadata/metadata.service'
 import { GreetingComponent } from 'components/greeting/greeting.component'
 import { SocialsComponent } from 'components/socials/socials.component'
 
@@ -7,8 +8,11 @@ import { SocialsComponent } from 'components/socials/socials.component'
     selector: 'cmp-home',
     templateUrl: './home.component.html',
     imports: [GreetingComponent, SocialsComponent],
+    providers: [MetadataService],
 })
 export class HomeComponent {
     @HostBinding('class')
     public classes: string = 'flex flex-1 flex-col justify-center'
+
+    public constructor(private readonly metadata: MetadataService) {}
 }

src/app/pages/legal-notice/legal-notice.component.ts

@@ -1,5 +1,6 @@
 import { Component, HostBinding } from '@angular/core'
 import { RouterLink } from '@angular/router'
+import { MetadataService } from 'shared/metadata/metadata.service'
 import { SectionComponent } from 'components/section/section.component'
 import { HeadlineComponent } from 'components/headline/headline.component'
 import { CopyComponent } from 'components/copy/copy.component'
@@ -9,8 +10,11 @@ import { CopyComponent } from 'components/copy/copy.component'
     selector: 'cmp-legal-notice',
     templateUrl: './legal-notice.component.html',
     imports: [RouterLink, SectionComponent, HeadlineComponent, CopyComponent],
+    providers: [MetadataService],
 })
 export class LegalNoticeComponent {
     @HostBinding('class')
     public classes: string = 'flex flex-1 flex-col justify-start'
+
+    public constructor(private readonly metadata: MetadataService) {}
 }

src/app/pages/skills/skills.component.ts

@@ -1,6 +1,7 @@
 import { Component, HostBinding } from '@angular/core'
 import { NgFor, NgIf } from '@angular/common'
 import { Tags } from 'typings'
+import { MetadataService } from 'shared/metadata/metadata.service'
 import { HeadlineComponent } from 'components/headline/headline.component'
 import { SectionComponent } from 'components/section/section.component'
 import { CopyComponent } from 'components/copy/copy.component'
@@ -20,6 +21,7 @@ import { SocialsComponent } from 'components/socials/socials.component'
         CardComponent,
         SocialsComponent,
     ],
+    providers: [MetadataService],
 })
 export class SkillsComponent {
     @HostBinding('class')
@@ -62,4 +64,6 @@ export class SkillsComponent {
             tags: [Tags.ANGULAR, Tags.TYPESCRIPT, Tags.NODEJS, Tags.GOLANG],
         },
     ]
+
+    public constructor(private readonly metadata: MetadataService) {}
 }

src/app/pages/work/work.component.ts

@@ -5,6 +5,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { faBook, faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { Tags } from 'typings'
+import { MetadataService } from 'shared/metadata/metadata.service'
 import { SectionComponent } from 'components/section/section.component'
 import { HeadlineComponent } from 'components/headline/headline.component'
 import { CopyComponent } from 'components/copy/copy.component'
@@ -36,6 +37,7 @@ export interface Project {
         CardComponent,
         SocialsComponent,
     ],
+    providers: [MetadataService],
 })
 export class WorkComponent {
     @HostBinding('class')
@@ -166,4 +168,6 @@ export class WorkComponent {
             ],
         },
     ]
+
+    public constructor(private readonly metadata: MetadataService) {}
 }

src/app/shared/metadata/metadata.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core'
+import { Meta } from '@angular/platform-browser'
+import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'
+import type { ActivatedRouteSnapshot, Event } from '@angular/router'
+import { filter } from 'rxjs/operators'
+import { BrowserApiService } from 'shared/browser-api/browser-api.service'
+
+export interface ActivatedRouteSnapshotWithMetadata extends ActivatedRouteSnapshot {
+    data: {
+        description: string
+        image: string
+    }
+}
+
+@Injectable()
+export class MetadataService {
+    public constructor(
+        private readonly meta: Meta,
+        private readonly router: Router,
+        private readonly route: ActivatedRoute,
+        private readonly browserApiService: BrowserApiService,
+    ) {
+        this.router.events
+            .pipe(filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd))
+            .subscribe(() => {
+                const { title, data } = this.route.snapshot as ActivatedRouteSnapshotWithMetadata
+
+                this.browserApiService.with('window', window => {
+                    this.update(window.location.href, title ?? '', data.description, data.image)
+                })
+            })
+    }
+
+    public update(url: string, title: string, description: string, image: string): void {
+        // title & description
+        this.meta.updateTag({ name: 'title', content: title })
+        this.meta.updateTag({ name: 'description', content: description })
+
+        // open graph
+        this.meta.updateTag({ property: 'og:type', content: 'website' })
+        this.meta.updateTag({ property: 'og:url', content: url })
+        this.meta.updateTag({ property: 'og:title', content: title })
+        this.meta.updateTag({ property: 'og:description', content: description })
+        this.meta.updateTag({ property: 'og:image', content: image })
+
+        // twitter
+        this.meta.updateTag({ property: 'twitter:card', content: 'summary_large_image' })
+        this.meta.updateTag({ property: 'twitter:url', content: url })
+        this.meta.updateTag({ property: 'twitter:title', content: title })
+        this.meta.updateTag({ property: 'twitter:description', content: description })
+        this.meta.updateTag({ property: 'twitter:image', content: image })
+    }
+}

src/index.html

@@ -5,7 +5,7 @@
     <title>Home // Pascal Iske</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Hi there, I'm a Cloud Engineer from Frankfurt/Main, Germany" />
+    <meta name="description" content="Hi there, I'm a Cloud Engineer from Frankfurt/Main, Germany." />
     <meta name="color-scheme" content="dark light" />
     <meta name="theme-color" content="" />
     <link rel="icon" href="favicon.png" />