Skip to content

Commit 91e4199

Browse files
esteecodesesteecodes
authored
Merge pull request #45 from AnguHashBlog/main
feat(header, layout): layout component removed, routing is normal, header with conditional elements
2 parents 9e5cc71 + 446ab1c commit 91e4199

14 files changed

+204
-233
lines changed

‎angular-primeng-app/src/app/app.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<router-outlet></router-outlet>
1+
<app-header />
2+
<div class="content">
3+
<router-outlet />
4+
</div>
5+
<app-footer />

‎angular-primeng-app/src/app/app.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.content {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
min-height: 74vh;
6+
width: 100%;
7+
}

‎angular-primeng-app/src/app/app.component.ts‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,58 @@
1-
import { Component, OnInit, OnDestroy, inject, Inject } from '@angular/core';
2-
import { RouterOutlet } from '@angular/router';
3-
import { Subscription } from 'rxjs';
4-
import { BlogInfo } from './models/blog-info';
5-
import { BlogService } from './services/blog.service';
6-
import { ThemeService } from './services/theme.service';
7-
import { DOCUMENT } from '@angular/common';
1+
import { Component, OnInit, OnDestroy, inject, Inject } from "@angular/core";
2+
import { RouterOutlet } from "@angular/router";
3+
import { Subscription } from "rxjs";
4+
import { BlogInfo } from "./models/blog-info";
5+
import { BlogService } from "./services/blog.service";
6+
import { ThemeService } from "./services/theme.service";
7+
import { DOCUMENT } from "@angular/common";
8+
import { HeaderComponent } from "./components/header/header.component";
9+
import { FooterComponent } from "./components/footer/footer.component";
810

