Refactor SEO meta tag logic and improve contact form UX (#18)

Author: kappil-garg

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "personal-website-ui",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "type": "module",
   "scripts": {
     "ng": "ng",

package.json

@@ -106,7 +106,6 @@ export class BlogDetailComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();
-    this.seoService.setDefaultMetaTags();
   }
 
   private incrementViewCount(blogId: string): void {

src/app/pages/blog-detail/blog-detail.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, computed, inject, ChangeDetectionStrategy, ChangeDet
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { timer } from 'rxjs';
 import { PortfolioService } from '../../services/portfolio.service';
 import { ContactService } from '../../services/contact.service';
 import { SeoService } from '../../shared/services/seo.service';
@@ -64,8 +65,23 @@ export class ContactComponent implements OnInit {
       ).subscribe({
         next: (response) => {
           if (response.success) {
-            this.contactForm.reset();
-            this.cdr.markForCheck();
+            this.contactForm.reset({
+              name: '',
+              email: '',
+              subject: '',
+              message: ''
+            });
+            Object.keys(this.contactForm.controls).forEach(key => {
+              const control = this.contactForm.get(key);
+              control?.markAsUntouched();
+              control?.markAsPristine();
+            });
+            timer(3000).pipe(
+              takeUntilDestroyed(this.destroyRef)
+            ).subscribe(() => {
+              this.contactService.resetFormState();
+              this.cdr.markForCheck();
+            });
           } else {
             this.cdr.markForCheck();
           }

src/app/pages/contact/contact.component.ts

@@ -4,14 +4,15 @@ import { isPlatformServer } from '@angular/common';
 import { environment } from '../../../environments/environment';
 
 /**
- * Interceptor to add API key header for server-side requests (SSR).
- * Only adds the header for requests to the configured API endpoints.
+ * Interceptor to add API key header for SSR requests to admin endpoints only.
+ * Client-side requests don't need API keys as blog endpoints are public.
  */
 export const apiKeyInterceptor: HttpInterceptorFn = (req, next) => {
 
   const platformId = inject(PLATFORM_ID);
+  const isServer = isPlatformServer(platformId);
 
-  if (!isPlatformServer(platformId)) {
+  if (!isServer) {
     return next(req);
   }
 
@@ -31,10 +32,16 @@ export const apiKeyInterceptor: HttpInterceptorFn = (req, next) => {
     return next(req);
   }
 
-  const apiKey =
-    typeof process !== 'undefined'
-      ? process.env?.['API_SERVER_KEY']
-      : undefined;
+  // Only add API key for admin blog endpoints (non-GET requests to /blogs)
+  const isAdminBlogEndpoint = normalizedRequestUrl.includes('/blogs') && req.method !== 'GET';
+
+  if (!isAdminBlogEndpoint) {
+    return next(req);
+  }
+
+  const apiKey = typeof process !== 'undefined'
+    ? (process.env?.['API_SERVER_KEY'] || process.env?.['API_KEY'])
+    : undefined;
 
   if (apiKey) {
     req = req.clone({

src/app/shared/interceptors/api-key.interceptor.ts

@@ -66,7 +66,7 @@
 
 <!-- Mobile Navigation Menu -->
 @if (isMobileMenuOpen()) {
-  <div 
+  <div
     class="mobile-nav-menu-backdrop"
     tabindex="0"
     role="button"
@@ -75,8 +75,8 @@
     (keydown)="onBackdropKeyDown($event)"
   ></div>
 }
-<div 
-  class="mobile-nav-menu" 
+<div
+  class="mobile-nav-menu"
   [class.active]="isMobileMenuOpen()"
   (click)="$event.stopPropagation()"
 >