Feature/refactor blog articles to standalone components (#2117)

* Refactor blog articles to standalone components

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ 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).
 
+## Unreleased
+
+### Changed
+
+- Refactored the blog articles to standalone components
+
 ## 1.286.0 - 2023-07-03
 
 ### Fixed

apps/client/src/app/app-routing.module.ts

@@ -47,104 +47,6 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/blog/blog-page.module').then((m) => m.BlogPageModule)
   })),
-  {
-    path: 'blog/2021/07/hallo-ghostfolio',
-    loadChildren: () =>
-      import(
-        './pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.module'
-      ).then((m) => m.HalloGhostfolioPageModule)
-  },
-  {
-    path: 'blog/2021/07/hello-ghostfolio',
-    loadChildren: () =>
-      import(
-        './pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.module'
-      ).then((m) => m.HelloGhostfolioPageModule)
-  },
-  {
-    path: 'blog/2022/01/ghostfolio-first-months-in-open-source',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.module'
-      ).then((m) => m.FirstMonthsInOpenSourcePageModule)
-  },
-  {
-    path: 'blog/2022/07/ghostfolio-meets-internet-identity',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.module'
-      ).then((m) => m.GhostfolioMeetsInternetIdentityPageModule)
-  },
-  {
-    path: 'blog/2022/07/how-do-i-get-my-finances-in-order',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.module'
-      ).then((m) => m.HowDoIGetMyFinancesInOrderPageModule)
-  },
-  {
-    path: 'blog/2022/08/500-stars-on-github',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.module'
-      ).then((m) => m.FiveHundredStarsOnGitHubPageModule)
-  },
-  {
-    path: 'blog/2022/10/hacktoberfest-2022',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.module'
-      ).then((m) => m.Hacktoberfest2022PageModule)
-  },
-  {
-    path: 'blog/2022/11/black-friday-2022',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module'
-      ).then((m) => m.BlackFriday2022PageModule)
-  },
-  {
-    path: 'blog/2022/12/the-importance-of-tracking-your-personal-finances',
-    loadChildren: () =>
-      import(
-        './pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.module'
-      ).then((m) => m.TheImportanceOfTrackingYourPersonalFinancesPageModule)
-  },
-  {
-    path: 'blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt',
-    loadChildren: () =>
-      import(
-        './pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.module'
-      ).then((m) => m.GhostfolioAufSackgeldVorgestelltPageModule)
-  },
-  {
-    path: 'blog/2023/02/ghostfolio-meets-umbrel',
-    loadChildren: () =>
-      import(
-        './pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.module'
-      ).then((m) => m.GhostfolioMeetsUmbrelPageModule)
-  },
-  {
-    path: 'blog/2023/03/ghostfolio-reaches-1000-stars-on-github',
-    loadChildren: () =>
-      import(
-        './pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.module'
-      ).then((m) => m.ThousandStarsOnGitHubPageModule)
-  },
-  {
-    path: 'blog/2023/05/unlock-your-financial-potential-with-ghostfolio',
-    loadChildren: () =>
-      import(
-        './pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.module'
-      ).then((m) => m.UnlockYourFinancialPotentialWithGhostfolioPageModule)
-  },
-  {
-    path: 'blog/2023/07/exploring-the-path-to-fire',
-    loadChildren: () =>
-      import(
-        './pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.module'
-      ).then((m) => m.ExploringThePathToFirePageModule)
-  },
   {
     path: 'demo',
     loadChildren: () =>

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { HalloGhostfolioPageComponent } from './hallo-ghostfolio-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: HalloGhostfolioPageComponent,
-    path: '',
-    title: 'Hallo Ghostfolio'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HalloGhostfolioPageRoutingModule {}

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.component.ts

@@ -1,8 +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-hallo-ghostfolio-page',
+  standalone: true,
   templateUrl: './hallo-ghostfolio-page.html'
 })
 export class HalloGhostfolioPageComponent {}

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { HalloGhostfolioPageRoutingModule } from './hallo-ghostfolio-page-routing.module';
-import { HalloGhostfolioPageComponent } from './hallo-ghostfolio-page.component';
-
-@NgModule({
-  declarations: [HalloGhostfolioPageComponent],
-  imports: [CommonModule, HalloGhostfolioPageRoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class HalloGhostfolioPageModule {}

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { HelloGhostfolioPageComponent } from './hello-ghostfolio-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: HelloGhostfolioPageComponent,
-    path: '',
-    title: 'Hello Ghostfolio'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HelloGhostfolioPageRoutingModule {}

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.component.ts

@@ -1,8 +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-hello-ghostfolio-page',
+  standalone: true,
   templateUrl: './hello-ghostfolio-page.html'
 })
 export class HelloGhostfolioPageComponent {}

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { HelloGhostfolioPageRoutingModule } from './hello-ghostfolio-page-routing.module';
-import { HelloGhostfolioPageComponent } from './hello-ghostfolio-page.component';
-
-@NgModule({
-  declarations: [HelloGhostfolioPageComponent],
-  imports: [CommonModule, HelloGhostfolioPageRoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class HelloGhostfolioPageModule {}

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { FirstMonthsInOpenSourcePageComponent } from './first-months-in-open-source-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: FirstMonthsInOpenSourcePageComponent,
-    path: '',
-    title: 'First months in Open Source'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class FirstMonthsInOpenSourceRoutingModule {}

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.component.ts

@@ -1,8 +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-first-months-in-open-source-page',
+  standalone: true,
   templateUrl: './first-months-in-open-source-page.html'
 })
 export class FirstMonthsInOpenSourcePageComponent {}

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { FirstMonthsInOpenSourceRoutingModule } from './first-months-in-open-source-page-routing.module';
-import { FirstMonthsInOpenSourcePageComponent } from './first-months-in-open-source-page.component';
-
-@NgModule({
-  declarations: [FirstMonthsInOpenSourcePageComponent],
-  imports: [CommonModule, FirstMonthsInOpenSourceRoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class FirstMonthsInOpenSourcePageModule {}

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { GhostfolioMeetsInternetIdentityPageComponent } from './ghostfolio-meets-internet-identity-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: GhostfolioMeetsInternetIdentityPageComponent,
-    path: '',
-    title: 'Ghostfolio meets Internet Identity'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class GhostfolioMeetsInternetIdentityRoutingModule {}

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.component.ts

@@ -1,8 +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-meets-internet-identity-page',
+  standalone: true,
   templateUrl: './ghostfolio-meets-internet-identity-page.html'
 })
 export class GhostfolioMeetsInternetIdentityPageComponent {}

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.module.ts

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { GhostfolioMeetsInternetIdentityRoutingModule } from './ghostfolio-meets-internet-identity-page-routing.module';
-import { GhostfolioMeetsInternetIdentityPageComponent } from './ghostfolio-meets-internet-identity-page.component';
-
-@NgModule({
-  declarations: [GhostfolioMeetsInternetIdentityPageComponent],
-  imports: [
-    CommonModule,
-    GhostfolioMeetsInternetIdentityRoutingModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GhostfolioMeetsInternetIdentityPageModule {}

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { HowDoIGetMyFinancesInOrderPageComponent } from './how-do-i-get-my-finances-in-order-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: HowDoIGetMyFinancesInOrderPageComponent,
-    path: '',
-    title: 'How do I get my finances in order?'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class HowDoIGetMyFinancesInOrderRoutingModule {}

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.component.ts

@@ -1,8 +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-how-do-i-get-my-finances-in-order-page',
+  standalone: true,
   templateUrl: './how-do-i-get-my-finances-in-order-page.html'
 })
 export class HowDoIGetMyFinancesInOrderPageComponent {}

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.module.ts

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { HowDoIGetMyFinancesInOrderRoutingModule } from './how-do-i-get-my-finances-in-order-page-routing.module';
-import { HowDoIGetMyFinancesInOrderPageComponent } from './how-do-i-get-my-finances-in-order-page.component';
-
-@NgModule({
-  declarations: [HowDoIGetMyFinancesInOrderPageComponent],
-  imports: [
-    CommonModule,
-    HowDoIGetMyFinancesInOrderRoutingModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class HowDoIGetMyFinancesInOrderPageModule {}

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { FiveHundredStarsOnGitHubPageComponent } from './500-stars-on-github-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: FiveHundredStarsOnGitHubPageComponent,
-    path: '',
-    title: '500 Stars on GitHub'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class FiveHundredStarsOnGitHubRoutingModule {}

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.component.ts

@@ -1,8 +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-500-stars-on-github-page',
+  standalone: true,
   templateUrl: './500-stars-on-github-page.html'
 })
 export class FiveHundredStarsOnGitHubPageComponent {}

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { FiveHundredStarsOnGitHubRoutingModule } from './500-stars-on-github-page-routing.module';
-import { FiveHundredStarsOnGitHubPageComponent } from './500-stars-on-github-page.component';
-
-@NgModule({
-  declarations: [FiveHundredStarsOnGitHubPageComponent],
-  imports: [CommonModule, FiveHundredStarsOnGitHubRoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class FiveHundredStarsOnGitHubPageModule {}

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

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { Hacktoberfest2022PageComponent } from './hacktoberfest-2022-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: Hacktoberfest2022PageComponent,
-    path: '',
-    title: 'Hacktoberfest 2022'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class Hacktoberfest2022RoutingModule {}

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.component.ts

@@ -1,8 +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-hacktoberfest-2022-page',
+  standalone: true,
   templateUrl: './hacktoberfest-2022-page.html'
 })
 export class Hacktoberfest2022PageComponent {}

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { Hacktoberfest2022RoutingModule } from './hacktoberfest-2022-page-routing.module';
-import { Hacktoberfest2022PageComponent } from './hacktoberfest-2022-page.component';
-
-@NgModule({
-  declarations: [Hacktoberfest2022PageComponent],
-  imports: [CommonModule, Hacktoberfest2022RoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class Hacktoberfest2022PageModule {}

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { BlackFriday2022PageComponent } from './black-friday-2022-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: BlackFriday2022PageComponent,
-    path: '',
-    title: 'Black Friday 2022'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class BlackFriday2022RoutingModule {}

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

@@ -1,8 +1,13 @@
 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-2022-page',
+  standalone: true,
   templateUrl: './black-friday-2022-page.html'
 })
 export class BlackFriday2022PageComponent {

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module.ts

@@ -1,21 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
-
-import { BlackFriday2022RoutingModule } from './black-friday-2022-page-routing.module';
-import { BlackFriday2022PageComponent } from './black-friday-2022-page.component';
-
-@NgModule({
-  declarations: [BlackFriday2022PageComponent],
-  imports: [
-    BlackFriday2022RoutingModule,
-    CommonModule,
-    GfPremiumIndicatorModule,
-    MatButtonModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class BlackFriday2022PageModule {}

apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { TheImportanceOfTrackingYourPersonalFinancesPageComponent } from './the-importance-of-tracking-your-personal-finances-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: TheImportanceOfTrackingYourPersonalFinancesPageComponent,
-    path: '',
-    title: 'The importance of tracking your personal finances'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class TheImportanceOfTrackingYourPersonalFinancesRoutingModule {}

apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.component.ts

@@ -1,8 +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-the-importance-of-tracking-your-personal-finances-page',
+  standalone: true,
   templateUrl: './the-importance-of-tracking-your-personal-finances-page.html'
 })
 export class TheImportanceOfTrackingYourPersonalFinancesPageComponent {}

apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.module.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
-
-import { TheImportanceOfTrackingYourPersonalFinancesRoutingModule } from './the-importance-of-tracking-your-personal-finances-page-routing.module';
-import { TheImportanceOfTrackingYourPersonalFinancesPageComponent } from './the-importance-of-tracking-your-personal-finances-page.component';
-
-@NgModule({
-  declarations: [TheImportanceOfTrackingYourPersonalFinancesPageComponent],
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    RouterModule,
-    TheImportanceOfTrackingYourPersonalFinancesRoutingModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class TheImportanceOfTrackingYourPersonalFinancesPageModule {}

apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { GhostfolioAufSackgeldVorgestelltPageComponent } from './ghostfolio-auf-sackgeld-vorgestellt-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: GhostfolioAufSackgeldVorgestelltPageComponent,
-    path: '',
-    title: 'Ghostfolio auf Sackgeld.com vorgestellt'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class GhostfolioAufSackgeldVorgestelltPageRoutingModule {}

apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.component.ts

@@ -1,8 +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-auf-sackgeld-vorgestellt-page',
+  standalone: true,
   templateUrl: './ghostfolio-auf-sackgeld-vorgestellt-page.html'
 })
 export class GhostfolioAufSackgeldVorgestelltPageComponent {}

apps/client/src/app/pages/blog/2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.module.ts

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { GhostfolioAufSackgeldVorgestelltPageRoutingModule } from './ghostfolio-auf-sackgeld-vorgestellt-page-routing.module';
-import { GhostfolioAufSackgeldVorgestelltPageComponent } from './ghostfolio-auf-sackgeld-vorgestellt-page.component';
-
-@NgModule({
-  declarations: [GhostfolioAufSackgeldVorgestelltPageComponent],
-  imports: [
-    CommonModule,
-    GhostfolioAufSackgeldVorgestelltPageRoutingModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GhostfolioAufSackgeldVorgestelltPageModule {}

apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { GhostfolioMeetsUmbrelPageComponent } from './ghostfolio-meets-umbrel-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: GhostfolioMeetsUmbrelPageComponent,
-    path: '',
-    title: 'Ghostfolio meets Umbrel'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class GhostfolioMeetsUmbrelPageRoutingModule {}

apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.component.ts

@@ -1,8 +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-meets-umbrel-page',
+  standalone: true,
   templateUrl: './ghostfolio-meets-umbrel-page.html'
 })
 export class GhostfolioMeetsUmbrelPageComponent {}

apps/client/src/app/pages/blog/2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { GhostfolioMeetsUmbrelPageRoutingModule } from './ghostfolio-meets-umbrel-page-routing.module';
-import { GhostfolioMeetsUmbrelPageComponent } from './ghostfolio-meets-umbrel-page.component';
-
-@NgModule({
-  declarations: [GhostfolioMeetsUmbrelPageComponent],
-  imports: [CommonModule, GhostfolioMeetsUmbrelPageRoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GhostfolioMeetsUmbrelPageModule {}

apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { ThousandStarsOnGitHubPageComponent } from './1000-stars-on-github-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: ThousandStarsOnGitHubPageComponent,
-    path: '',
-    title: 'Ghostfolio reaches 1’000 Stars on GitHub'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ThousandStarsOnGitHubRoutingModule {}

apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.component.ts

@@ -1,8 +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-1000-stars-on-github-page',
+  standalone: true,
   templateUrl: './1000-stars-on-github-page.html'
 })
 export class ThousandStarsOnGitHubPageComponent {}

apps/client/src/app/pages/blog/2023/03/1000-stars-on-github/1000-stars-on-github-page.module.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ThousandStarsOnGitHubRoutingModule } from './1000-stars-on-github-page-routing.module';
-import { ThousandStarsOnGitHubPageComponent } from './1000-stars-on-github-page.component';
-
-@NgModule({
-  declarations: [ThousandStarsOnGitHubPageComponent],
-  imports: [CommonModule, ThousandStarsOnGitHubRoutingModule, RouterModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class ThousandStarsOnGitHubPageModule {}

apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { UnlockYourFinancialPotentialWithGhostfolioPageComponent } from './unlock-your-financial-potential-with-ghostfolio-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: UnlockYourFinancialPotentialWithGhostfolioPageComponent,
-    path: '',
-    title: 'Unlock your Financial Potential with Ghostfolio'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class UnlockYourFinancialPotentialWithGhostfolioRoutingModule {}

apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.component.ts

@@ -1,8 +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-unlock-your-financial-potential-with-ghostfolio-page',
+  standalone: true,
   templateUrl: './unlock-your-financial-potential-with-ghostfolio-page.html'
 })
 export class UnlockYourFinancialPotentialWithGhostfolioPageComponent {}

apps/client/src/app/pages/blog/2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.module.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
-
-import { UnlockYourFinancialPotentialWithGhostfolioRoutingModule } from './unlock-your-financial-potential-with-ghostfolio-page-routing.module';
-import { UnlockYourFinancialPotentialWithGhostfolioPageComponent } from './unlock-your-financial-potential-with-ghostfolio-page.component';
-
-@NgModule({
-  declarations: [UnlockYourFinancialPotentialWithGhostfolioPageComponent],
-  imports: [
-    CommonModule,
-    MatButtonModule,
-    RouterModule,
-    UnlockYourFinancialPotentialWithGhostfolioRoutingModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class UnlockYourFinancialPotentialWithGhostfolioPageModule {}

apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page-routing.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { ExploringThePathToFirePageComponent } from './exploring-the-path-to-fire-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: ExploringThePathToFirePageComponent,
-    path: '',
-    title: 'Exploring the Path to FIRE'
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ExploringThePathToFireRoutingModule {}

apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.component.ts

@@ -1,8 +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-exploring-the-path-to-fire-page-page',
+  standalone: true,
   templateUrl: './exploring-the-path-to-fire-page.html'
 })
 export class ExploringThePathToFirePageComponent {}

apps/client/src/app/pages/blog/2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.module.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { RouterModule } from '@angular/router';
-
-import { ExploringThePathToFireRoutingModule } from './exploring-the-path-to-fire-page-routing.module';
-import { ExploringThePathToFirePageComponent } from './exploring-the-path-to-fire-page.component';
-
-@NgModule({
-  declarations: [ExploringThePathToFirePageComponent],
-  imports: [
-    CommonModule,
-    ExploringThePathToFireRoutingModule,
-    MatButtonModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class ExploringThePathToFirePageModule {}

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

@@ -10,6 +10,132 @@ const routes: Routes = [
     component: BlogPageComponent,
     path: '',
     title: $localize`Blog`
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2021/07/hallo-ghostfolio',
+    loadComponent: () =>
+      import('./2021/07/hallo-ghostfolio/hallo-ghostfolio-page.component').then(
+        (c) => c.HalloGhostfolioPageComponent
+      ),
+    title: 'Hallo Ghostfolio'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2021/07/hello-ghostfolio',
+    loadComponent: () =>
+      import('./2021/07/hello-ghostfolio/hello-ghostfolio-page.component').then(
+        (c) => c.HelloGhostfolioPageComponent
+      ),
+    title: 'Hello Ghostfolio'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/01/ghostfolio-first-months-in-open-source',
+    loadComponent: () =>
+      import(
+        './2022/01/first-months-in-open-source/first-months-in-open-source-page.component'
+      ).then((c) => c.FirstMonthsInOpenSourcePageComponent),
+    title: 'First months in Open Source'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/07/ghostfolio-meets-internet-identity',
+    loadComponent: () =>
+      import(
+        './2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.component'
+      ).then((c) => c.GhostfolioMeetsInternetIdentityPageComponent),
+    title: 'Ghostfolio meets Internet Identity'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/07/how-do-i-get-my-finances-in-order',
+    loadComponent: () =>
+      import(
+        './2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.component'
+      ).then((c) => c.HowDoIGetMyFinancesInOrderPageComponent),
+    title: 'How do I get my finances in order?'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/08/500-stars-on-github',
+    loadComponent: () =>
+      import(
+        './2022/08/500-stars-on-github/500-stars-on-github-page.component'
+      ).then((c) => c.FiveHundredStarsOnGitHubPageComponent),
+    title: '500 Stars on GitHub'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/10/hacktoberfest-2022',
+    loadComponent: () =>
+      import(
+        './2022/10/hacktoberfest-2022/hacktoberfest-2022-page.component'
+      ).then((c) => c.Hacktoberfest2022PageComponent),
+    title: 'Hacktoberfest 2022'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/11/black-friday-2022',
+    loadComponent: () =>
+      import(
+        './2022/11/black-friday-2022/black-friday-2022-page.component'
+      ).then((c) => c.BlackFriday2022PageComponent),
+    title: 'Black Friday 2022'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2022/12/the-importance-of-tracking-your-personal-finances',
+    loadComponent: () =>
+      import(
+        './2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.component'
+      ).then((c) => c.TheImportanceOfTrackingYourPersonalFinancesPageComponent),
+    title: 'The importance of tracking your personal finances'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/01/ghostfolio-auf-sackgeld-vorgestellt',
+    loadComponent: () =>
+      import(
+        './2023/01/ghostfolio-auf-sackgeld-vorgestellt/ghostfolio-auf-sackgeld-vorgestellt-page.component'
+      ).then((c) => c.GhostfolioAufSackgeldVorgestelltPageComponent),
+    title: 'Ghostfolio auf Sackgeld.com vorgestellt'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/02/ghostfolio-meets-umbrel',
+    loadComponent: () =>
+      import(
+        './2023/02/ghostfolio-meets-umbrel/ghostfolio-meets-umbrel-page.component'
+      ).then((c) => c.GhostfolioMeetsUmbrelPageComponent),
+    title: 'Ghostfolio meets Umbrel'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/03/ghostfolio-reaches-1000-stars-on-github',
+    loadComponent: () =>
+      import(
+        './2023/03/1000-stars-on-github/1000-stars-on-github-page.component'
+      ).then((c) => c.ThousandStarsOnGitHubPageComponent),
+    title: 'Ghostfolio reaches 1’000 Stars on GitHub'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/05/unlock-your-financial-potential-with-ghostfolio',
+    loadComponent: () =>
+      import(
+        './2023/05/unlock-your-financial-potential-with-ghostfolio/unlock-your-financial-potential-with-ghostfolio-page.component'
+      ).then((c) => c.UnlockYourFinancialPotentialWithGhostfolioPageComponent),
+    title: 'Unlock your Financial Potential with Ghostfolio'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2023/07/exploring-the-path-to-fire',
+    loadComponent: () =>
+      import(
+        './2023/07/exploring-the-path-to-fire/exploring-the-path-to-fire-page.component'
+      ).then((c) => c.ExploringThePathToFirePageComponent),
+    title: 'Exploring the Path to FIRE'
   }
 ];