Add blog post: Ghostfolio 2.0

apps/api/src/middlewares/html-template.middleware.ts

@@ -75,6 +75,10 @@ const locales = {
   '/en/blog/2023/08/ghostfolio-joins-oss-friends': {
     featureGraphicPath: 'assets/images/blog/ghostfolio-joins-oss-friends.png',
     title: `Ghostfolio joins OSS Friends - ${titleShort}`
+  },
+  '/en/blog/2023/08/ghostfolio-2': {
+    featureGraphicPath: 'assets/images/blog/ghostfolio-2.jpg',
+    title: `Ghostfolio 2.0 - ${titleShort}`
   }
 };
 

apps/client/src/app/pages/blog/2023/08/ghostfolio-2/ghostfolio-2-page.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  host: { class: 'page' },
+  imports: [MatButtonModule, RouterModule],
+  selector: 'gf-ghostfolio-2-page',
+  standalone: true,
+  templateUrl: './ghostfolio-2-page.html'
+})
+export class Ghostfolio2PageComponent {}

apps/client/src/app/pages/blog/2023/08/ghostfolio-2/ghostfolio-2-page.html

@@ -0,0 +1,110 @@
+<div class="blog container">
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1">Announcing Ghostfolio 2.0</h1>
+          <div class="mb-3 text-muted"><small>2023-08-26</small></div>
+          <img
+            alt="Ghostfolio 2.0 Teaser"
+            class="border rounded w-100"
+            src="../assets/images/blog/ghostfolio-2.jpg"
+            title="Ghostfolio 2.0"
+          />
+        </div>
+        <section class="mb-4">
+          <p>...</p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">Asset</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cryptocurrency</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Community</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Dashboard</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">ETF</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Fintech</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio 2.0</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Innovation</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Investment</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Open Source</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OSS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Personal Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Platform</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Privacy</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Release</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Software</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Stock</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Technology</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Tracking</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth Management</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web3</span>
+            </li>
+          </ul>
+        </section>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <a i18n [routerLink]="['/blog']">Blog</a>
+            </li>
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
+              Announcing Ghostfolio 2.0
+            </li>
+          </ol>
+        </nav>
+      </article>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/blog/blog-page-routing.module.ts

@@ -145,6 +145,15 @@ const routes: Routes = [
         './2023/08/ghostfolio-joins-oss-friends/ghostfolio-joins-oss-friends-page.component'
       ).then((c) => c.GhostfolioJoinsOssFriendsPageComponent),
     title: 'Ghostfolio joins OSS Friends'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/08/ghostfolio-2',
+    loadComponent: () =>
+      import('./2023/08/ghostfolio-2/ghostfolio-2-page.component').then(
+        (c) => c.Ghostfolio2PageComponent
+      ),
+    title: 'Ghostfolio 2.0'
   }
 ];
 

apps/client/src/app/pages/blog/blog-page.html

@@ -8,6 +8,32 @@
           finance</small
         >
       </h1>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex overflow-hidden w-100"
+                href="../en/blog/2023/08/ghostfolio-2"
+              >
+                <div class="flex-grow-1 overflow-hidden">
+                  <div class="h6 m-0 text-truncate">
+                    Announcing Ghostfolio 2.0
+                  </div>
+                  <div class="d-flex text-muted">2023-08-26</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>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">

apps/client/src/app/pages/landing/landing-page.html

@@ -1,9 +1,17 @@
 <div class="container">
   <div class="row">
     <div class="col text-center">
-      <h1 class="font-weight-bold intro mt-5" i18n>
+      <div class="mt-5">
+        <div class="badge badge-light badge-pill border mb-3 px-3 py-2">
+          <a href="../en/blog/2023/08/ghostfolio-2"
+            ><span class="mr-1 text-uppercase" i18n>New</span>
+            <span class="font-weight-normal">Ghostfolio 2.0</span></a
+          >
+        </div>
+        <h1 class="font-weight-bold intro" i18n>
           Manage your wealth like a boss
         </h1>
+      </div>
       <p class="lead mb-4" i18n>
         Ghostfolio is a privacy-first, open source dashboard for your personal
         finances. Break down your asset allocation, know your net worth and make