fix: Update Angular Analog, ignore mermaid in server

package.json

@@ -1,6 +1,6 @@
 {
   "name": "domain-locker",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "engines": {
     "node": ">=22.13.0"
@@ -15,18 +15,18 @@
     "build": "ng build",
     "build:vercel": "NITRO_PRESET=vercel ng build --configuration production",
     "build:deno": "NITRO_PRESET=deno ng build --configuration production",
-    "build:netlify": "NITRO_PRESET=netlify NODE_OPTIONS=--max-old-space-size=8096  ng build --configuration production",
+    "build:netlify": "NITRO_PRESET=netlify NODE_OPTIONS=--max-old-space-size=4096  ng build --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@analogjs/content": "^1.14.1-beta.5",
-    "@analogjs/platform": "^1.14.1-beta.5",
-    "@analogjs/router": "^1.14.1-beta.5",
-    "@analogjs/vite-plugin-angular": "^1.14.1-beta.5",
-    "@analogjs/vitest-angular": "^1.14.1-beta.5",
+    "@analogjs/content": "^1.14.1-beta.6",
+    "@analogjs/platform": "^1.14.1-beta.6",
+    "@analogjs/router": "^1.14.1-beta.6",
+    "@analogjs/vite-plugin-angular": "^1.14.1-beta.6",
+    "@analogjs/vitest-angular": "^1.14.1-beta.6",
     "@angular/animations": "^19.2.2",
     "@angular/cdk": "^18.2.9",
     "@angular/common": "^19.2.2",

src/app/app.config.ts

@@ -1,6 +1,6 @@
 import {
   ApplicationConfig, importProvidersFrom,
-  APP_INITIALIZER, PLATFORM_ID, 
+  APP_INITIALIZER, PLATFORM_ID,
   APP_ID} from '@angular/core';
 // Importing providers
 import { HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
@@ -34,7 +34,7 @@ import { EnvLoaderService } from './utils/env.loader';
 export const appConfig: ApplicationConfig = {
   providers: [
     { provide: APP_ID, useValue: 'domain-locker' },
-    
+
     // Transfer relevant env vars on self-hosted version
     {
       provide: APP_INITIALIZER,
@@ -46,12 +46,12 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withFetch()),
     provideClientHydration(),
     provideContent(
-      withMarkdownRenderer({ loadMermaid: () => import('mermaid') }),
+      withMarkdownRenderer(),
       withShikiHighlighter(),
     ),
     provideAnimations(),
     provideFileRouter(
-      withInMemoryScrolling({ anchorScrolling: 'enabled' }),
+      withInMemoryScrolling({scrollPositionRestoration: 'enabled'}),
       withEnabledBlockingInitialNavigation(),
     ),
     // HTTP Interceptors
@@ -60,7 +60,7 @@ export const appConfig: ApplicationConfig = {
       withInterceptorsFromDi()
     ),
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
-    
+
     // PrimeNG Services
     ConfirmationService,
     MessageService,

src/app/components/about-things/doc-viewer.component.ts

@@ -1,10 +1,12 @@
-import { Component, Input, HostListener, ViewEncapsulation } from '@angular/core';
+import { Component, Input, HostListener, ViewEncapsulation, PLATFORM_ID, Inject } from '@angular/core';
 import { ContentFile } from '@analogjs/content';
-import { Observable } from 'rxjs';
+import { filter, Observable, Subscription } from 'rxjs';
 import { MarkdownComponent } from '@analogjs/content';
 import { PrimeNgModule } from '~/app/prime-ng.module';
 import { MetaTagsService } from '~/app/services/meta-tags.service';
-import { CommonModule, NgIf } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgIf } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { ErrorHandlerService } from '~/app/services/error-handler.service';
 
 export interface DocAttributes {
   title: string;
@@ -88,48 +90,160 @@ export class DocsViewerComponent {
 
   doc: ContentFile<DocAttributes | Record<string, never>> | null = null;
 
-  navTop = 'unset'; // default top offset
+  navTop = 'unset';
+  private docSub?: Subscription;
+  private routerSub?: Subscription;
+  private docLoaded = false;
+  private hasRenderedMermaid = false;
 
-  constructor(private metaTagsService: MetaTagsService) {}
+  constructor(
+    private router: Router,
+    private errorHandler: ErrorHandlerService,
+    private metaTagsService: MetaTagsService,
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
 
   ngOnInit() {
-    this.doc$.subscribe(doc => {
-      // Set current doc when it resolves
-      this.doc = doc;
-      // If doc has attributes, then get them for meta and JSON-LD content
-      if (doc?.attributes) {
-        const { title, description, coverImage, author, publishedDate, modifiedDate, slug } = doc.attributes;
-
-        // Set meta tags
-        this.metaTagsService.setCustomMeta(title, description, undefined, coverImage || this.getFallbackImage(title));
-
-        // Set JSON-LD structured data
-        this.metaTagsService.addStructuredData('article', {
-          title: title,
-          description: description,
-          coverImage: coverImage || this.getFallbackImage(title),
-          author: author || 'Domain Locker Team',
-          publishedDate: publishedDate || new Date().toISOString(),
-          modifiedDate: modifiedDate || publishedDate || new Date().toISOString(),
-          slug: slug,
-          category: this.categoryName,
-        });
+    this.docSub = this.doc$.subscribe({
+      next: (doc) => {
+        // Set current doc when it resolves
+        this.doc = doc;
+        // If doc has attributes, then get them for meta and JSON-LD content
+        if (doc?.attributes) {
+          const { title, description, coverImage, author, publishedDate, modifiedDate, slug } = doc.attributes;
+
+          // Set meta tags
+          this.metaTagsService.setCustomMeta(title, description, undefined, coverImage || this.getFallbackImage(title));
+
+          // Set JSON-LD structured data
+          this.metaTagsService.addStructuredData('article', {
+            title: title,
+            description: description,
+            coverImage: coverImage || this.getFallbackImage(title),
+            author: author || 'Domain Locker Team',
+            publishedDate: publishedDate || new Date().toISOString(),
+            modifiedDate: modifiedDate || publishedDate || new Date().toISOString(),
+            slug: slug,
+            category: this.categoryName,
+          });
+        }
+        if (isPlatformBrowser(this.platformId)) {
+          setTimeout(() => {
+            this.loadAndRenderMermaid();
+          }, 50);
+        }
+        this.docLoaded = true;
+      },
+      error: (err) => {
+        this.errorHandler.handleError({ error: err, message: 'Doc subscription error', location: 'doc-viewer' });
       }
     });
+
+    this.routerSub = this.router.events
+      .pipe(filter((e) => e instanceof NavigationEnd))
+      .subscribe({
+        next: () => {
+          if (isPlatformBrowser(this.platformId)) {
+            setTimeout(() => this.loadAndRenderMermaid(), 50);
+          }
+        },
+        error: (err) => {
+          this.errorHandler.handleError({ error: err, message: 'Router events error', location: 'doc-viewer' });
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (this.docSub) {
+      try {
+        this.docSub.unsubscribe();
+      } catch (err) {
+        this.errorHandler.handleError({ error: err, message: 'Doc subscription cleanup error', location: 'doc-viewer' });
+      }
+    }
+    if (this.routerSub) {
+      try {
+        this.routerSub.unsubscribe();
+      } catch (err) {
+        this.errorHandler.handleError({ error: err, message: 'Router subscription cleanup error', location: 'doc-viewer' });
+      }
+    }
+  }
+
+  ngAfterViewChecked(): void {
+    // If running client-side, and doc is loaded but no mermaid rendered yet, then init
+    if (!isPlatformBrowser(this.platformId)) return;
+    if (this.docLoaded && !this.hasRenderedMermaid) {
+      this.loadAndRenderMermaid();
+      this.hasRenderedMermaid = true;
+    }
   }
 
   /** Called on window scroll. If user scrolled > 7rem => fix nav top at 7rem. Otherwise 0. */
   @HostListener('window:scroll')
   onWindowScroll() {
-    const scrollY = window.scrollY;
-    const sevenRemInPx = 112; // approx 7rem if root font-size = 16px
-    this.navTop = scrollY > sevenRemInPx ? '1rem' : '9rem';
+    try {
+      const scrollY = window.scrollY;
+      const sevenRemInPx = 112; // approx 7rem if root font-size = 16px
+      this.navTop = scrollY > sevenRemInPx ? '1rem' : '9rem';
+    } catch (err) {
+      this.errorHandler.handleError({ error: err, message: 'Scroll handler error', location: 'doc-viewer' });
+    }
   }
 
   getFallbackImage(title: string) {
-    const encodedTitle = encodeURIComponent(title);
-    return `https://dynamic-og-image-generator.vercel.app/api/generate?title=${encodedTitle}`
-    + ' &author=Domain+Locker&websiteUrl=domain-locker.com&avatar=https%3A%2F%2Fdomain-locker'
-    + '.com%2Ficons%2Fandroid-chrome-maskable-192x192.png&theme=dracula';
+    try {
+      const encodedTitle = encodeURIComponent(title);
+      return `https://dynamic-og-image-generator.vercel.app/api/generate?title=${encodedTitle}`
+        + ' &author=Domain+Locker&websiteUrl=domain-locker.com&avatar=https%3A%2F%2Fdomain-locker'
+        + '.com%2Ficons%2Fandroid-chrome-maskable-192x192.png&theme=dracula';
+    } catch (err) {
+      this.errorHandler.handleError({ error: err, message: 'Fallback image error', location: 'doc-viewer' });
+      return 'https://domain-locker.com/og.png';
+    }
+  }
+
+  /**
+   * 1) Checks for any <pre class="mermaid"> blocks
+   * 2) If found, dynamically load mermaid from a CDN
+   * 3) Then call mermaid.initialize + mermaid.run
+   */
+  private loadAndRenderMermaid() {
+    try {
+      const mermaidBlocks = document.querySelectorAll('pre.mermaid');
+      if (!mermaidBlocks?.length) {
+        return;
+      }
+      const existingScript = document.getElementById('mermaidScript') as HTMLScriptElement | null;
+      if (existingScript) {
+        this.runMermaid();
+      } else {
+        const script = document.createElement('script');
+        script.id = 'mermaidScript';
+        script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+        script.async = true;
+        script.onload = () => {
+          this.runMermaid();
+        };
+        document.head.appendChild(script);
+      }
+    } catch (err) {
+      this.errorHandler.handleError({ error: err, message: 'loadAndRenderMermaid error', location: 'doc-viewer' });
+    }
+  }
+
+  private runMermaid() {
+    try {
+      const mermaid = (window as any).mermaid;
+      if (!mermaid) return;
+      try {
+        mermaid.initialize({ startOnLoad: false });
+        mermaid.run({ querySelector: 'pre.mermaid' });
+      } catch (err) {
+        this.errorHandler.handleError({ error: err, message: 'Mermaid render failed', location: 'doc-viewer' });
+      }
+    } catch (err) {
+      this.errorHandler.handleError({ error: err, message: 'runMermaid error', location: 'doc-viewer' });
+    }
   }
 }

src/app/components/domain-things/domain-collection/domain-collection.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import Fuse from 'fuse.js';
 import { DomainCardComponent } from '~/app/components/domain-things/domain-card/domain-card.component';
@@ -59,6 +59,10 @@ export class DomainCollectionComponent implements OnInit {
 
   visibleColumns: any[] = [];
 
+  constructor(
+    private cdr: ChangeDetectorRef,
+  ) {}
+
   ngOnInit() {
     this.filteredDomains = this.domains;
     this.sortDomains();
@@ -136,7 +140,8 @@ export class DomainCollectionComponent implements OnInit {
   reloadDomains(event: any) {
     setTimeout(() => {
       this.$triggerReload.emit(event);
-    }, 1500);
+      this.cdr.detectChanges();
+    }, 1000);
   }
 
   initializeFuse() {

src/app/components/domain-things/domain-filters/domain-filters.component.html

@@ -14,13 +14,13 @@
       <p-multiSelect
         id="field-filters"
         [options]="fieldOptions"
-        [(ngModel)]="selectedFields"
+        [(ngModel)]="selectedFieldsList"
         (onChange)="onSelectionChange()"
         optionLabel="label"
         selectedItemsLabel="{0} fields shown"
         [style]="{minWidth: '200px'}"
         placeholder="Choose visible fields"
-      ></p-multiSelect>
+      />
     </div>
     <!-- Sort Select Dropdown -->
     <div class="flex flex-col gap-1" *ngIf="selectedLayout">

src/app/components/domain-things/domain-filters/domain-filters.component.ts

@@ -50,6 +50,7 @@ export class FieldVisibilityFilterComponent implements OnInit {
   @Output() $triggerReload = new EventEmitter();
 
   selectedFields: FieldOption[] = [];
+  selectedFieldsList: string[] = [];
   sortOrder: FieldOption = this.sortOptions[0];
   selectedLayout: boolean = true;
   quickAddDialogOpen: boolean = false;
@@ -95,13 +96,17 @@ export class FieldVisibilityFilterComponent implements OnInit {
     this.selectedFields = this.fieldOptions.filter(option => 
       this.defaultSelectedFields.includes(option.value)
     );
+    this.selectedFieldsList = this.selectedFields.map(field => field.value);
     this.onSelectionChange();
   }
 
   onSelectionChange() {
     if (this.selectedFields.length === 0) {
       this.initializeSelectedFields();
     }
+    this.selectedFields = this.fieldOptions.filter(option => 
+      this.selectedFieldsList.includes(option.value)
+    );
     this.visibilityChange.emit(this.selectedFields);
   }
 

src/app/services/db-query-services/sb/db-history.service.ts

@@ -63,12 +63,12 @@ export class HistoryQueries {
       .from('domain_updates')
       .select('id', { count: 'exact' });
 
-    // if (domainName) {
-    //   query = this.supabase
-    //     .from('domain_updates')
-    //     .select('id, domains!inner(domain_name)', { count: 'exact' })
-    //     .eq('domains.domain_name', domainName);
-    // }
+      if (domainName) {
+        query = this.supabase
+          .from<any, any>('domain_updates')
+          .select('id, domains!inner(domain_name)', { count: 'exact' })
+          .eq('domains.domain_name', domainName);
+      }
 
     return from(query.then(({ count, error }: { count: number | null; error: any }) => {
       if (error) throw error;

src/app/services/error-handler.service.ts

@@ -141,9 +141,7 @@ export class ErrorHandlerService {
     if (!error && !message) return; // Not much I can do without an error or message!
 
     // Log to console in development mode
-    if (isDevMode()) {
-      this.printToConsole(message, location, error);
-    }
+    this.printToConsole(message, location, error);
 
     // Show error toast if showError is true
     if (showToast && message && error) {