Skip to content

feat/light-mode #444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

feat/light-mode #444

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d52b3b1
Reapply "feat: enable light mode (#255)" (#443)
marcin-hoa May 13, 2025
956f02b
feat: light mode improvements
marcin-hoa May 19, 2025
c8ace7e
chore: clean-up
marcin-hoa May 19, 2025
38ca2d3
fix: hamburger-button color
marcin-hoa May 19, 2025
e97641f
feat: added theme switcher - wip
marcin-hoa May 19, 2025
9329dcd
feat: added theme switch and fixed cookies consent logic
marcin-hoa May 29, 2025
0445dc3
feat: added theme in gh-giscus component
marcin-hoa May 29, 2025
e0a2694
feat: enhance theming support with light/dark variants and gradient o…
marcin-hoa Jun 4, 2025
5fccbda
fix: typo
marcin-hoa Jun 5, 2025
e957263
fix(client): fixed issue with author card in article
DamianBrzezinskiHoA Aug 12, 2025
18a4c96
fix(client): fixed issue after rebasing to main
DamianBrzezinskiHoA Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/blog/src/assets/icons/arrow-down.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions apps/blog/src/assets/icons/moon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions apps/blog/src/assets/icons/sun.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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) {
Expand Down
5 changes: 5 additions & 0 deletions libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -41,6 +42,10 @@ export class FeatureAboutUsComponent implements OnInit {
return this.authorsCards()?.length || 0;
});

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;
Expand Down
37 changes: 24 additions & 13 deletions libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 });
}
},
}),
Expand All @@ -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');
}
}
}
1 change: 1 addition & 0 deletions libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(),
Expand Down
2 changes: 1 addition & 1 deletion ...re-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="medium">
{{ t('categories.showAll', { category: t(selected().translationPath) }) }}
</button>
</div>
Expand Down
1 change: 0 additions & 1 deletion ...ture-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ import { CategoryListItem, injectCategories } from './categories.const';
NgClass,
TranslocoDirective,
ArticleRegularCardSkeletonComponent,
CardComponent,
RepeatDirective,
RouterLink,
ButtonComponent,
Expand Down
19 changes: 10 additions & 9 deletions ...-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Hard-coded bg-black undermines light-mode theming

Using bg-black forces a dark card in all themes. For light mode, this should be theme-driven (CSS vars or theme variants), not a fixed color.

Consider replacing with a theme-aware class/token (examples, adjust to your setup):

  • If using data-theme variants: bg-white text-gray-900 [data-theme=dark]:bg-black [data-theme=dark]:text-white
  • If using project tokens: bg-al-background text-al-foreground
    Would you like me to generate a patch once you confirm the preferred tokens/variants?
#!/bin/bash
# Locate Tailwind config file
config_file=$(fd 'tailwind.config.*' -t f | head -n1)
echo "Tailwind config file: $config_file"
if [ -n "$config_file" ]; then
  echo "=== Showing first 200 lines of $config_file ==="
  sed -n '1,200p' "$config_file"
fi

# Check for DaisyUI plugin usage
echo "=== Searching for DaisyUI references ==="
rg -n "daisyui" .

# Check for custom theme tokens
echo "=== Searching for 'bg-al-background' ==="
rg -n "bg-al-background" .

echo "=== Searching for 'al-background' ==="
rg -n "al-background" .

# Check for data-theme attribute usage
echo "=== Searching for 'data-theme' ==="
rg -n "data-theme" .

# Check for Tailwind dark variant usage
echo "=== Searching for 'dark:' classes ==="
rg -n "dark:" .

🏁 Script executed:

#!/bin/bash
# Locate Tailwind config file
config_file=$(fd 'tailwind.config.*' -t f | head -n1)
echo "Tailwind config file: $config_file"
if [ -n "$config_file" ]; then
  echo "=== Showing first 200 lines of $config_file ==="
  sed -n '1,200p' "$config_file"
fi

# Check for DaisyUI plugin usage
echo "=== Searching for DaisyUI references ==="
rg -n "daisyui" .

# Check for custom theme tokens
echo "=== Searching for 'bg-al-background' ==="
rg -n "bg-al-background" .

echo "=== Searching for 'al-background' ==="
rg -n "al-background" .

# Check for data-theme attribute usage
echo "=== Searching for 'data-theme' ==="
rg -n "data-theme" .

