Feature/refactor public routes: faq (#4933)

* Refactor public routes: faq

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

@@ -64,7 +64,7 @@ const routes: Routes = [
     path: ghostfolioRoutes.demo
   },
   {
-    path: ghostfolioRoutes.faq,
+    path: publicRoutes.faq.path,
     loadChildren: () =>
       import('./pages/faq/faq-page.module').then((m) => m.FaqPageModule)
   },

apps/client/src/app/app.component.ts

@@ -79,7 +79,7 @@ export class AppComponent implements OnDestroy, OnInit {
     routes.termsOfService
   ];
   public routerLinkBlog = publicRoutes.blog.routerLink;
-  public routerLinkFaq = ['/' + routes.faq];
+  public routerLinkFaq = publicRoutes.faq.routerLink;
   public routerLinkFeatures = publicRoutes.features.routerLink;
   public routerLinkMarkets = ['/' + routes.markets];
   public routerLinkOpenStartup = publicRoutes.openStartup.routerLink;
@@ -201,7 +201,7 @@ export class AppComponent implements OnDestroy, OnInit {
 
         this.hasTabs =
           (this.currentRoute === routes.about ||
-            this.currentRoute === routes.faq ||
+            this.currentRoute === publicRoutes.faq.path ||
             this.currentRoute === routes.resources ||
             this.currentRoute === internalRoutes.account.path ||
             this.currentRoute === routes.adminControl ||

apps/client/src/app/core/auth.guard.ts

@@ -22,7 +22,7 @@ export class AuthGuard {
     `/${routes.about}`,
     `/${publicRoutes.blog.path}`,
     `/${routes.demo}`,
-    `/${routes.faq}`,
+    `/${publicRoutes.faq.path}`,
     `/${publicRoutes.features.path}`,
     `/${routes.markets}`,
     `/${publicRoutes.openStartup.path}`,

apps/client/src/app/pages/about/overview/about-overview-page.component.ts

@@ -2,7 +2,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { publicRoutes, routes } from '@ghostfolio/common/routes/routes';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Subject } from 'rxjs';
@@ -19,7 +19,7 @@ export class AboutOverviewPageComponent implements OnDestroy, OnInit {
   public hasPermissionForSubscription: boolean;
   public isLoggedIn: boolean;
   public routerLinkBlog = publicRoutes.blog.routerLink;
-  public routerLinkFaq = ['/' + routes.faq];
+  public routerLinkFaq = publicRoutes.faq.routerLink;
   public routerLinkFeatures = publicRoutes.features.routerLink;
   public routerLinkOpenStartup = publicRoutes.openStartup.routerLink;
   public user: User;

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

@@ -1,5 +1,5 @@
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-import { routes as ghostfolioRoutes } from '@ghostfolio/common/routes/routes';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -18,12 +18,12 @@ const routes: Routes = [
           )
       },
       {
-        path: ghostfolioRoutes.saas,
+        path: publicRoutes.faq.subRoutes.saas.path,
         loadChildren: () =>
           import('./saas/saas-page.module').then((m) => m.SaasPageModule)
       },
       {
-        path: ghostfolioRoutes.selfHosting,
+        path: publicRoutes.faq.subRoutes.selfHosting.path,
         loadChildren: () =>
           import('./self-hosting/self-hosting-page.module').then(
             (m) => m.SelfHostingPageModule
@@ -32,7 +32,7 @@ const routes: Routes = [
     ],
     component: FaqPageComponent,
     path: '',
-    title: $localize`Frequently Asked Questions (FAQ)`
+    title: publicRoutes.faq.title
   }
 ];
 

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

@@ -1,7 +1,7 @@
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { routes } from '@ghostfolio/common/routes/routes';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -36,18 +36,18 @@ export class FaqPageComponent implements OnDestroy, OnInit {
       {
         iconName: 'reader-outline',
         label: $localize`General`,
-        routerLink: ['/' + routes.faq]
+        routerLink: publicRoutes.faq.routerLink
       },
       {
         iconName: 'cloudy-outline',
         label: $localize`Cloud` + ' (SaaS)',
-        routerLink: ['/' + routes.faq, routes.saas],
+        routerLink: publicRoutes.faq.subRoutes.saas.routerLink,
         showCondition: this.hasPermissionForSubscription
       },
       {
         iconName: 'server-outline',
         label: $localize`Self-Hosting`,
-        routerLink: ['/' + routes.faq, routes.selfHosting]
+        routerLink: publicRoutes.faq.subRoutes.selfHosting.routerLink
       }
     ];
   }

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

@@ -1,4 +1,5 @@
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -10,7 +11,7 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     component: SaasPageComponent,
     path: '',
-    title: $localize`Cloud` + ' (SaaS) – ' + $localize`FAQ`
+    title: `${publicRoutes.faq.subRoutes.saas.title} - ${publicRoutes.faq.title}`
   }
 ];
 

