feat(blog): new image banner (#307)

Author: majahendzel-va

apps/blog/src/assets/AL-AID-banner.png

@@ -1 +1,3 @@
 export * from './lib/ad-banner/ad-banner.component';
+export * from './lib/ad-image-banner/ad-image-banner.component';
+export * from './lib/ad-image-banner/ad-image-banner-data.interface';

libs/blog/ad-banner/ui/src/index.ts

@@ -0,0 +1,5 @@
+export interface AdImageBanner {
+  url: string;
+  alt: string;
+  slug: string;
+}

libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner-data.interface.ts

@@ -0,0 +1,13 @@
+<aside>
+  <img
+    tabindex="0"
+    role="button"
+    class="!relative cursor-pointer"
+    [attr.aria-label]="banner().alt"
+    [ngSrc]="banner().url"
+    (click)="navigateFromBanner()"
+    (keydown.enter)="navigateFromBanner()"
+    fill
+    priority
+  />
+</aside>

libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.html

@@ -0,0 +1,26 @@
+import { NgOptimizedImage } from '@angular/common';
+import { Component, inject, input } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AlLocalizeService } from '@angular-love/blog/i18n/util';
+
+import { AdImageBanner } from './ad-image-banner-data.interface';
+
+@Component({
+  selector: 'al-ad-image-banner',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  templateUrl: './ad-image-banner.component.html',
+})
+export class AdImageBannerComponent {
+  banner = input.required<AdImageBanner>();
+
+  private readonly _router = inject(Router);
+  private readonly _localizeService = inject(AlLocalizeService);
+
+  navigateFromBanner(): void {
+    this._router.navigate(
+      this._localizeService.localizePath(['/', this.banner()!.slug]),
+    );
+  }
+}

libs/blog/ad-banner/ui/src/lib/ad-image-banner/ad-image-banner.component.ts

@@ -1,3 +1,4 @@
+<al-ad-image-banner [banner]="banner()!"></al-ad-image-banner>
 <al-latest-articles />
 <al-articles-list />
 <al-partners [partnerList]="[hoaHireUs]" title="homePage.mainPartner" />

libs/blog/home/feature-home/src/lib/home-page/home-page.component.html

@@ -1,10 +1,14 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule } from '@angular/forms';
+import { TranslocoService } from '@jsverse/transloco';
+import { map } from 'rxjs';
 
 import { ArticlesListContainerComponent } from '@angular-love/blog/articles/feature-list';
 import { UiArticleCardComponent } from '@angular-love/blog/articles/ui-article-card';
 import { NewsletterComponent } from '@angular-love/blog/newsletter';
 import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
+import { AdImageBannerComponent } from '@angular-love/blog/shared/ad-banner';
 import { CardComponent } from '@angular-love/blog/shared/ui-card';
 import { FeatureLatestArticlesComponent } from '@angular-love/feature-latest-articles';
 
@@ -22,6 +26,7 @@ import { hoaHireUs, partnersList } from './partners';
     FeatureLatestArticlesComponent,
     UiArticleCardComponent,
     ArticlesListContainerComponent,
+    AdImageBannerComponent,
   ],
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
@@ -30,4 +35,18 @@ import { hoaHireUs, partnersList } from './partners';
 export class HomePageComponent {
   protected readonly hoaHireUs = hoaHireUs;
   protected readonly partnersList = partnersList;
+  private readonly _translocoService = inject(TranslocoService);
+
+  readonly banner = toSignal(
+    this._translocoService.langChanges$.pipe(
+      map((activeLang) => ({
+        url: 'assets/AL-AID-banner.png',
+        alt: 'Banner - Two blogs join forces',
+        slug:
+          activeLang === 'en'
+            ? 'angular-love-joins-forces-with-angular-in-depth-to-bring-you-the-best-angular-on-the-web'
+            : 'laczymy-sily-z-angular-in-depth-by-dostarczyc-wam-najlepsze-tresci-o-angularze',
+      })),
+    ),
+  );
 }