# Check for Tailwind dark variant usage
echo "=== Searching for 'dark:' classes ==="
rg -n "dark:" .

Length of output: 9683

Hard-coded bg-black breaks light-mode theming
Replace the fixed black background with your project’s theme tokens so the card adapts to both light and dark modes. For example, to match the regular card component you could use the al-card token:

• File:
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
• Lines: 3

Suggested diff:

--- a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
+++ b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
@@ -1,4 +1,4 @@
-    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"
+    class="relative h-full overflow-hidden rounded-lg bg-al-card bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"

If you need a distinct dark-mode override, you can also add a dark: variant (e.g. dark:bg-al-background).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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"
class="relative h-full overflow-hidden rounded-lg bg-al-card bg-cover bg-no-repeat transition-transform hover:scale-105 motion-reduce:transition-none motion-reduce:hover:scale-100"
🤖 Prompt for AI Agents 
In
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
around line 3, the class uses a hard-coded bg-black which breaks light-mode
theming; replace bg-black with the project's theme token (e.g. bg-al-card) and
optionally add a dark: variant (e.g. dark:bg-al-background) so the card adapts
to both light and dark modes while preserving the other utility classes.

[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"
/>
Comment on lines +6 to +13
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Absolute image needs correct positioning and object-fit; fix wrong Tailwind class; clarify accessibility; ensure priority boolean

  • The absolute img lacks positioning (top/left/inset), so it may not anchor to the container’s top-left.
  • bg-contain is a background-image utility; for use object-contain/object-cover.
  • The image appears decorative (background), so alt="" with aria-hidden is more appropriate to avoid noisy SR output.
  • [priority] expects boolean (NgOptimizedImage). Passing number|null relies on coercion. Be explicit.

Apply this diff:

-    <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"
-    />
+    <img
+      alt=""
+      aria-hidden="true"
+      class="absolute inset-0 z-0 h-full w-full object-cover opacity-20"
+      [ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
+      [priority]="!!imagePriority()"
+      width="1215"
+      height="750"
+    />

Notes:

  • If you prefer to keep the image informative, bind alt to the title instead: alt="{{ article().title }}" (but avoid duplicating the visible title for SRs).
  • If cropping is undesirable, use object-contain object-center instead of object-cover.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<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"
/>
<img
alt=""
aria-hidden="true"
class="absolute inset-0 z-0 h-full w-full object-cover opacity-20"
[ngSrc]="article().featuredImageUrl || 'assets/article-placeholder.webp'"
[priority]="!!imagePriority()"
width="1215"
height="750"
/>
🤖 Prompt for AI Agents 
In
libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.html
around lines 6-13, the <img> is absolute but lacks positioning and uses a
background utility; change the Tailwind classes to include explicit positioning
(e.g. top-0 left-0 w-full h-full) and use an object-fit utility (object-cover or
object-contain object-center) instead of bg-contain; mark the image as purely
decorative by setting alt="" and aria-hidden="true" (or if you want it
informative bind alt to article().title instead), and make the priority binding
an explicit boolean (e.g. [priority]="!!imagePriority()" or
[priority]="imagePriority() === true") so NgOptimizedImage receives a boolean.

<div class="relative flex h-full flex-col justify-between text-[#fff]">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Text color hard-coded; add stacking safety for content layer

  • text-[#fff] bypasses theme tokens and may clash in light mode.
  • Ensure content is layered above the overlay/image explicitly.

Apply this diff to enforce stacking (and drop hard-coded hex if tokens exist):

-    <div class="relative flex h-full flex-col justify-between text-[#fff]">
+    <div class="relative z-20 flex h-full flex-col justify-between text-al-foreground">

If text-al-foreground is unavailable, use your theme variant equivalents (e.g., text-gray-900 [data-theme=dark]:text-white).
Additionally, update the overlay (outside this range) to sit between image and content and ignore pointer events:

<!-- Line 16 update example -->
<div class="absolute inset-0 z-10 h-full w-full pointer-events-none hover:bg-al-bottom-radial-gradient"></div>

<div
class="hover:bg-al-bottom-radial-gradient absolute h-full w-full"
></div>
Expand Down
11 changes: 10 additions & 1 deletion ...ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
}
2 changes: 1 addition & 1 deletion ...article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion ...le-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
18 changes: 13 additions & 5 deletions ...-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Inconsistent border approach between themes.

The border styling uses border with dark:border-transparent, but this conflicts with the theme-scoped approach established in the main.scss file. Consider using the --border CSS variable consistently across both themes instead of overriding with Tailwind's dark variant.

-    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"
+    class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border-al-border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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"
class="bg-al-card md:hover:shadow-al-primary group relative h-full w-full rounded-lg border-al-border shadow-none transition-transform motion-reduce:transition-none lg:hover:scale-105 lg:motion-reduce:hover:scale-100"
🤖 Prompt for AI Agents 
In
libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html
around line 3, the element uses Tailwind's generic border class plus
dark:border-transparent which conflicts with the theme-scoped border variable;
replace the hard-coded border classes with the theme-aware border variable
approach (use the --border CSS variable for border color/width via an
appropriate utility or inline style and remove the dark: override) so both light
and dark themes rely on the main.scss --border value; ensure the element no
longer uses the plain "border" and "dark:border-transparent" classes and instead
applies the border using the --border variable consistent with the rest of the
app.

[attr.aria-labelledby]="article().slug"
>
<div
Expand All @@ -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>
Expand All @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
/>
}
@case ('compact') {
<al-article-compact-card [article]="article()" />
<al-article-compact-card
[article]="article()"
[imagePriority]="imagePriority()"
/>
}
}
3 changes: 2 additions & 1 deletion libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
Expand Down
2 changes: 1 addition & 1 deletion .../ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Empty file removed libs/blog/authors/ui-author-card/src/lib/author-card.component.html
View file
Open in desktop
Empty file.
Empty file removed libs/blog/authors/ui-author-card/src/lib/author-card.component.ts
View file
Open in desktop
Empty file.
34 changes: 24 additions & 10 deletions libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, computed, input } from '@angular/core';

