feat(changelog): UI page to view changelog

apps/frontend/src/app/app.routing.ts

@@ -10,6 +10,11 @@ const routes: Routes = [
  path: 'home',
  loadChildren: () => import('./pages/home/home.module').then((module) => module.HomeModule),
  },
+ {
+ path: 'changelog',
+ loadChildren: () =>
+ import('./pages/changelog/changelog.module').then((module) => module.ChangelogPageModule),
+ },
  {
  path: 'public-api-docs',
  pathMatch: 'full',

apps/frontend/src/app/components/layout/layout.component.ts

@@ -35,6 +35,7 @@ export class LayoutComponent implements OnDestroy {
  public mobileQuery: MediaQueryList;
  public readonly ROUTES = [
  {path: '/home', title: 'SIDEBAR_MENU.HOME'},
+ {path: '/changelog', title: 'SIDEBAR_MENU.CHANGELOG'},
  {path: '/public-api-docs', title: 'SIDEBAR_MENU.API_DOCS'},
  {
  path: '/transport-problem',

apps/frontend/src/app/pages/changelog/changelog.module.ts

@@ -0,0 +1,17 @@
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {NgModule} from '@angular/core';
+
+import {MdPreviewModule} from '../../pipes/md-preview/md-preview.module';
+
+import {ChangelogPageComponent} from './changelog.page';
+import {ChangelogRouteModule} from './changelog.routing';
+import {ChangelogService} from './changelog.service';
+
+@NgModule({
+ declarations: [ChangelogPageComponent],
+ providers: [ChangelogService],
+ imports: [ChangelogRouteModule, CommonModule, HttpClientModule, MdPreviewModule],
+ exports: [],
+})
+export class ChangelogPageModule {}

apps/frontend/src/app/pages/changelog/changelog.page.ts

@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+import {Observable} from 'rxjs';
+import {tap} from 'rxjs/operators';
+
+import {ChangelogService} from './changelog.service';
+
+@Component({
+ templateUrl: './changelog.template.html',
+ styles: [
+ `
+ section {
+ padding: 16px;
+ }
+ `,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChangelogPageComponent {
+ public changelogContent: Observable<string>;
+
+ constructor(private changelogService: ChangelogService) {
+ this.changelogContent = this.changelogService
+ .getChangelogContent()
+ .pipe(tap((value) => console.log(value)));
+ }
+}

apps/frontend/src/app/pages/changelog/changelog.routing.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+import {ChangelogPageComponent} from './changelog.page';
+
+const routes: Routes = [{path: '', component: ChangelogPageComponent}];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class ChangelogRouteModule {}

apps/frontend/src/app/pages/changelog/changelog.service.ts

@@ -0,0 +1,26 @@
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable()
+export class ChangelogService {
+ constructor(private http: HttpClient) {}
+
+ public getChangelogContent(): Observable<string> {
+ const headers = new HttpHeaders();
+ headers.append('Access', 'text/markdown');
+ headers.append('Content-Type', 'text/markdown');
+
+ const request = this.http.get<ArrayBuffer>('/api/changelog', {
+ headers,
+ responseType: 'arraybuffer' as 'json',
+ });
+
+ return request.pipe(map(this.getContentFromArrayBuffer));
+ }
+
+ private getContentFromArrayBuffer = (arrbuffer: ArrayBuffer): string =>
+ new TextDecoder().decode(arrbuffer);
+}

apps/frontend/src/app/pages/changelog/changelog.template.html

@@ -0,0 +1,7 @@
+<section>
+ <p [innerHTML]="changelogContent | async | mdPreview"></p>
+ <a
+ href="https://github.com/ducktordanny/opres.help/blob/master/apps/backend/src/assets/CHANGELOG.md"
+ >See on GitHub.</a
+ >
+</section>

apps/frontend/src/app/pipes/md-preview/md-preview.module.ts

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

apps/frontend/src/app/pipes/md-preview/md-preview.pipe.ts

@@ -0,0 +1,23 @@
+import {Pipe, SecurityContext} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {PipeTransform} from '@nestjs/common';
+
+import {marked} from 'marked';
+
+@Pipe({
+ name: 'mdPreview',
+})
+export class MdPreviewPipe implements PipeTransform {
+ constructor(private sanitizer: DomSanitizer) {}
+
+ public transform(value: string | null): string {
+ if (value === null) {
+ console.error('mdPreview input value is null');
+ return '';
+ }
+ const rawPreview = marked.parse(value);
+ const preview = this.sanitizer.sanitize(SecurityContext.HTML, rawPreview);
+ if (preview === null) console.error('Cannot display HTML content because of security reasons.');
+ return preview ?? '';
+ }
+}

apps/frontend/src/assets/i18n/en.json

@@ -21,6 +21,7 @@
 
  "SIDEBAR_MENU": {
  "HOME": "Home",
+ "CHANGELOG": "Changelog",
  "API_DOCS": "API docs",
  "TRANSPORTATION_PROBLEM": "Transportation problem",
  "ASSIGNMENT_PROBLEM": "Assignment problem",

apps/frontend/src/assets/i18n/hu.json

@@ -21,6 +21,7 @@
 
  "SIDEBAR_MENU": {
  "HOME": "Kezdőlap",
+ "CHANGELOG": "Changelog",
  "API_DOCS": "API dokumentáció",
  "TRANSPORTATION_PROBLEM": "Szállítási probléma",
  "ASSIGNMENT_PROBLEM": "Hozzárendelési probléma",

package.json

@@ -39,6 +39,7 @@
  "@nrwl/angular": "13.9.5",
  "d3": "^7.8.2",
  "lodash": "^4.17.21",
+ "marked": "^11.2.0",
  "reflect-metadata": "^0.1.13",
  "rxjs": "~7.5.5",
  "ts-cacheable": "^1.0.6",

yarn.lock

@@ -7768,6 +7768,11 @@ [email protected]:
  dependencies:
  tmpl "1.0.5"
 
+marked@^11.2.0:
+ version "11.2.0"
+ resolved "https://registry.yarnpkg.com/marked/-/marked-11.2.0.tgz#fc908aeca962b721b0392ee4205e6f90ebffb074"
+ integrity sha512-HR0m3bvu0jAPYiIvLUUQtdg1g6D247//lvcekpHO1WMvbwDlwSkZAX9Lw4F4YHE1T0HaaNve0tuAWuV1UJ6vtw==
+
 [email protected]:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"