Setup blog

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

@@ -33,6 +33,13 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/auth/auth-page.module').then((m) => m.AuthPageModule)
   },
+  {
+    path: 'en/blog/2021/07/hello-ghostfolio',
+    loadChildren: () =>
+      import(
+        './pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.module'
+      ).then((m) => m.HelloGhostfolioPageModule)
+  },
   {
     path: 'home',
     loadChildren: () =>

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

@@ -16,6 +16,7 @@ import { UserService } from '../services/user/user.service';
 export class AuthGuard implements CanActivate {
   private static PUBLIC_PAGE_ROUTES = [
     '/about',
+    '/en/blog',
     '/pricing',
     '/register',
     '/resources'
@@ -43,7 +44,11 @@ export class AuthGuard implements CanActivate {
             if (route.queryParams?.utm_source) {
               this.router.navigate(['/register']);
               resolve(false);
-            } else if (AuthGuard.PUBLIC_PAGE_ROUTES.includes(state.url)) {
+            } else if (
+              AuthGuard.PUBLIC_PAGE_ROUTES.filter((publicPageRoute) =>
+                state.url.startsWith(publicPageRoute)
+              )?.length > 0
+            ) {
               resolve(true);
               return EMPTY;
             } else if (state.url !== '/start') {

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

@@ -18,6 +18,7 @@ import { environment } from '../../../environments/environment';
 export class AboutPageComponent implements OnDestroy, OnInit {
   public baseCurrency = baseCurrency;
   public hasPermissionForStatistics: boolean;
+  public hasPermissionForSubscription: boolean;
   public isLoggedIn: boolean;
   public lastPublish = environment.lastPublish;
   public statistics: Statistics;
@@ -45,6 +46,11 @@ export class AboutPageComponent implements OnDestroy, OnInit {
       permissions.enableStatistics
     );
 
+    this.hasPermissionForSubscription = hasPermission(
+      globalPermissions,
+      permissions.enableSubscription
+    );
+
     this.statistics = statistics;
 
     this.userService.stateChanged

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

@@ -2,7 +2,7 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>About Ghostfolio</h3>
-      <mat-card>
+      <mat-card class="about-container">
         <mat-card-content>
           <p>
             <strong>Ghostfolio</strong> is a lightweight wealth management
@@ -56,7 +56,10 @@
               <ion-icon name="logo-github" size="large"></ion-icon>
             </a>
           </p>
-          <div class="d-flex justify-content-center">
+          <div
+            *ngIf="hasPermissionForSubscription"
+            class="d-flex justify-content-center"
+          >
             <div
               class="independent-and-bootstrapped-logo mb-2"
               title="Ghostfolio is an independent & bootstrapped business"
@@ -101,6 +104,38 @@
     </div>
   </div>
 
+  <div class="mb-5 row">
+    <div class="col">
+      <h3 class="mb-3 text-center" i18n>Blog</h3>
+      <mat-card class="blog-container">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex p-3 w-100"
+                [routerLink]="['/en', 'blog', '2021', '07', 'hello-ghostfolio']"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">
+                    Lorem ipsum dolor sit amet
+                  </div>
+                  <div class="d-flex text-muted">17.07.2021</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>
+    </div>
+  </div>
+
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Changelog</h3>

apps/client/src/app/pages/about/about-page.scss

@@ -7,6 +7,18 @@
   }
 
   .mat-card {
+    &.about-container,
+    &.changelog {
+      a {
+        color: rgba(var(--palette-primary-500), 1);
+        font-weight: bold;
+
+        &:hover {
+          color: rgba(var(--palette-primary-300), 1);
+        }
+      }
+    }
+
     &.changelog {
       ::ng-deep {
         markdown {
@@ -30,15 +42,6 @@
       }
     }
 
-    a {
-      color: rgba(var(--palette-primary-500), 1);
-      font-weight: bold;
-
-      &:hover {
-        color: rgba(var(--palette-primary-300), 1);
-      }
-    }
-
     .independent-and-bootstrapped-logo {
       background-image: url('/assets/bootstrapped-dark.svg');
       background-position: center;

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

@@ -35,7 +35,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public couponId: string;
   public currencies: Currency[] = [];
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
-  public hasPermissionForSubscription;
+  public hasPermissionForSubscription: boolean;
   public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public price: number;

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

@@ -0,0 +1,19 @@
+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 = [
+  {
+    path: '',
+    component: HelloGhostfolioPageComponent,
+    canActivate: [AuthGuard]
+  }
+];
+
+@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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'gf-hello-ghostfolio-page',
+  templateUrl: './hello-ghostfolio-page.html'
+})
+export class HelloGhostfolioPageComponent {}

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

@@ -0,0 +1,110 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1" i18n>Hello Ghostfolio</h1>
+          <div class="text-muted"><small>17.07.2021</small></div>
+        </div>
+        <section class="mb-4">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+            ante elit, viverra at dui eget, faucibus vulputate lorem. Mauris sed
+            neque eu enim malesuada pretium. Phasellus eu interdum nisl. Nulla
+            sollicitudin est nec hendrerit blandit. Maecenas at porttitor purus,
+            ac eleifend tellus. In non urna quis arcu congue fermentum sit amet
+            eu odio. Duis vitae turpis mi. Donec porta a velit non laoreet. Ut
+            auctor viverra magna, eu ultrices lacus lobortis sit amet.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Praesent consequat dolor a commodo euismod</h2>
+          <p>
+            Nunc tempor porttitor euismod. Nam auctor elit vel leo gravida, eu
+            lobortis diam pharetra. Nam vulputate dui sit amet eros tristique
+            fringilla. Donec consequat turpis non ultrices sollicitudin. In quis
+            arcu eget ante dictum pharetra a et ex. Morbi et mauris ipsum. In ut
+            cursus lectus. Sed rhoncus, nibh nec blandit vehicula, dui justo
+            venenatis velit, non maximus nisl dui a sem. Aenean facilisis
+            eleifend metus, in luctus risus finibus eget. Phasellus cursus
+            efficitur felis, in mattis urna. Integer ut ipsum sit amet nisi
+            vulputate vehicula. Mauris ut quam ut augue consequat auctor
+            sagittis faucibus eros. Duis feugiat ligula eget nisi maximus, quis
+            dapibus dolor molestie. Curabitur a enim ut ex ullamcorper consequat
+            sed eget justo. Suspendisse id lorem est. Nam pretium metus at arcu
+            venenatis rutrum.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Curabitur eget urna scelerisque</h2>
+          <p>
+            Quisque lobortis mauris velit, vitae faucibus lorem placerat vitae.
+            Nam finibus turpis eu nunc rutrum, ac mollis enim blandit. Phasellus
+            eu nunc nulla. Vivamus gravida magna a odio efficitur eleifend.
+            Integer mauris nisi, efficitur sit amet euismod ac, varius at dui.
+            Aenean quis neque vitae diam dignissim vestibulum. Donec ut
+            tincidunt nibh. Donec ut magna at leo laoreet dictum. Praesent
+            porttitor orci et lacinia fermentum. Quisque viverra elit eu metus
+            elementum egestas. Curabitur sollicitudin neque at sapien suscipit
+            bibendum. Pellentesque quam purus, lacinia commodo lorem et,
+            elementum pretium orci.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Vestibulum vulputate blandit lacinia</h2>
+          <p>
+            Nullam feugiat, est non posuere imperdiet, nibh velit volutpat nisi,
+            sit amet pellentesque purus massa id quam. Aliquam gravida vel
+            tortor ut tincidunt. Vestibulum nisl leo, fringilla nec tempor eu,
+            commodo nec felis. Etiam eros augue, consectetur vitae imperdiet
+            vel, commodo non augue. Donec scelerisque mauris eu neque pulvinar,
+            nec interdum ligula ornare. Proin sodales pretium imperdiet. Vivamus
+            luctus leo sed diam accumsan rhoncus. Suspendisse dictum quam eu
+            nibh feugiat euismod. Suspendisse ornare ac nulla non imperdiet.
+          </p>
+        </section>
+        <section class="mt-5">
+          <ul class="list-inline">
+            <li class="h5">
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Cryptocurrency</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2">ETF</span>
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Fintech</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Ghostfolio</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Investment</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Open Source</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2">OSS</span>
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Portfolio</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Software</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Stock</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Strategy</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Wealth</span
+              >
+              <span class="badge badge-light font-weight-normal mr-2"
+                >Wealth Management</span
+              >
+            </li>
+          </ul>
+        </section>
+      </article>
+    </div>
+  </div>
+</div>

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

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

apps/client/src/assets/sitemap.xml

@@ -6,22 +6,26 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2021-06-03T00:00:00+00:00</lastmod>
+    <lastmod>2021-07-17T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/about</loc>
-    <lastmod>2021-06-03T00:00:00+00:00</lastmod>
+    <lastmod>2021-07-17T00:00:00+00:00</lastmod>
   </url>
-    <url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
+    <lastmod>2021-07-17T00:00:00+00:00</lastmod>
+  </url>
+  <url>
     <loc>https://ghostfol.io/pricing</loc>
-    <lastmod>2021-06-03T00:00:00+00:00</lastmod>
+    <lastmod>2021-07-17T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/register</loc>
-    <lastmod>2021-06-03T00:00:00+00:00</lastmod>
+    <lastmod>2021-07-17T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/resources</loc>
-    <lastmod>2021-06-03T00:00:00+00:00</lastmod>
+    <lastmod>2021-07-17T00:00:00+00:00</lastmod>
   </url>
 </urlset>