From 2a4bc0b026fa139676ead0b789b4d90876ffd852 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 31 Dec 2021 21:59:42 +0100
Subject: [PATCH] Restructure about page: introduce pages for blog and
 changelog

---
 apps/client/src/app/app-routing.module.ts     | 12 +++
 apps/client/src/app/core/auth.guard.ts        |  2 +
 .../src/app/pages/about/about-page.html       | 82 ++++---------------
 .../src/app/pages/about/about-page.module.ts  |  2 -
 .../changelog-page-routing.module.ts          | 15 ++++
 .../changelog/changelog-page.component.ts     | 22 +++++
 .../pages/about/changelog/changelog-page.html | 23 ++++++
 .../about/changelog/changelog-page.module.ts  | 19 +++++
 .../pages/about/changelog/changelog-page.scss | 44 ++++++++++
 .../pages/blog/blog-page-routing.module.ts    | 15 ++++
 .../src/app/pages/blog/blog-page.component.ts | 22 +++++
 apps/client/src/app/pages/blog/blog-page.html | 49 +++++++++++
 .../src/app/pages/blog/blog-page.module.ts    | 13 +++
 apps/client/src/app/pages/blog/blog-page.scss |  8 ++
 apps/client/src/assets/sitemap.xml            | 22 +++--
 15 files changed, 275 insertions(+), 75 deletions(-)
 create mode 100644 apps/client/src/app/pages/about/changelog/changelog-page-routing.module.ts
 create mode 100644 apps/client/src/app/pages/about/changelog/changelog-page.component.ts
 create mode 100644 apps/client/src/app/pages/about/changelog/changelog-page.html
 create mode 100644 apps/client/src/app/pages/about/changelog/changelog-page.module.ts
 create mode 100644 apps/client/src/app/pages/about/changelog/changelog-page.scss
 create mode 100644 apps/client/src/app/pages/blog/blog-page-routing.module.ts
 create mode 100644 apps/client/src/app/pages/blog/blog-page.component.ts
 create mode 100644 apps/client/src/app/pages/blog/blog-page.html
 create mode 100644 apps/client/src/app/pages/blog/blog-page.module.ts
 create mode 100644 apps/client/src/app/pages/blog/blog-page.scss

diff --git a/apps/client/src/app/app-routing.module.ts b/apps/client/src/app/app-routing.module.ts
index 314a89bdb..cd4e383cd 100644
--- a/apps/client/src/app/app-routing.module.ts
+++ b/apps/client/src/app/app-routing.module.ts
@@ -9,6 +9,13 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/about/about-page.module').then((m) => m.AboutPageModule)
   },
+  {
+    path: 'about/changelog',
+    loadChildren: () =>
+      import('./pages/about/changelog/changelog-page.module').then(
+        (m) => m.ChangelogPageModule
+      )
+  },
   {
     path: 'account',
     loadChildren: () =>
@@ -33,6 +40,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/auth/auth-page.module').then((m) => m.AuthPageModule)
   },
