Feature/improve oss friends page (#2257)

* Improve OSS Friends page * Update changelog
1 year ago · 49c4ea306d
6 changed files with 149 additions and 147 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed

 - Refreshed the cryptocurrencies list
+- Improved the _OSS Friends_ page

 ## 1.302.0 - 2023-08-20

--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts
@ -1,6 +1,8 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';

+const ossFriends = require('../../../../assets/oss-friends.json');
+
@Component({
  host: { class: 'page' },
  selector: 'gf-oss-friends-page',
@ -8,131 +10,7 @@ import { Subject } from 'rxjs';
  templateUrl: './oss-friends-page.html'
 })
 export class OpenSourceSoftwareFriendsPageComponent implements OnDestroy {
-  public ossFriends = [
-    {
-      description: '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'
-    }
-  ];
+  public ossFriends = ossFriends.data;

  private unsubscribeSubject = new Subject<void>();

--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
@ -14,26 +14,27 @@
          *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>
+          <a target="_blank" [href]="ossFriend.href">
+            <mat-card appearance="outlined" class="d-flex flex-column h-100">
+              <mat-card-header>
+                <mat-card-title class="h4">{{ ossFriend.name }}</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.href">
+                  <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>
+          </a>
        </div>
      </div>
    </div>
--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.module.ts
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.module.ts
@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';

 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],
--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.scss
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.scss
@ -1,3 +1,9 @@
 :host {
  display: block;
+
+  .mat-mdc-card {
+    &:hover {
+      border-color: var(--gf-theme-primary-500);
+    }
+  }
 }
--- a/apps/client/src/assets/oss-friends.json
+++ b/apps/client/src/assets/oss-friends.json
@ -0,0 +1,116 @@
+{
+  "createdAt": "2023-08-22T06:39:23.320Z",
+  "data": [
+    {
+      "name": "Appsmith",
+      "description": "Build build custom software on top of your data.",
+      "href": "https://www.appsmith.com"
+    },
+    {
+      "name": "BoxyHQ",
+      "description": "BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.",
+      "href": "https://boxyhq.com"
+    },
+    {
+      "name": "Cal.com",
+      "description": "Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.",
+      "href": "https://cal.com"
+    },
+    {
+      "name": "Crowd.dev",
+      "description": "Centralize community, product, and customer data to understand which companies are engaging with your open source project.",
+      "href": "https://www.crowd.dev"
+    },
+    {
+      "name": "Documenso",
+      "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.",
+      "href": "https://documenso.com"
+    },
+    {
+      "name": "Erxes",
+      "description": "The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences that work for all types of business.",
+      "href": "https://erxes.io"
+    },
+    {
+      "name": "Formbricks",
+      "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.",
+      "href": "https://formbricks.com"
+    },
+    {
+      "name": "Ghostfolio",
+      "description": "Ghostfolio is a privacy-first, open source dashboard for your personal finances. Designed to simplify asset tracking and empower informed investment decisions.",
+      "href": "https://ghostfol.io"
+    },
+    {
+      "name": "GitWonk",
+      "description": "GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.",
+      "href": "https://gitwonk.com"
+    },
+    {
+      "name": "Hanko",
+      "description": "Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.",
+      "href": "https://www.hanko.io"
+    },
+    {
+      "name": "HTMX",
+      "description": "HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.",
+      "href": "https://htmx.org"
+    },
+    {
+      "name": "Infisical",
+      "description": "Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.",
+      "href": "https://infisical.com"
+    },
+    {
+      "name": "Mockoon",
+      "description": "Mockoon is the easiest and quickest way to design and run mock REST APIs.",
+      "href": "https://mockoon.com"
+    },
+    {
+      "name": "Novu",
+      "description": "The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.",
+      "href": "https://novu.co"
+    },
+    {
+      "name": "OpenBB",
+      "description": "Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.",
+      "href": "https://openbb.co"
+    },
+    {
+      "name": "Sniffnet",
+      "description": "Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.",
+      "href": "https://www.sniffnet.net"
+    },
+    {
+      "name": "Tolgee",
+      "description": "Software localization from A to Z made really easy.",
+      "href": "https://tolgee.io/"
+    },
+    {
+      "name": "Trigger.dev",
+      "description": "Create long-running Jobs directly in your codebase with features like API integrations, webhooks, scheduling and delays.",
+      "href": "https://trigger.dev"
+    },
+    {
+      "name": "Typebot",
+      "description": "Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.",
+      "href": "https://typebot.io"
+    },
+    {
+      "name": "Twenty",
+      "description": "A modern CRM offering the flexibility of open-source, advanced features and sleek design.",
+      "href": "https://twenty.com"
+    },
+    {
+      "name": "Webiny",
+      "description": "Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.",
+      "href": "https://www.webiny.com"
+    },
+    {
+      "name": "Webstudio",
+      "description": "Webstudio is an open source alternative to Webflow",
+      "href": "https://webstudio.is"
+    }
+  ],
+  "source": "https://formbricks.com/api/oss-friends"
+}