feat: This is Angular article list

Author: LayZeeDK

libs/publications/feature-this-is-angular/src/lib/article/article.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+
+import { DevCommunityRssItem } from '../dev-community-rss-parser.token';
+
+const selector = '[til-article]';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  selector,
+  template: `
+    <h2>
+      <a [href]="rssItem?.link" target="_blank" rel="nofollow noopener">{{
+        rssItem?.title
+      }}</a>
+    </h2>
+
+    <footer>
+      <p>
+        By {{ rssItem?.author }}<br />
+        <time [dateTime]="rssItem?.isoDate">{{
+          rssItem?.isoDate | date: 'long'
+        }}</time
+        ><br />
+        <span *ngFor="let tag of rssItem?.categories">#{{ tag }} </span>
+      </p>
+    </footer>
+
+    <p>{{ rssItem?.contentSnippet | tilTruncate }}</p>
+
+    <a [href]="rssItem?.link" target="_blank" rel="nofollow noopener"
+      >Read article</a
+    >
+  `,
+})
+export class ArticleComponent {
+  @Input()
+  rssItem: DevCommunityRssItem | null = null;
+}

libs/publications/feature-this-is-angular/src/lib/article/article.scam.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TruncateScam } from '../truncate/truncate.scam';
+import { ArticleComponent } from './article.component';
+
+@NgModule({
+  declarations: [ArticleComponent],
+  exports: [ArticleComponent],
+  imports: [CommonModule, TruncateScam],
+})
+export class ArticleScam {}

libs/publications/feature-this-is-angular/src/lib/shell/shell.component.ts

@@ -1,9 +1,9 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+import { DevCommunityRssItems } from '../dev-community-rss-parser.token';
 
 const selector = 'til-this-is-angular-shell';
 @Component({
@@ -18,12 +18,27 @@ const selector = 'til-this-is-angular-shell';
     `,
   ],
   template: `
-    <h1>TiA shell</h1>
+    <h1>
+      <a [href]="rssUrl$ | async" target="_blank" rel="nofollow noopener"
+        >This is Angular</a
+      >
+    </h1>
 
-    <h2>Route data</h2>
-    <pre><code>{{ route.data | async | json }}</code></pre>
+    <article
+      til-article
+      *ngFor="let rssItem of (rssItems$ | async) ?? []"
+      [rssItem]="rssItem"
+    ></article>
   `,
 })
 export class ShellComponent {
-  constructor(public route: ActivatedRoute) {}
+  rssItems$: Observable<DevCommunityRssItems> = this.route.data.pipe(
+    map((data) => data.rssItems),
+    tap(console.log)
+  );
+  rssUrl$: Observable<string> = this.route.data.pipe(
+    map((data) => data.rssUrl)
+  );
+
+  constructor(private route: ActivatedRoute) {}
 }

libs/publications/feature-this-is-angular/src/lib/shell/shell.scam.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { ArticleScam } from '../article/article.scam';
 import { ShellComponent } from './shell.component';
 
 @NgModule({
   declarations: [ShellComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, ArticleScam],
 })
 export class ShellScam {}

libs/publications/feature-this-is-angular/src/lib/truncate/truncate.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'tilTruncate',
+})
+export class TruncatePipe implements PipeTransform {
+  transform(text: string | null | undefined): string {
+    text ??= '';
+
+    const cutoff = 900;
+
+    return text.length <= cutoff ? text : text.substring(0, cutoff) + ' (...)';
+  }
+}

libs/publications/feature-this-is-angular/src/lib/truncate/truncate.scam.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { TruncatePipe } from './truncate.pipe';
+
+@NgModule({
+  declarations: [TruncatePipe],
+  exports: [TruncatePipe],
+})
+export class TruncateScam {}