diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json index e6570d6e..5314270a 100644 --- a/apps/blog/src/assets/i18n/en.json +++ b/apps/blog/src/assets/i18n/en.json @@ -312,5 +312,10 @@ "section1": "We’ll transfer your article to the CMS and schedule its publication.", "section2": "We’ll also promote it on social media to maximize its reach." } + }, + "relatedArticles": { + "title": "Related Articles", + "previousSlide": "Previous slide", + "nextSlide": "Next slide" } } diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json index 61acd50b..00aec82a 100644 --- a/apps/blog/src/assets/i18n/pl.json +++ b/apps/blog/src/assets/i18n/pl.json @@ -315,5 +315,10 @@ "section1": "Teraz my zajmiemy się przeniesieniem twojego artykułu do CMS’a i zaplanujemy jego opublikowanie", "section2": "Zajmiemy się również jego promowaniem w mediach społecznościowych, aby jak najwięcej osób mogło skorzystać z wiedzy, którą w nim zawarłeś!" } + }, + "relatedArticles": { + "title": "Powiązane artykuły", + "previousSlide": "Poprzedni slajd", + "nextSlide": "Następny slajd" } } diff --git a/apps/blog/src/styles.scss b/apps/blog/src/styles.scss index 26b764ed..697c9cad 100644 --- a/apps/blog/src/styles.scss +++ b/apps/blog/src/styles.scss @@ -2,3 +2,5 @@ @include cdk.a11y-visually-hidden(); @import '@angular/cdk/overlay-prebuilt.css'; +@import 'ngx-owl-carousel-o/lib/styles/scss/owl.carousel'; +@import 'ngx-owl-carousel-o/lib/styles/scss/owl.theme.default'; diff --git a/libs/blog/articles/feature-related-articles/src/lib/related-articles.component.ts b/libs/blog/articles/feature-related-articles/src/lib/related-articles.component.ts index a3bf36f0..df1a97d1 100644 --- a/libs/blog/articles/feature-related-articles/src/lib/related-articles.component.ts +++ b/libs/blog/articles/feature-related-articles/src/lib/related-articles.component.ts @@ -5,28 +5,88 @@ import { input, OnInit, } from '@angular/core'; +import { TranslocoDirective } from '@jsverse/transloco'; +import { CarouselModule, OwlOptions } from 'ngx-owl-carousel-o'; import { RelatedArticleListStore } from '@angular-love/blog/articles/data-access'; import { UiArticleCardComponent } from '@angular-love/blog/articles/ui-article-card'; +import { ButtonComponent } from '@angular-love/blog/shared/ui-button'; @Component({ selector: 'al-related-articles', template: ` @if (store.isFetchRelatedArticleListLoaded()) { - Related Articles -
- @for (article of store.relatedArticles(); track $index) { - - } -
+ +

{{ t('title') }}

+
+ + @for (article of store.relatedArticles(); track $index) { + + +
  • + +
    • +     + } +     + +
    +     } `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [RelatedArticleListStore], - imports: [UiArticleCardComponent], + imports: [ + UiArticleCardComponent, + CarouselModule, + ButtonComponent, + TranslocoDirective, + ], }) export class RelatedArticlesComponent implements OnInit { readonly id = input.required(); + readonly customOptions: OwlOptions = { + loop: true, + mouseDrag: false, + touchDrag: true, + pullDrag: true, + dots: true, + margin: 24, + navSpeed: 700, + navText: ['', ''], + responsive: { + // Keep in mind these breakpoints refer to container width, not the viewport width + 0: { + items: 1, + }, + 540: { + items: 2, + }, + }, + }; readonly store = inject(RelatedArticleListStore); diff --git a/libs/blog/shared/ui-avatar/src/lib/avatar.component.html b/libs/blog/shared/ui-avatar/src/lib/avatar.component.html index 838a7a12..a9febea6 100644 --- a/libs/blog/shared/ui-avatar/src/lib/avatar.component.html +++ b/libs/blog/shared/ui-avatar/src/lib/avatar.component.html @@ -1,5 +1,7 @@
    @if (imageSrc()) {