Feat/carousel

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"
   }
 }

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"
   }
 }

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';

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()) {
-      <strong class="text-3xl">Related Articles</strong>
-      <div class="mt-4 grid grid-cols-1 gap-6 p-2 md:grid-cols-2">
-        @for (article of store.relatedArticles(); track $index) {
-          <al-article-card [article]="article" cardType="compact" />
-        }
-      </div>
+      <ng-container *transloco="let t; read: 'relatedArticles'">
+        <h2 class="mb-4 text-3xl font-bold">{{ t('title') }}</h2>
+        <div class="relative lg:px-14">
+          <owl-carousel-o #carousel role="list" [options]="customOptions">
+            @for (article of store.relatedArticles(); track $index) {
+              <ng-template carouselSlide>
+                <!-- Prevents focus rings from being cut off -->
+                <li class="list-none py-1">
+                  <al-article-card [article]="article" cardType="compact" />
+                </li>
+              </ng-template>
+            }
+          </owl-carousel-o>
+          <div
+            class="absolute left-0 top-1/2 hidden w-full -translate-y-1/2 justify-between lg:flex"
+          >
+            <button
+              al-button
+              type="button"
+              class="bg-al-pink text-white"
+              [attr.aria-label]="t('previousSlide')"
+              (click)="carousel.prev()"
+              size="small"
+            >
+              <span class="text-2xl">‹</span>
+            </button>
+            <button
+              al-button
+              type="button"
+              class="bg-al-pink text-white"
+              [attr.aria-label]="t('nextSlide')"
+              (click)="carousel.next()"
+              size="small"
+            >
+              <span class="text-2xl">›</span>
+            </button>
+          </div>
+        </div>
+      </ng-container>
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [RelatedArticleListStore],
-  imports: [UiArticleCardComponent],
+  imports: [
+    UiArticleCardComponent,
+    CarouselModule,
+    ButtonComponent,
+    TranslocoDirective,
+  ],
 })
 export class RelatedArticlesComponent implements OnInit {
   readonly id = input.required<number>();
+  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);
 

libs/blog/shared/ui-avatar/src/lib/avatar.component.html

@@ -1,5 +1,7 @@
 <div
   class="flex items-center justify-center overflow-hidden rounded-full border border-white bg-gray-200"
+  [style.width.px]="size()"
+  [style.height.px]="size()"
 >
   @if (imageSrc()) {
     <img

package.json

@@ -57,6 +57,7 @@
     "highlight.js": "^11.9.0",
     "hono": "^4.7.5",
     "lint-staged": "^15.0.2",
+    "ngx-owl-carousel-o": "^20.0.1",
     "ngx-skeleton-loader": "^8.1.0",
     "panzoom": "^9.4.3",
     "prettier-plugin-organize-attributes": "^1.0.0",