From 08e0d61d1399a6e3bd69c6a709ab967481edb231 Mon Sep 17 00:00:00 2001 From: Dominik Chrastecky Date: Fri, 12 Jul 2024 14:20:33 +0200 Subject: [PATCH 1/2] Fix: Add correct types to news --- package.json | 1 + .../homepage-latest-news.component.html | 58 ++++++++++--------- .../homepage-latest-news.component.ts | 2 + src/app/pages/news/news.component.html | 6 +- src/app/pages/news/news.component.ts | 4 +- src/app/pipes/markdown.pipe.ts | 14 +++++ src/app/services/ai-horde.service.ts | 15 ++--- src/app/types/horde-news-item.ts | 8 +++ src/app/types/news.types.ts | 2 +- src/app/types/resolvable.ts | 2 +- yarn.lock | 5 ++ 11 files changed, 77 insertions(+), 40 deletions(-) create mode 100644 src/app/pipes/markdown.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..4f7cb34 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 @@ -1,30 +1,32 @@ -
-
-
-
-

- - - -

- @for (newsItem of news(); track newsItem.title) { -
-

- {{newsItem.date_published}} - -

- @if (newsItem.excerpt) { -

- } - @if (newsItem.moreLink) { -

- {{'read_more' | transloco}} -

- } -
- } @empty { -

{{'no_news' | transloco}}

- } +@defer () { +
+
+
+
+

+ + + +

+ @for (newsItem of news(); track newsItem.title) { +
+

+ {{newsItem.datePublished}} - +

+ @if (newsItem.excerpt) { +

+ } + @if (newsItem.moreLink) { +

+ {{'read_more' | transloco}} +

+ } +
+ } @empty { +

{{'no_news' | transloco}}

+ } +
-
-
+ +} 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..63d14e8 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,7 @@ 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"; @Component({ @@ -14,6 +15,7 @@ import {TranslocoPipe} from "@jsverse/transloco"; RouterLink, TranslocoMarkupComponent, TranslocoPipe, + MarkdownPipe, ], 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..78af66d 100644 --- a/src/app/pages/news/news.component.html +++ b/src/app/pages/news/news.component.html @@ -15,10 +15,12 @@

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

@if (newsItem.excerpt) { -

+ @defer () { +

+ } } @if (newsItem.moreLink) {

diff --git a/src/app/pages/news/news.component.ts b/src/app/pages/news/news.component.ts index 6a8ea47..14c9e84 100644 --- a/src/app/pages/news/news.component.ts +++ b/src/app/pages/news/news.component.ts @@ -5,6 +5,7 @@ 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"; @Component({ @@ -14,6 +15,7 @@ import {TranslocoPipe} from "@jsverse/transloco"; RouterLink, TranslocoMarkupComponent, TranslocoPipe, + MarkdownPipe, ], templateUrl: './news.component.html', styleUrl: './news.component.scss' @@ -29,4 +31,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/services/ai-horde.service.ts b/src/app/services/ai-horde.service.ts index d7408de..a72883f 100644 --- a/src/app/services/ai-horde.service.ts +++ b/src/app/services/ai-horde.service.ts @@ -6,6 +6,9 @@ import {HordePerformance} from "../types/horde-performance"; import {TextTotalStats} from "../types/text-total-stats"; import {NewsItem} from "../types/news.types"; import {SingleInterrogationStatPoint} from "../types/single-interrogation-stat-point"; +import {HordeNewsItem} from "../types/horde-news-item"; +import {marked} from "marked"; +import {type} from "node:os"; @Injectable({ providedIn: 'root' @@ -56,18 +59,16 @@ export class AiHordeService { } public getNews(count?: number): Observable { - 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" From 1e500bf33214fb5c9f426d4b60e62e5f66e4bf61 Mon Sep 17 00:00:00 2001 From: Dominik Chrastecky Date: Fri, 12 Jul 2024 19:58:40 +0200 Subject: [PATCH 2/2] Strip wrapper tag --- .../homepage-latest-news.component.html | 58 +++++++++---------- .../homepage-latest-news.component.ts | 2 + src/app/pages/news/news.component.html | 4 +- src/app/pages/news/news.component.ts | 2 + src/app/pipes/strip-wrapper-tag.pipe.ts | 30 ++++++++++ 5 files changed, 63 insertions(+), 33 deletions(-) create mode 100644 src/app/pipes/strip-wrapper-tag.pipe.ts 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 4f7cb34..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 @@ -1,32 +1,30 @@ -@defer () { -

-
-
-
-

- - - -

- @for (newsItem of news(); track newsItem.title) { -
-

- {{newsItem.datePublished}} - -

- @if (newsItem.excerpt) { -

- } - @if (newsItem.moreLink) { -

- {{'read_more' | transloco}} -

- } -
- } @empty { -

{{'no_news' | transloco}}

- } -
+
+
+
+
+

+ + + +

+ @for (newsItem of news(); track newsItem.title) { +
+

+ {{newsItem.datePublished}} - +

+ @if (newsItem.excerpt) { +

+ } + @if (newsItem.moreLink) { +

+ {{'read_more' | transloco}} +

+ } +
+ } @empty { +

{{'no_news' | transloco}}

+ }
-
-} +
+
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 63d14e8..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 @@ -6,6 +6,7 @@ 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({ @@ -16,6 +17,7 @@ import {MarkdownPipe} from "../../../../pipes/markdown.pipe"; 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 78af66d..054ac66 100644 --- a/src/app/pages/news/news.component.html +++ b/src/app/pages/news/news.component.html @@ -18,9 +18,7 @@

{{newsItem.datePublished}} -

@if (newsItem.excerpt) { - @defer () { -

- } +

} @if (newsItem.moreLink) {

diff --git a/src/app/pages/news/news.component.ts b/src/app/pages/news/news.component.ts index 14c9e84..af37cc2 100644 --- a/src/app/pages/news/news.component.ts +++ b/src/app/pages/news/news.component.ts @@ -6,6 +6,7 @@ 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({ @@ -16,6 +17,7 @@ import {MarkdownPipe} from "../../pipes/markdown.pipe"; TranslocoMarkupComponent, TranslocoPipe, MarkdownPipe, + StripWrapperTagPipe, ], templateUrl: './news.component.html', styleUrl: './news.component.scss' 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 = `