diff --git a/apps/blog/src/assets/icons/arrow-down.svg b/apps/blog/src/assets/icons/arrow-down.svg index e185563aa..62a34851b 100644 --- a/apps/blog/src/assets/icons/arrow-down.svg +++ b/apps/blog/src/assets/icons/arrow-down.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/apps/blog/src/assets/icons/moon.svg b/apps/blog/src/assets/icons/moon.svg new file mode 100644 index 000000000..75c6b5174 --- /dev/null +++ b/apps/blog/src/assets/icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/blog/src/assets/icons/sun.svg b/apps/blog/src/assets/icons/sun.svg new file mode 100644 index 000000000..cd8f68d5f --- /dev/null +++ b/apps/blog/src/assets/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html b/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html index f4e1957f8..8e5dc2e74 100644 --- a/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html +++ b/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.html @@ -1,9 +1,9 @@ -

+

{{ t('title') }}

- +
-

+

{{ t('authorsTitle') }}

@for (author of authorsCards(); track author.slug) { - + @if ($index === noAuthorsInView() - 2) { @defer (on viewport) { diff --git a/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts b/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts index 7b1377788..e0281fed5 100644 --- a/libs/blog/about-us/feature-about-us/src/lib/feature-about-us/feature-about-us.component.ts +++ b/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,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; diff --git a/libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts b/libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts index c7cdaebe9..6a9085f3b 100644 --- a/libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts +++ b/libs/blog/app-theme/data-access-app-theme/src/app-theme.store.ts @@ -1,8 +1,8 @@ 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; @@ -10,7 +10,7 @@ interface AppThemeStore { export const AppThemeStore = signalStore( { providedIn: 'root' }, - withState({ theme: 'light' }), + withState({ 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'); } } } diff --git a/libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html b/libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html index 40e24724b..206552b03 100644 --- a/libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.html +++ b/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 diff --git a/libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts b/libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts index 41e7dde05..6ceb99dfc 100644 --- a/libs/blog/articles/feature-comments/src/lib/giscus-comments/giscus-comments.component.ts +++ b/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(), diff --git a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html index 940fa856b..17802ad09 100644 --- a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html +++ b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.html @@ -37,7 +37,7 @@
-
diff --git a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts b/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts index 5663766e9..c49e13dae 100644 --- a/libs/blog/articles/feature-latest-articles/src/lib/feature-latest-articles/feature-latest-articles.component.ts +++ b/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, diff --git 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 index b640f9a37..bb0deb591 100644 --- 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,16 +1,17 @@
-
+ Post featured image +
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts b/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts index 3a3b38cc3..ffe7f561a 100644 --- a/libs/blog/articles/ui-article-card/src/lib/components/article-compact-card/article-compact-card.component.ts +++ b/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(); + readonly imagePriority = input(null); } diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts b/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts index 9bbe59787..bfc4063b8 100644 --- a/libs/blog/articles/ui-article-card/src/lib/components/article-hero-card/article-hero-card-skeleton.component.ts +++ b/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: ` - +
diff --git a/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html b/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html index 5e6de07f9..43aedf05d 100644 --- a/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html +++ b/libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.html @@ -1,6 +1,6 @@
- - + + {{ article().author.name }}
@@ -34,10 +38,14 @@
-

+

{{ article().title }}

-

+

{{ article().excerpt }}

diff --git a/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html b/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html index 666ac200d..262b5f722 100644 --- a/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html +++ b/libs/blog/articles/ui-article-card/src/lib/ui-article-card/ui-article-card.component.html @@ -12,6 +12,9 @@ /> } @case ('compact') { - + } } diff --git a/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss b/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss index bf12f588a..4d2429caa 100644 --- a/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.scss +++ b/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; diff --git a/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts b/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts index 26a31b44b..f42793556 100644 --- a/libs/blog/articles/ui-article-content/src/lib/article-content/article-content.component.ts +++ b/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, }) diff --git a/libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html b/libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html index 99262fbc1..44234e6eb 100644 --- a/libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html +++ b/libs/blog/articles/ui-article-list-title/src/lib/ui-article-list-title/ui-article-list-title.component.html @@ -1,7 +1,7 @@

{{ title() }}

diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card.component.html b/libs/blog/authors/ui-author-card/src/lib/author-card.component.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card.component.ts b/libs/blog/authors/ui-author-card/src/lib/author-card.component.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts index 48f8244cd..99821566d 100644 --- a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts +++ b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card-template.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, input } from '@angular/core'; import { CardComponent, @@ -13,24 +13,23 @@ import { class: 'block @container', }, template: ` - +
- -
+
@@ -38,4 +37,6 @@ import { `, }) -export class AuthorCardTemplateComponent {} +export class AuthorCardTemplateComponent { + hideGradient = input(true); +} diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html index 73b2947d1..0ac69c2d8 100644 --- a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html +++ b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html @@ -1,5 +1,5 @@
- + @if (linkable()) { @@ -42,7 +42,7 @@
{{ author().name }} diff --git a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts index 5ea188951..755fc34df 100644 --- a/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts +++ b/libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts @@ -45,6 +45,7 @@ export class AuthorCardComponent { clampText = input(); linkable = input(false); + hideGradient = input(false); descriptionClass = computed( () => 'text-sm' + (this.clampText() ? ' line-clamp-3' : ''), diff --git a/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html b/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html index 1dc9a2da1..ba2c022f7 100644 --- a/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html +++ b/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.html @@ -27,13 +27,13 @@

class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center" > -

- {{ t('becomeAuthorCard.buttonText') }} -

+ {{ t('becomeAuthorCard.buttonText') }}

@@ -58,12 +58,12 @@

class="@xl:justify-end my-2 flex w-full flex-row items-center justify-center" > -

- {{ t('articleWritingRules.buttonText') }} -

+ {{ t('articleWritingRules.buttonText') }}

diff --git a/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts b/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts index 9dd4713ba..3d5d93d71 100644 --- a/libs/blog/become-author/feature-become-author-page/src/lib/become-author-page/become-author-page.component.ts +++ b/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, diff --git a/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html b/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html index 233a64d46..d9b2544d2 100644 --- a/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html +++ b/libs/blog/become-author/feature-become-author-page/src/lib/components/become-author-list-item/become-author-list-item.component.html @@ -1,18 +1,18 @@
@if (index()) {
-

{{ index() }}

+

{{ index() }}

} @else {
- +
}

diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts index dee112d74..ea0383de6 100644 --- a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts +++ b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-logo.component.ts @@ -1,5 +1,5 @@ import { NgOptimizedImage } from '@angular/common'; -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'al-footer-logo', @@ -16,13 +16,8 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core'; /> angular.love

-
`, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FooterLogoComponent { - readonly currentYear = input.required(); -} +export class FooterLogoComponent {} diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts index 52137a0c7..dcfa03f32 100644 --- a/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts +++ b/libs/blog/layouts/ui-layouts/src/lib/footer/components/footer-social-media-icons.component.ts @@ -9,11 +9,11 @@ import { SocialMediaIconsComponent } from '@angular-love/blog/shared/ui-social-m
- +
`, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html index 02203540f..a42c92fd9 100644 --- a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html +++ b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html @@ -1,17 +1,16 @@ -