Improvements to Preview Mode

server.ts

@@ -4,13 +4,25 @@ import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';
 import bootstrap from './src/main.server';
+import dotenv from 'dotenv';
+import { HttpHeaders } from '@angular/common/http';
+import { catchError, throwError } from 'rxjs';
+dotenv.config();
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
   const serverDistFolder = dirname(fileURLToPath(import.meta.url));
   const browserDistFolder = resolve(serverDistFolder, '../browser');
   const indexHtml = join(serverDistFolder, 'index.server.html');
+  const isPreviewMode = false;
+
+  const guid = process.env['AGILITY_GUID'];
+  const locale = process.env['AGILITY_LOCALE'];
+  const channelName = process.env['AGILITY_SITEMAP'];
+
+  let apitype = 'fetch';
+  let token = process.env['AGILITY_API_FETCH_KEY'];
 
   const commonEngine = new CommonEngine();
 

src/app/agility/agility.service.ts

@@ -12,17 +12,18 @@ import { isPlatformBrowser } from '@angular/common';
 export class AgilityService {
     private serverUrl = 'https://api.aglty.io';
 
-    private guid = environment.AGILITY_GUID;
-    public apitype: 'preview' | 'fetch' = 'fetch'; // Ensure this starts in fetch mode
-    public isPreviewMode = false;
-
+    private guid: string = environment.AGILITY_GUID;
+    private apitype: 'preview' | 'fetch' = 'fetch'; // Ensure this starts in fetch mode
     private locale = environment.AGILITY_LOCALE;
     private channelName = environment.AGILITY_SITEMAP;
-
-    public previewModeChange = new Subject<void>();
     private previewCookieName = 'agilitypreviewkey';
     private platformId: Object;
-    private token:string;
+
+    public previewModeChange = new Subject<void>();
+
+    public isPreviewMode = false;
+
+
 
     constructor(
         private cookieService: CookieService,
@@ -31,7 +32,6 @@ export class AgilityService {
     ) {
         this.platformId = platformId;
         this.apitype = this.isPreviewMode ? 'preview' : 'fetch';
-        this.token = this.isPreviewMode ? environment.AGILITY_API_PREVIEW_KEY : environment.AGILITY_API_FETCH_KEY;
     }
 
 
@@ -104,35 +104,21 @@ export class AgilityService {
         );
     }
 
+
     enterPreviewMode(token?: string): void {
-
-        console.log('enterPreviewMode', token);
-        this.cookieService.set(this.previewCookieName, token || 'true', { path: '/', expires: 1 });
+        this.cookieService.set(this.previewCookieName, token || 'true');
         this.apitype = 'preview';
         this.isPreviewMode = true;
-        this.token = environment.AGILITY_API_PREVIEW_KEY;
         this.previewModeChange.next();
     }
 
     exitPreviewMode(): void {
-        if (isPlatformBrowser(this.platformId) && this.cookieService) {
-            this.cookieService.delete(this.previewCookieName, '/');
-        }
+        this.cookieService.delete(this.previewCookieName);
         this.apitype = 'fetch'
         this.isPreviewMode = false;
-        this.token = environment.AGILITY_API_FETCH_KEY;
         this.previewModeChange.next();
     }
 
-    getPreviewModeCookie(): string | null {
-        if (isPlatformBrowser(this.platformId) && this.cookieService) {
-            return this.cookieService.get(this.previewCookieName) || null;
-        }
-        return null;
-    }
-
-
-
 
 }
 

src/app/agility/pages/components/featured-post/featured-post.component.html

@@ -2,28 +2,17 @@
   <div class="flex flex-col sm:flex-row max-w-screen-xl mx-auto pt-8 group">
     <div class="sm:w-1/2 lg:w-2/3 sm:rounded-t-none sm:rounded-l-lg relative">
 
-
-      <a *ngIf="isDevMode" [routerLink]="['/blog', item.featuredPost.fields?.slug]" class="cursor-pointer">
-        <div class="h-64 sm:h-96 relative">
-          <img
-            [src]="item.featuredPost.fields?.image?.url"
-            class="object-cover object-center rounded-t-lg sm:rounded-l-lg sm:rounded-t-none h-full"
-            style="height: 100%; width: 100%"
-          />
-        </div>
-      </a>
-      <a *ngIf="!isDevMode" [href]="'/blog/' + item.featuredPost.fields?.slug" class="cursor-pointer">
+
+      <a (click)="navigate($event, '/blog/' + item.featuredPost.fields?.slug)" class="cursor-pointer">
         <div class="h-64 sm:h-96 relative">
-          <img
-            [src]="item.featuredPost.fields?.image?.url"
+          <img [src]="item.featuredPost.fields?.image?.url"
             class="object-cover object-center rounded-t-lg sm:rounded-l-lg sm:rounded-t-none h-full"
