Merge pull request #38 from AnguHashBlog/main

Multiple Issues - features and fixes

Author: esteecodes

angular-primeng-app/src/app/components/footer/footer.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { BlogService } from '../../services/blog.service';
 import { Subscription } from 'rxjs';
 
 import { ToolbarModule } from 'primeng/toolbar';
+import { BlogInfo } from '../../models/blog-info';
 
 @Component({
   selector: 'app-footer',
@@ -12,17 +13,17 @@ import { ToolbarModule } from 'primeng/toolbar';
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
+  blogURL!: string;
+  blogInfo!: BlogInfo;
   blogName = '';
-
   date = new Date().getFullYear();
+  blogService: BlogService = inject(BlogService);
 
   private querySubscription?: Subscription;
 
-  constructor(private blogService: BlogService) {
-  }
-
   ngOnInit() {
-    this.querySubscription = this.blogService.getBlogInfo()
+    this.blogURL = this.blogService.getBlogURL();
+    this.querySubscription = this.blogService.getBlogInfo(this.blogURL)
       .subscribe((data) => this.blogName = data.title);
   }
 

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

@@ -6,6 +6,7 @@ <h1>{{ blogName }}</h1>
     </a>
     <div class="controls">
       <app-search-dialog [blogId]="blogId"></app-search-dialog>
+      <app-settings-dialog></app-settings-dialog>
       <p-inputSwitch [(ngModel)]="checked" (click)="onThemeChange(checked ? 'dark' : 'light')" id="theme-switch"></p-inputSwitch>
     </div>
   </div>
@@ -27,7 +28,7 @@ <h1>{{ blogName }}</h1>
       </div>
     </div>
     <div class="follow">
-      <p-button (click)="showDialog()" label="Follow" [raised]="true"></p-button>
+      <app-follow-dialog></app-follow-dialog>
     </div>
   </div>
   <div class="toolbar-row">
@@ -38,12 +39,3 @@ <h1>{{ blogName }}</h1>
     </div>
   </div>
 </p-toolbar>
-
-<p-dialog [(visible)]="visible" [style]="{width: '27vw'}">
-  <div class="logo-wrapper">
-    <img class="logo" src="/assets/images/anguhashblog-logo-purple-bgr.jpg" alt="">
-  </div>
-  <h3>Hey, 👋 sign up or sign in to interact.</h3>
-  <a class="button" href="https://hashnode.com/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/hashnode-logo-white.png" alt="Sign in">Sign in with Hashnode</a>
-  <p>This blog is powered by <a class="link" href="https://hashnode.com/" target="_blank" rel="noopener noreferrer">Hashnode</a>. To interact with the content on this blog, please log in through Hashnode.</p>
-</p-dialog>

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

@@ -64,59 +64,8 @@ p-toolbar {
   }
 }
 
-p-dialog {
-  h3 {
-    font-size: 1.1rem;
-    font-weight: 400;
-    text-align: center;
-  }
-
-  .logo-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .logo {
-      width: 5rem;
-      height: 5rem;
-      margin: 1rem;
-      border-radius: 50%;
-    }
-  }
-
-  .button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #2563eb;
-    color: #fff;
-    font-size: 1.1rem;
-    padding: 0.7rem 3rem;
-    margin: 2rem 1rem;
-    border: none;
-    border-radius: 3rem;
-
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
-      margin-right: 0.5rem;
-    }
-  }
-
-  .link {
-    color: #2563eb;
-    font-size: 0.8.5rem;
-    margin: 0;
-  }
-
-  p {
-    font-size: 0.8rem;
-    text-align: center;
-  }
-}
-
 .controls {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 0.5rem;
 }

angular-primeng-app/src/app/components/header/header.component.ts

@@ -1,24 +1,29 @@
-import { Component, inject, OnInit } from "@angular/core";
+import { Component, inject, OnDestroy, OnInit } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { ThemeService } from "../../services/theme.service";
 import { BlogService } from "../../services/blog.service";
 import { AsyncPipe, KeyValuePipe } from "@angular/common";
 import { RouterLink } from "@angular/router";
 import { BlogInfo, BlogLinks } from "../../models/blog-info";
 import { SeriesList } from "../../models/post";
+import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component";
+import { Subscription } from "rxjs";
 
 import { ToolbarModule } from "primeng/toolbar";
 import { ButtonModule } from "primeng/button";
 import { InputSwitchModule } from "primeng/inputswitch";
 import { DialogModule } from "primeng/dialog";
