feat(main): newsletter & top banners

Author: majahendzel-va

libs/blog-bff/banners/api/src/lib/dtos.ts

@@ -1,11 +1,22 @@
 export interface WPBannerDto {
   id: number;
   acf: {
+    is_slider_banner_displayed: boolean;
     display_time: string;
     slides: {
-      slide_image: number /* slideId */;
+      slide_image_desktop: number /* slideId */;
+      slide_image_mobile: number /* slideId */;
       slide_url: string /* url to navigate to after click */;
     }[];
+
+    is_top_banner_displayed: boolean;
+    top_banner_image_desktop: number /* mediaId */;
+    top_banner_image_mobile: number /* mediaId */;
+    top_banner_image_url: string /* url to navigate to after click */;
+
+    is_card_banner_displayed: boolean;
+    card_banner_image: number /* mediaId */;
+    card_banner_url: string /* url to navigate to after click */;
   };
 }
 

libs/blog-bff/banners/api/src/lib/mappers.ts

@@ -1,20 +1,46 @@
-import { Slider } from '@angular-love/blog/contracts/banners';
+import { Banners } from '@angular-love/blog/contracts/banners';
 
 import { WPBannerDto, WPBannerMediaDto } from './dtos';
 
 export const toBanner = (
   dto: WPBannerDto,
   mediaDto: WPBannerMediaDto[],
-): Slider => {
+): Banners => {
   return {
-    slideDisplayTimeMs: +dto.acf.display_time,
-    slides: dto.acf.slides.map((slide) => {
-      const media = mediaDto.find((media) => media.id === slide.slide_image)!;
-      return {
-        url: media.guid.rendered,
-        alt: media.alt_text,
-        navigateTo: slide.slide_url,
-      };
+    ...(dto.acf.is_slider_banner_displayed && {
+      slider: {
+        slideDisplayTimeMs: +dto.acf.display_time,
+        slides: dto.acf.slides.map((slide) => {
+          const media = mediaDto.find(
+            (media) => media.id === slide.slide_image_desktop,
+          )!;
+          return {
+            url: media?.guid.rendered,
+            alt: media?.alt_text,
+            navigateTo: slide.slide_url,
+          };
+        }),
+      },
+    }),
+    ...(dto.acf.is_top_banner_displayed && {
+      topBanner: {
+        url: mediaDto.find(
+          (media) => media.id === dto.acf.top_banner_image_desktop,
+        )?.guid.rendered,
+        alt: mediaDto.find(
+          (media) => media.id === dto.acf.top_banner_image_desktop,
+        )?.alt_text,
+        navigateTo: dto.acf.top_banner_image_url,
+      },
+    }),
+    ...(dto.acf.is_card_banner_displayed && {
+      cardBanner: {
+        url: mediaDto.find((media) => media.id === dto.acf.card_banner_image)
+          ?.guid.rendered,
+        alt: mediaDto.find((media) => media.id === dto.acf.card_banner_image)
+          ?.alt_text,
+        navigateTo: dto.acf.card_banner_url,
+      },
     }),
   };
 };

libs/blog-contracts/banners/src/lib/banners.ts

@@ -1,8 +1,26 @@
 export interface Slider {
   slideDisplayTimeMs: number;
   slides: {
-    url: string;
-    alt: string;
+    url?: string;
+    alt?: string;
     navigateTo: string;
   }[];
 }
+
+export interface TopBanner {
+  url?: string;
+  alt?: string;
+  navigateTo: string;
+}
+
+export interface CardBanner {
+  url?: string;
+  alt?: string;
+  navigateTo: string;
+}
+
+export interface Banners {
+  slider?: Slider;
+  topBanner?: TopBanner;
+  cardBanner?: CardBanner;
+}

libs/blog/ad-banner/data-access/src/lib/infrastructure/ad-banner.service.ts

@@ -1,15 +1,15 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
 
-import { Slider } from '@angular-love/blog/contracts/banners';
+import { Banners } from '@angular-love/blog/contracts/banners';
 import { ConfigService } from '@angular-love/shared/config';
 
 @Injectable({ providedIn: 'root' })
 export class AdBannerService {
   private readonly _apiBaseUrl = inject(ConfigService).get('apiBaseUrl');
   private readonly _http = inject(HttpClient);
 
-  getBannerSlider() {
-    return this._http.get<Slider>(`${this._apiBaseUrl}/banners`);
+  getVisibleBanners() {
+    return this._http.get<Banners>(`${this._apiBaseUrl}/banners`);
   }
 }

libs/blog/ad-banner/data-access/src/lib/state/ad-banner.store.ts

@@ -4,16 +4,16 @@ import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { pipe, switchMap } from 'rxjs';
 
-import { Slider } from '@angular-love/blog/contracts/banners';
+import { Banners } from '@angular-love/blog/contracts/banners';
 
 import { AdBannerService } from '../infrastructure/ad-banner.service';
 
 type AdBannerState = {
-  slider: Slider | null;
+  banners: Banners | null;
 };
 
 const initialState: AdBannerState = {
-  slider: null,
+  banners: null,
 };
 
 export const AdBannerStore = signalStore(
@@ -23,10 +23,10 @@ export const AdBannerStore = signalStore(
     getData: rxMethod<void>(
       pipe(
         switchMap(() =>
-          adBannerService.getBannerSlider().pipe(
+          adBannerService.getVisibleBanners().pipe(
             tapResponse({
-              next: (slider) => {
-                patchState(store, { slider });
+              next: (banners) => {
+                patchState(store, { banners });
               },
               error: () => {
                 patchState(store);

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

@@ -4,6 +4,7 @@
     role="button"
     class="!relative cursor-pointer"
     [attr.aria-label]="banner().alt"
+    [alt]="banner().alt"
     [ngSrc]="banner().url"
     (click)="navigateFromBanner()"
     (keydown.enter)="navigateFromBanner()"

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html

@@ -62,8 +62,8 @@ <h2 id="article-title" class="flex text-[40px] font-bold">
       <div
         class="sticky top-24 mt-5 hidden flex-col gap-4 lg:flex"
         [ngClass]="{
-          'top-24': !adBannerStoreVisible(),
-          'top-48': adBannerStoreVisible()
+          'top-24': !bannerStore.banners()?.topBanner,
+          'top-48': bannerStore.banners()?.topBanner,
         }"
       >
         @if (articleDetails().anchors.length) {

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.ts

@@ -2,11 +2,12 @@ import { DatePipe, NgClass } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
+  inject,
   input,
-  signal,
 } from '@angular/core';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 
+import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { GiscusCommentsComponent } from '@angular-love/blog/articles/feature-comments';
 import { RelatedArticlesComponent } from '@angular-love/blog/articles/feature-related-articles';
 import { ArticleCompactCardSkeletonComponent } from '@angular-love/blog/articles/ui-article-card';
@@ -57,5 +58,5 @@ import { ArticleShareIconsComponent } from '../article-share-icons/article-share
 })
 export class ArticleDetailsComponent {
   readonly articleDetails = input.required<Article>();
-  protected readonly adBannerStoreVisible = signal(false);
+  protected readonly bannerStore = inject(AdBannerStore);
 }

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html

@@ -21,10 +21,52 @@
   } @else {
     <al-article-regular-card-skeleton *alRepeat="4" />
   }
-  <al-card
-    alGradientCard
-    class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
+  <div
+    class="relative flex items-center md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
   >
-    <al-newsletter alCardContent />
-  </al-card>
+    <!-- when "newsletter banner" exist put it in place of the real newsletter -->
+    @if (cardBanner()) {
+      <aside
+        style="
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          overflow: hidden;
+          border-radius: 8px;
+        "
+      >
+        <img
+          tabindex="0"
+          role="button"
+          class="!relative cursor-pointer shadow-inner blur-xl"
+          [attr.aria-label]="cardBanner()!.alt!"
+          [alt]="cardBanner()!.alt!"
+          [ngSrc]="cardBanner()!.url!"
+          (click)="navigateFromBanner()"
+          (keydown.enter)="navigateFromBanner()"
+          style="object-fit: cover"
+          fill
+          priority
+        />
+      </aside>
+      <aside>
+        <div style="box-shadow: 0 0 8px 8px blue inset">
+          <img
+            tabindex="0"
+            role="button"
+            class="!relative cursor-pointer"
+            [attr.aria-label]="cardBanner()!.alt!"
+            [alt]="cardBanner()!.alt!"
+            [ngSrc]="cardBanner()!.url!"
+            (click)="navigateFromBanner()"
+            (keydown.enter)="navigateFromBanner()"
+            fill
+            priority
+          />
+        </div>
+      </aside>
+    } @else {
+      <al-newsletter alCardContent />
+    }
+  </div>
 </section>

libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts

@@ -1,7 +1,14 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { NgClass, NgOptimizedImage } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+} from '@angular/core';
+import { Router } from '@angular/router';
 import { TranslocoDirective } from '@jsverse/transloco';
 
+import { AdBannerStore } from '@angular-love/blog/ad-banner/data-access';
 import { ArticleListStore } from '@angular-love/blog/articles/data-access';
 import {
   ArticleRegularCardSkeletonComponent,
@@ -11,7 +18,7 @@ import { UiArticleListTitleComponent } from '@angular-love/blog/articles/ui-arti
 import { NewsletterComponent } from '@angular-love/blog/newsletter';
 import {
   CardComponent,
-  GradientCardDirective,
+  CardContentDirective,
 } from '@angular-love/blog/shared/ui-card';
 import { RepeatDirective } from '@angular-love/utils';
 
@@ -24,12 +31,12 @@ import { RepeatDirective } from '@angular-love/utils';
     UiArticleCardComponent,
     NewsletterComponent,
     CardComponent,
-    GradientCardDirective,
     NgClass,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,
-    CardComponent,
     RepeatDirective,
+    CardContentDirective,
+    NgOptimizedImage,
   ],
   host: {
     'data-testid': 'latest-articles-container',
@@ -38,6 +45,11 @@ import { RepeatDirective } from '@angular-love/utils';
 })
 export class FeatureLatestArticlesComponent {
   private readonly _articleListStore = inject(ArticleListStore);
+  private readonly _router = inject(Router);
+  private readonly _bannerStore = inject(AdBannerStore);
+  protected readonly cardBanner = computed(
+    () => this._bannerStore.banners()?.cardBanner,
+  );
 
   readonly isFetchArticleListLoading =
     this._articleListStore.isFetchArticleListLoading;
@@ -53,4 +65,8 @@ export class FeatureLatestArticlesComponent {
       excludeCategory: 'angular-in-depth-en',
     });
   }
+
+  navigateFromBanner() {
+    this._router.navigate([this.cardBanner()?.url]);
+  }
 }