feat/light-mode

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,7 +35,7 @@ <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>

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,7 +19,18 @@ 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 });
         }
       },
     }),
@@ -35,15 +46,15 @@ function getSystemTheme(): Theme {
 /* 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-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

@@ -37,7 +37,7 @@
   </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="small">
       {{ t('categories.showAll', { category: t(selected().translationPath) }) }}
     </button>
   </div>

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

@@ -38,7 +38,6 @@ import { CategoryListItem, injectCategories } from './categories.const';
     NgClass,
     TranslocoDirective,
     ArticleRegularCardSkeletonComponent,
-    CardComponent,
     RepeatDirective,
     RouterLink,
     ButtonComponent,

libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html

@@ -1,16 +1,17 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="h-full rounded-lg bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
-    [style.background-image]="
-      'url(' +
-      (article().featuredImageUrl || 'assets/article-placeholder.webp') +
-      ')'
-    "
+    class="relative h-full overflow-hidden rounded-lg bg-black bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
     [attr.aria-labelledby]="article().slug"
   >
-    <div
-      class="bg-al-background relative flex h-full flex-col justify-between opacity-85"
-    >
+    <img
+      alt="Post featured image"
+      class="absolute h-auto w-full bg-contain opacity-20"
+      [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
+      [priority]="imagePriority()"
+      width="1215"
+      height="750"
+    />
+    <div class="relative flex h-full flex-col justify-between text-[#fff]">
       <div
         class="hover:bg-al-bottom-radial-gradient absolute h-full w-full"
       ></div>

libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts

@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
@@ -9,9 +10,17 @@ import { AvatarComponent } from '@angular-love/blog/shared/ui-avatar';
 @Component({
   selector: 'al-article-compact-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AvatarComponent, RouterLink, AlLocalizePipe, FastSvgComponent],
+  standalone: true,
+  imports: [
+    AvatarComponent,
+    RouterLink,
+    AlLocalizePipe,
+    FastSvgComponent,
+    NgOptimizedImage,
+  ],
   templateUrl: './article-compact-card.component.html',
 })
 export class ArticleCompactCardComponent {
   readonly article = input.required<ArticleCard>();
+  readonly imagePriority = input<number | null>(null);
 }

libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts

@@ -7,7 +7,7 @@ import { CardComponent } from '@angular-love/blog/shared/ui-card';
   selector: 'al-article-hero-card-skeleton',
   imports: [NgxSkeletonLoaderModule, CardComponent],
   template: `
-    <al-card>
+    <al-card class="bg-transparent">
       <div alCardContent class="p-2">
         <div class="flex flex-row items-center">
           <!-- avatar -->

libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html

@@ -1,6 +1,6 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="group relative flex h-full w-full flex-row rounded-lg shadow-none max-h-52"
+    class="light:border group relative flex h-full w-full flex-row rounded-lg shadow-none"
     [attr.aria-labelledby]="article().slug"
   >
     <img

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html

@@ -1,6 +1,6 @@
 <a [routerLink]="['/', article().slug] | alLocalize">
   <article
-    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border border-transparent shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"
+    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100 dark:border-transparent"
     [attr.aria-labelledby]="article().slug"
   >
     <div
@@ -18,8 +18,12 @@
     <div class="rounded-b-lg">
       <div class="flex items-center justify-between px-4 pt-4">
         <div class="flex items-center gap-2">
-          <al-avatar [imageSrc]="article().author.avatarUrl" size="32" />
-          <span class="text-sm/[14px] font-medium">
+          <al-avatar
+            [imageSrc]="article().author.avatarUrl"
+            [priority]="imagePriority()"
+            size="32"
+          />
+          <span class="text-al-primary-foreground text-sm/[14px] font-medium">
             {{ article().author.name }}
           </span>
         </div>
@@ -34,10 +38,14 @@
         </div>
       </div>
       <div class="flex flex-col gap-3 px-4 pb-4 pt-3">
-        <h3 class="text-2xl font-bold" [id]="article().slug">
+        <h3
+          class="*:text-al-primary-foreground text-2xl font-bold *:not-italic"
+          [id]="article().slug"
+          style="word-break: break-word"
+        >
           {{ article().title }}
         </h3>
-        <p class="line-clamp-2">
+        <p class="*:text-al-pink line-clamp-2 *:font-medium *:not-italic">
           {{ article().excerpt }}
         </p>
       </div>

libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html

@@ -12,6 +12,9 @@
     />
   }
   @case ('compact') {
-    <al-article-compact-card [article]="article()" />
+    <al-article-compact-card
+      [article]="article()"
+      [imagePriority]="imagePriority()"
+    />
   }
 }

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss

@@ -5,7 +5,7 @@
   margin-top: 1.6rem;
 }
 
-@media (prefers-color-scheme: dark) {
+:root[data-theme='dark'] {
   .shiki,
   .shiki span {
     color: var(--shiki-dark) !important;
@@ -53,6 +53,7 @@
   code:not(pre code) {
     padding: 0.2em 0.4em;
     background: #2e2f3b;
+    color: white;
     border-radius: 4px;
     font-size: 0.85rem;
     font-weight: 600;

libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts

@@ -12,7 +12,6 @@ import { DomSanitizer } from '@angular/platform-browser';
   selector: 'al-article-content',
   templateUrl: './article-content.component.html',
   styleUrl: './article-content.component.scss',
-  imports: [],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html

@@ -1,7 +1,7 @@
 <div class="my-5 flex flex-row items-center justify-between gap-6">
   <h2
     data-testId="article-list-title"
-    class="line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
+    class="text-al-primary-foreground line-clamp-2 max-w-[160px] text-xl font-bold md:line-clamp-1 md:max-w-full lg:text-3xl"
   >
     {{ title() }}
   </h2>

libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts

@@ -3,23 +3,23 @@ import { Component } from '@angular/core';
 import {
   CardComponent,
   CardContentDirective,
-  GradientCardDirective,
 } from '@angular-love/blog/shared/ui-card';
 
 @Component({
   selector: 'al-author-card-template',
-  imports: [CardComponent, CardContentDirective, GradientCardDirective],
+  standalone: true,
+  imports: [CardComponent, CardContentDirective],
   host: {
     class: 'block @container',
   },
   template: `
-    <al-card alGradientCard>
+    <al-card>
       <div alCardContent>
         <div
           class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"
         >
           <div
-            class="@3xl:border @3xl:!bg-al-radial-gradient @3xl:bg-al-background @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
+            class="@3xl:border dark:@3xl:!bg-al-radial-gradient dark:@3xl:bg-al-background light:@3xl:bg-[#f2f2f2] @3xl:min-w-[260px] min-w-fit rounded-lg pb-4 pt-6"
           >
             <div
               class="@3xl:max-w-[360px] flex w-full flex-col items-center gap-4"

libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html

@@ -42,7 +42,7 @@
     <div class="flex flex-col items-center gap-4">
       <al-avatar [imageSrc]="author().avatarUrl" size="96" />
       <span
-        class="line-clamp-2 font-bold leading-none"
+        class="text-al-foreground line-clamp-2 font-bold leading-none"
         [id]="'author-title-' + author().slug"
       >
         {{ author().name }}

libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html

@@ -27,13 +27,13 @@ <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
             class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
           >
             <a
-              class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
+              al-button
+              class="h-[46px] w-full"
+              [size]="'small'"
               href="https://form.typeform.com/to/Zzf1Girt?typeform-source=angular.love"
               target="_blank"
             >
-              <p class="text-sm font-bold">
-                {{ t('becomeAuthorCard.buttonText') }}
-              </p>
+              {{ t('becomeAuthorCard.buttonText') }}
             </a>
           </div>
         </al-become-author-advertisement>
@@ -58,12 +58,12 @@ <h3 id="author-ad-title" class="text-2xl font-bold lg:text-4xl">
             class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center"
           >
             <a
-              class="bg-al-pink flex h-[46px] w-full items-center justify-center rounded-lg md:w-4/5 lg:w-full"
+              al-button
+              class="h-[46px] w-full"
+              [size]="'small'"
               [routerLink]="'/writing-rules' | alLocalize"
             >
-              <p class="text-center text-sm font-bold">
-                {{ t('articleWritingRules.buttonText') }}
-              </p>
+              {{ t('articleWritingRules.buttonText') }}
             </a>
           </div>
         </al-become-author-advertisement>

libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts

@@ -3,6 +3,7 @@ import { RouterLink } from '@angular/router';
 import { TranslocoDirective } from '@jsverse/transloco';
 
 import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
+import { ButtonComponent } from '@angular-love/blog/shared/ui-button';
 import {
   CardComponent,
   GradientCardDirective,
@@ -23,6 +24,7 @@ import { BecomeAuthorImprovementsComponent } from '../components/become-author-i
     TranslocoDirective,
     RouterLink,
     AlLocalizePipe,
+    ButtonComponent,
   ],
   templateUrl: './become-author-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,