Feature/add hacktoberfest 2024 blog post (#3790)

* Add blog post: Hacktoberfest 2024

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a blog post: _Hacktoberfest 2024_
+
 ### Changed
 
 - Improved the loading indicator of the accounts table

apps/api/src/assets/sitemap.xml

@@ -172,6 +172,10 @@
     <loc>https://ghostfol.io/en/blog/2023/11/hacktoberfest-2023-debriefing</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2024/09/hacktoberfest-2024</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/faq</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>

apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.component.ts

@@ -0,0 +1,14 @@
+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-2024-page',
+  standalone: true,
+  templateUrl: './hacktoberfest-2024-page.html'
+})
+export class Hacktoberfest2024PageComponent {
+  public routerLinkAbout = ['/' + $localize`:snake-case:about`];
+}

apps/client/src/app/pages/blog/2024/09/hacktoberfest-2024/hacktoberfest-2024-page.html

@@ -0,0 +1,200 @@
+<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">Hacktoberfest 2024</h1>
+          <div class="mb-3 text-muted"><small>2024-09-21</small></div>
+          <img
+            alt="Hacktoberfest 2024 with Ghostfolio Teaser"
+            class="rounded w-100"
+            src="../assets/images/blog/hacktoberfest-2024.png"
+            title="Hacktoberfest 2024 with Ghostfolio"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            At Ghostfolio, <a [routerLink]="routerLinkAbout">we</a> are very
+            excited to join
+            <a href="https://hacktoberfest.com">Hacktoberfest</a> for the
+            <a href="../en/blog/2023/11/hacktoberfest-2023-debriefing"
+              >third time</a
+            >
+            and look forward to connecting with new, enthusiastic open-source
+            contributors. Hacktoberfest is a a month-long celebration of all
+            things open-source: projects, their maintainers, and the entire
+            community of contributors. Every October, open source maintainers
+            around the globe dedicate extra time to support new contributors
+            while guiding them through their first pull requests on
+            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Introducing Ghostfolio: Personal Finance Dashboard</h2>
+          <p>
+            <a href="https://ghostfol.io">Ghostfolio</a> is a modern web
+            application for managing personal finances. It aggregates your
+            assets and helps you make informed decisions to balance your
+            portfolio or plan future investments.
+          </p>
+          <p>
+            The software is fully written in
+            <a href="https://www.typescriptlang.org">TypeScript</a> and
+            organized as an <a href="https://nx.dev">Nx</a> workspace, utilizing
+            the latest framework releases. The backend is based on
+            <a href="https://nestjs.com">NestJS</a> in combination with
+            <a href="https://www.postgresql.org">PostgreSQL</a> as a database
+            together with <a href="https://www.prisma.io">Prisma</a> and
+            <a href="https://redis.io">Redis</a> for caching. The frontend is
+            built with <a href="https://angular.dev">Angular</a>.
+          </p>
+          <p>
+            The OSS project counting more than 100 contributors is used daily by
+            its growing global community. With over
+            <a [routerLink]="['/open']">4’000 stars on GitHub</a> and
+            <a [routerLink]="['/open']">800’000+ pulls on Docker Hub</a>,
+            Ghostfolio has gained widespread recognition for its user-friendly
+            experience and simplicity.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">How you can make an impact</h2>
+          <p>
+            Every contribution can make a difference. Whether it involves
+            implementing new features, resolving bugs, refactoring code,
+            enhancing documentation, adding unit tests, or translating content
+            into another language, you can actively shape our project.
+          </p>
+          <p>
+            Not familiar with our codebase yet? No problem! We have labeled a
+            few
+            <a
+              href="https://github.com/ghostfolio/ghostfolio/issues?q=is%3Aissue+is%3Aopen+label%3Ahacktoberfest"
+              >issues</a
+            >
+            with <code>hacktoberfest</code> that are well suited for newcomers.
+          </p>
+          <p>
+            The official Hacktoberfest website provides some valuable
+            <a
+              href="https://hacktoberfest.com/participation/#beginner-resources"
+              >resources for beginners</a
+            >
+            to start contributing in open source.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Connect with us</h2>
+          <p>
+            If you have further questions or ideas, please join our
+            <a
+              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              >Slack</a
+            >
+            community or get in touch on X
+            <a href="https://x.com/ghostfolio_">&#64;ghostfolio_</a>.
+          </p>
+          <p>
+            We look forward to collaborating.<br />
+            Thomas from Ghostfolio
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">Angular</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">Docker</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">Ghostfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">GitHub</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Hacktoberfest</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Hacktoberfest 2024</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">NestJS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Nx</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">October</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">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">Prisma</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">TypeScript</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">UX</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>
+          </ul>
+        </section>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <a i18n [routerLink]="['/blog']">Blog</a>
+            </li>
+            <li
+              aria-current="page"
+              class="active breadcrumb-item text-truncate"
+            >
+              Hacktoberfest 2024
+            </li>
+          </ol>
+        </nav>
+      </article>
+    </div>
+  </div>
+</div>

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

@@ -182,6 +182,15 @@ const routes: Routes = [
         (c) => c.BlackWeek2023PageComponent
       ),
     title: 'Black Week 2023'
+  },
+  {
+    canActivate: [AuthGuard],
+    path: '2024/09/hacktoberfest-2024',
+    loadComponent: () =>
+      import(
+        './2024/09/hacktoberfest-2024/hacktoberfest-2024-page.component'
+      ).then((c) => c.Hacktoberfest2024PageComponent),
+    title: 'Hacktoberfest 2024'
   }
 ];
 

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

@@ -8,6 +8,30 @@
           finance</small
         >
       </h1>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-content class="p-0">
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex overflow-hidden p-3 w-100"
+                href="../en/blog/2024/09/hacktoberfest-2024"
+              >
+                <div class="flex-grow-1 overflow-hidden">
+                  <div class="h6 m-0 text-truncate">Hacktoberfest 2024</div>
+                  <div class="d-flex text-muted">2024-09-21</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  />
+                </div>
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
       @if (hasPermissionForSubscription) {
         <mat-card appearance="outlined" class="mb-3">
           <mat-card-content class="p-0">