home: rename blog section (#83)

* home: rename blog section * merged events & blog
dd-ix · Jul 7, 2024 · 2ecab3a · 2ecab3a
1 parent 3e9d681
commit 2ecab3a
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 36 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -7,7 +7,7 @@
     <nav class="nav">
       <a class="not" routerLink="/blog" routerLinkActive="selected">
         <!--        <app-icon-s class="nav-icon"/>-->
-        <span class="label" i18n>Blog</span>
+        <span class="label" i18n>News &amp; Events</span>
       </a>
       <a class="not" routerLink="/network" routerLinkActive="selected">
         <span class="label" i18n>Network</span>

diff --git a/src/app/pages/blog/blog-list/blog-list.component.html b/src/app/pages/blog/blog-list/blog-list.component.html
@@ -2,25 +2,26 @@
   <div class="header">
     <h1 i18n>Blog</h1>
     <feel-button class="event-button" i18n-label label="Events!" link="/event">
-      <app-icon-send/>
+      <app-icon-send />
     </feel-button>
   </div>
   <div *ngIf="(keywords | async) as keywords" class="keywords">
     <button (click)="toggleKeyword(keyword)" *ngFor="let keyword of keywords"
-            [class.selected]="isSelected(keyword) | async"
-            class="keyword">{{ keyword }}
+      [class.selected]="isSelected(keyword) | async" class="keyword">
+      {{ keyword }}
     </button>
   </div>
 </div>
 
 <ul class="not news">
-  <li *ngFor="let post of posts | async">
-    <app-blog-card [post]="post"/>
+  <li *ngFor="let entry of entries | async">
+    <app-blog-card *ngIf="!isEvent(entry)" [post]="castPost(entry)" />
+    <app-event-card *ngIf="isEvent(entry)" [event]="castEvent(entry)" />
   </li>
 </ul>
 
 <app-card>
   <div class="mailing-list">
-    <app-mailing-list [listId]="3" [listName]="'News'"/>
+    <app-mailing-list [listId]="3" [listName]="'News'" />
   </div>
 </app-card>
diff --git a/src/app/pages/blog/blog-list/blog-list.component.ts b/src/app/pages/blog/blog-list/blog-list.component.ts
@@ -1,12 +1,14 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {BlogService} from "../../../api/blog.service";
-import {BehaviorSubject, map, Observable, switchMap} from "rxjs";
-import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
-import {BlogCardComponent} from "../../../core/blog-card/blog-card.component";
-import {CardComponent} from "../../../core/card/card.component";
-import {MailingListComponent} from "../../../core/mailing-list/mailing-list.component";
-import {ButtonComponent} from "@feel/form";
-import {IconSendComponent} from "../../../icons/icon-send/icon-send.component";
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlogService } from "../../../api/blog.service";
+import { BehaviorSubject, combineLatest, map, Observable, switchMap } from "rxjs";
+import { AsyncPipe, NgForOf, NgIf } from "@angular/common";
+import { BlogCardComponent } from "../../../core/blog-card/blog-card.component";
+import { CardComponent } from "../../../core/card/card.component";
+import { MailingListComponent } from "../../../core/mailing-list/mailing-list.component";
+import { ButtonComponent } from "@feel/form";
+import { IconSendComponent } from "../../../icons/icon-send/icon-send.component";
+import { EventCardComponent } from "../../../core/event-card/event-card.component";
+import { SmallBlogPost, SmallEvent } from '../../../api/blog.domain';
 
 @Component({
   selector: 'app-blog-list',
@@ -22,13 +24,20 @@ import {IconSendComponent} from "../../../icons/icon-send/icon-send.component";
     CardComponent,
     MailingListComponent,
     ButtonComponent,
-    IconSendComponent
+    IconSendComponent,
+    EventCardComponent
   ]
 })
 export class BlogListComponent {
 
   protected readonly selectedKeywords = new BehaviorSubject<string[]>([]);
-  protected readonly posts = this.selectedKeywords.pipe(switchMap(keywords => this.blogService.getBlogPosts(keywords)));
+  protected readonly entries = combineLatest({
+    events: this.blogService.getEventPosts(),
+    posts: this.selectedKeywords.pipe(switchMap(keywords => this.blogService.getBlogPosts(keywords)))
+  })
+    .pipe(map(({ events, posts }) =>
+      ([...events, ...posts].sort(eventOrPost => Date.parse(eventOrPost.published)))
+    ));
   protected readonly keywords = this.blogService.getBlogKeywords();
 
   constructor(
@@ -47,4 +56,16 @@ export class BlogListComponent {
       this.selectedKeywords.next(this.selectedKeywords.value.filter(existing => existing !== keyword));
     }
   }
+
+  protected isEvent(eventOrPost: SmallEvent | SmallBlogPost): boolean {
+    return 'start_time' in eventOrPost;
+  }
+
+  protected castEvent(eventOrPost: SmallEvent | SmallBlogPost): SmallEvent {
+    return eventOrPost as SmallEvent;
+  }
+
+  protected castPost(eventOrPost: SmallEvent | SmallBlogPost): SmallBlogPost {
+    return eventOrPost as SmallBlogPost;
+  }
 }
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -62,7 +62,7 @@ <h1 i18n>Support</h1>
 </div>
 
 <div class="typography">