+  {
+    path: 'blog',
+    loadChildren: () =>
+      import('./pages/blog/blog-page.module').then((m) => m.BlogPageModule)
+  },
   {
     path: 'de/blog/2021/07/hallo-ghostfolio',
     loadChildren: () =>
diff --git a/apps/client/src/app/core/auth.guard.ts b/apps/client/src/app/core/auth.guard.ts
index c90ffbe4c..b8c629a7c 100644
--- a/apps/client/src/app/core/auth.guard.ts
+++ b/apps/client/src/app/core/auth.guard.ts
@@ -16,6 +16,8 @@ import { UserService } from '../services/user/user.service';
 export class AuthGuard implements CanActivate {
   private static PUBLIC_PAGE_ROUTES = [
     '/about',
+    '/about/changelog',
+    '/blog',
     '/de/blog',
     '/en/blog',
     '/p',
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index e68ec6f91..44c8ae9cc 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -149,73 +149,23 @@
     </div>
   </div>
 
-  <div *ngIf="hasPermissionForBlog" class="mb-5 row">
-    <div class="col">
-      <h3 class="mb-3 text-center" i18n>Blog</h3>
-      <mat-card class="blog-container">
-        <mat-card-content>
-          <div class="container p-0">
-            <div class="flex-nowrap mb-3 no-gutters row">
-              <a
-                class="d-flex w-100"
-                [routerLink]="['/en', 'blog', '2021', '07', 'hello-ghostfolio']"
-              >
-                <div class="flex-grow-1">
-                  <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
-                  <div class="d-flex text-muted">31.07.2021</div>
-                </div>
-                <div class="align-items-center d-flex">
-                  <ion-icon
-                    class="chevron text-muted"
-                    name="chevron-forward-outline"
-                    size="small"
-                  ></ion-icon>
-                </div>
-              </a>
-            </div>
-            <div class="flex-nowrap no-gutters row">
-              <a
-                class="d-flex w-100"
-                [routerLink]="['/de', 'blog', '2021', '07', 'hallo-ghostfolio']"
-              >
-                <div class="flex-grow-1">
-                  <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
-                  <div class="d-flex text-muted">31.07.2021</div>
-                </div>
-                <div class="align-items-center d-flex">
-                  <ion-icon
-                    class="chevron text-muted"
-                    name="chevron-forward-outline"
-                    size="small"
-                  ></ion-icon>
-                </div>
-              </a>
-            </div>
-          </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
-  </div>
-
-  <div class="mb-5 row">
-    <div class="col">
-      <h3 class="mb-3 text-center" i18n>Changelog</h3>
-      <mat-card class="changelog">
-        <mat-card-content>
-          <markdown [src]="'assets/CHANGELOG.md'"></markdown>
-        </mat-card-content>
-      </mat-card>
-    </div>
-  </div>
-
   <div class="row">
-    <div class="col">
-      <h3 class="mb-3 text-center" i18n>License</h3>
-      <mat-card>
-        <mat-card-content>
-          <markdown [src]="'assets/LICENSE'"></markdown>
-        </mat-card-content>
-      </mat-card>
+    <div *ngIf="hasPermissionForBlog" class="col-md-6 col-xs-12 my-2">
+      <a class="py-2 w-100" i18n mat-stroked-button [routerLink]="['/blog']"
+        >Blog</a
+      >
+    </div>
+    <div
+      class="col-md-6 col-xs-12 my-2"
+      [ngClass]="{ 'offset-md-3': !hasPermissionForBlog }"
+    >
+      <a
+        class="py-2 w-100"
+        i18n
+        mat-stroked-button
+        [routerLink]="['/about', 'changelog']"
+        >Changelog & License</a
+      >
     </div>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/about/about-page.module.ts b/apps/client/src/app/pages/about/about-page.module.ts
index 668596413..2ca669fde 100644
--- a/apps/client/src/app/pages/about/about-page.module.ts
+++ b/apps/client/src/app/pages/about/about-page.module.ts
@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MarkdownModule } from 'ngx-markdown';
 
 import { AboutPageRoutingModule } from './about-page-routing.module';
 import { AboutPageComponent } from './about-page.component';
@@ -13,7 +12,6 @@ import { AboutPageComponent } from './about-page.component';
   imports: [
     AboutPageRoutingModule,
     CommonModule,
-    MarkdownModule.forChild(),
     MatButtonModule,
     MatCardModule
   ],
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page-routing.module.ts b/apps/client/src/app/pages/about/changelog/changelog-page-routing.module.ts
new file mode 100644
index 000000000..052f5e01f
--- /dev/null
+++ b/apps/client/src/app/pages/about/changelog/changelog-page-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { ChangelogPageComponent } from './changelog-page.component';
+
+const routes: Routes = [
+  { path: '', component: ChangelogPageComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ChangelogPageRoutingModule {}
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.component.ts b/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
new file mode 100644
index 000000000..a9f383b87
--- /dev/null
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  host: { class: 'mb-5' },
+  selector: 'gf-changelog-page',
+  styleUrls: ['./changelog-page.scss'],
+  templateUrl: './changelog-page.html'
+})
+export class ChangelogPageComponent implements OnDestroy {
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.html b/apps/client/src/app/pages/about/changelog/changelog-page.html
new file mode 100644
index 000000000..e75178298
--- /dev/null
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.html
@@ -0,0 +1,23 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h3 class="mb-3 text-center" i18n>Changelog</h3>
+      <mat-card class="changelog">
+        <mat-card-content>
+          <markdown [src]="'assets/CHANGELOG.md'"></markdown>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col">
+      <h3 class="mb-3 text-center" i18n>License</h3>
+      <mat-card>
+        <mat-card-content>
+          <markdown [src]="'assets/LICENSE'"></markdown>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.module.ts b/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
new file mode 100644
index 000000000..ba4788c2b
--- /dev/null
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MarkdownModule } from 'ngx-markdown';
+
+import { ChangelogPageRoutingModule } from './changelog-page-routing.module';
+import { ChangelogPageComponent } from './changelog-page.component';
+
+@NgModule({
+  declarations: [ChangelogPageComponent],
+  imports: [
+    ChangelogPageRoutingModule,
+    CommonModule,
+    MarkdownModule.forChild(),
+    MatCardModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ChangelogPageModule {}
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.scss b/apps/client/src/app/pages/about/changelog/changelog-page.scss
new file mode 100644
index 000000000..3fb17de78
--- /dev/null
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.scss
@@ -0,0 +1,44 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+
+  .mat-card {
+    &.changelog {
+      a {
+        color: rgba(var(--palette-primary-500), 1);
+        font-weight: 500;
+
+        &:hover {
+          color: rgba(var(--palette-primary-300), 1);
+        }
+      }
+    }
+
+    &.changelog {
+      ::ng-deep {
+        markdown {
+          h1,
+          p {
+            display: none;
+          }
+
+          h2 {
+            font-size: 18px;
+
+            &:not(:first-of-type) {
+              margin-top: 2rem;
+            }
+          }
+
+          h3 {
+            font-size: 15px;
+          }
+        }
+      }
+    }
+  }
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}
diff --git a/apps/client/src/app/pages/blog/blog-page-routing.module.ts b/apps/client/src/app/pages/blog/blog-page-routing.module.ts
new file mode 100644
index 000000000..1b688ff52
--- /dev/null
+++ b/apps/client/src/app/pages/blog/blog-page-routing.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { BlogPageComponent } from './blog-page.component';
+
+const routes: Routes = [
+  { path: '', component: BlogPageComponent, canActivate: [AuthGuard] }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BlogPageRoutingModule {}
diff --git a/apps/client/src/app/pages/blog/blog-page.component.ts b/apps/client/src/app/pages/blog/blog-page.component.ts
new file mode 100644
index 000000000..c07c91ee6
--- /dev/null
+++ b/apps/client/src/app/pages/blog/blog-page.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  host: { class: 'mb-5' },
+  selector: 'gf-blog-page',
+  styleUrls: ['./blog-page.scss'],
+  templateUrl: './blog-page.html'
+})
+export class BlogPageComponent implements OnDestroy {
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}
diff --git a/apps/client/src/app/pages/blog/blog-page.html b/apps/client/src/app/pages/blog/blog-page.html
new file mode 100644
index 000000000..c97047793
--- /dev/null
+++ b/apps/client/src/app/pages/blog/blog-page.html
@@ -0,0 +1,49 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h3 class="mb-3 text-center" i18n>Blog</h3>
+      <mat-card class="blog-container">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap mb-3 no-gutters row">
+              <a
+                class="d-flex w-100"
+                [routerLink]="['/en', 'blog', '2021', '07', 'hello-ghostfolio']"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
+                  <div class="d-flex text-muted">31.07.2021</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  ></ion-icon>
+                </div>
+              </a>
+            </div>
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex w-100"
+                [routerLink]="['/de', 'blog', '2021', '07', 'hallo-ghostfolio']"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
+                  <div class="d-flex text-muted">31.07.2021</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  ></ion-icon>
+                </div>
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>
diff --git a/apps/client/src/app/pages/blog/blog-page.module.ts b/apps/client/src/app/pages/blog/blog-page.module.ts
new file mode 100644
index 000000000..d210c1aad
--- /dev/null
+++ b/apps/client/src/app/pages/blog/blog-page.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+import { BlogPageRoutingModule } from './blog-page-routing.module';
+import { BlogPageComponent } from './blog-page.component';
+
+@NgModule({
+  declarations: [BlogPageComponent],
+  imports: [BlogPageRoutingModule, CommonModule, MatCardModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BlogPageModule {}
diff --git a/apps/client/src/app/pages/blog/blog-page.scss b/apps/client/src/app/pages/blog/blog-page.scss
new file mode 100644
index 000000000..39eb6792e
--- /dev/null
+++ b/apps/client/src/app/pages/blog/blog-page.scss
@@ -0,0 +1,8 @@
+:host {
+  color: rgb(var(--dark-primary-text));
+  display: block;
+}
+
+:host-context(.is-dark-theme) {
+  color: rgb(var(--light-primary-text));
+}
diff --git a/apps/client/src/assets/sitemap.xml b/apps/client/src/assets/sitemap.xml
index 3ee979f4e..f21832c14 100644
--- a/apps/client/src/assets/sitemap.xml
+++ b/apps/client/src/assets/sitemap.xml
@@ -6,30 +6,38 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/about</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/about/changelog</loc>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/blog</loc>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/pricing</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/register</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/resources</loc>
-    <lastmod>2021-07-31T00:00:00+00:00</lastmod>
+    <lastmod>2022-01-01T00:00:00+00:00</lastmod>
   </url>
 </urlset>