release/15_10_2025

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

@@ -9,9 +9,8 @@
     "recommended": "Recommended Articles",
     "angularNews": "Angular News",
     "guides": "Guides",
-    "partners": "Community partners",
-    "mainPartner": "Main partner",
     "angularInDepth": "Angular In Depth",
+    "articleTypes": "Article types",
     "categories": {
       "all": "Latest",
       "news": "News",
@@ -24,15 +23,27 @@
     "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",
     "roadmap": "Roadmap",
+    "toggle_theme": "Toggle theme",
+    "open_search_dialog": "Open search dialog",
     "languagePicker": {
       "pl": "Polish",
-      "en": "English"
+      "en": "English",
+      "select_lang": "Select language"
     }
   },
+  "footer": {
+    "mainPartner": "Main partner",
+    "partners": "Community partners",
+    "al-description": "This is the place where you can learn Angular, discover best practices, and stay updated with the latest news and trends"
+  },
   "authorPage": {
     "posted_by": "Posted by {{name}}"
   },
@@ -203,6 +214,7 @@
     "registerButtonShortened": "Download"
   },
   "search": {
+    "title": "Search articles",
     "no-matches": "No recent matches",
     "results": "{{total}} results"
   },
@@ -218,6 +230,7 @@
     "changeLangToEnglish": "Change language to English"
   },
   "socialLinks": {
+    "title": "Social media",
     "facebook": "Like our Facebook page",
     "twitter-x": "Follow us on X (formerly Twitter)",
     "linkedIn": "Follow us on LinkedIn",

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

@@ -9,9 +9,8 @@
     "recommended": "Polecane Artykuły",
     "angularNews": "Wiadomości ze świata Angulara",
     "guides": "Poradniki",
-    "partners": "Community partnerzy",
-    "mainPartner": "Główny partner",
     "angularInDepth": "Angular In Depth",
+    "articleTypes": "Typy artykułów",
     "categories": {
       "all": "Najnowsze",
       "news": "Nowości",
@@ -24,15 +23,27 @@
     "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",
     "roadmap": "Roadmap",
+    "toggle_theme": "Przełącz motyw",
+    "open_search_dialog": "Otwórz okno wyszukiwania",
     "languagePicker": {
       "pl": "Polski",
-      "en": "Angielski"
+      "en": "Angielski",
+      "select_lang": "Wybierz język"
     }
   },
+  "footer": {
+    "partners": "Community partnerzy",
+    "mainPartner": "Główny partner",
+    "al-description": "To jest miejsce, w którym możesz nauczyć się Angulara, odkrywać najlepsze praktyki i być na bieżąco z najnowszymi wiadomościami i trendami"
+  },
   "home": {
     "latest": "Latest articles"
   },
@@ -206,6 +217,7 @@
     "registerButtonShortened": "Pobierz"
   },
   "search": {
+    "title": "Wyszukiwanie artykułów",
     "no-matches": "Brak wyników",
     "results": "{{total}} wyników"
   },
