fix: improve article-card light mode styles

+ fix author-card light mode
+ fix article-card storybook

Author: dokolyski

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

@@ -48,7 +48,7 @@ const articleDetails: Article = {
     github: '',
     linkedin: '',
     twitter: '',
-    titles: ['Software Engineer', 'GDE'],
+    titles: ['blogger', 'gde'],
   },
   anchors: [],
   publishDate: new Date('2021-01-01').toISOString(),

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,4 +1,4 @@
-import { DatePipe } from '@angular/common';
+import { DatePipe, NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
@@ -19,9 +19,11 @@ import { UiDifficultyComponent } from '@angular-love/blog/shared/ui-difficulty';
     UiDifficultyComponent,
     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-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"
+    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

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-card/src/lib/ui-article-card/ui-article-card.component.ts

@@ -22,7 +22,6 @@ export type CardType = 'regular' | 'horizontal' | 'compact' | 'hero';
   host: {
     'data-testid': 'article-card',
     '[attr.id]': 'article().slug',
-    class: 'light:border light:rounded-lg',
   },
 })
 export class UiArticleCardComponent {

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

@@ -20,7 +20,7 @@ import {
           class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"
         >
           <div
-            class="@3xl:border dark:@3xl:!bg-al-radial-gradient dark:@3xl:bg-al-background light:bg-[#f2f2f2] @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"