feat: add details page, add translations

Author: dmaduzia

apps/blog/src/assets/i18n/en.json

@@ -314,5 +314,19 @@
       "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."
     }
+  },
+  "presentations": {
+    "listTitle": "Meetup presentations",
+    "watchRecording": "WATCH RECORDING",
+    "authoredBy": "by {{author}}",
+    "workshopsTitle": "Angular Workshops",
+    "workshopsDescription": "Whether you want to level up your individual skills or train your entire team, our workshops are 100% hands-on practice with an expert, directly translating into the quality of your code and work speed with Mateusz Stefańczyk (Google Developer Expert).",
+    "workshopsButton": "CHECK OPEN WORKSHOPS"
+  },
+  "ebook": {
+    "title": "FREE EBOOK",
+    "subTitle": "The Angular Evolution Guide: ng20+ Summary for CTOs",
+    "description": "Download to discover how the latest Angular version improves performance, DX, UX and overall app efficiency, and how it affects your business.",
+    "downloadButton": "DOWNLOAD NOW"
   }
 }

apps/blog/src/assets/i18n/pl.json

@@ -317,5 +317,19 @@
       "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ś!"
     }
+  },
+  "presentations": {
+    "listTitle": "Prezentacje Meetup",
+    "watchRecording": "OBEJRZYJ NAGRYWANIE",
+    "authoredBy": "autor: {{author}}",
+    "workshopsTitle": "Warsztaty Angular",
+    "workshopsDescription": "Niezależnie od tego, czy chcesz podnieść swoje umiejętności, czy przeszkolić cały zespół, nasze warsztaty to 100% praktyki z ekspertem, co bezpośrednio przekłada się na jakość twojego kodu i szybkość pracy z Mateuszem Stefańczykiem (Google Developer Expert).",
+    "workshopsButton": "SPRAWDŹ OTWARTE WARSZTATY"
+  },
+  "ebook": {
+    "title": "BEZPŁATNY EBOOK",
+    "subTitle": "Przewodnik po ewolucji Angulara: Podsumowanie ng20+ dla CTO",
+    "description": "Pobierz, aby odkryć, jak najnowsza wersja Angulara poprawia wydajność, DX, UX i ogólną efektywność aplikacji oraz jak wpływa na Twoją firmę.",
+    "downloadButton": "POBIERZ TERAZ"
   }
 }

apps/blog/src/assets/icons/video-content.svg

@@ -3,4 +3,7 @@ import { ArticlePreview } from '@angular-love/contracts/articles';
 export type PresentationPreview = Omit<
   ArticlePreview,
   'readingTime' | 'difficulty'
->;
+> & {
+  eventName: string;
+  presentationUrl: string;
+};

libs/blog-contracts/presentations/src/lib/presentations.ts

