From 68d38b7663be4bdd8f12b3b196d941501f5adcbc Mon Sep 17 00:00:00 2001 From: Rikudou_Sage Date: Fri, 12 Jul 2024 20:03:53 +0200 Subject: [PATCH] Fix: Add correct types to news (#13) --- package.json | 1 + .../homepage-latest-news.component.html | 4 +-- .../homepage-latest-news.component.ts | 4 +++ src/app/pages/news/news.component.html | 4 +-- src/app/pages/news/news.component.ts | 6 +++- src/app/pipes/markdown.pipe.ts | 14 +++++++++ src/app/pipes/strip-wrapper-tag.pipe.ts | 30 +++++++++++++++++++ src/app/services/ai-horde.service.ts | 13 ++++---- src/app/types/horde-news-item.ts | 8 +++++ src/app/types/news.types.ts | 2 +- src/app/types/resolvable.ts | 2 +- yarn.lock | 5 ++++ 12 files changed, 79 insertions(+), 14 deletions(-) create mode 100644 src/app/pipes/markdown.pipe.ts create mode 100644 src/app/pipes/strip-wrapper-tag.pipe.ts create mode 100644 src/app/types/horde-news-item.ts diff --git a/package.json b/package.json index ce836f5..6a19f26 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.html b/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.html index fbd61a7..a9e22af 100644 --- a/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.html +++ b/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.html @@ -10,10 +10,10 @@

- {{newsItem.date_published}} - + {{newsItem.datePublished}} -

@if (newsItem.excerpt) { -

+

} @if (newsItem.moreLink) {

diff --git a/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.ts b/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.ts index 591dd81..36d9774 100644 --- a/src/app/pages/homepage/parts/latest-news/homepage-latest-news.component.ts +++ b/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' diff --git a/src/app/pages/news/news.component.html b/src/app/pages/news/news.component.html index 1db753a..054ac66 100644 --- a/src/app/pages/news/news.component.html +++ b/src/app/pages/news/news.component.html @@ -15,10 +15,10 @@

- {{newsItem.date_published}} - + {{newsItem.datePublished}} -

@if (newsItem.excerpt) { -

+

} @if (newsItem.moreLink) {

diff --git a/src/app/pages/news/news.component.ts b/src/app/pages/news/news.component.ts index 6a8ea47..af37cc2 100644 --- a/src/app/pages/news/news.component.ts +++ b/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 { this.news.set(await toPromise(this.aiHorde.getNews())); } -} \ No newline at end of file +} diff --git a/src/app/pipes/markdown.pipe.ts b/src/app/pipes/markdown.pipe.ts new file mode 100644 index 0000000..5e8830f --- /dev/null +++ b/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 marked(value); + } + +} diff --git a/src/app/pipes/strip-wrapper-tag.pipe.ts b/src/app/pipes/strip-wrapper-tag.pipe.ts new file mode 100644 index 0000000..9930c5f --- /dev/null +++ b/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 = ` { - return this.httpClient.get('https://aihorde.net/api/v2/status/news').pipe( + return this.httpClient.get('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, '$1'); 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, }; - })) + })), ); } diff --git a/src/app/types/horde-news-item.ts b/src/app/types/horde-news-item.ts new file mode 100644 index 0000000..5a3c461 --- /dev/null +++ b/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[]; +} diff --git a/src/app/types/news.types.ts b/src/app/types/news.types.ts index 1115490..5882255 100644 --- a/src/app/types/news.types.ts +++ b/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; } diff --git a/src/app/types/resolvable.ts b/src/app/types/resolvable.ts index 8cae75d..35077b5 100644 --- a/src/app/types/resolvable.ts +++ b/src/app/types/resolvable.ts @@ -1,4 +1,4 @@ -import {lastValueFrom, Observable} from "rxjs"; +import {from, lastValueFrom, Observable, of} from "rxjs"; export type Resolvable = Promise | Observable | T; diff --git a/yarn.lock b/yarn.lock index 84380b4..9672cbe 100644 --- a/yarn.lock +++ b/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"