fix(markdown): use custom markdown component and handle links with an…

…gular router
co-IT · Jul 26, 2022 · 48be0d9 · 48be0d9
1 parent 91c7eab
commit 48be0d9
Show file tree

Hide file tree

Showing 16 changed files with 78 additions and 46 deletions.
diff --git a/apps/homepage/src/main.ts b/apps/homepage/src/main.ts
@@ -1,7 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { provideTranslocoConfig, provideTranslocoLoader } from '@cp/i18n';
 import { configureCareerUI } from '@cp/ui';
 import { TranslocoModule } from '@ngneat/transloco';
@@ -15,7 +15,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 if (environment.production) {
   enableProdMode();
 }
-
 bootstrapApplication(AppComponent, {
   providers: [
     importProvidersFrom(BrowserAnimationsModule),

diff --git a/libs/sites/src/lib/about-page/about-page.component.html b/libs/sites/src/lib/about-page/about-page.component.html
@@ -16,7 +16,7 @@
           />
           <div class="flow">
             <article>
-              <markdown [src]="t('about-page.articles.change.src')"></markdown>
+              <cp-markdown [src]="t('about-page.articles.change.src')"></cp-markdown>
             </article>
           </div>
         </div>
@@ -27,9 +27,9 @@
         <div class="columns columns-two align-center">
           <div class="flow">
             <article>
-              <markdown
+              <cp-markdown
                 [src]="t('about-page.articles.collaboration.src')"
-              ></markdown>
+              ></cp-markdown>
             </article>
           </div>
           <img
@@ -48,9 +48,9 @@
           />
           <div class="flow">
             <article>
-              <markdown
+              <cp-markdown
                 [src]="t('about-page.articles.fascination.src')"
-              ></markdown>
+              ></cp-markdown>
             </article>
           </div>
         </div>

diff --git a/libs/sites/src/lib/about-page/about-page.component.ts b/libs/sites/src/lib/about-page/about-page.component.ts
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { TranslocoModule } from '@ngneat/transloco';
-import { MarkdownModule } from 'ngx-markdown';
+import { MarkdownComponent } from '@cp/ui';
 
 @Component({
   selector: 'cp-about-page',
   standalone: true,
-  imports: [CommonModule, TranslocoModule, MarkdownModule],
+  imports: [CommonModule, TranslocoModule, MarkdownComponent],
   templateUrl: './about-page.component.html',
   styleUrls: ['./about-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/libs/sites/src/lib/career-page/career-page.component.html b/libs/sites/src/lib/career-page/career-page.component.html
@@ -11,9 +11,9 @@
           />
           <div class="flow">
             <article>
-              <markdown
+              <cp-markdown
                 [src]="t('career.articles.you-can-sit-with-us.src')"
-              ></markdown>
+              ></cp-markdown>
             </article>
             <cp-call-to-action
               icon="mdi mdi-download"
@@ -29,9 +29,9 @@
       <div class="content">
         <div class="columns columns-two align-center">
           <article>
-            <markdown
+            <cp-markdown
               [src]="t('career.articles.our-promise.src')"
-            ></markdown>
+            ></cp-markdown>
           </article>
           <img
             class="career__globe-image"

diff --git a/libs/sites/src/lib/career-page/career-page.component.ts b/libs/sites/src/lib/career-page/career-page.component.ts
@@ -5,10 +5,10 @@ import {
   CallToActionComponent,
   HeroTextComponent,
   JobOfferTileComponent,
+  MarkdownComponent,
   VideoTileComponent,
 } from '@cp/ui';
 import { TranslocoModule } from '@ngneat/transloco';
-import { MarkdownModule } from 'ngx-markdown';
 import { Observable } from 'rxjs';
 import { JobOffer, VideoCollectionGrouped } from './models';
 import { RecruiteeService } from './recruitee.service';
@@ -25,7 +25,7 @@ import { RecruitingTimelineComponent } from './recruiting-timeline/recruiting-ti
     HeroTextComponent,
     HeroTextComponent,
     JobOfferTileComponent,
-    MarkdownModule,
+    MarkdownComponent,
     RecruitingTimelineComponent,
     RouterModule,
     TranslocoModule,

diff --git a/libs/sites/src/lib/cinema-page/cinema-player/cinema-player.component.html b/libs/sites/src/lib/cinema-page/cinema-player/cinema-player.component.html
@@ -5,10 +5,7 @@
       [videoId]="video.id"
     ></youtube-player>
     <article class="youtube-player-width-adjustment">
-      <markdown
-        [src]="'/assets/articles/de/video-descriptions/' + video.id + '.md'"
-      >
-      </markdown>
+      <cp-markdown [src]="'/assets/articles/de/video-descriptions/' + video.id + '.md'"></cp-markdown>
     </article>
   </div>
 </ng-container>
diff --git a/libs/sites/src/lib/cinema-page/cinema-player/cinema-player.component.ts b/libs/sites/src/lib/cinema-page/cinema-player/cinema-player.component.ts
@@ -2,14 +2,14 @@ import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 
 import { YouTubePlayerModule } from '@angular/youtube-player';
-import { MarkdownModule } from 'ngx-markdown';
 import { Video } from '../models';
+import { MarkdownComponent } from '@cp/ui';
 
 @Component({
   selector: 'cp-cinema-player',
   templateUrl: './cinema-player.component.html',
   standalone: true,
-  imports: [CommonModule, YouTubePlayerModule, MarkdownModule],
+  imports: [CommonModule, YouTubePlayerModule, MarkdownComponent],
   styleUrls: ['./cinema-player.component.scss'],
 })
 export class CinemaPlayerComponent {

diff --git a/libs/sites/src/lib/landing-page/landing-page.component.html b/libs/sites/src/lib/landing-page/landing-page.component.html
@@ -6,9 +6,9 @@ <h2 class="heading-hero text-white">
           {{ t('landing-page.articles.problems-to-chances.heading') }}
         </h2>
         <article class="text-box-glass">
-          <markdown
+          <cp-markdown
             [src]="t('landing-page.articles.problems-to-chances.src')"
-          ></markdown>
+          ></cp-markdown>
         </article>
       </div>
     </div>
@@ -20,9 +20,9 @@ <h2 class="heading-hero">
         {{ t('landing-page.articles.humans-make-a-difference.heading') }}
       </h2>
       <article class="text-size-m">
-        <markdown
+        <cp-markdown
           [src]="t('landing-page.articles.humans-make-a-difference.src')"
-        ></markdown>
+        ></cp-markdown>
       </article>
       <cp-hero-link [text]="t('landing-page.apply.call-to-action')" url="/career"></cp-hero-link>
     </div>
@@ -38,9 +38,9 @@ <h2 class="heading-hero text-white">
           <cp-hero-link [text]="t('landing-page.contact.call-to-action')" url="/contact"></cp-hero-link>
         </div>
         <article class="text-box-glass">
-          <markdown
+          <cp-markdown
             [src]="t('landing-page.articles.full-service.src')"
-          ></markdown>
+          ></cp-markdown>
         </article>
       </div>
     </div>

diff --git a/libs/sites/src/lib/landing-page/landing-page.component.ts b/libs/sites/src/lib/landing-page/landing-page.component.ts
@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
 import { TranslocoModule } from '@ngneat/transloco';
-import { MarkdownModule } from 'ngx-markdown';
-import { CallToActionComponent, HeroLinkComponent } from '@cp/ui';
+import { HeroLinkComponent, MarkdownComponent } from '@cp/ui';
 
 @Component({
   selector: 'cp-landing-page',
   standalone: true,
-  imports: [TranslocoModule, MarkdownModule, HeroLinkComponent],
+  imports: [TranslocoModule, MarkdownComponent, HeroLinkComponent],
   templateUrl: './landing-page.component.html',
   styleUrls: ['./landing-page.component.scss'],
 })

diff --git a/libs/sites/src/lib/premium-page/premium-page.component.html b/libs/sites/src/lib/premium-page/premium-page.component.html
@@ -6,9 +6,9 @@ <h2 class="heading-hero text-white">
           {{ t('premium-page.articles.tshaped.heading') }}
         </h2>
         <article class="text-box-glass">
-          <markdown
+          <cp-markdown
             [src]="t('premium-page.articles.tshaped.src')"
-          ></markdown>
+          ></cp-markdown>
         </article>
       </div>
     </div>
@@ -20,9 +20,9 @@ <h2 class="heading-hero">
         {{ t('premium-page.articles.softskills.heading') }}
       </h2>
       <article class="text-size-m">
-        <markdown
+        <cp-markdown
           [src]="t('premium-page.articles.softskills.src')"
-        ></markdown>
+        ></cp-markdown>
       </article>
     </div>
   </section>
@@ -34,9 +34,9 @@ <h2 class="heading-hero text-white">
           {{ t('premium-page.articles.understand-business.heading') }}
         </h2>
         <article class="text-box-glass">
-          <markdown
+          <cp-markdown
             [src]="t('premium-page.articles.understand-business.src')"
-          ></markdown>
+          ></cp-markdown>
         </article>
       </div>
     </div>
@@ -49,9 +49,9 @@ <h2 class="heading-hero text-white">
           {{ t('premium-page.articles.analyze-the-core.heading') }}
         </h2>
         <article class="text-box-glass">
-          <markdown
+          <cp-markdown
             [src]="t('premium-page.articles.analyze-the-core.src')"
-          ></markdown>
+          ></cp-markdown>
         </article>
       </div>
     </div>

diff --git a/libs/sites/src/lib/premium-page/premium-page.component.ts b/libs/sites/src/lib/premium-page/premium-page.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { TranslocoModule } from '@ngneat/transloco';
-import { MarkdownModule } from 'ngx-markdown';
+import { MarkdownComponent } from '@cp/ui';
 
 @Component({
   selector: 'cp-premium-page',
   standalone: true,
-  imports: [TranslocoModule, MarkdownModule],
+  imports: [TranslocoModule, MarkdownComponent],
   templateUrl: './premium-page.component.html',
   styleUrls: ['./premium-page.component.scss'],
 })

diff --git a/libs/sites/src/lib/solutions-page/solutions-page.component.html b/libs/sites/src/lib/solutions-page/solutions-page.component.html
@@ -4,7 +4,7 @@
       <div class="content">
         <div class="columns columns-two align-center">
           <article>
-            <markdown [src]="t('solutions.articles.intro.src')"></markdown>
+            <cp-markdown [src]="t('solutions.articles.intro.src')"></cp-markdown>
           </article>
           <img src="/assets/images/experts.svg" />
         </div>
@@ -19,9 +19,9 @@
           <youtube-player class="youtube-player" videoId="QVArEtvAGsk"></youtube-player>
           </div>
           <article>
-            <markdown
+            <cp-markdown
               [src]="t('solutions.articles.werkstatt-nxt.src')"
-            ></markdown>
+            ></cp-markdown>
           </article>
         </div>
       </div>

diff --git a/libs/sites/src/lib/solutions-page/solutions-page.component.ts b/libs/sites/src/lib/solutions-page/solutions-page.component.ts
@@ -1,14 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MarkdownModule } from 'ngx-markdown';
 import { TranslocoModule } from '@ngneat/transloco';
 import { YouTubePlayerModule } from '@angular/youtube-player';
-import { YoutubeService } from '@cp/ui';
+import { MarkdownComponent, YoutubeService } from '@cp/ui';
 
 @Component({
   selector: 'cp-solutions',
   standalone: true,
-  imports: [CommonModule, YouTubePlayerModule, MarkdownModule, TranslocoModule],
+  imports: [
+    CommonModule,
+    YouTubePlayerModule,
+    MarkdownComponent,
+    TranslocoModule,
+  ],
   templateUrl: './solutions-page.component.html',
   styleUrls: ['./solutions-page.component.scss'],
 })

diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -18,3 +18,4 @@ export * from './lib/video-tile/video-tile-icon';
 export * from './lib/video-tile/video-tile.component';
 export * from './lib/youtube.service';
 export * from './lib/scroll-to-top-button/scroll-to-top-button.component';
+export * from './lib/markdown/markdown.component';
diff --git a/libs/ui/src/lib/markdown/markdown.component.html b/libs/ui/src/lib/markdown/markdown.component.html
@@ -0,0 +1,2 @@
+<markdown *ngIf="src" [src]="src" (click)="handleClick($event)"></markdown>
+
diff --git a/libs/ui/src/lib/markdown/markdown.component.ts b/libs/ui/src/lib/markdown/markdown.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MarkdownModule } from 'ngx-markdown';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'cp-markdown',
+  standalone: true,
+  imports: [CommonModule, MarkdownModule],
+  templateUrl: './markdown.component.html',
+})
+export class MarkdownComponent {
+  @Input() src: string | undefined;
+
+  constructor(private router: Router) {}
+
+  async handleClick(event: MouseEvent) {
+    const target = event.target;
+
+    if (!target || target.constructor !== HTMLAnchorElement) return;
+
+    const anchorElement = target as HTMLAnchorElement;
+
+    if (anchorElement.href.startsWith(location.origin)) {
+      event.preventDefault();
+
+      await this.router.navigateByUrl(anchorElement.pathname);
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<markdown *ngIf="src" [src]="src" (click)="handleClick($event)"></markdown>