@@ -24,12 +24,15 @@ export const articleRoutes: Routes = [
     loadComponent: async () =>
       (await import('@angular-love/blog/presentations/presentations-page'))
         .PresentationsPageComponent,
-    data: {
-      seo: { title: 'Presentations', autoHrefLang: true },
-      category: 'presentations',
-      title: 'Angular Presentations',
-      id: 'angular-presentations',
-    },
+  },
+  {
+    path: 'presentation/:presentationSlug',
+    loadComponent: async () =>
+      (
+        await import(
+          '@angular-love/blog/presentations/presentation-details-page'
+        )
+      ).PresentationDetailsPageComponent,
   },
   {
     path: 'guides',

libs/blog/articles/feature-shell/src/lib/routes.ts

@@ -1,5 +1,5 @@
 <main
-  class="mx-auto h-full w-full px-2 py-4 md:px-4 xl:px-0"
+  class="relative mx-auto h-full w-full px-2 py-4 md:px-4 xl:px-0"
   [class]="{
     'max-w-screen-xl': !layoutConfig()?.roadmap,
     'overflow-hidden': layoutConfig()?.roadmap,

libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html

@@ -1 +1,2 @@
 export * from './lib/state/presentations-list.store';
+export * from './lib/state/presentation-detail.store';

libs/blog/presentations/data-access/src/index.ts

@@ -8,6 +8,99 @@ import { ConfigService } from '@angular-love/shared/config';
 
 import { PresentationsQuery } from '../dto/presentations.query';
 
+const MOCK_PRESENTATIONS = [
+  {
+    slug: 'from-chaos-to-clarity-mastering-state-management',
+    title: 'From Chaos to Clarity: Mastering State Management in Angular',
+    excerpt:
+      'Discover practical patterns for managing complex application state without losing your mind.',
+    featuredImageUrl: null,
+    eventName: 'Angular Camp',
+    presentationUrl: 'https://www.youtube.com/@angularlove/videos',
+    publishDate: '2025-03-15',
+    author: {
+      name: 'Sarah Chen',
+      slug: 'sarah-chen',
+      avatarUrl: 'assets/mock-avatar.png',
+    },
+  },
+  {
+    slug: 'zero-to-hero-building-accessible-angular-apps',
+    title: 'Zero to Hero: Building Accessible Angular Applications',
+    excerpt:
+      'Transform your Angular apps into inclusive experiences that everyone can use and enjoy.',
+    featuredImageUrl: null,
+    eventName: 'Angular Camp',
+    presentationUrl: 'https://www.youtube.com/@angularlove/videos',
+    publishDate: '2025-03-14',
+    author: {
+      name: 'Marcus Thompson',
+      slug: 'marcus-thompson',
+      avatarUrl: 'assets/mock-avatar.png',
+    },
+  },
+  {
+    slug: 'performance-wizardry-making-angular-blazingly-fast',
+    title: 'Performance Wizardry: Making Angular Blazingly Fast',
+    excerpt:
+      'Learn the secrets behind lightning-fast Angular applications that delight users.',
+    featuredImageUrl: null,
+    eventName: 'Angular Camp',
+    presentationUrl: 'https://www.youtube.com/@angularlove/videos',
+    publishDate: '2025-03-13',
+    author: {
+      name: 'Priya Sharma',
+      slug: 'priya-sharma',
+      avatarUrl: 'assets/mock-avatar.png',
+    },
+  },
+  {
+    slug: 'reactive-revolution-rxjs-patterns-that-actually-work',
+    title: 'Reactive Revolution: RxJS Patterns That Actually Work',
+    excerpt:
+      'Cut through the complexity and master RxJS with real-world patterns you can use today.',
+    featuredImageUrl: null,
+    eventName: 'Angular Camp',
+    presentationUrl: 'https://www.youtube.com/@angularlove/videos',
+    publishDate: '2025-03-12',
+    author: {
+      name: 'Lukas Müller',
+      slug: 'lukas-muller',
+      avatarUrl: 'assets/mock-avatar.png',
+    },
+  },
+  {
+    slug: 'component-architecture-building-scalable-design-systems',
+    title: 'Component Architecture: Building Scalable Design Systems',
+    excerpt:
+      'Create maintainable, reusable components that grow with your application and team.',
+    featuredImageUrl: null,
+    eventName: 'Angular Camp',
+    presentationUrl: 'https://www.youtube.com/@angularlove/videos',
+    publishDate: '2025-03-11',
+    author: {
+      name: 'Elena Rodriguez',
+      slug: 'elena-rodriguez',
+      avatarUrl: 'assets/mock-avatar.png',
+    },
+  },
+  {
+    slug: 'debugging-like-a-detective-advanced-angular-techniques',
+    title: 'Debugging Like a Detective: Advanced Angular Techniques',
+    excerpt:
+      'Uncover hidden bugs and solve mysterious issues with professional debugging strategies.',
+    featuredImageUrl: null,
+    eventName: 'Angular Camp',
+    presentationUrl: 'https://www.youtube.com/@angularlove/videos',
+    publishDate: '2025-03-10',
+    author: {
+      name: 'Takeshi Nakamura',
+      slug: 'takeshi-nakamura',
+      avatarUrl: 'assets/mock-avatar.png',
+    },
+  },
+];
+
 @Injectable({ providedIn: 'root' })
 export class PresentationsService {
   private readonly _apiBaseUrl = inject(ConfigService).get('apiBaseUrl');
@@ -17,92 +110,29 @@ export class PresentationsService {
     query: PresentationsQuery,
   ): Observable<ArrayResponse<PresentationPreview>> {
     return of({
-      data: [
-        {
-          slug: 'from-chaos-to-clarity-mastering-state-management',
-          title: 'From Chaos to Clarity: Mastering State Management in Angular',
-          excerpt:
-            'Discover practical patterns for managing complex application state without losing your mind.',
-          featuredImageUrl: null,
-          publishDate: '2025-03-15',
-          author: {
-            name: 'Sarah Chen',
-            slug: 'sarah-chen',
-            avatarUrl: 'assets/mock-avatar.png',
-          },
-        },
-        {
-          slug: 'zero-to-hero-building-accessible-angular-apps',
-          title: 'Zero to Hero: Building Accessible Angular Applications',
-          excerpt:
-            'Transform your Angular apps into inclusive experiences that everyone can use and enjoy.',
-          featuredImageUrl: null,
-          publishDate: '2025-03-14',
-          author: {
-            name: 'Marcus Thompson',
-            slug: 'marcus-thompson',
-            avatarUrl: 'assets/mock-avatar.png',
-          },
-        },
-        {
-          slug: 'performance-wizardry-making-angular-blazingly-fast',
-          title: 'Performance Wizardry: Making Angular Blazingly Fast',
-          excerpt:
-            'Learn the secrets behind lightning-fast Angular applications that delight users.',
-          featuredImageUrl: null,
-          publishDate: '2025-03-13',
-          author: {
-            name: 'Priya Sharma',
-            slug: 'priya-sharma',
-            avatarUrl: 'assets/mock-avatar.png',
-          },
-        },
-        {
-          slug: 'reactive-revolution-rxjs-patterns-that-actually-work',
-          title: 'Reactive Revolution: RxJS Patterns That Actually Work',
-          excerpt:
-            'Cut through the complexity and master RxJS with real-world patterns you can use today.',
-          featuredImageUrl: null,
-          publishDate: '2025-03-12',
-          author: {
-            name: 'Lukas Müller',
-            slug: 'lukas-muller',
-            avatarUrl: 'assets/mock-avatar.png',
-          },
-        },
-        {
-          slug: 'component-architecture-building-scalable-design-systems',
-          title: 'Component Architecture: Building Scalable Design Systems',
-          excerpt:
-            'Create maintainable, reusable components that grow with your application and team.',
-          featuredImageUrl: null,
-          publishDate: '2025-03-11',
-          author: {
-            name: 'Elena Rodriguez',
-            slug: 'elena-rodriguez',
-            avatarUrl: 'assets/mock-avatar.png',
-          },
-        },
-        {
-          slug: 'debugging-like-a-detective-advanced-angular-techniques',
-          title: 'Debugging Like a Detective: Advanced Angular Techniques',
-          excerpt:
-            'Uncover hidden bugs and solve mysterious issues with professional debugging strategies.',
-          featuredImageUrl: null,
-          publishDate: '2025-03-10',
-          author: {
-            name: 'Takeshi Nakamura',
-            slug: 'takeshi-nakamura',
-            avatarUrl: 'assets/mock-avatar.png',
-          },
-        },
-      ],
-      total: 6,
+      data: MOCK_PRESENTATIONS,
+      total: MOCK_PRESENTATIONS.length,
     });
     // TODO - add real API
     // return this._http.get<ArrayResponse<PresentationPreview>>(
     //   `${this._apiBaseUrl}/presentations`,
     //   { params: query || {} },
     // );
   }
+
+  getPresentationDetail(slug: string): Observable<PresentationPreview> {
+    // Find the presentation preview by slug
+    // This is a mock implementation; replace with real API call
+    const preview = MOCK_PRESENTATIONS.find((p) => p.slug === slug);
+
+    if (!preview) {
+      throw new Error(`Presentation with slug "${slug}" not found`);
+    }
+
+    return of(preview);
+    // TODO - add real API
+    // return this._http.get<PresentationDetails>(
+    //   `${this._apiBaseUrl}/presentations/${slug}`,
+    // );
+  }
 }

libs/blog/presentations/data-access/src/lib/infrastructure/presentations.service.ts

@@ -0,0 +1,60 @@
+import { inject } from '@angular/core';
+import { patchState, signalStore, withMethods, withState } from '@ngrx/signals';
+import { rxMethod } from '@ngrx/signals/rxjs-interop';
+import { concatMap, pipe, tap } from 'rxjs';
+
+import { PresentationPreview } from '@angular-love/blog-contracts/presentations';
+import { withLangState } from '@angular-love/blog/i18n/data-access';
+import {
+  LoadingState,
+  withCallState,
+} from '@angular-love/shared/utils-signal-store';
+
+import { PresentationsService } from '../infrastructure/presentations.service';
+
+type PresentationDetailState = {
+  presentation: PresentationPreview | null;
+  slug: string | null;
+};
+
+const initialState: PresentationDetailState = {
+  presentation: null,
+  slug: null,
+};
+
+export const PresentationDetailStore = signalStore(
+  { providedIn: 'root' },
+  withState(initialState),
+  withLangState(),
+  withCallState('fetch presentation detail'),
+  withMethods((store) => {
+    const presentationsService = inject(PresentationsService);
+    return {
+      fetchPresentationDetail: rxMethod<string>(
+        pipe(
+          tap((slug) =>
+            patchState(store, {
+              slug: slug,
+              fetchPresentationDetailCallState: LoadingState.LOADING,
+            }),
+          ),
+          concatMap((slug) =>
+            presentationsService.getPresentationDetail(slug).pipe(
+              tap({
+                next: (data) =>
+                  patchState(store, {
+                    presentation: data,
+                    fetchPresentationDetailCallState: LoadingState.LOADED,
+                  }),
+                error: (error) =>
+                  patchState(store, {
+                    fetchPresentationDetailCallState: { error },
+                  }),
+              }),
+            ),
+          ),
+        ),
+      ),
+    };
+  }),
+);