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

Feature/restructure about page (#608)

Browse Source 
* Restructure about page: introduce pages for blog and changelog

* Update changelog
This commit is contained in:
Thomas Kaul 2022-01-01 10:10:37 +01:00 committed by GitHub
parent 029b7bed9a
commit 0179823ad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 276 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- Restructured the about page
- Start refactoring _transactions_ to _activities_
- Refactored the demo user id
- Upgraded `angular` from version `13.0.2` to `13.1.1`

12
apps/client/src/app/app-routing.module.ts
View File

@ -9,6 +9,13 @@ const routes: Routes = [
loadChildren: () =>
import('./pages/about/about-page.module').then((m) => m.AboutPageModule)
},
{
path: 'about/changelog',
loadChildren: () =>
import('./pages/about/changelog/changelog-page.module').then(
(m) => m.ChangelogPageModule
)
},
{
path: 'account',
loadChildren: () =>
@ -33,6 +40,11 @@ const routes: Routes = [
loadChildren: () =>
import('./pages/auth/auth-page.module').then((m) => m.AuthPageModule)
},
{
path: 'blog',
loadChildren: () =>
import('./pages/blog/blog-page.module').then((m) => m.BlogPageModule)
},
{
path: 'de/blog/2021/07/hallo-ghostfolio',
loadChildren: () =>

2
apps/client/src/app/core/auth.guard.ts
View File

@ -16,6 +16,8 @@ import { UserService } from '../services/user/user.service';
export class AuthGuard implements CanActivate {
private static PUBLIC_PAGE_ROUTES = [
'/about',
'/about/changelog',
'/blog',
'/de/blog',
'/en/blog',
'/p',

82
apps/client/src/app/pages/about/about-page.html
View File

@ -149,73 +149,23 @@
</div>
</div>
<div *ngIf="hasPermissionForBlog" class="mb-5 row">
<div class="col">
<h3 class="mb-3 text-center" i18n>Blog</h3>
<mat-card class="blog-container">
<mat-card-content>
<div class="container p-0">
<div class="flex-nowrap mb-3 no-gutters row">
<a
class="d-flex w-100"
[routerLink]="['/en', 'blog', '2021', '07', 'hello-ghostfolio']"
>
<div class="flex-grow-1">
<div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
<div class="d-flex text-muted">31.07.2021</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 class="flex-nowrap no-gutters row">
<a
class="d-flex w-100"
[routerLink]="['/de', 'blog', '2021', '07', 'hallo-ghostfolio']"
>
<div class="flex-grow-1">
<div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
<div class="d-flex text-muted">31.07.2021</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>
</div>
</div>
<div class="mb-5 row">
<div class="col">
<h3 class="mb-3 text-center" i18n>Changelog</h3>
<mat-card class="changelog">
<mat-card-content>
<markdown [src]="'assets/CHANGELOG.md'"></markdown>
</mat-card-content>
</mat-card>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="mb-3 text-center" i18n>License</h3>
<mat-card>
<mat-card-content>
<markdown [src]="'assets/LICENSE'"></markdown>
</mat-card-content>
</mat-card>
<div *ngIf="hasPermissionForBlog" class="col-md-6 col-xs-12 my-2">
<a class="py-2 w-100" i18n mat-stroked-button [routerLink]="['/blog']"
>Blog</a
>
</div>
<div
class="col-md-6 col-xs-12 my-2"
[ngClass]="{ 'offset-md-3': !hasPermissionForBlog }"
>
<a
class="py-2 w-100"
i18n
mat-stroked-button
[routerLink]="['/about', 'changelog']"
>Changelog & License</a
>
</div>
</div>
</div>

2
apps/client/src/app/pages/about/about-page.module.ts
View File

@ -2,7 +2,6 @@ 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 { MarkdownModule } from 'ngx-markdown';
import { AboutPageRoutingModule } from './about-page-routing.module';
import { AboutPageComponent } from './about-page.component';
@ -13,7 +12,6 @@ import { AboutPageComponent } from './about-page.component';
imports: [
AboutPageRoutingModule,
CommonModule,
MarkdownModule.forChild(),
MatButtonModule,
MatCardModule
],

15
apps/client/src/app/pages/about/changelog/changelog-page-routing.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
import { ChangelogPageComponent } from './changelog-page.component';
const routes: Routes = [
{ path: '', component: ChangelogPageComponent, canActivate: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ChangelogPageRoutingModule {}

22
apps/client/src/app/pages/about/changelog/changelog-page.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
host: { class: 'mb-5' },
selector: 'gf-changelog-page',
styleUrls: ['./changelog-page.scss'],
templateUrl: './changelog-page.html'
})
export class ChangelogPageComponent implements OnDestroy {
private unsubscribeSubject = new Subject<void>();
/**
* @constructor
*/
public constructor() {}
public ngOnDestroy() {
this.unsubscribeSubject.next();
this.unsubscribeSubject.complete();
}
}

23
apps/client/src/app/pages/about/changelog/changelog-page.html Normal file
View File

@ -0,0 +1,23 @@
<div class="container">
<div class="mb-5 row">
<div class="col">
<h3 class="mb-3 text-center" i18n>Changelog</h3>
<mat-card class="changelog">
<mat-card-content>
<markdown [src]="'assets/CHANGELOG.md'"></markdown>
</mat-card-content>
</mat-card>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="mb-3 text-center" i18n>License</h3>
<mat-card>
<mat-card-content>
<markdown [src]="'assets/LICENSE'"></markdown>
</mat-card-content>
</mat-card>
</div>
</div>
</div>

19
apps/client/src/app/pages/about/changelog/changelog-page.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MarkdownModule } from 'ngx-markdown';
import { ChangelogPageRoutingModule } from './changelog-page-routing.module';
import { ChangelogPageComponent } from './changelog-page.component';
@NgModule({
declarations: [ChangelogPageComponent],
imports: [
ChangelogPageRoutingModule,
CommonModule,
MarkdownModule.forChild(),
MatCardModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ChangelogPageModule {}

44
apps/client/src/app/pages/about/changelog/changelog-page.scss Normal file
View File

@ -0,0 +1,44 @@
:host {
color: rgb(var(--dark-primary-text));
display: block;
.mat-card {
&.changelog {
a {
color: rgba(var(--palette-primary-500), 1);
font-weight: 500;
&:hover {
color: rgba(var(--palette-primary-300), 1);
}
}
}
&.changelog {
::ng-deep {
markdown {
h1,
p {
display: none;
}
h2 {
font-size: 18px;
&:not(:first-of-type) {
margin-top: 2rem;
}
}
h3 {
font-size: 15px;
}
}
}
}
}
}
:host-context(.is-dark-theme) {
color: rgb(var(--light-primary-text));
}

15
apps/client/src/app/pages/blog/blog-page-routing.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
import { BlogPageComponent } from './blog-page.component';
const routes: Routes = [
{ path: '', component: BlogPageComponent, canActivate: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BlogPageRoutingModule {}

22
apps/client/src/app/pages/blog/blog-page.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
@Component({
host: { class: 'mb-5' },
selector: 'gf-blog-page',
styleUrls: ['./blog-page.scss'],
templateUrl: './blog-page.html'
})
export class BlogPageComponent implements OnDestroy {
private unsubscribeSubject = new Subject<void>();
/**
* @constructor
*/
public constructor() {}
public ngOnDestroy() {
this.unsubscribeSubject.next();
this.unsubscribeSubject.complete();
}
}

49
apps/client/src/app/pages/blog/blog-page.html Normal file
View File

@ -0,0 +1,49 @@
<div class="container">
<div class="mb-5 row">
<div class="col">
<h3 class="mb-3 text-center" i18n>Blog</h3>
<mat-card class="blog-container">
<mat-card-content>
<div class="container p-0">
<div class="flex-nowrap mb-3 no-gutters row">
<a
class="d-flex w-100"
[routerLink]="['/en', 'blog', '2021', '07', 'hello-ghostfolio']"
>
<div class="flex-grow-1">
<div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
<div class="d-flex text-muted">31.07.2021</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 class="flex-nowrap no-gutters row">
<a
class="d-flex w-100"
[routerLink]="['/de', 'blog', '2021', '07', 'hallo-ghostfolio']"
>
<div class="flex-grow-1">
<div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
<div class="d-flex text-muted">31.07.2021</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>
</div>
</div>
</div>

13
apps/client/src/app/pages/blog/blog-page.module.ts Normal file
View File

@ -0,0 +1,13 @@
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { BlogPageRoutingModule } from './blog-page-routing.module';
import { BlogPageComponent } from './blog-page.component';
@NgModule({
declarations: [BlogPageComponent],
imports: [BlogPageRoutingModule, CommonModule, MatCardModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BlogPageModule {}

8
apps/client/src/app/pages/blog/blog-page.scss Normal file
View File

@ -0,0 +1,8 @@
:host {
color: rgb(var(--dark-primary-text));
display: block;
}
:host-context(.is-dark-theme) {
color: rgb(var(--light-primary-text));
}

22
apps/client/src/assets/sitemap.xml
View File

@ -6,30 +6,38 @@
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://ghostfol.io</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/about</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/about/changelog</loc>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/blog</loc>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/pricing</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/register</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://ghostfol.io/resources</loc>
<lastmod>2021-07-31T00:00:00+00:00</lastmod>
<lastmod>2022-01-01T00:00:00+00:00</lastmod>
</url>
</urlset>