-            style="height: 100%; width: 100%"
-          />
+            style="height: 100%; width: 100%" />
         </div>
       </a>
+
     </div>
-    <div
-      class="
+    <div class="
         sm:w-1/2
         lg:w-1/3
         bg-gray-100
@@ -33,38 +22,24 @@
         sm:rounded-bl-none sm:rounded-r-lg
         sm:border-t-2 sm:border-l-0
         relative
-      "
-    >
-      <a *ngIf="isDevMode" [routerLink]="['/blog', item.featuredPost.fields?.slug]" class="cursor-pointer">
-        <div class="font-display uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose">
-          {{ category }}
-        </div>
-        <div class="border-b-2 border-primary-500 w-8"></div>
-        <div class="mt-4 uppercase text-gray-600 italic font-semibold text-xs">
-          {{ date }}
-        </div>
-        <h2 class="font-display text-secondary-500 mt-1 font-black text-2xl group-hover:text-primary-500 transition duration-300">
-          {{ item.featuredPost.fields?.title }}
-        </h2>
-        <div class="text-sm mt-3 leading-loose text-gray-600 font-medium">
-          {{ excerpt }}
-        </div>
-      </a>
-      <a *ngIf="!isDevMode" [href]="'/blog/' + item.featuredPost.fields?.slug" class="cursor-pointer">
+      ">
+      <a (click)="navigate($event, '/blog/' + item.featuredPost.fields?.slug)" class="cursor-pointer">
         <div class="font-display uppercase text-primary-500 text-xs font-bold tracking-widest leading-loose">
           {{ category }}
         </div>
         <div class="border-b-2 border-primary-500 w-8"></div>
         <div class="mt-4 uppercase text-gray-600 italic font-semibold text-xs">
           {{ date }}
         </div>
-        <h2 class="font-display text-secondary-500 mt-1 font-black text-2xl group-hover:text-primary-500 transition duration-300">
+        <h2
+          class="font-display text-secondary-500 mt-1 font-black text-2xl group-hover:text-primary-500 transition duration-300">
           {{ item.featuredPost.fields?.title }}
         </h2>
         <div class="text-sm mt-3 leading-loose text-gray-600 font-medium">
           {{ excerpt }}
         </div>
       </a>
+
     </div>
   </div>
 </div>

src/app/agility/pages/components/featured-post/featured-post.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, TransferState, makeStateKey, isDevMode } from '@angular/core';
 import { AgilityService } from '../../../agility.service';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { NgIf } from '@angular/common';
 import { firstValueFrom } from 'rxjs';
 
