refactor(author-card): removed unused line-clamp lib, changed author …

…card component

libs/blog/articles/feature-article/src/lib/article-details/article-details.component.html

@@ -43,11 +43,7 @@ <h2 id="article-title" class="flex text-[40px] font-bold">
     </div>
   </section>
   <aside class="order-3 col-span-12 lg:col-span-4">
-    <al-author-card
-      [author]="articleDetails().author"
-      [clampText]="true"
-      [linkable]="true"
-    />
+    <al-author-card [author]="articleDetails().author" [linkable]="true" />
 
     @defer (on viewport(view); on timer(500ms)) {
       <div

libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.html

@@ -20,10 +20,12 @@
 
     <ng-container author-info-description>
       @defer {
-        <al-dynamic-text-clamp
-          [text]="author().description"
-          [textClasses]="descriptionClass()"
-        />
+        <a [routerLink]="['/', 'author', author().slug] | alLocalize">
+          <p
+            class="author-description line-clamp-5 text-justify text-sm"
+            [innerHTML]="sanitizedDescription().description"
+          ></p>
+        </a>
       } @placeholder {
         <div class="hidden">
           {{ author().description }}

libs/blog/authors/ui-author-card/src/lib/author-card/author-card.component.ts

@@ -3,14 +3,16 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  inject,
   input,
+  SecurityContext,
 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { RouterLink } from '@angular/router';
 
 import { UiAuthorCard } from '@angular-love/blog/authors/types';
 import { AlLocalizePipe } from '@angular-love/blog/i18n/util';
 import { AvatarComponent } from '@angular-love/blog/shared/ui-avatar';
-import { DynamicTextClampComponent } from '@angular-love/blog/shared/ui-dynamic-text-clamp';
 import {
   SocialMediaIconItemComponent,
   SocialMediaIconItemUi,
@@ -24,7 +26,6 @@ import { AuthorCardTemplateComponent } from './author-card-template.component';
   imports: [
     AuthorCardTemplateComponent,
     AvatarComponent,
-    DynamicTextClampComponent,
     RouterLink,
     NgTemplateOutlet,
     SocialMediaIconItemComponent,
@@ -39,16 +40,10 @@ import { AuthorCardTemplateComponent } from './author-card-template.component';
   },
 })
 export class AuthorCardComponent {
-  author = input.required<UiAuthorCard>();
+  readonly author = input.required<UiAuthorCard>();
+  readonly linkable = input<boolean>(false);
 
-  clampText = input<boolean>();
-  linkable = input<boolean>(false);
-
-  descriptionClass = computed(
-    () => 'text-sm' + (this.clampText() ? ' line-clamp-3' : ''),
-  );
-
-  socials = computed<SocialMediaIconItemUi[]>(() => {
+  protected readonly socials = computed<SocialMediaIconItemUi[]>(() => {
     const { github, twitter, linkedin } = this.author();
     return [
       {
@@ -72,4 +67,14 @@ export class AuthorCardComponent {
         social.usernameOrPageId !== null,
     );
   });
+
+  private readonly _domSanitizer = inject(DomSanitizer);
+
+  private sanitize(val: string): string {
+    return this._domSanitizer.sanitize(SecurityContext.HTML, val) || '';
+  }
+
+  readonly sanitizedDescription = computed<{ description: string }>(() => ({
+    description: this.sanitize(this.author().description),
+  }));
 }