fix(blog): marked search term on mobile (#300)

Author: majahendzel-va

libs/blog/articles/ui-article-card/src/lib/components/article-horizontal-card/article-horizontal-card.component.ts

@@ -43,14 +43,14 @@ export class ArticleHorizontalCardComponent {
 
   sanitizedArticle = computed<SanitizedArticleDataModel>(() => {
     return {
-      excerpt: this.sanitize(this.article().excerpt),
-      title: this.sanitize(this.article().title),
+      excerpt: this._sanitize(this.article().excerpt),
+      title: this._sanitize(this.article().title),
     };
   });
 
-  private readonly domSanitizer = inject(DomSanitizer);
+  private readonly _domSanitizer = inject(DomSanitizer);
 
-  private sanitize(val: string): string {
-    return this.domSanitizer.sanitize(SecurityContext.HTML, val) || '';
+  private _sanitize(val: string): string {
+    return this._domSanitizer.sanitize(SecurityContext.HTML, val) || '';
   }
 }

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.html

@@ -45,12 +45,15 @@
       </div>
 
       <div class="flex flex-col gap-3 px-4 pb-4 pt-3">
-        <h3 class="text-2xl font-bold" [id]="article().slug">
-          {{ article().title }}
-        </h3>
-        <p class="line-clamp-2">
-          {{ article().excerpt }}
-        </p>
+        <h3
+          class="*:text-al-pink text-2xl font-bold *:not-italic"
+          [id]="article().slug"
+          [innerHTML]="sanitizedArticle().title"
+        ></h3>
+        <p
+          class="*:text-al-pink line-clamp-2 *:font-medium *:not-italic"
+          [innerHTML]="sanitizedArticle().excerpt"
+        ></p>
       </div>
     </div>
   </article>

libs/blog/articles/ui-article-card/src/lib/components/article-regular-card/article-regular-card.component.ts

@@ -1,5 +1,12 @@
 import { DatePipe, NgOptimizedImage, NgStyle } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  SecurityContext,
+} from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { RouterLink } from '@angular/router';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
@@ -9,6 +16,11 @@ import { ArticleCard } from '@angular-love/blog/shared/types';
 import { AvatarComponent } from '@angular-love/blog/shared/ui-avatar';
 import { UiDifficultyComponent } from '@angular-love/blog/shared/ui-difficulty';
 
+type SanitizedArticleDataModel = {
+  title: string;
+  excerpt: string;
+};
+
 @Component({
   selector: 'al-article-regular-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -28,4 +40,17 @@ import { UiDifficultyComponent } from '@angular-love/blog/shared/ui-difficulty';
 export class ArticleRegularCardComponent {
   readonly article = input.required<ArticleCard>();
   readonly imagePriority = input<number | null>(null);
+
+  sanitizedArticle = computed<SanitizedArticleDataModel>(() => {
+    return {
+      excerpt: this._sanitize(this.article().excerpt),
+      title: this._sanitize(this.article().title),
+    };
+  });
+
+  private readonly _domSanitizer = inject(DomSanitizer);
+
+  private _sanitize(val: string): string {
+    return this._domSanitizer.sanitize(SecurityContext.HTML, val) || '';
+  }
 }