sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Improve product pages (#2143)

Browse Source
This commit is contained in:
Thomas Kaul 2023-07-11 21:40:45 +02:00 committed by GitHub
parent 5d26d94586
commit c25f532487
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.html
View File

@ -21,9 +21,15 @@
financial future.
</p>
<p>
Ghostfolio is open source software (OSS) where a community of
developers, contributors, and enthusiasts collaborate to enhance its
capabilities, security, and user experience.
Ghostfolio is an open source software (OSS), providing a
cost-effective alternative to {{ product2.name }} making it
particularly suitable for individuals on a tight budget, such as
those
<a href="../en/blog/2023/07/exploring-the-path-to-fire"
>pursuing Financial Independence, Retire Early (FIRE)</a
>. By leveraging the collective efforts of a community of developers
and personal finance enthusiasts, Ghostfolio continuously enhances
its capabilities, security, and user experience.
</p>
<p>
Let’s dive deeper into the detailed comparison table below to gain a
@ -69,8 +75,18 @@
<td class="mat-mdc-cell px-3 py-2 text-right" i18n>
Available in
</td>
<td class="mat-mdc-cell px-1 py-2">{{ product1.languages }}</td>
<td class="mat-mdc-cell px-1 py-2">{{ product2.languages }}</td>
<td class="mat-mdc-cell px-1 py-2">
<ng-container
*ngFor="let language of product1.languages; last as isLast"
>{{ language }}{{ isLast ? '' : ', ' }}</ng-container
>
</td>
<td class="mat-mdc-cell px-1 py-2">
<ng-container
*ngFor="let language of product2.languages; last as isLast"
>{{ language }}{{ isLast ? '' : ', ' }}</ng-container
>
</td>
</tr>
<tr class="mat-mdc-row">
<td class="mat-mdc-cell px-3 py-2 text-right" i18n>
@ -118,6 +134,25 @@
>
</td>
</tr>
<tr class="mat-mdc-row">
<td class="mat-mdc-cell px-3 py-2 text-right" i18n>
Use anonymously
</td>
<td class="mat-mdc-cell px-1 py-2">
<ng-container *ngIf="product1.useAnonymously === true" i18n
>✅ Yes</ng-container
><ng-container *ngIf="product1.useAnonymously === false" i18n
>❌ No</ng-container
>
</td>
<td class="mat-mdc-cell px-1 py-2">
<ng-container *ngIf="product2.useAnonymously === true" i18n
>✅ Yes</ng-container
><ng-container *ngIf="product2.useAnonymously === false" i18n
>❌ No</ng-container
>
</td>
</tr>
<tr class="mat-mdc-row">
<td class="mat-mdc-cell px-3 py-2 text-right" i18n>
Free Plan
@ -157,7 +192,19 @@
</tbody>
</table>
</section>
<section class="mb-4 py-3">
<section class="mb-4">
<p>
Please note that the information provided is based on our
independent research and analysis. This website is not affiliated
with {{ product2.name }} or any other product mentioned in the
comparison. As the landscape of personal finance tools evolves, it
is essential to verify any specific details or changes directly from
the respective product page. Data needs a refresh? Help us maintain
accurate data on
<a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
</p>
</section>
<section class="call-to-action mb-4 py-3 rounded">
<h2 class="h4 mb-0 text-center">
Ready to take your <strong>investments</strong> to the
<strong>next level</strong>?
@ -172,18 +219,6 @@
</a>
</div>
</section>
<section class="mb-4">
<small>
Please note that the information provided is based on our
independent research and analysis. This website is not affiliated
with {{ product2.name }} or any other product mentioned in the
comparison. As the landscape of personal finance tools evolves, it
is essential to verify any specific details or changes directly from
the respective product page. Data needs a refresh? Help us maintain
accurate data on
<a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
</small>
</section>
<section class="mb-4">
<ul class="list-inline">
<li class="list-inline-item">

8
apps/client/src/app/pages/resources/personal-finance-tools/product-page-template.scss
View File

@ -10,8 +10,16 @@
color: rgba(var(--palette-primary-300), 1);
}
}
.call-to-action {
background-color: rgba(var(--palette-foreground-text), 0.02);
}
}
:host-context(.is-dark-theme) {
color: rgb(var(--light-primary-text));
.call-to-action {
background-color: rgba(var(--palette-foreground-text-dark), 0.02);
}
}

30
apps/client/src/app/pages/resources/personal-finance-tools/products.ts
View File

@ -33,12 +33,21 @@ export const products: Product[] = [
hasSelfHostingAbility: true,
isOpenSource: true,
key: 'ghostfolio',
languages: 'Dutch, English, French, German, Italian, Portuguese, Spanish',
languages: [
'Dutch',
'English',
'French',
'German',
'Italian',
'Portuguese',
'Spanish'
],
name: 'Ghostfolio',
origin: 'Switzerland',
pricingPerYear: '$19',
region: 'Global',
slogan: 'Open Source Wealth Management'
slogan: 'Open Source Wealth Management',
useAnonymously: true
},
{
component: AltooPageComponent,
@ -81,7 +90,7 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'divvydiary',
languages: 'English, German',
languages: ['English', 'German'],
name: 'DivvyDiary',
origin: 'Germany',
pricingPerYear: '€65',
@ -105,7 +114,7 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'folishare',
languages: 'English, German',
languages: ['English', 'German'],
name: 'folishare',
origin: 'Austria',
pricingPerYear: '$65',
@ -118,7 +127,7 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'getquin',
languages: 'English, German',
languages: ['English', 'German'],
name: 'getquin',
origin: 'Germany',
pricingPerYear: '€48',
@ -164,7 +173,7 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'maybe-finance',
languages: 'English',
languages: ['English'],
name: 'Maybe Finance',
note: 'Sunset in 2023',
origin: 'United States',
@ -212,7 +221,7 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'portfolio-dividend-tracker',
languages: 'English, Dutch',
languages: ['English', 'Dutch'],
name: 'Portfolio Dividend Tracker',
origin: 'Netherlands',
pricingPerYear: '€60',
@ -225,7 +234,7 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'portseido',
languages: 'Dutch, English, French, German',
languages: ['Dutch', 'English', 'French', 'German'],
name: 'Portseido',
origin: 'Thailand',
pricingPerYear: '$96',
@ -308,11 +317,12 @@ export const products: Product[] = [
hasSelfHostingAbility: false,
isOpenSource: false,
key: 'utluna',
languages: 'English, French, German',
languages: ['English', 'French', 'German'],
name: 'Utluna',
origin: 'Switzerland',
pricingPerYear: '$300',
slogan: 'Your Portfolio. Revealed.'
slogan: 'Your Portfolio. Revealed.',
useAnonymously: true
},
{
component: YeekateePageComponent,

3
libs/common/src/lib/interfaces/product.ts
View File

@ -5,11 +5,12 @@ export interface Product {
hasSelfHostingAbility?: boolean;
isOpenSource: boolean;
key: string;
languages?: string;
languages?: string[];
name: string;
note?: string;
origin?: string;
pricingPerYear?: string;
region?: string;
slogan?: string;
useAnonymously?: boolean;
}