-  <h1 i18n>Blog</h1>
+  <h1 i18n>Events &amp; News</h1>
 </div>
 <ul class="not news">
   <li *ngFor="let event of events | async">

diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
@@ -5,7 +5,7 @@ import {RouterLink} from "@angular/router";
 import {IconGithubComponent} from "../../icons/icon-github/icon-github.component";
 import {IconMastodonComponent} from "../../icons/icon-mastodon/icon-mastodon.component";
 import {IconLinkedinComponent} from "../../icons/icon-linkedin/icon-linkedin.component";
-import {map, Observable, share, switchMap} from "rxjs";
+import {map, share, switchMap} from "rxjs";
 import {IconIbhComponent} from "../../icons/icon-ibh/icon-ibh.component";
 import {IconBcixComponent} from "../../icons/icon-bcix/icon-bcix.component";
 import {IconTudComponent} from "../../icons/icon-tud/icon-tud.component";
@@ -18,7 +18,6 @@ import {IconSocialComponent} from "../../icons/icon-social/icon-social.component
 import {IconSendComponent} from "../../icons/icon-send/icon-send.component";
 import {ButtonComponent} from "@feel/form";
 import {IconDsiComponent} from "../../icons/icon-dsi/icon-dsi.component";
-import {PostOrEvent, SmallEvent} from "../../api/blog.domain";
 import {EventCardComponent} from "../../core/event-card/event-card.component";
 
 @Component({

diff --git a/src/locales/en_devel.xlf b/src/locales/en_devel.xlf
@@ -86,23 +86,11 @@
           <context context-type="linenumber">82,83</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7751010942038334793" datatype="html">
-        <source>Blog</source>
+      <trans-unit id="5948442423891185229" datatype="html">
+        <source>News &amp; Events</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/app.component.html</context>
-          <context context-type="linenumber">10,11</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/app.routes.ts</context>
-          <context context-type="linenumber">15</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/pages/blog/blog-list/blog-list.component.html</context>
-          <context context-type="linenumber">3,4</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/pages/home/home.component.html</context>
-          <context context-type="linenumber">65,66</context>
+          <context context-type="linenumber">10</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6718726533481404495" datatype="html">
@@ -277,6 +265,17 @@
           <context context-type="linenumber">3,4</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="7751010942038334793" datatype="html">
+        <source>Blog</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.routes.ts</context>
+          <context context-type="linenumber">15</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/pages/blog/blog-list/blog-list.component.html</context>
+          <context context-type="linenumber">3,4</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="3304972143698843178" datatype="html">
         <source>Event</source>
         <context-group purpose="location">
@@ -633,6 +632,13 @@
           <context context-type="linenumber">57</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="5390240553289554839" datatype="html">
+        <source>Events &amp; News</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/pages/home/home.component.html</context>
+          <context context-type="linenumber">65,66</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="3670532182581004841" datatype="html">
         <source>Socials</source>
         <context-group purpose="location">