import {
CardComponent,
Expand All @@ -13,29 +13,43 @@ import {
class: 'block @container',
},
template: `
<al-card alGradientCard>
<al-card alGradientCard [hideGradient]="hideGradient()">
<div alCardContent>
<div
class="@3xl:flex-row @3xl:border-none flex w-full flex-col items-center rounded-lg border"
class="flex w-full flex-col items-center rounded-lg border"
[class]="cardWrapper()"
>
<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="min-w-fit rounded-lg pt-6 md:min-w-[260px]"
[class]="authorInfoCardClass()"
>
<div
class="@3xl:max-w-[360px] flex w-full flex-col items-center gap-4"
class="flex w-full flex-col items-center gap-4 md:max-w-[360px]"
Expand
Down
>
Comment on lines +28 to 30
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove extraneous text nodes from template.

The template contains standalone text nodes "Expand" and "Down" that appear to be leftover content or debugging artifacts and should be removed.

             <div
               class="flex w-full flex-col items-center gap-4 md:max-w-[360px]"
-              Expand
-              Down
             >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Expand
Down
>
<div
class="flex w-full flex-col items-center gap-4 md:max-w-[360px]"
>
🤖 Prompt for AI Agents 
In
libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts
around lines 28 to 30, there are stray text nodes "Expand" and "Down" in the
template; remove these standalone text nodes so only intended elements and
bindings remain (delete the two words and any surrounding whitespace/newlines so
the template contains only valid markup and components).

<ng-content select="[author-info-card]"></ng-content>
</div>
</div>

<div
class="@3xl:pt-6 w-full flex-1 hyphens-auto break-words p-6 pt-0"
>
<div class="w-full flex-1 hyphens-auto break-words p-6 pt-0 md:pt-6">
<ng-content select="[author-info-description]"></ng-content>
</div>
</div>
</div>
</al-card>
`,
})
export class AuthorCardTemplateComponent {}
export class AuthorCardTemplateComponent {
readonly hideGradient = input<boolean>(true);
readonly articleCard = input<boolean>(false);

protected readonly cardWrapper = computed(() =>
!this.articleCard() ? 'md:flex-row md:border-none' : '',
);

protected readonly authorInfoCardClass = computed(() =>
!this.articleCard()
? 'md:border dark:!bg-al-radial-gradient dark:bg-al-background md:light:bg-[#f2f2f2] pb-6'
: '',
);
}
Loading