Feature/add black friday 2023 blog post (#2664)

* Add blog post: Black Friday 2023

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a blog post: _Black Friday 2023_
+
 ### Changed
 
 - Upgraded `http-status-codes` from version `2.2.0` to `2.3.0`

apps/api/src/assets/sitemap.xml

@@ -326,6 +326,10 @@
     <loc>https://ghostfol.io/en/blog/2023/09/hacktoberfest-2023</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2023/11/black-friday-2023</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2023/11/hacktoberfest-2023-debriefing</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>

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

@@ -76,6 +76,10 @@ const locales = {
     featureGraphicPath: 'assets/images/blog/hacktoberfest-2023.png',
     title: `Hacktoberfest 2023 - ${title}`
   },
+  '/en/blog/2023/11/black-friday-2023': {
+    featureGraphicPath: 'assets/images/blog/black-friday-2023.png',
+    title: `Black Friday 2023 - ${title}`
+  },
   '/en/blog/2023/11/hacktoberfest-2023-debriefing': {
     featureGraphicPath: 'assets/images/blog/hacktoberfest-2023.png',
     title: `Hacktoberfest 2023 Debriefing - ${title}`

apps/client/src/app/pages/blog/2023/11/black-friday-2023/black-friday-2023-page.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+
+@Component({
+  host: { class: 'page' },
+  imports: [GfPremiumIndicatorModule, MatButtonModule, RouterModule],
+  selector: 'gf-black-friday-2023-page',
+  standalone: true,
+  templateUrl: './black-friday-2023-page.html'
+})
+export class BlackFriday2023PageComponent {
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkPricing = ['/' + $localize`pricing`];
+}

apps/client/src/app/pages/blog/2023/11/black-friday-2023/black-friday-2023-page.html

@@ -0,0 +1,152 @@
+<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">Black Friday 2023</h1>
+          <div class="mb-3 text-muted"><small>2023-11-18</small></div>
+          <img
+            alt="Black Friday 2023 Teaser"
+            class="rounded w-100"
+            src="../assets/images/blog/black-friday-2023.jpg"
+            title="Black Friday 2023"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            Get 33% off on our
+            <strong>Ghostfolio Premium</strong>
+            <gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+            ></gf-premium-indicator>
+            annual plan for ambitious investors who need the full picture of
+            their financial assets.
+          </p>
+        </section>
+        <section class="mb-4">
+          <p>
+            <a
+              href="https://ghostfol.io"
+              title="Open Source Wealth Management Software"
+              >Ghostfolio</a
+            >
+            is a modern web application to manage your personal finance. The
+            software presents the current assets (stocks, ETFs,
+            cryptocurrencies, commodities etc.) in real time to make solid,
+            data-driven investment decisions. Check out the numerous
+            <a [routerLink]="routerLinkFeatures">features</a> to manage your
+            wealth.
+          </p>
+        </section>
+        <section class="mb-4">
+          <p>
+            Snap the limited Black Friday 2023 deal before it’s gone. For
+            detailed information on plans and pricing, please visit our
+            <a [routerLink]="routerLinkPricing">pricing page</a>.
+          </p>
+          <p class="text-center">
+            <a color="primary" mat-flat-button [routerLink]="routerLinkPricing"
+              >Get the Deal</a
+            >
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">2023</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Black Friday</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cloud</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">Deal</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 Premium</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Hosting</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">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio Tracker</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Pricing</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">SaaS</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">Subscription</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth</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>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web 3.0</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"
+            >
+              Black Friday 2023
+            </li>
+          </ol>
+        </nav>
+      </article>
+    </div>
+  </div>
+</div>

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

@@ -172,6 +172,15 @@ const routes: Routes = [
         './2023/11/hacktoberfest-2023-debriefing/hacktoberfest-2023-debriefing-page.component'
       ).then((c) => c.Hacktoberfest2023DebriefingPageComponent),
     title: 'Hacktoberfest 2023 Debriefing'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/11/black-friday-2023',
+    loadComponent: () =>
+      import(
+        './2023/11/black-friday-2023/black-friday-2023-page.component'
+      ).then((c) => c.BlackFriday2023PageComponent),
+    title: 'Black Friday 2023'
   }
 ];
 

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

@@ -8,6 +8,34 @@
           finance</small
         >
       </h1>
+      <mat-card
+        *ngIf="hasPermissionForSubscription"
+        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/11/black-friday-2023"
+              >
+                <div class="flex-grow-1 overflow-hidden">
+                  <div class="h6 m-0 text-truncate">Black Friday 2023</div>
+                  <div class="d-flex text-muted">2023-11-17</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">