feat: create challenge 44

apps/angular/view-transition/.eslintrc.json

@@ -7,25 +7,7 @@
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
-      ],
+      ]
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ]
-      }
     },
     {
       "files": ["*.html"],

apps/angular/view-transition/project.json

@@ -15,12 +15,12 @@
         "browser": "apps/angular/view-transition/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/angular/view-transition/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           "apps/angular/view-transition/src/favicon.ico",
           "apps/angular/view-transition/src/assets"
         ],
-        "styles": ["apps/angular/view-transition/src/styles.scss"],
+        "styles": ["apps/angular/view-transition/src/styles.css"],
         "scripts": []
       },
       "configurations": {

apps/angular/view-transition/src/app/app.component.ts

@@ -1,28 +1,13 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterLink, RouterOutlet],
+  imports: [RouterOutlet],
   selector: 'app-root',
   template: `
-    <div class="flex gap-3">
-      <button
-        class="rounded-md border border-blue-500 bg-blue-200 px-4 py-2 text-xl"
-        routerLink="foo">
-        Foo
-      </button>
-      <button
-        class="rounded-md border border-blue-500 bg-blue-200 px-4 py-2 text-xl"
-        routerLink="bar">
-        Bar
-      </button>
-    </div>
     <router-outlet />
   `,
-  host: {
+  changeDetection: ChangeDetectionStrategy.OnPush,
-    class: 'flex flex-col gap-10 border p-10 h-screen',
-  },
-  styles: [''],
 })
 export class AppComponent {}

apps/angular/view-transition/src/app/app.config.ts

@@ -1,14 +1,17 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withViewTransitions } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(
       [
-        { path: 'bar', loadComponent: () => import('./bar.component') },
+        { path: '', loadComponent: () => import('./blog/blog.component') },
-        { path: 'foo', loadComponent: () => import('./foo.component') },
+        {
+          path: 'post/:id',
+          loadComponent: () => import('./post/post.component'),
+        },
       ],
-      withViewTransitions(),
+      withComponentInputBinding(),
     ),
   ],
 };

apps/angular/view-transition/src/app/bar.component.ts

@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-@Component({
-  selector: 'app-bar',
-  standalone: true,
-  imports: [],
-  template: `
-    bar-component
-  `,
-  host: {
-    class: 'block h-full bg-green-500',
-  },
-})
-export default class BarComponent {}

apps/angular/view-transition/src/app/blog/blog.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { posts } from '../data';
+import { ThumbnailComponent } from './thumbnail.component';
+
+@Component({
+  selector: 'blog',
+  standalone: true,
+  imports: [ThumbnailComponent],
+  template: `
+    <div
+      class="flex h-20  items-center justify-center border-b-2 text-4xl shadow-md">
+      Blog List
+    </div>
+    <div class="flex h-screen flex-col items-center gap-10 border p-10">
+      @for (post of posts; track post.id) {
+        <blog-thumbnail [post]="post" />
+      }
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class BlogComponent {
+  posts = posts;
+}

apps/angular/view-transition/src/app/blog/thumbnail-header.component.ts

@@ -0,0 +1,29 @@
+import { NgOptimizedImage } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'thumbnail-header',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    <div class="flex gap-3">
+      <img
+        ngSrc="assets/profil.webp"
+        alt=""
+        class="rounded-full border border-black p-0.5"
+        width="50"
+        height="50" />
+      <div class="flex flex-col justify-center gap-0.5">
+        <span class="text-md font-bold uppercase">Thomas Laforge</span>
+        <span class="text-sm">{{ date() }}</span>
+      </div>
+    </div>
+    <img ngSrc="assets/angular.webp" alt="" width="50" height="50" />
+  `,
+  host: {
+    class: 'flex w-full px-4 py-5 gap-4 justify-between',
+  },
+})
+export class ThumbnailHeaderComponent {
+  date = input.required<string>();
+}

apps/angular/view-transition/src/app/blog/thumbnail.component.ts

