feat: footer tweaks

apps/blog/src/assets/i18n/en.json

@@ -9,8 +9,6 @@
     "recommended": "Recommended Articles",
     "angularNews": "Angular News",
     "guides": "Guides",
-    "partners": "Community partners",
-    "mainPartner": "Main partner",
     "angularInDepth": "Angular In Depth",
     "categories": {
       "all": "Latest",
@@ -24,6 +22,10 @@
     "home": "Home Page",
     "about": "About us",
     "meetups": "Angular Meetups",
+    "guides": "Angular Guides",
+    "news": "Angular News",
+    "in_depth": "In-Depth articles",
+    "partnership": "Let's discuss partnership",
     "become_author": "Become an author",
     "newsletter": "Angular.letter",
     "navLinks": "Navigation links",
@@ -34,6 +36,10 @@
       "en": "English"
     }
   },
+  "footer": {
+    "mainPartner": "Main partner",
+    "partners": "Community partners"
+  },
   "authorPage": {
     "posted_by": "Posted by {{name}}"
   },

apps/blog/src/assets/i18n/pl.json

@@ -9,8 +9,6 @@
     "recommended": "Polecane Artykuły",
     "angularNews": "Wiadomości ze świata Angulara",
     "guides": "Poradniki",
-    "partners": "Community partnerzy",
-    "mainPartner": "Główny partner",
     "angularInDepth": "Angular In Depth",
     "categories": {
       "all": "Najnowsze",
@@ -24,6 +22,10 @@
     "home": "Strona Główna",
     "about": "O nas",
     "meetups": "Angular Meetups",
+    "guides": "Angular Guides",
+    "news": "Angular News",
+    "in_depth": "Artykuły In-Depth",
+    "partnership": "Porozmawiajmy o partnerstwie",
     "become_author": "Zostań autorem",
     "newsletter": "Angular.letter",
     "navLinks": "Menu",
@@ -34,6 +36,10 @@
       "en": "Angielski"
     }
   },
+  "footer": {
+    "partners": "Community partnerzy",
+    "mainPartner": "Główny partner"
+  },
   "home": {
     "latest": "Latest articles"
   },

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

@@ -2,7 +2,4 @@
 
 <al-latest-articles />
 
-<al-articles-list />
-
-<al-partners [partnerList]="[hoaHireUs]" heading="homePage.mainPartner" />
-<al-partners [partnerList]="partnersList" heading="homePage.partners" />
+<al-articles-list class="mb-4 block" />

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

@@ -2,17 +2,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 
 import { ArticlesListContainerComponent } from '@angular-love/blog/articles/feature-list';
-import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
 import { FeatureLatestArticlesComponent } from '@angular-love/feature-latest-articles';
 
