Release 1.196.0 (#1281)

* Extend landing page

* Update changelog

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.196.0 - 22.09.2022
+
+### Added
+
+- Set up the language localization for Italiano (`it`)
+- Extended the landing page
+
 ## 1.195.0 - 20.09.2022
 
 ### Changed
@@ -195,7 +202,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Set up `ng-extract-i18n-merge` to improve the i18n extraction and merge workflow
-- Set up language localization for German (`de`)
+- Set up the language localization for German (`de`)
 - Resolved the feature graphic of the blog post
 
 ### Changed

apps/api/src/app/frontend.middleware.ts

@@ -11,6 +11,7 @@ import { NextFunction, Request, Response } from 'express';
 export class FrontendMiddleware implements NestMiddleware {
   public indexHtmlDe = '';
   public indexHtmlEn = '';
+  public indexHtmlIt = '';
   public isProduction: boolean;
 
   public constructor(
@@ -32,6 +33,10 @@ export class FrontendMiddleware implements NestMiddleware {
         this.getPathOfIndexHtmlFile(DEFAULT_LANGUAGE_CODE),
         'utf8'
       );
+      this.indexHtmlIt = fs.readFileSync(
+        this.getPathOfIndexHtmlFile('it'),
+        'utf8'
+      );
     } catch {}
   }
 
@@ -61,6 +66,15 @@ export class FrontendMiddleware implements NestMiddleware {
           rootUrl: this.configurationService.get('ROOT_URL')
         })
       );
+    } else if (req.path === '/it' || req.path.startsWith('/it/')) {
+      res.send(
+        this.interpolate(this.indexHtmlIt, {
+          featureGraphicPath,
+          languageCode: 'it',
+          path: req.path,
+          rootUrl: this.configurationService.get('ROOT_URL')
+        })
+      );
     } else {
       res.send(
         this.interpolate(this.indexHtmlEn, {

apps/client/src/app/pages/account/account-page.component.ts

@@ -54,7 +54,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public language = document.documentElement.lang;
-  public locales = ['de', 'de-CH', 'en-GB', 'en-US'];
+  public locales = ['de', 'de-CH', 'en-GB', 'en-US', 'it'];
   public price: number;
   public priceId: string;
   public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;

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

@@ -126,6 +126,7 @@
                       <mat-option [value]="null"></mat-option>
                       <mat-option value="de">Deutsch</mat-option>
                       <mat-option value="en">English</mat-option>
+                      <mat-option value="it">Italiano</mat-option>
                     </mat-select>
                   </mat-form-field>
                 </div>

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

@@ -55,6 +55,28 @@
     </div>
   </div>
 
+  <div class="row my-3">
+    <div class="col-md-4 my-2">
+      <mat-card>
+        <mat-card-title class="text-center">360° View</mat-card-title>
+        Get the full picture of your personal finances across multiple
+        platforms.
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card>
+        <mat-card-title class="text-center">Web3 Ready</mat-card-title>
+        Use Ghostfolio anonymously and own your financial data.
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card>
+        <mat-card-title class="text-center">Open Source</mat-card-title>
+        Benefit from continuous improvements through a strong community.
+      </mat-card>
+    </div>
+  </div>
+
   <div class="row my-5">
     <div class="col-md-6 offset-md-3">
       <h2 class="h4 mb-1 text-center">Why <strong>Ghostfolio</strong>?</h2>
@@ -133,19 +155,43 @@
     </div>
   </div>
 
-  <div class="row my-5">
+  <div class="row my-3">
-    <div class="col-md-6 offset-md-3">
+    <div class="col-12">
       <h2 class="h4 mb-1 text-center">
         How does <strong>Ghostfolio</strong> work?
       </h2>
       <p class="lead mb-3 text-center">Get started in only 3 steps</p>
-      <ol class="m-0 pl-3">
+    </div>
-        <li class="mb-2">
+    <div class="col-md-4 my-2">
-          Sign up anonymously<br />(no e-mail address nor credit card required)
+      <mat-card class="d-flex flex-row h-100">
-        </li>
+        <div class="flex-grow-1">
-        <li class="mb-2">Add any of your historical transactions</li>
+          <div class="font-weight-bold">Sign up anonymously*</div>
-        <li>Get valuable insights of your portfolio composition</li>
+          <div class="text-muted">
-      </ol>
+            <small>* no e-mail address nor credit card required</small>
+          </div>
+        </div>
+        <div class="pl-2 text-muted text-right">1</div>
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card class="d-flex flex-row h-100">
+        <div class="flex-grow-1">
+          <div class="font-weight-bold">
+            Add any of your historical transactions
+          </div>
+        </div>
+        <div class="pl-2 text-muted text-right">2</div>
+      </mat-card>
+    </div>
+    <div class="col-md-4 my-2">
+      <mat-card class="d-flex flex-row h-100">
+        <div class="flex-grow-1">
+          <div class="font-weight-bold">
+            Get valuable insights of your portfolio composition
+          </div>
+        </div>
+        <div class="pl-2 text-muted text-right">3</div>
+      </mat-card>
     </div>
   </div>
 

apps/client/src/app/pages/landing/landing-page.module.ts

@@ -1,6 +1,7 @@
 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 { RouterModule } from '@angular/router';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 
@@ -14,6 +15,7 @@ import { LandingPageComponent } from './landing-page.component';
     GfLogoModule,
     LandingPageRoutingModule,
     MatButtonModule,
+    MatCardModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

libs/common/src/lib/helper.ts

@@ -1,7 +1,7 @@
 import * as currencies from '@dinero.js/currencies';
 import { DataSource } from '@prisma/client';
 import { getDate, getMonth, getYear, parse, subDays } from 'date-fns';
-import { de } from 'date-fns/locale';
+import { de, it } from 'date-fns/locale';
 
 import { ghostfolioScraperApiSymbolPrefix, locale } from './config';
 import { Benchmark } from './interfaces';
@@ -75,6 +75,8 @@ export function getCssVariable(aCssVariable: string) {
 export function getDateFnsLocale(aLanguageCode: string) {
   if (aLanguageCode === 'de') {
     return de;
+  } else if (aLanguageCode === 'it') {
+    return it;
   }
 
   return undefined;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.195.0",
+  "version": "1.196.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {