Feature/extend personal finance tools pages 20231104 (#2587)

* Introduce alias

* Add Rocket Money

* Add 8FIGURES

apps/api/src/assets/sitemap.xml

@@ -54,6 +54,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-8figures</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-altoo</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -146,6 +150,10 @@
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-projectionlab</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-rocket-money</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/de/ressourcen/personal-finance-tools/open-source-alternative-zu-seeking-alpha</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -324,6 +332,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-8figures</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-altoo</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -416,6 +428,10 @@
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-projectionlab</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-rocket-money</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/resources/personal-finance-tools/open-source-alternative-to-seeking-alpha</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -622,6 +638,10 @@
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-8figures</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-altoo</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -714,6 +734,10 @@
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-projectionlab</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-rocket-money</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/it/risorse/personal-finance-tools/alternativa-open-source-a-seeking-alpha</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -766,6 +790,10 @@
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-8figures</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-altoo</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -858,6 +886,10 @@
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-projectionlab</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-rocket-money</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/nl/bronnen/personal-finance-tools/open-source-alternatief-voor-seeking-alpha</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page-routing.module.ts

@@ -16,10 +16,10 @@ const routes: Routes = [
     .filter(({ key }) => {
       return key !== 'ghostfolio';
     })
-    .map(({ component, key, name }) => {
+    .map(({ alias, component, key, name }) => {
       return {
         canActivate: [AuthGuard],
-        path: $localize`open-source-alternative-to` + `-${key}`,
+        path: $localize`open-source-alternative-to` + `-${alias ?? key}`,
         loadComponent: () =>
           import(`./products/${key}-page.component`).then(() => component),
         title: $localize`Open Source Alternative to ${name}`

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.component.ts

@@ -12,9 +12,13 @@ import { products } from './products';
 export class PersonalFinanceToolsPageComponent implements OnDestroy {
   public pathAlternativeTo = $localize`open-source-alternative-to` + '-';
   public pathResources = '/' + $localize`resources`;
-  public products = products.filter(({ key }) => {
-    return key !== 'ghostfolio';
-  });
+  public products = products
+    .filter(({ key }) => {
+      return key !== 'ghostfolio';
+    })
+    .sort((a, b) => {
+      return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
+    });
   public routerLinkAbout = ['/' + $localize`about`];
 
   private unsubscribeSubject = new Subject<void>();

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.html

@@ -28,8 +28,8 @@
             <div class="flex-nowrap no-gutters row">
               <a
                 class="d-flex overflow-hidden w-100"
-                title="Compare Ghostfolio to {{ product.name }}"
-                [routerLink]="[pathResources, 'personal-finance-tools', pathAlternativeTo + product.key]"
+                title="Compare Ghostfolio to {{ product.name }} - {{ product.slogan }}"
+                [routerLink]="[pathResources, 'personal-finance-tools', pathAlternativeTo + (product.alias ?? product.key)]"
               >
                 <div class="flex-grow-1 overflow-hidden">
                   <div class="h6 m-0 text-truncate" i18n>

apps/client/src/app/pages/resources/personal-finance-tools/products.ts

@@ -7,6 +7,7 @@ import { CapMonPageComponent } from './products/capmon-page.component';
 import { CopilotMoneyPageComponent } from './products/copilot-money-page.component';
 import { DeltaPageComponent } from './products/delta-page.component';
 import { DivvyDiaryPageComponent } from './products/divvydiary-page.component';
+import { EightFiguresPageComponent } from './products/eightfigures-page.component';
 import { ExirioPageComponent } from './products/exirio-page.component';
 import { FinaryPageComponent } from './products/finary-page.component';
 import { FolisharePageComponent } from './products/folishare-page.component';
@@ -23,6 +24,7 @@ import { PlannixPageComponent } from './products/plannix-page.component';
 import { PortfolioDividendTrackerPageComponent } from './products/portfolio-dividend-tracker-page.component';
 import { PortseidoPageComponent } from './products/portseido-page.component';
 import { ProjectionLabPageComponent } from './products/projectionlab-page.component';
+import { RocketMoneyPageComponent } from './products/rocket-money-page.component';
 import { SeekingAlphaPageComponent } from './products/seeking-alpha-page.component';
 import { SharesightPageComponent } from './products/sharesight-page.component';
 import { SimplePortfolioPageComponent } from './products/simple-portfolio-page.component';
@@ -131,6 +133,15 @@ export const products: Product[] = [
     pricingPerYear: '€65',
     slogan: 'Your personal Dividend Calendar'
   },
+  {
+    alias: '8figures',
+    component: EightFiguresPageComponent,
+    founded: 2022,
+    key: 'eightfigures',
+    name: '8FIGURES',
+    origin: $localize`United States`,
+    slogan: 'Portfolio Tracker Designed by Professional Investors'
+  },
   {
     component: ExirioPageComponent,
     founded: 2020,
@@ -307,6 +318,15 @@ export const products: Product[] = [
     pricingPerYear: '$108',
     slogan: 'Build Financial Plans You Love.'
   },
+  {
+    component: RocketMoneyPageComponent,
+    founded: 2015,
+    hasSelfHostingAbility: false,
+    key: 'rocket-money',
+    name: 'Rocket Money',
+    origin: $localize`United States`,
+    slogan: 'Track your net worth'
+  },
   {
     component: SeekingAlphaPageComponent,
     founded: 2004,

apps/client/src/app/pages/resources/personal-finance-tools/products/eightfigures-page.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-eightfigures-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class EightFiguresPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'eightfigures';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}

apps/client/src/app/pages/resources/personal-finance-tools/products/rocket-money-page.component.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+import { products } from '../products';
+
+@Component({
+  host: { class: 'page' },
+  imports: [CommonModule, MatButtonModule, RouterModule],
+  selector: 'gf-rocket-money-page',
+  standalone: true,
+  styleUrls: ['../product-page-template.scss'],
+  templateUrl: '../product-page-template.html'
+})
+export class RocketMoneyPageComponent {
+  public product1 = products.find(({ key }) => {
+    return key === 'ghostfolio';
+  });
+
+  public product2 = products.find(({ key }) => {
+    return key === 'rocket-money';
+  });
+
+  public routerLinkAbout = ['/' + $localize`about`];
+  public routerLinkFeatures = ['/' + $localize`features`];
+  public routerLinkResourcesPersonalFinanceTools = [
+    '/' + $localize`resources`,
+    'personal-finance-tools'
+  ];
+}

libs/common/src/lib/interfaces/product.ts

@@ -1,4 +1,5 @@
 export interface Product {
+  alias?: string;
   component: any;
   founded?: number;
   hasFreePlan?: boolean;