911
@Component({
10-
selector: 'app-root',
11-
standalone: true,
12-
imports: [RouterOutlet],
13-
templateUrl: './app.component.html',
14-
styleUrl: './app.component.scss'
12+
selector: "app-root",
13+
standalone: true,
14+
imports: [RouterOutlet, HeaderComponent, FooterComponent],
15+
templateUrl: "./app.component.html",
16+
styleUrl: "./app.component.scss",
1517
})
1618
export class AppComponent implements OnInit, OnDestroy {
17-
title = 'angular-primeng-app';
18-
blogURL!: string;
19-
blogInfo!: BlogInfo;
20-
siteFavicon: any;
21-
themeService: ThemeService = inject(ThemeService);
22-
blogService: BlogService = inject(BlogService);
23-
private querySubscription?: Subscription;
19+
title = "angular-primeng-app";
20+
blogURL!: string;
21+
blogInfo!: BlogInfo;
22+
siteFavicon: any;
23+
themeService: ThemeService = inject(ThemeService);
24+
blogService: BlogService = inject(BlogService);
25+
private querySubscription?: Subscription;
2426

25-
constructor(@Inject(DOCUMENT) private document: Document) {}
27+
constructor(@Inject(DOCUMENT) private document: Document) {}
2628

27-
ngOnInit(): void {
28-
this.blogURL = this.blogService.getBlogURL();
29-
this.siteFavicon = this.document.querySelector('link[rel="icon"]') as HTMLLinkElement;
30-
this.querySubscription = this.blogService
31-
.getBlogInfo(this.blogURL)
32-
.subscribe((data) => {
33-
this.blogInfo = data;
34-
if (this.blogInfo.isTeam && this.blogInfo.favicon) {
35-
this.siteFavicon.href = this.blogInfo.favicon;
36-
} else {
37-
this.siteFavicon.href = "favicon.ico";
38-
}
39-
if (!this.blogInfo.isTeam) {
40-
this.blogService.getAuthorInfo(this.blogURL).subscribe((data) => {
41-
if (data.profilePicture) {
42-
this.siteFavicon.href = data.profilePicture;
43-
} else {
44-
this.siteFavicon.href = "favicon.ico";
45-
}
46-
});
47-
}
48-
});
49-
}
29+
ngOnInit(): void {
30+
this.blogURL = this.blogService.getBlogURL();
31+
this.siteFavicon = this.document.querySelector(
32+
'link[rel="icon"]'
33+
) as HTMLLinkElement;
34+
this.querySubscription = this.blogService
35+
.getBlogInfo(this.blogURL)
36+
.subscribe((data) => {
37+
this.blogInfo = data;
38+
if (this.blogInfo.isTeam && this.blogInfo.favicon) {
39+
this.siteFavicon.href = this.blogInfo.favicon;
40+
} else {
41+
this.siteFavicon.href = "favicon.ico";
42+
}
43+
if (!this.blogInfo.isTeam) {
44+
this.blogService.getAuthorInfo(this.blogURL).subscribe((data) => {
45+
if (data.profilePicture) {
46+
this.siteFavicon.href = data.profilePicture;
47+
} else {
48+
this.siteFavicon.href = "favicon.ico";
49+
}
50+
});
51+
}
52+
});
53+
}
5054

51-
ngOnDestroy(): void {
55+
ngOnDestroy(): void {
5256
this.querySubscription?.unsubscribe();
5357
}
5458
}

‎angular-primeng-app/src/app/app.routes.ts‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
11
import { Routes } from '@angular/router';
2-
import { LayoutComponent } from './components/layout/layout.component';
32
import { PostDetailsComponent } from './components/post-details/post-details.component';
3+
import { PostsComponent } from './components/posts/posts.component';
4+
import { SeriesComponent } from './components/series/series.component';
45

56
export const routes: Routes = [
67
{
78
path: '',
8-
component: LayoutComponent,
9-
children: [
10-
{
11-
path: '',
12-
loadComponent: () => import('./components/posts/posts.component')
13-
.then(c => c.PostsComponent)
14-
},
15-
16-
{
17-
path: 'series/:slug',
18-
loadComponent: () => import('./components/series/series.component')
19-
.then(c => c.SeriesComponent)
20-
}
21-
]
9+
component: PostsComponent
10+
},
11+
{
12+
path: 'series/:slug',
13+
component: SeriesComponent
2214
},
2315
{
24-
path: 'post/:slug',
16+
path: 'post/:postSlug',
2517
component: PostDetailsComponent
2618
},
2719
{

‎angular-primeng-app/src/app/components/header/header.component.html‎

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,65 @@
11
<p-toolbar>
2-
<div class="toolbar-row">
3-
<a class="logo" routerLink="/">
4-
<img src="../../../assets/images/anguhashblog-logo-purple-bgr.jpg" alt="logo" />
5-
<h1>{{ blogName }}</h1>
6-
</a>
7-
<div class="controls">
8-
<app-search-dialog [blogId]="blogId"></app-search-dialog>
9-
<app-settings-dialog></app-settings-dialog>
10-
<p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')" id="theme-switch"></p-inputSwitch>
2+
<div class="toolbar-row first">
3+
<div class="p-toolbar-group-start">
4+
@if (showMainHeader) {
5+
<a routerLink="/" class="blog-title">
6+
<img class="logo-image" src="{{blogImage}}" alt="logo" />
7+
</a>
8+
} @else {
9+
<app-sidenav></app-sidenav>
10+
}
11+
<a routerLink="/" class="blog-title">
12+
<h1>{{blogName}}</h1>
13+
</a>
1114
</div>
12-
</div>
13-
<div class="toolbar-row">
14-
<div class="social">
15-
<div class="social-link">
16-
@for (social of blogSocialLinks | keyvalue; track social) {
17-
@if (social.value && social.key !== 'website') {
18-
<a href="{{social.value}}" target="_blank" rel="noopener noreferrer">
19-
<i class="pi pi-{{social.key}}"></i>
20-
</a>
21-
}
22-
@if (social.value && social.key === 'website') {
23-
<a href="{{social.value}}" target="_blank" rel="noopener noreferrer">
24-
<i class="pi pi-globe"></i>
25-
</a>
26-
}
15+
16+
<div class="p-toolbar-group-end">
17+
<div class="controls">
18+
@if (showMainHeader) {
19+
<app-search-dialog [blogId]="blogId"></app-search-dialog>
20+
<app-settings-dialog></app-settings-dialog>
2721
}
22+
<p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')"
23+
id="theme-switch"></p-inputSwitch>
2824
</div>
2925
</div>
30-
<div class="follow">
31-
<app-follow-dialog></app-follow-dialog>
26+
</div>
27+
28+
@if (showMainHeader) {
29+
<div class="toolbar-row second">
30+
<div class="p-toolbar-group-start">
31+
<div class="social">
32+
<div class="social-link">
33+
@for (social of blogSocialLinks | keyvalue; track social) {
34+
@if (social.value && social.key !== 'website') {
35+
<a href="{{social.value}}" target="_blank" rel="noopener noreferrer">
36+
<i class="pi pi-{{social.key}}"></i>
37+
</a>
38+
}
39+
@if (social.value && social.key === 'website') {
40+
<a href="{{social.value}}" target="_blank" rel="noopener noreferrer">
41+
<i class="pi pi-globe"></i>
42+
</a>
43+
}
44+
}
45+
</div>
46+
</div>
47+
</div>
48+
49+
<div class="p-toolbar-group-end">
50+
<div class="follow">
51+
<app-follow-dialog></app-follow-dialog>
52+
</div>
3253
</div>
3354
</div>
34-
<div class="toolbar-row">
55+
56+
<div class="toolbar-row third">
3557
<div class="series">
3658
@for (series of seriesList; track series) {
3759
<a [routerLink]="'series/' + series.slug" class="topic-link">{{ series.name}}</a>
3860
}
3961
</div>
4062
</div>
63+
}
64+
4165
</p-toolbar>

‎angular-primeng-app/src/app/components/header/header.component.scss‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,54 @@ p-toolbar {
1414
margin: 0 0.3rem;
1515
}
1616

17-
.logo {
17+
.p-toolbar-group-start {
1818
display: flex;
1919
align-items: center;
2020

21-
img {
21+
.logo-image {
2222
width: 3rem;
2323
height: 3rem;
2424
margin-right: 0.5rem;
2525
border-radius: 50%;
2626
}
2727

28-
h1 {
29-
font-size: 1.3rem;
30-
font-weight: 500;
28+
.blog-title {
29+
display: flex;
30+
align-items: center;
31+
cursor: pointer;
32+
33+
h1 {
34+
font-size: 1.3rem;
35+
font-weight: 400;
36+
margin: 0;
37+
}
3138
}
32-
}
3339

34-
.social {
35-
display: flex;
36-
align-items: flex-start;
37-
justify-content: center;
38-
margin: 0.8rem 0 0.5rem;
40+
.social {
41+
display: flex;
42+
align-items: flex-start;
43+
justify-content: center;
44+
margin: 0.8rem 0 0.5rem;
3945

40-
a {
46+
a {
4147

42-
i {
43-
font-size: 1.1rem;
48+
i {
49+
font-size: 1.1rem;
50+
}
4451
}
4552
}
4653
}
4754

48-
.follow {
49-
padding-bottom: 0.7rem;
55+
.p-toolbar-group-end {
56+
.controls {
57+
display: flex;
58+
align-items: center;
59+
gap: 0.5rem;
60+
}
61+
62+
.follow {
63+
padding-bottom: 0.7rem;
64+
}
5065
}
5166

5267
.series {
@@ -64,8 +79,4 @@ p-toolbar {
6479
}
6580
}
6681

67-
.controls {
68-
display: flex;
69-
align-items: center;
70-
gap: 0.5rem;
71-
}
82+

0 commit comments

Comments
 (0)