-import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component";
+import { SettingsDialogComponent } from "../../partials/settings-dialog/settings-dialog.component";
+import { FollowDialogComponent } from "../../partials/follow-dialog/follow-dialog.component";
 
 @Component({
 	selector: "app-header",
 	standalone: true,
   imports: [
     AsyncPipe,
     SearchDialogComponent,
+    SettingsDialogComponent,
+    FollowDialogComponent,
     ButtonModule,
     FormsModule,
     InputSwitchModule,
@@ -30,10 +35,12 @@ import { SearchDialogComponent } from "../../partials/search-dialog/search-dialo
 	templateUrl: "./header.component.html",
 	styleUrl: "./header.component.scss",
 })
-export class HeaderComponent implements OnInit {
-	blogInfo!: BlogInfo;
+export class HeaderComponent implements OnInit, OnDestroy {
+  blogURL!: string;
+  blogInfo!: BlogInfo;
   blogId: string = "";
-	blogName: string = "";
+  blogName: string = "";
+  blogImage: string = "/assets/images/anguhashblog-logo-purple-bgr.jpg";
 	blogSocialLinks!: BlogLinks;
 	checked: boolean = true;
 	selectedTheme: string = "dark";
@@ -42,19 +49,38 @@ export class HeaderComponent implements OnInit {
 	themeService: ThemeService = inject(ThemeService);
 	blogService: BlogService = inject(BlogService);
 
+  private querySubscription?: Subscription;
+
 	ngOnInit(): void {
-		this.blogService
-			.getBlogInfo()
+    this.blogURL = this.blogService.getBlogURL();
+		this.querySubscription = this.blogService
+			.getBlogInfo(this.blogURL)
 			.subscribe((data) => {
 				this.blogInfo = data;
-        this.blogId = this.blogInfo.id;
+				this.blogId = this.blogInfo.id;
 				this.blogName = this.blogInfo.title;
+        if (this.blogInfo.isTeam && this.blogInfo.favicon) {
+          this.blogImage = this.blogInfo.favicon;
+        } else {
+          this.blogImage = '/assets/images/anguhashblog-logo-purple-bgr.jpg'
+        }
+        if (!this.blogInfo.isTeam) {
+          this.blogService
+            .getAuthorInfo(this.blogURL)
+            .subscribe((data) => {
+              if (data.profilePicture) {
+                this.blogImage = data.profilePicture;
+              } else {
+                this.blogImage = '/assets/images/anguhashblog-logo-purple-bgr.jpg'
+              }
+            });
+        }
 				const { __typename, ...links } = data.links;
 				this.blogSocialLinks = links;
 			});
 
 		this.blogService
-			.getSeriesList()
+			.getSeriesList(this.blogURL)
 			.subscribe((data) => {
 				this.seriesList = data;
 			});
@@ -65,7 +91,7 @@ export class HeaderComponent implements OnInit {
 		this.themeService.setTheme(theme);
 	}
 
-	showDialog() {
-		this.visible = true;
+  ngOnDestroy(): void {
+		this.querySubscription?.unsubscribe();
 	}
 }

angular-primeng-app/src/app/components/post-details/post-details.component.html

@@ -30,7 +30,7 @@ <h1 class="title">{{ post.title }}</h1>
           </div>
         </div>
       </div>
-      <div class="content" [innerHTML]="sanitizeHtml(post.content.html)"></div>
+      <div class="content" [innerHTML]="post.content.html | sanitizerHtml" youtubeVideoEmbed></div>
     </article>
   }
   <app-footer></app-footer>

angular-primeng-app/src/app/components/post-details/post-details.component.scss

@@ -75,6 +75,11 @@
     .content {
       font-size: 1rem;
       line-height: 1.5rem;
+
+      iframe {
+        width: 100%;
+        height: calc(50vw * 0.5625);
+      }
     }
   }
 

angular-primeng-app/src/app/components/post-details/post-details.component.ts

@@ -1,10 +1,10 @@
 import { Component, inject, Input, OnDestroy, OnInit } from "@angular/core";
 import { BlogService } from "../../services/blog.service";
 import { AsyncPipe, DatePipe } from "@angular/common";
-import { Post } from "../../models/post";
+import { Post, SeriesList } from "../../models/post";
 import { Observable, Subscription } from "rxjs";
-import { ActivatedRoute, RouterLink } from "@angular/router";
-import { BlogInfo } from "../../models/blog-info";
+import { RouterLink } from "@angular/router";
+import { BlogInfo, BlogLinks } from "../../models/blog-info";
 import { FormsModule } from "@angular/forms";
 import { SidenavComponent } from "../sidenav/sidenav.component";
 import { SearchDialogComponent } from "../../partials/search-dialog/search-dialog.component";
@@ -15,17 +15,20 @@ import { TagModule } from "primeng/tag";
 import { ToolbarModule } from "primeng/toolbar";
 import { ButtonModule } from "primeng/button";
 import { InputSwitchModule } from "primeng/inputswitch";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { SanitizerHtmlPipe } from "../../pipes/sanitizer-html.pipe";
+import { YoutubeVideoEmbedDirective } from "../../directives/youtube-video-embed.directive";
 
 @Component({
 	selector: "app-post-details",
 	standalone: true,
 	imports: [
 		DatePipe,
 		AsyncPipe,
+    SanitizerHtmlPipe,
 		RouterLink,
 		SidenavComponent,
 		FooterComponent,
+    YoutubeVideoEmbedDirective,
 		FormsModule,
 		TagModule,
 		ToolbarModule,
@@ -36,36 +39,47 @@ import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 	templateUrl: "./post-details.component.html",
 	styleUrl: "./post-details.component.scss",
 })
-export class PostDetailsComponent implements OnInit {
-	post$!: Observable<Post>;
-	blogInfo!: BlogInfo;
-	blogId: string = "";
-	blogName: string = "";
+export class PostDetailsComponent implements OnInit, OnDestroy {
 	checked: boolean = true;
 	selectedTheme: string = "dark";
+  blogURL!: string;
+	blogInfo!: BlogInfo;
+  blogId: string = "";
+	blogName: string = "";
+  blogSocialLinks!: BlogLinks;
+	seriesList!: SeriesList[];
+	post$!: Observable<Post>;
 	themeService: ThemeService = inject(ThemeService);
-  private sanitizer: DomSanitizer = inject(DomSanitizer);
 	private blogService: BlogService = inject(BlogService);
+  private querySubscription?: Subscription;
 
-	@Input({ required: true })
-	set slug(slug: string) {
-		this.post$ = this.blogService.getSinglePost(slug);
-	}
-
-	ngOnInit(): void {
-		this.blogService.getBlogInfo().subscribe((data) => {
-			this.blogInfo = data;
-			this.blogId = this.blogInfo.id;
-			this.blogName = this.blogInfo.title;
-		});
-	}
+	@Input({ required: true }) slug!: string;
 
-	sanitizeHtml(html: string): SafeHtml {
-		return this.sanitizer.bypassSecurityTrustHtml(html);
+  ngOnInit(): void {
+    this.blogURL = this.blogService.getBlogURL();
+		this.querySubscription = this.blogService
+			.getBlogInfo(this.blogURL)
+			.subscribe((data) => {
+				this.blogInfo = data;
+        this.blogId = this.blogInfo.id;
+				this.blogName = this.blogInfo.title;
+        const { __typename, ...links } = data.links;
+        this.blogSocialLinks = links;
+			});
+		this.post$ = this.blogService.getSinglePost(this.blogURL,this.slug);
+		this.querySubscription = this.blogService
+			.getSeriesList(this.blogURL)
+			.subscribe((data) => {
+				this.seriesList = data;
+			});
 	}
 
 	onThemeChange(theme: string): void {
 		this.selectedTheme = theme;
 		this.themeService.setTheme(theme);
 	}
+
+	ngOnDestroy(): void {
+		this.querySubscription?.unsubscribe();
+	}
 }

angular-primeng-app/src/app/components/posts/posts.component.html

@@ -1,11 +1,13 @@
 <div class="posts-view">
   <div class="cards-wrapper grid">
     @for (post of posts$ | async; track post.id) {
-    <p-card class="post-card" header="{{ post.title }}" (click)="navigateToPost(post.slug)">
-      <ng-template pTemplate="header">
-        <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
-      </ng-template>
-    </p-card>
+    <a [routerLink]="['post', post.slug]">
+      <p-card class="post-card" header="{{ post.title }}">
+        <ng-template pTemplate="header">
+          <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
+        </ng-template>
+      </p-card>
+    </a>
     }
   </div>
 </div>

angular-primeng-app/src/app/components/posts/posts.component.scss

@@ -8,6 +8,10 @@
     flex-wrap: wrap;
     justify-content: center;
     margin: 2rem 1rem;
+
+    .post-card {
+      display: flex;
+    }
   }
 }