Feature/add blog post 500 stars on GitHub (#1138)

* Add blog post

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Set up i18n support
+- Added a blog post: _500 Stars on GitHub_
 
 ### Changed
 

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

@@ -88,6 +88,13 @@ const routes: Routes = [
         './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: 'demo',
     loadChildren: () =>

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

@@ -7,7 +7,7 @@
           <div class="mb-3 text-muted"><small>2022-07-23</small></div>
           <img
             alt="Ghostfolio meets Internet Identity Teaser"
-            class="w-100"
+            class="rounded w-100"
             src="../assets/images/blog/ghostfolio-meets-internet-identity.png"
             title="Ghostfolio meets Internet Identity"
           />

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-500-stars-on-github-page',
+  styleUrls: ['./500-stars-on-github-page.scss'],
+  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.html

@@ -0,0 +1,197 @@
+<div class="blog container">
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1">500 Stars</h1>
+          <div class="mb-3 text-muted"><small>2022-08-13</small></div>
+          <img
+            alt="500 Stars on GitHub Teaser"
+            class="rounded w-100"
+            src="../assets/images/blog/500-stars-on-github.jpg"
+            title="500 Stars on GitHub"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            <a href="https://ghostfol.io">Ghostfolio</a>, the web-based personal
+            finance management software, is celebrating 500 stars on
+            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>. This
+            is a major milestone for this open source project and a good time
+            for another
+            <a
+              [routerLink]="['/en', 'blog', '2022', '01', 'ghostfolio-first-months-in-open-source']"
+              >recap</a
+            >.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Growing Community</h2>
+          <p>
+            The Ghostfolio community is growing on various platforms and has
+            recently passed 100 members on
+            <a
+              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              >Slack</a
+            >
+            as well as 100 followers on
+            <a href="https://twitter.com/ghostfolio_">Twitter</a>. If you have
+            not joined yet, this is a good time to make sure you do not miss out
+            on any future updates.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Message Queue: Asynchronous Processing</h2>
+          <p>
+            Overall
+            <a href="https://status.ghostfol.io">stability and robustness</a>
+            has increased significantly since the introduction of a
+            <a href="https://github.com/OptimalBits/bull">message queue</a>. The
+            workers of this robust queue system process jobs, namely gathering
+            historical market data, asynchronously in the background to not
+            bother the main service.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Ready for Web 3.0</h2>
+          <p>
+            The
+            <a
+              [routerLink]="['/en', 'blog', '2022', '07', 'ghostfolio-meets-internet-identity']"
+              >recent integration of Internet Identity</a
+            >, a blockchain authentication system, makes Ghostfolio ready for
+            Web3. This third iteration of the World Wide Web is the vision of a
+            new and better Internet based on decentralized blockchains to give
+            power back to the users. <i>Internet Identity</i> created by the
+            <a href="https://dfinity.org">Dfinity Foundation</a> enables you to
+            sign in securely and anonymously to Ghostfolio without an email
+            address, username, or a password. All you need is your device with
+            built-in biometric authentication.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Break-even Point</h2>
+          <p>
+            Despite the complicated
+            <a [routerLink]="['/markets']">economic situation</a> at this time,
+            the goal set at the beginning of the year to build a sustainable
+            business and reach break-even with the SaaS offering (<a
+              [routerLink]="['/markets']"
+              >Ghostfolio Premium</a
+            >) has been achieved. We will continue to leverage the revenue to
+            further improve the fully managed cloud offering for our paying
+            customers. A new goal we have set for ourselves is to become
+            profitable.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Outlook</h2>
+          <p>
+            Besides all the positive accomplishments during the last months,
+            there is still a lot of room for improvement. It would be great to
+            onboard more contributors who are actively involved in software
+            engineering to realize the full potential of open source software.
+            If you are a web developer and interested in personal finance,
+            please get in touch by email via
+            <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> or on Twitter
+            <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a>. We are
+            happy to discuss ideas.
+          </p>
+          <p>
+            We would like to say thank you for all your feedback and support
+            since the beginning of this project.
+          </p>
+          <p>
+            Off to the next 500 stars!<br />
+            Thomas from Ghostfolio
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">Blockchain</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">BuildInPublic</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cloud</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Community</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Fintech</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Future</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Goal</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Internet Identity</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Investment</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Message Queue</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OpenSaaS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Open Source</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OSS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Personal Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Planning</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio Tracker</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Progress</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">SaaS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Software</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">User Feedback</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth Management</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web3</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web 3.0</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Worker</span>
+            </li>
+          </ul>
+        </section>
+      </article>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+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/08/500-stars-on-github/500-stars-on-github-page.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -2,6 +2,30 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Blog</h3>
+      <mat-card class="mb-3">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex w-100"
+                [routerLink]="['/blog', '2022', '08', '500-stars-on-github']"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">500 Stars on GitHub</div>
+                  <div class="d-flex text-muted">2022-08-10</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>
       <mat-card class="mb-3">
         <mat-card-content>
           <div class="container p-0">

apps/client/src/assets/sitemap.xml

@@ -6,66 +6,70 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/about</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/about/changelog</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/how-do-i-get-my-finances-in-order</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2022/08/500-stars-on-github</loc>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/demo</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/faq</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/features</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/markets</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/pricing</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/register</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/resources</loc>
-    <lastmod>2022-07-29T00:00:00+00:00</lastmod>
+    <lastmod>2022-08-13T00:00:00+00:00</lastmod>
   </url>
 </urlset>

apps/client/src/styles/bootstrap.scss

@@ -11,7 +11,7 @@
 @import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
 @import '~bootstrap/scss/type';
-// @import '~bootstrap/scss/images';
+@import '~bootstrap/scss/images';
 // @import '~bootstrap/scss/code';
 @import '~bootstrap/scss/grid';
 // @import '~bootstrap/scss/tables';