Setup OSS Friends page

apps/api/src/assets/sitemap.xml

@@ -66,6 +66,10 @@
     <loc>https://ghostfol.io/de/ueber-uns/lizenz</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/de/ueber-uns/oss-friends</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
@@ -82,6 +86,10 @@
     <loc>https://ghostfol.io/en/about/license</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>
   </url>
+  <url>
+    <loc>https://ghostfol.io/en/about/oss-friends</loc>
+    <lastmod>${currentDate}T00:00:00+00:00</lastmod>
+  </url>
   <url>
     <loc>https://ghostfol.io/en/blog</loc>
     <lastmod>${currentDate}T00:00:00+00:00</lastmod>

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

@@ -38,6 +38,13 @@ const routes: Routes = [
             (m) => m.LicensePageModule
           )
       })),
+      {
+        path: 'oss-friends',
+        loadChildren: () =>
+          import('./oss-friends/oss-friends-page.module').then(
+            (m) => m.OpenSourceSoftwareFriendsPageModule
+          )
+      },
       ...[
         'privacy-policy',
         /////

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

@@ -44,7 +44,6 @@ export class AboutPageComponent implements OnDestroy, OnInit {
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
-        if (state?.user) {
         this.tabs = [
           {
             iconName: 'reader-outline',
@@ -60,14 +59,16 @@ export class AboutPageComponent implements OnDestroy, OnInit {
             iconName: 'ribbon-outline',
             label: $localize`License`,
             path: ['/about', 'license']
-            },
+          }
-            {
+        ];
+
+        if (state?.user) {
+          this.tabs.push({
             iconName: 'shield-checkmark-outline',
             label: $localize`Privacy Policy`,
             path: ['/about', 'privacy-policy'],
             showCondition: this.hasPermissionForSubscription
-            }
+          });
-          ];
           this.user = state.user;
 
           this.hasMessage =
@@ -78,6 +79,12 @@ export class AboutPageComponent implements OnDestroy, OnInit {
 
           this.changeDetectorRef.markForCheck();
         }
+
+        this.tabs.push({
+          iconName: 'happy-outline',
+          label: 'OSS Friends',
+          path: ['/about', 'oss-friends']
+        });
       });
   }
 

apps/client/src/app/pages/about/oss-friends/oss-friends-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 { OpenSourceSoftwareFriendsPageComponent } from './oss-friends-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: OpenSourceSoftwareFriendsPageComponent,
+    path: '',
+    title: 'OSS Friends'
+  }
+];
+
+@NgModule({
+  exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)]
+})
+export class OpenSourceSoftwareFriendsPageRoutingModule {}

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

@@ -0,0 +1,145 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-oss-friends-page',
+  styleUrls: ['./oss-friends-page.scss'],
+  templateUrl: './oss-friends-page.html'
+})
+export class OpenSourceSoftwareFriendsPageComponent implements OnDestroy {
+  public ossFriends = [
+    {
+      description: 'Build build custom software on top of your data.',
+      name: 'Appsmith',
+      url: 'https://www.appsmith.com'
+    },
+    {
+      description:
+        'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
+      name: 'BoxyHQ',
+      url: 'https://boxyhq.com'
+    },
+    {
+      description:
+        'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+      name: 'Cal.com',
+      url: 'https://cal.com'
+    },
+    {
+      description:
+        'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
+      name: 'Crowd.dev',
+      url: 'https://www.crowd.dev'
+    },
+    {
+      description:
+        'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
+      name: 'Documenso',
+      url: 'https://documenso.com'
+    },
+    {
+      description:
+        'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences ​​that work for all types of business.',
+      name: 'Erxes',
+      url: 'https://erxes.io'
+    },
+    {
+      description:
+        'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
+      name: 'Formbricks',
+      url: 'https://formbricks.com'
+    },
+    {
+      description:
+        'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
+      name: 'GitWonk',
+      url: 'https://gitwonk.com'
+    },
+    {
+      description:
+        'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
+      name: 'Hanko',
+      url: 'https://www.hanko.io'
+    },
+    {
+      description:
+        'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
+      name: 'HTMX',
+      url: 'https://htmx.org'
+    },
+    {
+      description:
+        'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
+      name: 'Infisical',
+      url: 'https://infisical.com'
+    },
+    {
+      description:
+        'Mockoon is the easiest and quickest way to design and run mock REST APIs.',
+      name: 'Mockoon',
+      url: 'https://mockoon.com'
+    },
+    {
+      description:
+        'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
+      name: 'Novu',
+      url: 'https://novu.co'
+    },
+    {
+      description:
+        'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
+      name: 'OpenBB',
+      url: 'https://openbb.co'
+    },
+    {
+      description:
+        'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
+      name: 'Sniffnet',
+      url: 'https://www.sniffnet.net'
+    },
+    {
+      description: 'Software localization from A to Z made really easy.',
+      name: 'Tolgee',
+      url: 'https://tolgee.io'
+    },
+    {
+      description:
+        'Create long-running Jobs directly in your codebase with features like API integrations, webhooks, scheduling and delays.',
+      name: 'Trigger.dev',
+      url: 'https://trigger.dev'
+    },
+    {
+      description:
+        'Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
+      name: 'Typebot',
+      url: 'https://typebot.io'
+    },
+    {
+      description:
+        'A modern CRM offering the flexibility of open-source, advanced features and sleek design.',
+      name: 'Twenty',
+      url: 'https://twenty.com'
+    },
+    {
+      description:
+        'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
+      name: 'Webiny',
+      url: 'https://www.webiny.com'
+    },
+    {
+      description: 'Webstudio is an open source alternative to Webflow',
+      name: 'Webstudio',
+      url: 'https://webstudio.is'
+    }
+  ];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,36 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h3 class="d-none d-sm-block mb-3 text-center">
+        <ng-container i18n>Our</ng-container> OSS Friends
+      </h3>
+      <div class="row">
+        <div
+          *ngFor="let ossFriend of ossFriends"
+          class="col-xs-12 col-md-4 mb-3"
+        >
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-header>
+              <mat-card-title class="h4"
+                ><a target="_blank" [href]="ossFriend.url"
+                  >{{ ossFriend.name }}</a
+                ></mat-card-title
+              >
+            </mat-card-header>
+            <mat-card-content class="flex-grow-1">
+              <p>{{ ossFriend.description }}</p>
+            </mat-card-content>
+            <mat-card-actions class="justify-content-end">
+              <a mat-button target="_blank" [href]="ossFriend.url">
+                <span
+                  ><ng-container i18n>Visit</ng-container> {{ ossFriend.name
+                  }}</span
+                ><ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
+              </a>
+            </mat-card-actions>
+          </mat-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/about/oss-friends/oss-friends-page.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+import { OpenSourceSoftwareFriendsPageRoutingModule } from './oss-friends-page-routing.module';
+import { OpenSourceSoftwareFriendsPageComponent } from './oss-friends-page.component';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+  declarations: [OpenSourceSoftwareFriendsPageComponent],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatCardModule,
+    OpenSourceSoftwareFriendsPageRoutingModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class OpenSourceSoftwareFriendsPageModule {}

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

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