apps/client/src/app/pages/faq/self-hosting/self-hosting-page-routing.module.ts

@@ -1,4 +1,5 @@
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
@@ -10,7 +11,7 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     component: SelfHostingPageComponent,
     path: '',
-    title: $localize`Self-Hosting` + ' – ' + $localize`FAQ`
+    title: `${publicRoutes.faq.subRoutes.selfHosting.title} - ${publicRoutes.faq.title}`
   }
 ];
 

apps/client/src/app/pages/resources/overview/resources-overview.component.html

@@ -7,7 +7,7 @@
           <div class="mb-4">
             <h3 class="h5 mt-0">{{ item.title }}</h3>
             <p class="mb-1">{{ item.description }}</p>
-            <a [routerLink]="item.link">Explore {{ item.title }} →</a>
+            <a [routerLink]="item.routerLink">Explore {{ item.title }} →</a>
           </div>
         }
       </div>

apps/client/src/app/pages/resources/overview/resources-overview.component.ts

@@ -1,4 +1,4 @@
-import { routes } from '@ghostfolio/common/routes/routes';
+import { publicRoutes, routes } from '@ghostfolio/common/routes/routes';
 
 import { Component } from '@angular/core';
 
@@ -11,28 +11,28 @@ import { Component } from '@angular/core';
 export class ResourcesOverviewComponent {
   public overviewItems = [
     {
-      title: 'Frequently Asked Questions (FAQ)',
       description:
         'Find quick answers to commonly asked questions about Ghostfolio in our Frequently Asked Questions (FAQ) section.',
-      link: ['/' + routes.faq]
+      routerLink: publicRoutes.faq.routerLink,
+      title: publicRoutes.faq.title
     },
     {
-      title: 'Guides',
       description:
         'Explore our guides to help you get started with investing and managing your finances.',
-      link: ['/' + routes.resources, routes.guides]
+      routerLink: ['/' + routes.resources, routes.guides],
+      title: 'Guides'
     },
     {
-      title: 'Markets',
       description:
         'Access various market resources and tools to stay informed about financial markets.',
-      link: ['/' + routes.resources, routes.markets]
+      routerLink: ['/' + routes.resources, routes.markets],
+      title: 'Markets'
     },
     {
-      title: 'Glossary',
       description:
         'Learn key financial terms and concepts in our comprehensive glossary.',
-      link: ['/' + routes.resources, routes.glossary]
+      routerLink: ['/' + routes.resources, routes.glossary],
+      title: 'Glossary'
     }
   ];
 }

libs/common/src/lib/routes/routes.ts

@@ -15,7 +15,6 @@ export const routes = {
   membership: 'membership',
   personalFinanceTools: 'personal-finance-tools',
   public: 'p',
-  saas: 'saas',
   settings: 'settings',
   start: 'start',
   users: 'users',
@@ -24,7 +23,6 @@ export const routes = {
   // Publicly accessible pages
   about: $localize`:kebab-case:about`,
   changelog: $localize`:kebab-case:changelog`,
-  faq: $localize`:kebab-case:faq`,
   glossary: $localize`:kebab-case:glossary`,
   guides: $localize`:kebab-case:guides`,
   license: $localize`:kebab-case:license`,
@@ -32,7 +30,6 @@ export const routes = {
   openSourceAlternativeTo: $localize`:kebab-case:open-source-alternative-to`,
   privacyPolicy: $localize`:kebab-case:privacy-policy`,
   resources: $localize`:kebab-case:resources`,
-  selfHosting: $localize`:kebab-case:self-hosting`,
   termsOfService: $localize`:kebab-case:terms-of-service`
 };
 
@@ -134,6 +131,26 @@ export const publicRoutes = {
     routerLink: ['/blog'],
     title: $localize`Blog`
   },
+  faq: {
+    path: $localize`:kebab-case:faq`,
+    routerLink: ['/' + $localize`:kebab-case:faq`],
+    subRoutes: {
+      saas: {
+        path: 'saas',
+        routerLink: ['/' + $localize`:kebab-case:faq`, 'saas'],
+        title: $localize`Cloud` + ' (SaaS)'
+      },
+      selfHosting: {
+        path: $localize`:kebab-case:self-hosting`,
+        routerLink: [
+          '/' + $localize`:kebab-case:faq`,
+          $localize`:kebab-case:self-hosting`
+        ],
+        title: $localize`Self-Hosting`
+      }
+    },
+    title: $localize`Frequently Asked Questions (FAQ)`
+  },
   features: {
     path: $localize`:kebab-case:features`,
     routerLink: ['/' + $localize`:kebab-case:features`],