@@ -221,6 +233,7 @@
     "changeLangToEnglish": "Zmień język na angielski"
   },
   "socialLinks": {
+    "title": "Media społecznościowe",
     "facebook": "Polub nas na Facebooku",
     "twitter-x": "Obserwuj nas na X (dawniej Twitter)",
     "linkedIn": "Obserwuj nas na LinkedInie",

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html

@@ -1,9 +1,9 @@
 <ng-container *transloco="let t; read: 'aboutUsPage'">
-  <h2 class="py-4 text-[40px] font-bold">
+  <h2 class="text-al-primary-foreground py-4 text-[40px] font-bold">
     {{ t('title') }}
   </h2>
 
-  <al-card>
+  <al-card class="bg-transparent">
     <section
       alCardContent
       aria-labelledby="angular-love"
@@ -35,13 +35,18 @@ <h2 class="py-4 text-[40px] font-bold">
     <al-newsletter alCardContent />
   </al-card>
 
-  <h2 class="mb-8 mt-10 text-[40px] font-bold">
+  <h2 class="text-al-primary-foreground mb-8 mt-10 text-[40px] font-bold">
     {{ t('authorsTitle') }}
   </h2>
 </ng-container>
 
 @for (author of authorsCards(); track author.slug) {
-  <al-author-card class="mb-6 block" [author]="author" [linkable]="true" />
+  <al-author-card
+    class="mb-6 block"
+    [author]="author"
+    [linkable]="true"
+    [hideGradient]="hideGradientInAuthorCards()"
+  />
 
   @if ($index === noAuthorsInView() - 2) {
     @defer (on viewport) {

libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts

@@ -16,6 +16,7 @@ import {
 } from '@angular-love/blog/shared/ui-card';
 import { InfiniteScrollTriggerDirective } from '@angular-love/blog/shared/ui-pagination';
 import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-media-icons';
+import { AppThemeStore } from '@angular-love/data-access-app-theme';
 
 @Component({
   selector: 'al-about-us',
@@ -41,6 +42,12 @@ export class FeatureAboutUsComponent implements OnInit {
     return this.authorsCards()?.length || 0;
   });
 
+  private readonly _theme = inject(AppThemeStore).theme;
+
+  readonly hideGradientInAuthorCards = computed(
+    () => this._theme() === 'light',
+  );
+
   private readonly _skip = this._authorListStore.skip;
   private readonly _total = this._authorListStore.total;
   private readonly _pageSize = this._authorListStore.pageSize;

libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts

@@ -1,16 +1,16 @@
 import { isPlatformBrowser } from '@angular/common';
 import { inject, Injectable, PLATFORM_ID } from '@angular/core';
-import { signalStore, withMethods, withState } from '@ngrx/signals';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
 
-type Theme = 'dark' | 'light';
+export type Theme = 'dark' | 'light';
 
 interface AppThemeStore {
   theme: Theme;
 }
 
 export const AppThemeStore = signalStore(
   { providedIn: 'root' },
-  withState<AppThemeStore>({ theme: 'light' }),
+  withState<AppThemeStore>({ theme: 'dark' }),
   withMethods(
     (
       store,
@@ -19,31 +19,41 @@ export const AppThemeStore = signalStore(
     ) => ({
       syncWithSystemTheme: () => {
         if (isPlatformBrowser(platformId)) {
-          ccConsumer.setThemeClass(getSystemTheme());
+          const theme =
+            (localStorage.getItem('theme') as Theme) ?? getSystemTheme();
+          ccConsumer.setThemeAttribute(theme);
+          patchState(store, { theme: theme });
+        }
+      },
+      toggleTheme: () => {
+        if (isPlatformBrowser(platformId)) {
+          const newTheme = store.theme() === 'dark' ? 'light' : 'dark';
+          ccConsumer.setThemeAttribute(newTheme);
+          localStorage.setItem('theme', newTheme);
+          patchState(store, { theme: newTheme });
         }
       },
     }),
   ),
 );
 
 function getSystemTheme(): Theme {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light';
+  // Hardcoded to 'dark' for now, as per decision.
+  return 'dark';
 }
 
 /* todo: create consumer interface and decouple AppThemeStore from CCAppThemeConsumer*/
 @Injectable({ providedIn: 'root' })
 export class CCAppThemeConsumer {
-  setThemeClass(theme: Theme): void {
-    const htmlElement = document.documentElement;
-    switch (theme) {
-      case 'dark':
-        htmlElement.classList.add('cc--darkmode');
-        break;
-      case 'light':
-        htmlElement.classList.remove('cc--darkmode');
-        break;
+  setThemeAttribute(theme: Theme): void {
+    document.documentElement.setAttribute('data-theme', theme);
+
+    const classList = document.documentElement.classList;
+
+    if (theme === 'dark') {
+      classList.add('cc--darkmode');
+    } else {
+      classList.remove('cc--darkmode');
     }
   }
 }

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

@@ -15,7 +15,7 @@
       />
 
       <div class="flex items-center gap-1">
-        <fast-svg name="clock" size="16" />
+        <fast-svg name="clock" aria-hidden="true" size="16" />
         {{ articleDetails().readingTime }} min
       </div>
     </div>
@@ -53,6 +53,7 @@ <h1 id="article-title" class="flex text-[40px] font-bold">
   </section>
   <aside class="order-3 col-span-12 lg:col-span-4">
     <al-author-card
+      [articleCard]="true"
       [author]="articleDetails().author"
       [clampText]="true"
       [linkable]="true"

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

@@ -29,11 +29,15 @@ type ShareItem = {
           [href]="item.href"
           target="_blank"
         >
-          <fast-svg class="text-al-foreground" [name]="item.icon" size="28" />
+          <fast-svg
+            aria-hidden="true"
+            class="text-al-foreground"
+            [name]="item.icon"
+            size="28"
+          />
         </a>
       }
-      <a
-        role="button"
+      <button
         [attr.aria-label]="t('articleShareIcons.urlAriaLabel')"
         [class.url-icon-animated]="animating()"
         [cdkCopyToClipboard]="articleUrl()"
@@ -43,17 +47,19 @@ type ShareItem = {
       >
         <fast-svg
           name="link"
+          aria-hidden="true"
           class="text-al-foreground"
           [class.!hidden]="animating()"
           size="28"
         />
         <fast-svg
           name="circle-check"
+          aria-hidden="true"
           class="text-al-foreground"
           [class.!hidden]="!animating()"
           size="28"
         />
-      </a>
+      </button>
     </div>
   `,
 })

libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html

@@ -11,7 +11,7 @@
     [attr.strict]="config.strict ? '1' : '0'"
     [attr.emitmetadata]="config.emitMetadata ? '1' : '0'"
     [attr.inputposition]="config.inputPosition"
-    [attr.theme]="config.theme"
+    [attr.theme]="theme()"
     src="https://giscus.app/client.js"
     crossorigin="anonymous"
     async

libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts

@@ -14,10 +14,10 @@ import {
   GISCUS_CONFIG,
   provideComments,
 } from '@angular-love/blog/articles/data-access';
+import { AppThemeStore } from '@angular-love/data-access-app-theme';
 
 @Component({
   selector: 'al-giscus-comments',
-  imports: [],
   templateUrl: './giscus-comments.component.html',
   styleUrl: './giscus-comments.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -30,6 +30,7 @@ import {
 export class GiscusCommentsComponent {
   readonly config = inject(GISCUS_CONFIG);
   readonly translocoService = inject(TranslocoService);
+  readonly theme = inject(AppThemeStore).theme;
 
   readonly lang = toSignal(this.translocoService.langChanges$, {
     initialValue: this.translocoService.getActiveLang(),

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

@@ -1,15 +1,24 @@
 <ng-container *transloco="let t; read: 'homePage'">
-  <section class="flex justify-center gap-3">
+  <div
+    role="tablist"
+    class="flex justify-center gap-3"
+    [attr.aria-label]="t('articleTypes')"
+  >
     @for (category of categories(); track $index) {
       <button
         alPill
+        alFocusableItem
+        [tabindex]="selected().name === category.name ? 0 : -1"
+        role="tab"
+        [attr.aria-selected]="selected().name === category.name"
         [variant]="category.name === selected().name ? 'flat' : 'outline'"
         (click)="selected.set(category)"
+        (keydown)="onPillKeydown($event)"
       >
         {{ t(category.translationPath) }}
       </button>
     }
-  </section>
+  </div>
 
   <section
     class="mb-6 mt-6 grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-2 md:gap-x-8 lg:grid-cols-3 lg:gap-y-8"
@@ -24,21 +33,28 @@
           [imagePriority]="i < 2 ? 1 : null"
           cardType="regular"
         />
+        @if (i === 1) {
+          <ng-container *ngTemplateOutlet="newsletterCard" />
+        }
       }
     } @else {
       <al-article-regular-card-skeleton *alRepeat="take" />
+      <ng-container *ngTemplateOutlet="newsletterCard" />
     }
-    <al-card
-      alGradientCard
-      class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
-    >
-      <al-newsletter alCardContent />
-    </al-card>
   </section>
 
   <div class="flex justify-center gap-3">
-    <button al-button role="link" [routerLink]="selected().link">
+    <button al-button role="link" [routerLink]="selected().link" size="medium">
       {{ t('categories.showAll', { category: t(selected().translationPath) }) }}
     </button>
   </div>
+
+  <ng-template #newsletterCard>
+    <al-card
+      alGradientCard
+      class="md:max-lg:col-span-2 lg:col-start-3 lg:row-start-1"
+    >
+      <al-newsletter alCardContent />
+    </al-card>
+  </ng-template>
 </ng-container>