@@ -25,10 +25,19 @@ export class ModuleFeaturedPost implements OnInit {
   public excerpt: any = null;
   public isDevMode: boolean = false;
 
-  constructor(private agilityService: AgilityService, private state: TransferState) {
+  constructor(private agilityService: AgilityService, private state: TransferState, private router: Router) {
     this.isDevMode = isDevMode();
    }
 
+  public navigate(e: Event, url: string) {
+    e.preventDefault();
+    if(this.isDevMode || this.agilityService.isPreviewMode) {
+    this.router.navigate([url]);
+    } else {
+      window.location.href = url;
+    }
+  }
+
   async ngOnInit(): Promise<void> {
     try {
       let categoriesRes = this.state.get(CATEGORIES_KEY, null as any);

src/app/agility/pages/components/text-block-with-image/textblockwithimage.component.html

@@ -12,15 +12,9 @@
     "
   >
     <div class="md:w-6/12 flex-shrink-0 relative">
-      <a *ngIf="isDevMode" [routerLink]="item.primaryButton.href">
-        <img
-          [src]="item.image.url"
-          [alt]="item.image.label"
-          class="rounded-lg object-cover object-center cursor-pointer"
-          style="width: 768px; height: 420px"
-        />
-      </a>
-      <a *ngIf="!isDevMode" [href]="item.primaryButton.href">
+      <a  
+      (click)="navigate($event, item.primaryButton.href)" class="cursor-pointer"
+      >
         <img
           [src]="item.image.url"
           [alt]="item.image.label"
@@ -79,7 +73,7 @@
         </p>
         <a
           *ngIf="item.primaryButton"
-          [routerLink]="item.primaryButton.href"
+          (click)="navigate($event, item.primaryButton.href)"
           [target]="item.primaryButton.target"
           class="
             inline-block

src/app/agility/pages/components/text-block-with-image/textblockwithimage.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit, isDevMode } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { NgIf } from '@angular/common';
+import { AgilityService } from '../../../agility.service';
 
 @Component({
   selector: 'app-module-textblockwithimage',
@@ -15,10 +16,20 @@ export class ModuleTextBlockWithImage implements OnInit {
   public item: any = null;
   public isDevMode: boolean = false;
 
-  constructor() {
+
+  constructor(private router: Router, private agilityService: AgilityService) {
     this.isDevMode = isDevMode();
   }
 
+  public navigate(e: Event, url: string) {
+    e.preventDefault();
+    if(this.isDevMode || this.agilityService.isPreviewMode) {
+    this.router.navigate([url]);
+    } else {
+      window.location.href = url;
+    }
+  }
+
   ngOnInit(): void {
     this.item = this.data.item.fields;
   }

src/app/agility/pages/pages.component.ts

@@ -103,15 +103,15 @@ export class PageComponent implements OnInit, OnDestroy {
         }
       }
 
-      this.titleService.setTitle(pageInSitemap.title);
-      this.pageStatus = 200;
-
       this.page = this.transferState.get(pageKey, null);
       this.transferState.remove(pageKey);
       if (!this.page) {
         this.page = await firstValueFrom(this.agilityService.getPage(pageInSitemap.pageID));
       }
 
+      this.titleService.setTitle(pageInSitemap.title);
+      this.pageStatus = 200;
+
 
       if (this.isServer) {
         this.transferState.set(sitemapKey, sitemap);

src/app/components/site-header/site-header.component.html

@@ -28,44 +28,30 @@
               transition
               duration-150
               ease-in-out
+              cursor-pointer
             ">
           <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
           </svg>
         </button>
       </div>
       <nav class="hidden md:flex space-x-10" *ngFor="let link of links">
-        <!-- Render with href if isDevServer is false -->
-        <a *ngIf="!isDevMode" [href]="link.url" class="
-              text-base
-              leading-6
-              font-medium
-              text-secondary-500
-              hover:text-primary-500
-              border-transparent border-b-2
-              hover:border-primary-500 hover:border-b-primary hover:border-b-2
-              focus:outline-none focus:text-primary-500
-              transition
-              duration-300
-          ">
-          {{ link.title }}
-        </a>
-
-        <!-- Render with routerLink if isDevServer is true -->
-        <a *ngIf="isDevMode" [routerLink]="link.url" class="
-              text-base
-              leading-6
-              font-medium
-              text-secondary-500
-              hover:text-primary-500
-              border-transparent border-b-2
-              hover:border-primary-500 hover:border-b-primary hover:border-b-2
-              focus:outline-none focus:text-primary-500
-              transition
-              duration-300
-          ">
-          {{ link.title }}
-        </a>
+
+      <a (click)="navigate($event, link.url)" class="
+        text-base
+        leading-6
+        font-medium
+        text-secondary-500
+        hover:text-primary-500
+        border-transparent border-b-2
+        hover:border-primary-500 hover:border-b-primary hover:border-b-2
+        focus:outline-none focus:text-primary-500
+        transition
+        duration-300
+        cursor-pointer
+        ">
+        {{ link.title }}
+      </a>
       </nav>
     </div>
   </div>

src/app/components/site-header/site-header.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, TransferState, makeStateKey } from '@angular/core';
 import { isDevMode } from '@angular/core';
 import { AgilityService } from '../../agility/agility.service';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { firstValueFrom } from 'rxjs';
-import { NgIf, NgFor } from '@angular/common';
+import { NgIf, NgFor, isPlatformBrowser } from '@angular/common';
 
 const SITEMAP_KEY = makeStateKey<any>('sitemap');
 const HEADER_KEY = makeStateKey<any>('header');
@@ -18,15 +18,16 @@ const HEADER_KEY = makeStateKey<any>('header');
 export class SiteHeaderComponent implements OnInit {
   public siteHeader: any = null; // Initialize to null
   public links: any[] = [];
-  public isPreview: boolean;
+  public isPreviewMode: boolean;
   public isDevMode: boolean = false;
   public showMobileMenu: boolean = false;
 
   constructor(
     private agilityService: AgilityService,
-    private transferState: TransferState
+    private transferState: TransferState,
+    private router: Router
   ) {
-    this.isPreview = this.agilityService.isPreviewMode;
+    this.isPreviewMode = this.agilityService.isPreviewMode;
     this.isDevMode = isDevMode();
   }
 
@@ -38,9 +39,16 @@ export class SiteHeaderComponent implements OnInit {
     this.showMobileMenu = false;
   }
 
+  public navigate(e: Event, url: string) {
+    e.preventDefault();
+    if(this.isDevMode || this.agilityService.isPreviewMode) {
+    this.router.navigate([url]);
+    } else {
+      window.location.href = url;
+    }
+  }
+
   async ngOnInit(): Promise<void> {
-    console.log('isPreviewMode', this.isPreview)
-    console.log('agilityService', this.agilityService.isPreviewMode)
     try {
       let sitemap = this.transferState.get(SITEMAP_KEY, null);
       let obj = this.transferState.get(HEADER_KEY, null);