Skip to content

Commit fa89d44

Browse files
esteecodesesteecodes
authored
Merge pull request #2 from AnguHashBlog/main
feat(footer-post-details): analog link
2 parents 1fa3790 + 1d12a30 commit fa89d44

File tree

1 file changed

+130
-103
lines changed

1 file changed

+130
-103
lines changed

‎src/app/pages/post/[postSlug].page.ts‎

Lines changed: 130 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,12 @@ import { Meta } from "@angular/platform-browser";
1111
import { BlogService } from "../../services/blog.service";
1212
import { BlogInfo, BlogLinks } from "src/app/models/blog-info";
1313
import { Post, SeriesList } from "src/app/models/post";
14-
import { AsyncPipe, DatePipe, KeyValuePipe, ViewportScroller } from "@angular/common";
14+
import {
15+
AsyncPipe,
16+
DatePipe,
17+
KeyValuePipe,
18+
ViewportScroller,
19+
} from "@angular/common";
1520
import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe";
1621
import { map, Observable, Subscription } from "rxjs";
1722
import { ActivatedRoute, RouterLink } from "@angular/router";
@@ -27,86 +32,104 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
2732
selector: "app-post-details",
2833
standalone: true,
2934
imports: [
30-
RouterLink,
35+
RouterLink,
3136
AsyncPipe,
3237
DatePipe,
33-
KeyValuePipe,
34-
SanitizerHtmlPipe,
38+
KeyValuePipe,
39+
SanitizerHtmlPipe,
3540
MatToolbarModule,
3641
MatButtonModule,
3742
MatIconModule,
3843
MatSidenavModule,
3944
MatListModule,
40-
YoutubeVideoEmbedDirective,
41-
],
45+
YoutubeVideoEmbedDirective,
46+
],
4247
template: `
4348
<div class="post-details-page" [class.is-mobile]="mobileQuery.matches">
44-
<mat-toolbar class="toolbar">
45-
<div class="toolbar-row-start">
46-
<div class="menu">
47-
<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
48-
</div>
49-
<a routerLink="/" class="blog-title">
50-
<h1>{{blogName}}</h1>
51-
</a>
52-
</div>
53-
<div class="toolbar-row-end">
54-
</div>
55-
56-
</mat-toolbar>
57-
58-
<mat-sidenav-container class="sidenav-container">
59-
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'">
60-
<div class="mat-sidenav-menu">
61-
<h3>Series</h3>
62-
<mat-nav-list class="series">
63-
@for (series of seriesList; track series) {
64-
<a [routerLink]="['/series', series.slug]">{{series.name}}</a>
65-
}
66-
</mat-nav-list>
67-
<mat-nav-list class="social">
68-
<!-- issues with icons path after adding public folder -->
69-
<!-- <app-blog-social-icons [blogSocialLinks]="blogSocialLinks"></app-blog-social-icons> -->
70-
</mat-nav-list>
71-
</div>
72-
</mat-sidenav>
73-
74-
<mat-sidenav-content>
75-
@if (post$ | async; as post) {
76-
<article>
77-
<h1 class="title">{{ post.title }}</h1>
78-
<img class="cover-image" [src]="post.coverImage.url" alt="Cover image for {{ post.title }}">
79-
<div class="post-details">
80-
<div class="author-info">
81-
<img class="author-image" [src]="post.author.profilePicture" alt="{{post.author.username}}">
82-
<div class="author-text">
83-
<span class="author-name">{{post.author.username}}</span>
84-
<div class="post-meta">
85-
<span class="published-date">
86-
<mat-icon>today</mat-icon>
87-
{{post.publishedAt | date: 'MMM dd, yyyy' }}
88-
</span>
89-
<span class="read-time">
90-
<mat-icon>import_contacts</mat-icon>
91-
{{post.readTimeInMinutes}} min read
92-
</span>
93-
</div>
94-
</div>
95-
</div>
96-
</div>
97-
<!-- yt video directive not set since there were errors with bath also -->
98-
<div class="content" [innerHTML]="post.content.html | sanitizerHtml" youtubeVideoEmbed></div>
99-
</article>
100-
}
101-
</mat-sidenav-content>
102-
</mat-sidenav-container>
103-
104-
<mat-toolbar class="footer">
105-
<p>&copy; {{date}} {{blogName}}</p>
106-
<small>Created using<a href="https://github.com/AnguHashBlog" target="_blank">AnguHashBlog</a></small>
107-
</mat-toolbar>
108-
</div>
109-
49+
<mat-toolbar class="toolbar">
50+
<div class="toolbar-row-start">
51+
<div class="menu">
52+
<button mat-icon-button (click)="snav.toggle()">
53+
<mat-icon>menu</mat-icon>
54+
</button>
55+
</div>
56+
<a routerLink="/" class="blog-title">
57+
<h1>{{ blogName }}</h1>
58+
</a>
59+
</div>
60+
<div class="toolbar-row-end"></div>
61+
</mat-toolbar>
62+
63+
<mat-sidenav-container class="sidenav-container">
64+
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'">
65+
<div class="mat-sidenav-menu">
66+
<h3>Series</h3>
67+
<mat-nav-list class="series">
68+
@for (series of seriesList; track series) {
69+
<a [routerLink]="['/series', series.slug]">{{ series.name }}</a>
70+
}
71+
</mat-nav-list>
72+
<mat-nav-list class="social">
73+
<!-- issues with icons path after adding public folder -->
74+
<!-- <app-blog-social-icons [blogSocialLinks]="blogSocialLinks"></app-blog-social-icons> -->
75+
</mat-nav-list>
76+
</div>
77+
</mat-sidenav>
78+
79+
<mat-sidenav-content>
80+
@if (post$ | async; as post) {
81+
<article>
82+
<h1 class="title">{{ post.title }}</h1>
83+
<img
84+
class="cover-image"
85+
[src]="post.coverImage.url"
86+
alt="Cover image for {{ post.title }}"
87+
/>
88+
<div class="post-details">
89+
<div class="author-info">
90+
<img
91+
class="author-image"
92+
[src]="post.author.profilePicture"
93+
alt="{{ post.author.username }}"
94+
/>
95+
<div class="author-text">
96+
<span class="author-name">{{ post.author.username }}</span>
97+
<div class="post-meta">
98+
<span class="published-date">
99+
<mat-icon>today</mat-icon>
100+
{{ post.publishedAt | date : "MMM dd, yyyy" }}
101+
</span>
102+
<span class="read-time">
103+
<mat-icon>import_contacts</mat-icon>
104+
{{ post.readTimeInMinutes }} min read
105+
</span>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
<!-- yt video directive not set since there were errors with bath also -->
111+
<div
112+
class="content"
113+
[innerHTML]="post.content.html | sanitizerHtml"
114+
youtubeVideoEmbed
115+
></div>
116+
</article>
117+
}
118+
</mat-sidenav-content>
119+
</mat-sidenav-container>
120+
121+
<mat-toolbar class="footer">
122+
<p>&copy; {{ date }} {{ blogName }}</p>
123+
<small
124+
>Created using<a
125+
href="https://github.com/AnguHashBlog"
126+
target="_blank"
127+
>AnguHashBlog</a
128+
>
129+
and<a href="https://analogjs.org" target="_blank">Analog</a></small
130+
>
131+
</mat-toolbar>
132+
</div>
110133
`,
111134
styles: [
112135
`
@@ -138,7 +161,7 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
138161
139162
.toolbar-row-start {
140163
display: flex;
141-
align-items: center;
164+
align-items: center;
142165
}
143166
144167
.toolbar-row-end {
@@ -295,6 +318,10 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
295318
color: #999999;
296319
font-size: 0.8rem;
297320
}
321+
322+
a {
323+
margin-left: 0.2rem;
324+
}
298325
}
299326
}
300327
@@ -325,20 +352,20 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb
325352
],
326353
})
327354
export default class PostDetailsComponent implements OnInit, OnDestroy {
328-
private readonly scroller = inject(ViewportScroller);
355+
private readonly scroller = inject(ViewportScroller);
329356
mobileQuery: MediaQueryList;
330-
date = new Date().getFullYear();
331-
blogURL!: string;
357+
date = new Date().getFullYear();
358+
blogURL!: string;
332359
blogInfo!: BlogInfo;
333360
blogName: string = "";
334361
blogSocialLinks!: BlogLinks;
335362
seriesList!: SeriesList[];
336363
post$!: Observable<Post>;
337-
postTitle!: string;
364+
postTitle!: string;
338365
postCoverImage!: string;
339-
private route = inject(ActivatedRoute);
366+
private route = inject(ActivatedRoute);
340367
private blogService = inject(BlogService);
341-
private meta = inject(Meta);
368+
private meta = inject(Meta);
342369
private querySubscription?: Subscription;
343370
private _mobileQueryListener: () => void;
344371

@@ -352,36 +379,36 @@ export default class PostDetailsComponent implements OnInit, OnDestroy {
352379

353380
ngOnInit(): void {
354381
this.scroller.scrollToPosition([0, 0]);
355-
this.blogURL = this.blogService.getBlogURL();
382+
this.blogURL = this.blogService.getBlogURL();
356383
this.querySubscription = this.blogService
357384
.getBlogInfo(this.blogURL)
358385
.subscribe((data) => {
359386
this.blogInfo = data;
360387
this.blogName = this.blogInfo.title;
361-
const { __typename, ...links } = data.links;
362-
this.blogSocialLinks = links;
388+
const { __typename, ...links } = data.links;
389+
this.blogSocialLinks = links;
363390
});
364-
this.postSlug$.subscribe((slug) => {
365-
if (slug !== null) {
366-
this.post$ = this.blogService.getSinglePost(this.blogURL, slug);
367-
this.post$.subscribe((post) => {
368-
this.postTitle = post.title;
369-
this.postCoverImage = post.coverImage.url;
370-
this.meta.updateTag({
371-
name: "title",
372-
content: post.title,
373-
});
374-
this.meta.updateTag({
375-
name: "description",
376-
content: post.title,
377-
});
378-
this.meta.updateTag({
379-
name: "image",
380-
content: this.postCoverImage,
381-
});
382-
});
383-
}
384-
});
391+
this.postSlug$.subscribe((slug) => {
392+
if (slug !== null) {
393+
this.post$ = this.blogService.getSinglePost(this.blogURL, slug);
394+
this.post$.subscribe((post) => {
395+
this.postTitle = post.title;
396+
this.postCoverImage = post.coverImage.url;
397+
this.meta.updateTag({
398+
name: "title",
399+
content: post.title,
400+
});
401+
this.meta.updateTag({
402+
name: "description",
403+
content: post.title,
404+
});
405+
this.meta.updateTag({
406+
name: "image",
407+
content: this.postCoverImage,
408+
});
409+
});
410+
}
411+
});
385412
}
386413

387414
ngOnDestroy(): void {

0 commit comments

Comments
 (0)