Feature/setup black friday 2022 deal (#1452)

* Setup Black Friday 2022 deal

* Update changelog
pull/1454/head
Thomas Kaul 2 years ago committed by GitHub
parent c9bdf46b2b
commit 3b4f8c69bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
- Added an indicator for excluded accounts in the accounts table
- Added a blog post: _Black Friday 2022_
## 1.212.0 - 11.11.2022

@ -53,16 +53,12 @@ export class FrontendMiddleware implements NestMiddleware {
public use(req: Request, res: Response, next: NextFunction) {
let featureGraphicPath = 'assets/cover.png';
if (
req.path === '/en/blog/2022/08/500-stars-on-github' ||
req.path === '/en/blog/2022/08/500-stars-on-github/'
) {
if (req.path.startsWith('/en/blog/2022/08/500-stars-on-github')) {
featureGraphicPath = 'assets/images/blog/500-stars-on-github.jpg';
} else if (
req.path === '/en/blog/2022/10/hacktoberfest-2022' ||
req.path === '/en/blog/2022/10/hacktoberfest-2022/'
) {
} else if (req.path.startsWith('/en/blog/2022/10/hacktoberfest-2022')) {
featureGraphicPath = 'assets/images/blog/hacktoberfest-2022.png';
} else if (req.path.startsWith('/en/blog/2022/11/black-friday-2022')) {
featureGraphicPath = 'assets/images/blog/black-friday-2022.jpg';
}
if (

@ -102,6 +102,13 @@ const routes: Routes = [
'./pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.module'
).then((m) => m.Hacktoberfest2022PageModule)
},
{
path: 'blog/2022/11/black-friday-2022',
loadChildren: () =>
import(
'./pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module'
).then((m) => m.BlackFriday2022PageModule)
},
{
path: 'demo',
loadChildren: () =>

@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
import { BlackFriday2022PageComponent } from './black-friday-2022-page.component';
const routes: Routes = [
{
canActivate: [AuthGuard],
component: BlackFriday2022PageComponent,
path: '',
title: 'Black Friday 2022'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BlackFriday2022RoutingModule {}

@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { DataService } from '@ghostfolio/client/services/data.service';
@Component({
host: { class: 'page' },
selector: 'gf-black-friday-2022-page',
styleUrls: ['./black-friday-2022-page.scss'],
templateUrl: './black-friday-2022-page.html'
})
export class BlackFriday2022PageComponent {
public discount: number;
public constructor(private dataService: DataService) {
const { subscriptions } = this.dataService.fetchInfo();
const coupon = subscriptions?.[0]?.coupon ?? 0;
const price = subscriptions?.[0]?.price ?? 1;
this.discount = Math.floor((coupon / price) * 100) / 100;
}
}

@ -0,0 +1,138 @@
<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">Black Friday 2022</h1>
<div class="mb-3 text-muted"><small>2022-11-13</small></div>
<img
alt="Black Friday 2022 Teaser"
class="rounded w-100"
src="../assets/images/blog/black-friday-2022.jpg"
title="Black Friday 2022"
/>
</div>
<section class="mb-4">
<p>
Get {{ discount | percent }} off on our
<strong>Ghostfolio Premium</strong>
<gf-premium-indicator
class="d-inline-block ml-1"
[enableLink]="false"
></gf-premium-indicator>
annual plan for ambitious investors who need the full picture of
their financial assets.
</p>
</section>
<section class="mb-4">
<p>
<a
href="https://ghostfol.io"
title="Open Source Wealth Management Software"
>Ghostfolio</a
>
is a modern web application to manage your personal finance. The
software presents the current assets (stocks, ETFs,
cryptocurrencies, commodities etc.) in real time to make solid,
data-driven investment decisions. Check out the numerous
<a [routerLink]="['/features']">features</a> to manage your wealth.
</p>
</section>
<section class="mb-4">
<p>
Snap the limited Black Friday 2022 deal before its gone. For
detailed information on plans and pricing, please visit our
<a [routerLink]="['/pricing']">pricing page</a>.
</p>
<p class="text-center">
<a color="primary" mat-flat-button [routerLink]="['/pricing']"
>Get the Deal</a
>
</p>
</section>
<section class="mb-4">
<ul class="list-inline">
<li class="list-inline-item">
<span class="badge badge-light">2022</span>
</li>
<li class="list-inline-item">
<span class="badge badge-light">Black Friday</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">Cryptocurrency</span>
</li>
<li class="list-inline-item">
<span class="badge badge-light">Deal</span>
</li>
<li class="list-inline-item">
<span class="badge badge-light">ETF</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">Ghostfolio Premium</span>
</li>
<li class="list-inline-item">
<span class="badge badge-light">Hosting</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">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">Pricing</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">Stock</span>
</li>
<li class="list-inline-item">
<span class="badge badge-light">Subscription</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>
</article>
</div>
</div>
</div>

@ -0,0 +1,21 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { RouterModule } from '@angular/router';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
import { BlackFriday2022RoutingModule } from './black-friday-2022-page-routing.module';
import { BlackFriday2022PageComponent } from './black-friday-2022-page.component';
@NgModule({
declarations: [BlackFriday2022PageComponent],
imports: [
BlackFriday2022RoutingModule,
CommonModule,
GfPremiumIndicatorModule,
MatButtonModule,
RouterModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BlackFriday2022PageModule {}

@ -1,4 +1,6 @@
import { Component, OnDestroy } from '@angular/core';
import { DataService } from '@ghostfolio/client/services/data.service';
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
import { Subject } from 'rxjs';
@Component({
@ -8,9 +10,18 @@ import { Subject } from 'rxjs';
templateUrl: './blog-page.html'
})
export class BlogPageComponent implements OnDestroy {
public hasPermissionForSubscription: boolean;
private unsubscribeSubject = new Subject<void>();
public constructor() {}
public constructor(private dataService: DataService) {
const info = this.dataService.fetchInfo();
this.hasPermissionForSubscription = hasPermission(
info?.globalPermissions,
permissions.enableSubscription
);
}
public ngOnDestroy() {
this.unsubscribeSubject.next();

@ -2,6 +2,30 @@
<div class="mb-5 row">
<div class="col">
<h3 class="mb-3 text-center" i18n>Blog</h3>
<mat-card *ngIf="hasPermissionForSubscription" class="mb-3">
<mat-card-content>
<div class="container p-0">
<div class="flex-nowrap no-gutters row">
<a
class="d-flex w-100"
href="../en/blog/2022/11/black-friday-2022"
>
<div class="flex-grow-1">
<div class="h6 m-0 text-truncate">Black Friday 2022</div>
<div class="d-flex text-muted">2022-11-13</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">

@ -28,7 +28,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
const { baseCurrency, subscriptions } = this.dataService.fetchInfo();
this.baseCurrency = baseCurrency;
this.coupon = this.price = subscriptions?.[0]?.coupon;
this.coupon = subscriptions?.[0]?.coupon;
this.price = subscriptions?.[0]?.price;
}

@ -1,3 +1,16 @@
<div
*ngIf="!user || user?.subscription?.type === 'Basic'"
class="intro mb-5 py-5"
>
<div class="container">
<div class="row">
<div class="col">
<h1 class="font-weight-bold m-0 text-center">Black Friday Deal</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">

@ -11,6 +11,20 @@
}
}
.intro {
background-color: rgb(var(--dark-primary-text));
color: rgba(var(--palette-primary-500), 1);
h1 {
font-size: 4vw;
line-height: 1;
@media (max-width: 575.98px) {
font-size: 10vw;
}
}
}
.mat-card {
&:hover,
&.active {
@ -22,4 +36,8 @@
:host-context(.is-dark-theme) {
color: rgb(var(--light-primary-text));
.intro {
background-color: rgba(var(--light-dividers));
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

@ -6,74 +6,78 @@
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://ghostfol.io</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/about</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/about/changelog</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00: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-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog/2022/08/500-stars-on-github</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<url>
<loc>https://ghostfol.io/en/blog/2022/10/hacktoberfest-2022</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog/2022/11/black-friday-2022</loc>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/demo</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/faq</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/features</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/markets</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/pricing</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/register</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/resources</loc>
<lastmod>2022-10-16T00:00:00+00:00</lastmod>
<lastmod>2022-11-10T00:00:00+00:00</lastmod>
</url>
</urlset>

@ -38,11 +38,13 @@ body {
.blog {
a {
color: rgba(var(--palette-primary-500), 1) !important;
font-weight: 500;
&:not(.mat-flat-button) {
color: rgba(var(--palette-primary-500), 1) !important;
font-weight: 500;
&:hover {
text-decoration: underline;
&:hover {
text-decoration: underline;
}
}
}
}

Loading…
Cancel
Save