feat: initial release notes component

Author: EdricChan03

angular.json

@@ -23,7 +23,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/marked/lib/marked.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -38,6 +38,7 @@
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.13.1",
     "markdown-to-html": "0.0.13",
+    "ngx-markdown": "^8.1.0",
     "rxjs": "^6.5.2",
     "tslib": "^1.10.0",
     "web-animations-js": "^2.3.2",

package.json

@@ -90,6 +90,11 @@ export class AppComponent implements OnInit, OnDestroy {
       name: 'Settings',
       url: 'settings',
       icon: 'settings'
+    },
+    {
+      name: 'Release notes',
+      url: 'release-notes',
+      icon: 'new_releases'
     }
   ];
   constructor(

src/app/app.component.ts

@@ -44,6 +44,8 @@ import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { AngularFireAuthModule } from '@angular/fire/auth';
 import { HeadlinesComponent } from './headlines/headlines.component';
 import { HotkeysModule } from './hotkeys/hotkeys.module';
+import { ComponentsModule } from './components/components.module';
+import { MarkdownModule } from 'ngx-markdown';
 
 const OVERLAYS = [
   FilterOverlayComponent,
@@ -82,6 +84,7 @@ const PIPES = [
     FormsModule,
     FlexLayoutModule,
     HttpClientModule,
+    MarkdownModule.forRoot(),
     MaterialModule,
     SharedModule,
     AppRouting,
@@ -91,7 +94,8 @@ const PIPES = [
     // AngularFirestoreModule.enablePersistence(),
     // AngularFireAuthModule,
     ActionItemsModule,
-    HotkeysModule
+    HotkeysModule,
+    ComponentsModule
   ],
   bootstrap: [AppComponent],
   providers: [

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { AndroidComponent } from './devices/android/android.component';
 import { IOSComponent } from './devices/ios/ios.component';
 import { ExploreComponent } from './explore/explore.component';
 import { HeadlinesComponent } from './headlines/headlines.component';
+import { ReleaseNotesComponent } from './components/release-notes/release-notes.component';
 
 const APP_ROUTES: Routes = [
   {
@@ -27,6 +28,7 @@ const APP_ROUTES: Routes = [
   { path: 'feed', component: FeedComponent },
   { path: 'headlines', component: HeadlinesComponent },
   { path: 'home', redirectTo: '/feed' },
+  { path: 'release-notes', component: ReleaseNotesComponent },
   { path: 'settings', component: SettingsComponent },
   { path: 'test', component: TestpageComponent },
   { path: '', pathMatch: 'full', redirectTo: '/feed' },

src/app/app.routing.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReleaseNotesModule } from './release-notes/release-notes.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ReleaseNotesModule
+  ]
+})
+export class ComponentsModule { }

src/app/components/components.module.ts

@@ -0,0 +1,28 @@
+<div class="app-content">
+  <h1 id="current-version">Current version: {{ releaseNotes.latestVersion }}</h1>
+
+  <p><em><a routerLink="." fragment="version-{{ releaseNotes.latestVersion }}">Jump to release notes</a></em></p>
+  <hr>
+
+  <h1 id="release-notes" *ngIf="versions?.length > 0">Release notes</h1>
+  <ng-container *ngIf="versions; else: noReleaseNotes">
+    <ng-container *ngFor="let version of versions">
+      <h2 id="version-{{ version }}">Version {{ version }}</h2>
+      <ng-container *ngIf="getReleaseNote(version) as releaseNote">
+        <ng-container *ngIf="isArray(releaseNote.summary)">
+          <p [innerHTML]="joinReleaseNotes(releaseNote.summary) | markdown"></p>
+        </ng-container>
+        <ng-container *ngIf="!isArray(releaseNote.summary) && isUrl(releaseNote.summary)">
+          <p>See this <a [href]="releaseNote.summary">link</a> for more info.</p>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </ng-container>
+
+</div>
+<ng-template #noReleaseNotes>
+  <div class="center">
+    <h1 id="no-release-notes-available">No release notes available!</h1>
+    <p>Are you connected to the internet?</p>
+  </div>
+</ng-template>

src/app/components/release-notes/release-notes.component.html

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ReleaseNotesJSON, ReleaseNotes } from './release-notes';
+import releaseNotes from '../../../assets/release-notes.json';
+
+@Component({
+  selector: 'app-release-notes',
+  templateUrl: './release-notes.component.html',
+  styles: []
+})
+export class ReleaseNotesComponent implements OnInit {
+
+  constructor(private http: HttpClient) { }
+
+  /** Retrieves the release notes JSON file. */
+  get releaseNotes(): ReleaseNotesJSON {
+    return releaseNotes;
+  }
+
+  /** Retrieves the list of versions. */
+  get versions(): string[] {
+    return Object.keys(this.releaseNotes.releases);
+  }
+
+  /**
+   * Retrieves the release notes for the specified `version`.
+   * @param version The version
+   */
+  getReleaseNote(version: string): ReleaseNotes {
+    return this.releaseNotes.releases[version].releaseNotes;
+  }
+
+  /**
+   * Joins a list of release notes to a string.
+   * @param notes The notes to join
+   */
+  joinReleaseNotes(notes: string[]): string {
+    return notes.join('\n');
+  }
+
+  /**
+   * Checks if the specified `val` parameter is an array.
+   * @param val The value to check.
+   */
+  isArray(val: any): boolean {
+    return Array.isArray(val);
+  }
+
+  /**
+   * Checks whether the specified `val` parameter is a URL.
+   * @param val The value to check.
+   *
+   * _See https://stackoverflow.com/a/46296668/6782707 for more info._
+   */
+  isUrl(val: string): boolean {
+    return /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(val);
+  }
+  ngOnInit() {
+  }
+
+}

src/app/components/release-notes/release-notes.component.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import { MarkdownModule } from 'ngx-markdown';
+import { ReleaseNotesComponent } from './release-notes.component';
+
+@NgModule({
+  declarations: [ReleaseNotesComponent],
+  exports: [ReleaseNotesComponent],
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    RouterModule,
+    MarkdownModule.forChild()
+  ]
+})
+export class ReleaseNotesModule { }

src/app/components/release-notes/release-notes.module.ts

@@ -0,0 +1,27 @@
+export interface Release {
+  /** Release notes for the version. */
+  releaseNotes: ReleaseNotes;
+  /** Release date for the version. */
+  releaseDate?: string | number;
+  /** The person who released the version. */
+  releaseAuthor?: string;
+}
+
+export interface ReleaseNotes {
+  /** A summary of the release notes. */
+  summary: string[] | string;
+  /** A detailed version of the release notes. */
+  details?: string[] | string;
+}
+
+export interface Releases {
+  [key: string]: Release;
+}
+export interface ReleaseNotesJSON {
+  /** The schema of the JSON file. */
+  $schema: string;
+  /** The latest version of the app. */
+  latestVersion: string;
+  /** The list of releases. */
+  releases: Releases;
+}