@@ -0,0 +1,32 @@
+import { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { RouterLinkWithHref } from '@angular/router';
+import { Post } from '../post.model';
+import { ThumbnailHeaderComponent } from './thumbnail-header.component';
+
+@Component({
+  selector: 'blog-thumbnail',
+  standalone: true,
+  imports: [NgOptimizedImage, ThumbnailHeaderComponent, RouterLinkWithHref],
+  template: `
+    <a [routerLink]="['post', post().id]">
+      <img
+        [ngSrc]="post().image"
+        alt=""
+        width="960"
+        height="540"
+        class="rounded-t-3xl"
+        [priority]="post().id === '1'" />
+      <h2 class="p-3 text-3xl">{{ post().title }}</h2>
+      <p class="p-3">{{ post().description }}</p>
+      <thumbnail-header [date]="post().date" />
+    </a>
+  `,
+  host: {
+    class: 'w-full  max-w-[600px] rounded-3xl border-none shadow-lg',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThumbnailComponent {
+  post = input.required<Post>();
+}

apps/angular/view-transition/src/app/data.ts

@@ -0,0 +1,38 @@
+import { Post } from './post.model';
+
+export const posts: Post[] = [
+  {
+    id: '1',
+    title: 'Future of Change Detection in Angular with Signals',
+    description:
+      'Learn how change detection is evolving and how signal will improve performance in the future.',
+    image: '/assets/signal-cd.full.webp',
+    date: 'May 23, 2023',
+    readingTime: 5,
+  },
+  {
+    id: '2',
+    title: 'Everything you need to know about route Guard in Angular',
+    description:
+      'Routing is a significant aspect of any SPA application, and protecting these routes is often necessary. We’ll learn all build-in guards',
+    image: '/assets/guard.full.webp',
+    date: 'Jan 18, 2023',
+    readingTime: 5,
+  },
+  {
+    id: '3',
+    title: 'Create a highly customizable component',
+    description: 'Learn how to create highly customizable component',
+    image: '/assets/highly-custom.full.webp',
+    date: 'Nov 9, 2022',
+    readingTime: 5,
+  },
+];
+
+export const fakeTextChapters = [
+  'Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat',
+  'Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus',
+  'Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam',
+  'Novo denique perniciosoque exemplo idem Gallus ausus est inire flagitium grave, quod Romae cum ultimo dedecore temptasse aliquando dicitur Gallienus, et adhibitis paucis clam ferro succinctis vesperi per tabernas palabatur et conpita quaeritando Graeco sermone, cuius erat inpendio gnarus, quid de Caesare quisque sentiret. et haec confidenter agebat in urbe ubi pernoctantium luminum claritudo dierum solet imitari fulgorem. postremo agnitus saepe iamque, si prodisset, conspicuum se fore contemplans, non nisi luce palam egrediens ad agenda quae putabat seria cernebatur. et haec quidem medullitus multis gementibus agebantur.',
+  'Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.',
+];

apps/angular/view-transition/src/app/foo.component.ts

@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-foo',
-  standalone: true,
-  imports: [],
-  template: `
-    <div class="count">app-foo</div>
-  `,
-  host: {
-    class: 'block h-full bg-red-500',
-  },
-  styles: `
-      .count {
-        view-transition-name: count;
-        width: fit-content
-      }
-    `,
-})
-export default class FooComponent {}

apps/angular/view-transition/src/app/post.model.ts

@@ -0,0 +1,8 @@
+export interface Post {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+  date: string;
+  readingTime: number;
+}

apps/angular/view-transition/src/app/post/post-header.component.ts

@@ -0,0 +1,34 @@
+import { NgOptimizedImage } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'post-header',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  template: `
+    <!--    <div class="flex flex-col gap-3">-->
+    <div class="relative">
+      <img
+        ngSrc="assets/profil.webp"
+        alt=""
+        class="rounded-full border border-black p-0.5"
+        width="50"
+        height="50" />
+      <img
+        ngSrc="assets/angular.webp"
+        alt=""
+        width="30"
+        height="30"
+        class="absolute -bottom-2 -right-2" />
+    </div>
+    <span class="text-md mt-2 font-bold uppercase">Thomas Laforge</span>
+    <span class="text-sm">{{ date() }}</span>
+    <!--    </div>-->
+  `,
+  host: {
+    class: 'flex flex-col justify-center items-center',
+  },
+})
+export class PostHeaderComponent {
+  date = input.required<string>();
+}

apps/angular/view-transition/src/app/post/post.component.ts

@@ -0,0 +1,36 @@
+import { NgOptimizedImage } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { ThumbnailHeaderComponent } from '../blog/thumbnail-header.component';
+import { fakeTextChapters, posts } from '../data';
+import { PostHeaderComponent } from './post-header.component';
+
+@Component({
+  selector: 'post',
+  standalone: true,
+  imports: [ThumbnailHeaderComponent, NgOptimizedImage, PostHeaderComponent],
+  template: `
+    <div class="w-full max-w-[800px]">
+      <img [ngSrc]="post().image" alt="" width="960" height="540" />
+      <h2 class="p-7 text-center text-5xl">{{ post().title }}</h2>
+      <post-header [date]="post().date" class="mb-20" />
+      @for (chapter of fakeTextChapter; track $index) {
+        <p class="mt-6 px-3">{{ chapter }}</p>
+      }
+    </div>
+  `,
+  host: {
+    class: 'flex h-full justify-center',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class PostComponent {
+  id = input.required<string>();
+  post = computed(() => posts.filter((p) => p.id === this.id())[0]);
+
+  fakeTextChapter = fakeTextChapters;
+}

apps/angular/view-transition/src/styles.css

@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -27,15 +28,13 @@
 }
 
 ::view-transition-old(root) {
-  animation:
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
-    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
-    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
 }
 
 ::view-transition-new(root) {
-  animation:
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
-    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
 }
 
 @keyframes rotate {
@@ -46,9 +45,11 @@
     transform: rotate(360deg);
   }
 }
+
 ::view-transition-new(count) {
   animation: rotate 2s linear;
 }
+
 ::view-transition-old(count) {
   animation: rotate 0.5s linear;
 }