feat: move indepth banner above indepth section (#318)

Author: dokolyski

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

@@ -1,3 +1,4 @@
 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';
+export * from './lib/instances/al-indepth-banner.component';

libs/blog/ad-banner/ui/src/lib/instances/al-indepth-banner.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+import { AdImageBannerComponent } from '../ad-image-banner/ad-image-banner.component';
+
+@Component({
+  selector: 'al-indepth-banner',
+  standalone: true,
+  imports: [AdImageBannerComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <al-ad-image-banner [banner]="banner()!" />
+  `,
+})
+export class AlIndepthBannerComponent {
+  protected readonly banner = signal({
+    url: 'assets/AL-AID-banner.png',
+    alt: 'Banner - Two blogs join forces',
+    slug: 'angular-love-joins-forces-with-angular-in-depth-to-bring-you-the-best-angular-on-the-web',
+  });
+}

libs/blog/articles/feature-list/src/lib/articles-list-container.component.html

@@ -9,6 +9,7 @@
 
 @if (activeLang === 'en') {
   <div class="mb-10 mt-10">
+    <al-indepth-banner />
     <al-category-section-container category="angular-in-depth" />
   </div>
 }

libs/blog/articles/feature-list/src/lib/articles-list-container.component.ts

@@ -7,6 +7,7 @@ import {
 import { TranslocoService } from '@jsverse/transloco';
 
 import { ArticleListStore } from '@angular-love/blog/articles/data-access';
+import { AlIndepthBannerComponent } from '@angular-love/blog/shared/ad-banner';
 import { ArticlePreview } from '@angular-love/contracts/articles';
 import { RepeatDirective } from '@angular-love/utils';
 
@@ -15,7 +16,11 @@ import { CategorySectionContainerComponent } from './category-section-container/
 @Component({
   selector: 'al-articles-list',
   templateUrl: './articles-list-container.component.html',
-  imports: [RepeatDirective, CategorySectionContainerComponent],
+  imports: [
+    RepeatDirective,
+    CategorySectionContainerComponent,
+    AlIndepthBannerComponent,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
 })

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

@@ -1,4 +1,3 @@
-<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.ts

@@ -1,8 +1,5 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 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';
@@ -35,18 +32,4 @@ 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',
-      })),
-    ),
-  );
 }