From 1d12a3013b0eca6a49a5ad5776c188d0a1031a79 Mon Sep 17 00:00:00 2001 From: Esther White Date: Mon, 17 Jun 2024 10:38:28 +0300 Subject: [PATCH] feat(footer-post-details): analog link --- src/app/pages/post/[postSlug].page.ts | 233 ++++++++++++++------------ 1 file changed, 130 insertions(+), 103 deletions(-) diff --git a/src/app/pages/post/[postSlug].page.ts b/src/app/pages/post/[postSlug].page.ts index 59f557e..be843ff 100644 --- a/src/app/pages/post/[postSlug].page.ts +++ b/src/app/pages/post/[postSlug].page.ts @@ -11,7 +11,12 @@ import { Meta } from "@angular/platform-browser"; import { BlogService } from "../../services/blog.service"; import { BlogInfo, BlogLinks } from "src/app/models/blog-info"; import { Post, SeriesList } from "src/app/models/post"; -import { AsyncPipe, DatePipe, KeyValuePipe, ViewportScroller } from "@angular/common"; +import { + AsyncPipe, + DatePipe, + KeyValuePipe, + ViewportScroller, +} from "@angular/common"; import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe"; import { map, Observable, Subscription } from "rxjs"; import { ActivatedRoute, RouterLink } from "@angular/router"; @@ -27,86 +32,104 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb selector: "app-post-details", standalone: true, imports: [ - RouterLink, + RouterLink, AsyncPipe, DatePipe, - KeyValuePipe, - SanitizerHtmlPipe, + KeyValuePipe, + SanitizerHtmlPipe, MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule, - YoutubeVideoEmbedDirective, - ], + YoutubeVideoEmbedDirective, + ], template: `
- -
-
- -
- -

{{blogName}}

- -
-
-
- - - - - -
-

Series

- - @for (series of seriesList; track series) { - {{series.name}} - } - - -
- - - - @if (post$ | async; as post) { -
-

{{ post.title }}

- Cover image for {{ post.title }} -
-
- {{post.author.username}} -
- {{post.author.username}} -
- - today - {{post.publishedAt | date: 'MMM dd, yyyy' }} - - - import_contacts - {{post.readTimeInMinutes}} min read - -
-
-
-
- -
-
- } - - - - -

© {{date}} {{blogName}}

- Created usingAnguHashBlog - -
- + +
+
+ +
+ +

{{ blogName }}

+ +
+
+ + + + +
+

Series

+ + @for (series of seriesList; track series) { + {{ series.name }} + } + + +
+ + + + @if (post$ | async; as post) { +
+

{{ post.title }}

+ Cover image for {{ post.title }} +
+
+ {{ post.author.username }} +
+ {{ post.author.username }} +
+ + today + {{ post.publishedAt | date : "MMM dd, yyyy" }} + + + import_contacts + {{ post.readTimeInMinutes }} min read + +
+
+
+
+ +
+
+ } + + + + +

© {{ date }} {{ blogName }}

+ Created usingAnguHashBlog + andAnalog + + `, styles: [ ` @@ -138,7 +161,7 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb .toolbar-row-start { display: flex; - align-items: center; + align-items: center; } .toolbar-row-end { @@ -295,6 +318,10 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb color: #999999; font-size: 0.8rem; } + + a { + margin-left: 0.2rem; + } } } @@ -325,20 +352,20 @@ import { YoutubeVideoEmbedDirective } from "src/app/directives/youtube-video-emb ], }) export default class PostDetailsComponent implements OnInit, OnDestroy { - private readonly scroller = inject(ViewportScroller); + private readonly scroller = inject(ViewportScroller); mobileQuery: MediaQueryList; - date = new Date().getFullYear(); - blogURL!: string; + date = new Date().getFullYear(); + blogURL!: string; blogInfo!: BlogInfo; blogName: string = ""; blogSocialLinks!: BlogLinks; seriesList!: SeriesList[]; post$!: Observable; - postTitle!: string; + postTitle!: string; postCoverImage!: string; - private route = inject(ActivatedRoute); + private route = inject(ActivatedRoute); private blogService = inject(BlogService); - private meta = inject(Meta); + private meta = inject(Meta); private querySubscription?: Subscription; private _mobileQueryListener: () => void; @@ -352,36 +379,36 @@ export default class PostDetailsComponent implements OnInit, OnDestroy { ngOnInit(): void { this.scroller.scrollToPosition([0, 0]); - this.blogURL = this.blogService.getBlogURL(); + this.blogURL = this.blogService.getBlogURL(); this.querySubscription = this.blogService .getBlogInfo(this.blogURL) .subscribe((data) => { this.blogInfo = data; this.blogName = this.blogInfo.title; - const { __typename, ...links } = data.links; - this.blogSocialLinks = links; + const { __typename, ...links } = data.links; + this.blogSocialLinks = links; }); - this.postSlug$.subscribe((slug) => { - if (slug !== null) { - this.post$ = this.blogService.getSinglePost(this.blogURL, slug); - this.post$.subscribe((post) => { - this.postTitle = post.title; - this.postCoverImage = post.coverImage.url; - this.meta.updateTag({ - name: "title", - content: post.title, - }); - this.meta.updateTag({ - name: "description", - content: post.title, - }); - this.meta.updateTag({ - name: "image", - content: this.postCoverImage, - }); - }); - } - }); + this.postSlug$.subscribe((slug) => { + if (slug !== null) { + this.post$ = this.blogService.getSinglePost(this.blogURL, slug); + this.post$.subscribe((post) => { + this.postTitle = post.title; + this.postCoverImage = post.coverImage.url; + this.meta.updateTag({ + name: "title", + content: post.title, + }); + this.meta.updateTag({ + name: "description", + content: post.title, + }); + this.meta.updateTag({ + name: "image", + content: this.postCoverImage, + }); + }); + } + }); } ngOnDestroy(): void {