Feature: author and co-authors to be clickable links leading to the author's page on Hashnode

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

@@ -7,13 +7,19 @@ <h1 class="title">{{ post.title }}</h1>
         <div class="author-info">
           @if (isTeam) {
             <p-avatarGroup styleClass="mb-3" >
-               <p-avatar [image]="post.author.profilePicture" size="large" shape="circle" title="{{ post.author.name}}"></p-avatar>
+               <a href="https://hashnode.com/@{{post.author.name | removeSpecialChars}}" target="_blank">
+               <p-avatar [image]="post.author.profilePicture" size="large" shape="circle" title="{{post.author.name}}"></p-avatar>
+               </a>
                @for (coAuthor of post.coAuthors; track coAuthor.username) {
-                 <p-avatar [image]="coAuthor.profilePicture" size="large"  shape="circle" title="{{ coAuthor.username}}"></p-avatar>
+                <a href="https://hashnode.com/@{{coAuthor.username | removeSpecialChars }}" target="_blank">
+                <p-avatar [image]="coAuthor.profilePicture" size="large"  shape="circle" title="{{coAuthor.username}}"></p-avatar>
+                </a>
                 }
             </p-avatarGroup>
           } @else {
-             <p-avatar [image]="post.author.profilePicture" size="large"  shape="circle" title="{{ post.author.name}}"></p-avatar>
+            <a href='https://hashnode.com/@{{post.author.name | removeSpecialChars}}' target="_blank">
+             <p-avatar [image]="post.author.profilePicture" size="large"  shape="circle" title="{{post.author.name}}"></p-avatar>
+            </a>
             }
           <div class="author-text">
             <span class="author-name">{{post.author.name}} {{isTeam && post.coAuthors.length > 0 ? 'with ' + post.coAuthors.length + ' co-author' + (post.coAuthors.length > 1 ? 's' : '') : ''}}</span>

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

@@ -20,6 +20,7 @@ import { ButtonModule } from "primeng/button";
 import { InputSwitchModule } from "primeng/inputswitch";
 import { AvatarModule } from 'primeng/avatar';
 import { AvatarGroupModule } from 'primeng/avatargroup';
+import { RemoveSpecialCharsPipe  } from "../../pipes/special-characters-remover.pipe";
 
 @Component({
 	selector: "app-post-details",
@@ -40,6 +41,7 @@ import { AvatarGroupModule } from 'primeng/avatargroup';
 		SearchDialogComponent,
 		AvatarGroupModule,
 		AvatarModule,
+		RemoveSpecialCharsPipe 
 	],
 	templateUrl: "./post-details.component.html",
 	styleUrl: "./post-details.component.scss",

angular-primeng-app/src/app/pipes/special-characters-remover.pipe.spec.ts

@@ -0,0 +1,9 @@
+import { RemoveSpecialCharsPipe  } from "./special-characters-remover.pipe"
+
+describe("RemoveSpecialCharsPipe ",()=>{
+    const pipe = new RemoveSpecialCharsPipe ()
+
+    it('should transform and return a string with no curly brackets and no spaces',()=>{
+        expect(pipe.transform('{{name}} ')).toBe('name');
+    })
+})

angular-primeng-app/src/app/pipes/special-characters-remover.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'removeSpecialChars',
+    standalone: true
+})
+
+export class RemoveSpecialCharsPipe  implements PipeTransform{
+    transform(value: string) : string {
+        return value.replace(/[{()}]/g, "").trim();
+    }
+
+}