-import { hoaHireUs, partnersList } from './partners';
 import { WelcomeMessageComponent } from './welcome-message/welcome-message.component';
 
 @Component({
   selector: 'al-home-page',
   imports: [
     ReactiveFormsModule,
-    PartnersComponent,
     FeatureLatestArticlesComponent,
     ArticlesListContainerComponent,
     WelcomeMessageComponent,
@@ -21,7 +18,4 @@ import { WelcomeMessageComponent } from './welcome-message/welcome-message.compo
   styleUrls: ['./home-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HomePageComponent {
-  protected readonly hoaHireUs = hoaHireUs;
-  protected readonly partnersList = partnersList;
-}
+export class HomePageComponent {}

libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts

@@ -7,12 +7,6 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
   imports: [SocialMediaIconsComponent],
   template: `
     <div class="flex flex-col items-start">
-      <h3
-        id="social-media-title"
-        class="text-al-foreground mb-4 hidden text-sm font-bold lg:block"
-      >
-        Social media
-      </h3>
       <al-social-media-icons variant="default" />
     </div>
   `,

libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html

@@ -1,13 +1,32 @@
-<footer class="bg-al-footer-background w-full">
+<footer
+  *transloco="let t; read: 'footer'"
+  class="bg-al-footer-background w-full"
+>
   <div
     class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
   >
-    <al-footer-logo class="self-center" />
-    <al-navigation [whiteFont]="true" />
-    <div
-      class="social-media-container flex items-center justify-self-end md:max-lg:justify-self-center"
-    >
-      <al-footer-social-media-icons />
+    <div class="logo-container">
+      <div>
+        <al-footer-logo class="mb-1 block" />
+        <div class="text-al-muted mb-4 inline-block max-w-48 text-xs">
+          This is the place where you can learn Angular, discover best
+          practices, and stay updated with the latest news and trends.
+        </div>
+      </div>
+      <al-footer-social-media-icons class="block lg:ml-2" />
+    </div>
+    <al-navigation
+      class="navigation-component"
+      [whiteFont]="true"
+      [cols]="isXlScreen() ? 2 : undefined"
+      [navItems]="navItems"
+    />
+    <div class="partners-container">
+      <div class="mb-5 flex gap-2">
+        <h2>{{ t('mainPartner') }}</h2>
+        <img class="ml-4" [ngSrc]="hoaLogoSrc()" width="100" height="30" />
+      </div>
+      <al-partners [partnerList]="partnersList" heading="footer.partners" />
     </div>
   </div>
   <small class="text-al-muted block pb-4 text-center text-xs">

libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.scss

@@ -1,23 +1,43 @@
-al-footer-logo {
+.logo-container {
   grid-area: logo;
+  display: flex;
+  flex-direction: column;
 }
 
-al-navigation {
+.navigation-component {
   grid-area: nav;
 }
 
-.social-media-container {
-  grid-area: social;
+.partners-container {
+  grid-area: partners;
 }
 
 .al-container {
+  justify-items: center;
+  row-gap: 1rem;
   grid-template-areas:
-    'logo social'
-    'nav nav';
+    'logo'
+    'partners'
+    'nav';
+
+  align-items: start;
+}
+
+@media (min-width: 640px) {
+  .al-container {
+    justify-items: stretch;
+    grid-template-areas:
+      'logo partners'
+      'nav nav';
+  }
+
+  .logo-container {
+    justify-self: center;
+  }
 }
 
-@screen lg {
+@screen xl {
   .al-container {
-    grid-template-areas: 'logo nav social';
+    grid-template-areas: 'logo nav partners';
   }
 }

libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.ts

@@ -1,21 +1,102 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { NgOptimizedImage } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { TranslocoDirective } from '@jsverse/transloco';
+import { map } from 'rxjs';
 
-import { NavigationComponent } from '@angular-love/blog/layouts/ui-navigation';
+import {
+  NavigationComponent,
+  NavItem,
+} from '@angular-love/blog/layouts/ui-navigation';
+import { PartnersComponent } from '@angular-love/blog/partners/ui-partners';
 
 import { FooterLogoComponent } from './components/footer-logo.component';
 import { FooterSocialMediaIconsComponent } from './components/footer-social-media-icons.component';
+import { hoaHireUs, partnersList } from './partners';
 
 @Component({
   selector: 'al-footer',
   imports: [
     NavigationComponent,
     FooterLogoComponent,
     FooterSocialMediaIconsComponent,
+    PartnersComponent,
+    NgOptimizedImage,
+    TranslocoDirective,
   ],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FooterComponent {
+  readonly theme = input.required<'light' | 'dark'>();
+  readonly hoaLogoSrc = computed(() =>
+    this.theme() === 'dark'
+      ? 'assets/HOA_logo_white.png'
+      : 'assets/HOA_logo_blue.png',
+  );
+
   currentYear = new Date().getFullYear();
+  readonly partnersList = partnersList;
+  readonly hoaHireUs = hoaHireUs;
+
+  private readonly _breakpointObserver = inject(BreakpointObserver);
+
+  readonly isXlScreen = toSignal(
+    this._breakpointObserver
+      .observe('(min-width: 1280px)')
+      .pipe(map(({ matches }) => matches)),
+  );
+
+  readonly navItems: NavItem[] = [
+    {
+      translationPath: 'nav.guides',
+      link: ['guides'],
+      dataTestId: 'navigation-guides',
+    },
+    {
+      translationPath: 'nav.about',
+      link: ['about'],
+      dataTestId: 'navigation-about',
+    },
+    {
+      translationPath: 'nav.news',
+      link: ['news'],
+      dataTestId: 'navigation-news',
+    },
+    {
+      translationPath: 'nav.become_author',
+      link: ['become-author'],
+      dataTestId: 'navigation-become-author',
+    },
+    {
+      translationPath: 'nav.meetups',
+      link: ['https://meetup.angular.love/'],
+      externalLink: true,
+      dataTestId: 'navigation-meetups',
+    },
+    {
+      translationPath: 'nav.newsletter',
+      link: ['newsletter'],
+      dataTestId: 'navigation-newsletter',
+    },
+    {
+      translationPath: 'nav.in_depth',
+      link: ['angular-in-depth'],
+      dataTestId: 'navigation-in-depth',
+    },
+    {
+      translationPath: 'nav.partnership',
+      link: ['mailto:[email protected]'],
+      externalLink: true,
+      dataTestId: 'navigation-partnership',
+    },
+  ];
 }

libs/blog/layouts/ui-layouts/src/lib/header/components/header-mobile-menu.component.ts

@@ -9,6 +9,7 @@ import {
 import {
   LanguagePickerComponent,
   NavigationComponent,
+  NavItem,
 } from '@angular-love/blog/layouts/ui-navigation';
 
 @Component({
@@ -20,7 +21,11 @@ import {
       [ngClass]="{ 'translate-y-[100%]': isOpened() }"
       [attr.aria-hidden]="isOpened()"
     >
-      <al-navigation (navigated)="closed.emit()" layout="vertical">
+      <al-navigation
+        [navItems]="navItems"
+        (navigated)="closed.emit()"
+        layout="vertical"
+      >
         <li class="flex justify-center">
           <al-language-picker
             [language]="language()"
@@ -34,6 +39,25 @@ import {
   imports: [NavigationComponent, NgClass, LanguagePickerComponent],
 })
 export class HeaderMobileMenuComponent {
+  readonly navItems: NavItem[] = [
+    {
+      translationPath: 'nav.guides',
+      link: ['guides'],
+      dataTestId: 'navigation-guides',
+    },
+    {
+      translationPath: 'nav.news',
+      link: ['news'],
+      dataTestId: 'navigation-news',
+    },
+    {
+      translationPath: 'nav.meetups',
+      link: ['https://meetup.angular.love/'],
+      externalLink: true,
+      dataTestId: 'navigation-meetups',
+    },
+  ];
+
   readonly isOpened = input.required<boolean>();
   readonly language = input.required<string>();
 

libs/blog/layouts/ui-layouts/src/lib/header/header.component.ts

@@ -12,6 +12,7 @@ import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 import {
   LanguagePickerComponent,
   NavigationComponent,
+  NavItem,
 } from '@angular-love/blog/layouts/ui-navigation';
 
 import {
@@ -33,7 +34,7 @@ import {
       >
         <al-header-logo />
 
-        <al-navigation class="hidden lg:block" [showNewsletter]="false" />
+        <al-navigation class="hidden lg:block" [navItems]="navItems" />
 
         <div class="flex flex-row items-center">
           <al-language-picker
@@ -84,6 +85,25 @@ import {
   ],
 })
 export class HeaderComponent {
+  readonly navItems: NavItem[] = [
+    {
+      translationPath: 'nav.guides',
+      link: ['guides'],
+      dataTestId: 'navigation-guides',
+    },
+    {
+      translationPath: 'nav.news',
+      link: ['news'],
+      dataTestId: 'navigation-news',
+    },
+    {
+      translationPath: 'nav.meetups',
+      link: ['https://meetup.angular.love/'],
+      externalLink: true,
+      dataTestId: 'navigation-meetups',
+    },
+  ];
+
   readonly language = input.required<string>();
   readonly theme = input.required<'light' | 'dark'>();