Fix: Add correct types to news (#13)

package.json

@@ -23,6 +23,7 @@
     "@angular/ssr": "^17.3.0",
     "@jsverse/transloco": "7.4.2",
     "express": "^4.18.2",
+    "marked": "^13.0.2",
     "ngx-transloco-markup": "^6.0.2",
     "ngx-transloco-markup-router-link": "^4.0.0",
     "rxjs": "~7.8.0",

src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.html

@@ -10,10 +10,10 @@ <h2 class="mb-6 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-w
         @for (newsItem of news(); track newsItem.title) {
           <div class="mb-6">
             <h3 class="mb-3 text-2xl text-gray-900 dark:text-white">
-              <span class="text-gray-500 dark:text-gray-200">{{newsItem.date_published}}</span> - <span [innerHTML]="newsItem.title"></span>
+              <span class="text-gray-500 dark:text-gray-200">{{newsItem.datePublished}}</span> - <span [innerHTML]="newsItem.title"></span>
             </h3>
             @if (newsItem.excerpt) {
-              <p class="mb-2 font-light lg:text-xl" [innerHTML]="newsItem.excerpt"></p>
+              <p class="mb-2 font-light lg:text-xl" [innerHTML]="newsItem.excerpt | markdown | stripWrapperTag"></p>
             }
             @if (newsItem.moreLink) {
               <p class="mb-2 font-light lg:text-xl">

src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.ts

@@ -5,6 +5,8 @@ import {toPromise} from "../../../../types/resolvable";
 import {RouterLink} from "@angular/router";
 import {TranslocoMarkupComponent} from "ngx-transloco-markup";
 import {TranslocoPipe} from "@jsverse/transloco";
+import {MarkdownPipe} from "../../../../pipes/markdown.pipe";
+import {StripWrapperTagPipe} from "../../../../pipes/strip-wrapper-tag.pipe";
 
 
 @Component({
@@ -14,6 +16,8 @@ import {TranslocoPipe} from "@jsverse/transloco";
     RouterLink,
     TranslocoMarkupComponent,
     TranslocoPipe,
+    MarkdownPipe,
+    StripWrapperTagPipe,
   ],
   templateUrl: './homepage-latest-news.component.html',
   styleUrl: './homepage-latest-news.component.scss'

src/app/pages/news/news.component.html

@@ -15,10 +15,10 @@ <h1 class="mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl
         @for (newsItem of news(); track newsItem.title) {
           <div class="mb-6">
             <h3 class="mb-3 text-2xl text-gray-900 dark:text-white">
-              <span class="text-gray-500 dark:text-gray-200">{{newsItem.date_published}}</span> - <span [innerHTML]="newsItem.title"></span>
+              <span class="text-gray-500 dark:text-gray-200">{{newsItem.datePublished}}</span> - <span [innerHTML]="newsItem.title"></span>
             </h3>
             @if (newsItem.excerpt) {
-              <p class="mb-2 font-light lg:text-xl" [innerHTML]="newsItem.excerpt"></p>
+                <p class="mb-2 font-light lg:text-xl" [innerHTML]="newsItem.excerpt | markdown | stripWrapperTag"></p>
             }
             @if (newsItem.moreLink) {
               <p class="mb-2 font-light lg:text-xl">

src/app/pages/news/news.component.ts

@@ -5,6 +5,8 @@ import {toPromise} from "../../types/resolvable";
 import {RouterLink} from "@angular/router";
 import {TranslocoMarkupComponent} from "ngx-transloco-markup";
 import {TranslocoPipe} from "@jsverse/transloco";
+import {MarkdownPipe} from "../../pipes/markdown.pipe";
+import {StripWrapperTagPipe} from "../../pipes/strip-wrapper-tag.pipe";
 
 
 @Component({
@@ -14,6 +16,8 @@ import {TranslocoPipe} from "@jsverse/transloco";
     RouterLink,
     TranslocoMarkupComponent,
     TranslocoPipe,
+    MarkdownPipe,
+    StripWrapperTagPipe,
   ],
   templateUrl: './news.component.html',
   styleUrl: './news.component.scss'
@@ -29,4 +33,4 @@ export class NewsComponent implements OnInit {
   public async ngOnInit(): Promise<void> {
     this.news.set(await toPromise(this.aiHorde.getNews()));
   }
-}
+}

src/app/pipes/markdown.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {marked} from "marked";
+
+@Pipe({
+  name: 'markdown',
+  standalone: true
+})
+export class MarkdownPipe implements PipeTransform {
+
+  transform(value: string): string {
+    return <string>marked(value);
+  }
+
+}

src/app/pipes/strip-wrapper-tag.pipe.ts

@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'stripWrapperTag',
+  standalone: true
+})
+export class StripWrapperTagPipe implements PipeTransform {
+
+  transform(value: string): string {
+    if (!value.startsWith('<')) {
+      return value;
+    }
+
+    const regex = /^<.+?>/;
+    if (!regex.test(value)) {
+      return value;
+    }
+
+    const match = regex.exec(value);
+    if (match === null) {
+      return value;
+    }
+
+    const tag = match[0];
+    const closing = `</${tag.substring(1)}`;
+
+    return value.substring(tag.length, value.length - closing.length - 1);
+  }
+
+}

src/app/services/ai-horde.service.ts

@@ -7,6 +7,7 @@ import {TextTotalStats} from "../types/text-total-stats";
 import {NewsItem} from "../types/news.types";
 import {SingleInterrogationStatPoint} from "../types/single-interrogation-stat-point";
 import {HtmlHordeDocument} from "../types/horde-document";
+import {HordeNewsItem} from "../types/horde-news-item";
 import {HordeUser} from "../types/horde-user";
 
 @Injectable({
@@ -63,18 +64,16 @@ export class AiHordeService {
   }
 
   public getNews(count?: number): Observable<NewsItem[]> {
-    return this.httpClient.get<any[]>('https://aihorde.net/api/v2/status/news').pipe(
+    return this.httpClient.get<HordeNewsItem[]>('https://aihorde.net/api/v2/status/news').pipe(
       map(newsItems => count ? newsItems.slice(0, count) : newsItems),
       map(newsItems => newsItems.map(newsItem => {
-        const markdownLinkRegex = /\[([^\[]+)\]\(([^\)]+)\)/g;
-        const excerpt = newsItem.newspiece.replace(markdownLinkRegex, '<a href="$2">$1</a>');
         return {
           title: newsItem.title,
-          date_published: newsItem.date_published,
-          excerpt: excerpt,
-          moreLink: newsItem.more_info_urls.length > 0 ? newsItem.more_info_urls[0] : null
+          datePublished: newsItem.date_published,
+          excerpt: newsItem.newspiece,
+          moreLink: newsItem.more_info_urls.length > 0 ? newsItem.more_info_urls[0] : null,
         };
-      }))
+      })),
     );
   }
 

src/app/types/horde-news-item.ts

@@ -0,0 +1,8 @@
+export interface HordeNewsItem {
+  date_published: string;
+  newspiece: string;
+  importance: string;
+  tags: string[];
+  title: string;
+  more_info_urls: string[];
+}

src/app/types/news.types.ts

@@ -1,6 +1,6 @@
 export interface NewsItem {
   title: string;
-  date_published: string;
+  datePublished: string;
   excerpt: string | null;
   moreLink: string | null;
 }

src/app/types/resolvable.ts

@@ -1,4 +1,4 @@
-import {lastValueFrom, Observable} from "rxjs";
+import {from, lastValueFrom, Observable, of} from "rxjs";
 
 export type Resolvable<T> = Promise<T> | Observable<T> | T;
 

yarn.lock

@@ -4497,6 +4497,11 @@ make-fetch-happen@^13.0.0, make-fetch-happen@^13.0.1:
     promise-retry "^2.0.1"
     ssri "^10.0.0"
 
+marked@^13.0.2:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-13.0.2.tgz#d5d05bd2683a85cb9cc6afbe5240e3a8bffcb92a"
+  integrity sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"