Merge branch 'dev' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "1.01a",
+  "version": "1.01b",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.component.html

@@ -2,20 +2,26 @@
 <p-confirmDialog></p-confirmDialog>
 <div class="app-container">
   <jm-header></jm-header>
-  <div *ngIf="!mnts.activeMaintenanceEvent" class="page-contents">
-    <router-outlet *ngIf="!loading; else appLoading"></router-outlet>
+  <div class="page-contents">
+    <ng-container *ngIf="!loading; else appLoading">
+      <router-outlet
+        *ngIf="!mnts.activeMaintenanceEvent && !inits.initializationError"
+      ></router-outlet>
+      <jm-page-not-found
+        *ngIf="inits.initializationError && !mnts.activeMaintenanceEvent"
+      ></jm-page-not-found>
+
+      <jm-maintenance-message
+        *ngIf="mnts.activeMaintenanceEvent"
+        [event]="mnts.activeMaintenanceEvent"
+      ></jm-maintenance-message>
+    </ng-container>
     <ng-template #appLoading>
       <jm-loading-spinner
         [showMessage]="false"
         [useDots]="false"
       ></jm-loading-spinner>
     </ng-template>
+    <jm-footer></jm-footer>
   </div>
-
-  <jm-maintenance-message
-    *ngIf="mnts.activeMaintenanceEvent"
-    [event]="mnts.activeMaintenanceEvent"
-  ></jm-maintenance-message>
-
-  <jm-footer></jm-footer>
 </div>

src/app/app.component.scss

@@ -10,9 +10,8 @@ $footer-height: 50px;
 .app-container {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-rows: $header-height auto;
 
   jm-header {
     width: 100%;
@@ -25,13 +24,29 @@ $footer-height: 50px;
   jm-footer {
     width: 100%;
     height: $footer-height;
+    position: relative;
+    bottom: 0;
+
+    z-index: 1;
   }
 
   .page-contents {
     width: 100%;
-    height: calc(100% - $header-height - $footer-height);
+  }
+
+  .page-contents {
+    //height: calc(100% - $header-height);
     overflow-y: auto;
     overflow-x: hidden;
-    //padding: 0 2rem
+    //padding-top: 1em;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    & > *:not(jm-footer) {
+      //height: calc(100% - $footer-height);
+      width: 100%;
+    }
   }
 }

src/app/app.component.ts

@@ -12,26 +12,18 @@ export class AppComponent implements OnInit {
   public loading = true;
 
   private async initializeApp() {
-    try {
-      await this._init.initialize();
-    } catch (err) {
-      console.error(err);
-      this._tsts.error({
-        summary: 'App initialization failed',
-        detail: 'Something went wrong while initializing the portfolio.',
-      });
-    } finally {
+    this.inits.initialize().finally(() => {
       this.loading = false;
-    }
+    });
   }
 
   ngOnInit(): void {
     this.initializeApp();
   }
 
   constructor(
-    private _init: InitializerService,
+    public inits: InitializerService,
     private _tsts: ToastService,
-    public mnts: MaintenanceService
+    public mnts: MaintenanceService,
   ) {}
 }

src/app/modules/shared/components/color-theme-toggler/color-theme-toggler.component.ts

@@ -7,7 +7,5 @@ import { ThemeService } from 'src/app/services/theme.service';
   styleUrls: ['./color-theme-toggler.component.scss'],
 })
 export class ColorThemeTogglerComponent {
-  constructor(public ths: ThemeService) {
-    //ths.activeTheme
-  }
+  constructor(public ths: ThemeService) {}
 }

src/app/modules/shared/components/footer/footer.component.scss

@@ -2,6 +2,7 @@
   height: 100%;
   width: 100%;
   display: block;
+  margin-top: 2em;
 }
 
 .footer-container {

src/app/modules/shared/components/header/header.component.scss

@@ -8,16 +8,21 @@
 }
 
 :host ::ng-deep .app-header {
+  height: 100%;
+  width: 100%;
+  display: block;
   .p-menubar {
+    width: 100%;
+    height: 100%;
     background-color: var(--surface-border);
     border-bottom: 0.05em solid var(--surface-400);
     border-radius: 0;
     .p-menuitem-link-active {
       background-color: var(--highlighted-nav-item-background);
-      span.p-menuitem-text, span.p-menuitem-icon {
+      span.p-menuitem-text,
+      span.p-menuitem-icon {
         color: var(--highlighted-nav-item-text);
       }
     }
   }
 }
-

src/app/modules/shared/components/header/header.component.ts

@@ -1,15 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ViewControllerService } from 'src/app/services/view-controller.service';
 
 @Component({
   selector: 'jm-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
   public get items() {
     return ViewControllerService.menuItems;
   }
 
+  ngOnInit(): void {
+    ViewControllerService.updateItems();
+  }
+
   constructor(public vcs: ViewControllerService) {}
 }

src/app/modules/shared/components/maintenance-message/maintenance-message.component.spec.ts

@@ -8,7 +8,7 @@ describe('MaintenanceMessageComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [MaintenanceMessageComponent]
+      declarations: [MaintenanceMessageComponent],
     });
     fixture = TestBed.createComponent(MaintenanceMessageComponent);
     component = fixture.componentInstance;

src/app/modules/shared/components/matomo-opt-out/matomo-opt-out.component.ts

@@ -5,8 +5,8 @@ import { ToastService } from 'src/app/services/toast.service';
 type TOnOff = 'on' | 'off';
 
 interface IOptOutState {
-  label: string
-  value: TOnOff
+  label: string;
+  value: TOnOff;
 }
 
 @Component({
@@ -29,7 +29,6 @@ export class MatomoOptOutComponent implements OnInit {
 
   public stateOptions: IOptOutState[] = [this._on, this._off];
 
-
   handleChange(state: TOnOff) {
     if (state === 'off') {
       this.tracker.optUserOut();
@@ -45,16 +44,15 @@ export class MatomoOptOutComponent implements OnInit {
       this.loading = true;
       this.optedOut = await this.tracker.isUserOptedOut();
       this.selected = this.optedOut ? this._off : this._on;
-
     } catch (err: any) {
       console.error(err);
-      this._tsts.error({ detail:err.message });
+      this._tsts.error({ detail: err.message });
     } finally {
       this.loading = false;
     }
   }
 
-  public get optStateMessage() : string {
+  public get optStateMessage(): string {
     if (this.optedOut) {
       return 'You are currently opted out of usage metrics tracking. I will not receive or store any of your usage data.';
     }
@@ -65,5 +63,8 @@ export class MatomoOptOutComponent implements OnInit {
     this.refreshState();
   }
 
-  constructor(private readonly tracker: MatomoTracker, private _tsts: ToastService) {}
+  constructor(
+    private readonly tracker: MatomoTracker,
+    private _tsts: ToastService,
+  ) {}
 }

src/app/modules/shared/page-not-found/page-not-found.component.html

@@ -1,16 +1,26 @@
 <div class="pnf-wrapper">
   <div class="pnf-container">
-    <span class="pnf-404">Page not found</span>
+    <span class="pnf-404"
+      >{{ !inits.initializationError ? "Page not found" : "Error" }}
+    </span>
     <div class="pnf-image-container">
       <img
         class="pnf-image"
-        src="../../../../assets/images/page-not-found.jpg"
-        alt="I'm giving her all she's got, Captain, but that page can't be found!"
+        [src]="
+          inits.initializationError
+            ? err.image.file.address
+            : pnf.image.file.address
+        "
+        [alt]="
+          inits.initializationError ? err.image.alt_text : pnf.image.alt_text
+        "
       />
     </div>
-    <span class="pnf-message"
-      >We're sorry, but we couldn't locate that page.</span
-    >
+    <span class="pnf-message">{{
+      !inits.initializationError
+        ? "I'm sorry, but I couldn't locate that page."
+        : "An error has occurred: " + inits.initializationError.message
+    }}</span>
     <div class="pnf-actions">
       <button
         pButton
@@ -21,13 +31,23 @@
         pTooltip="Go back to where you came from. It's (probably) safe there!"
       ></button>
       <button
+        *ngIf="!inits.initializationError"
         pButton
         class="pnf-gohome p-button p-button-raised p-button-primary"
         label="Home"
         icon="pi pi-home"
         (click)="exss.goHome()"
         pTooltip="Go to the homepage."
       ></button>
+      <button
+        *ngIf="inits.initializationError"
+        pButton
+        class="pnf-refresh p-button p-button-raised p-button-primary"
+        label="Refresh"
+        icon="pi pi-refresh"
+        (click)="vcs.refresh()"
+        pTooltip="Refresh the page"
+      ></button>
     </div>
   </div>
 </div>

src/app/modules/shared/page-not-found/page-not-found.component.scss

@@ -1,10 +1,4 @@
-:host {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-@media screen and (max-width:768px) {
+@media screen and (max-width: 768px) {
   .pnf-image-container {
     img {
       max-width: 90vw !important;
@@ -19,10 +13,6 @@
 }
 
 .pnf-wrapper {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-
   .pnf-container {
     height: 100%;
     display: flex;
@@ -60,5 +50,4 @@
       gap: 1em;
     }
   }
-
 }

src/app/modules/shared/page-not-found/page-not-found.component.ts

@@ -1,12 +1,46 @@
 import { Location } from '@angular/common';
 import { Component } from '@angular/core';
+import { IImage } from 'src/app/interfaces/Image';
 import { ExternalSitesService } from 'src/app/services/external-sites.service';
+import { InitializerService } from 'src/app/services/initializer.service';
+import { ViewControllerService } from 'src/app/services/view-controller.service';
+
+interface PNFErrOpts {
+  image: IImage;
+  headerMessage: string;
+}
 
 @Component({
   selector: 'jm-page-not-found',
   templateUrl: './page-not-found.component.html',
   styleUrls: ['./page-not-found.component.scss'],
 })
 export class PageNotFoundComponent {
-  constructor(public loc: Location, public exss: ExternalSitesService) {}
+  public pnf: PNFErrOpts = {
+    headerMessage: 'Page not found',
+    image: {
+      file: {
+        address: '../../../../assets/images/page-not-found.jpg',
+      },
+      alt_text:
+        "I'm giving her all she's got, Captain, but that page can't be found!",
+    },
+  };
+
+  public err: PNFErrOpts = {
+    headerMessage: 'Page not found',
+    image: {
+      file: {
+        address: '../../../../assets/images/error.png',
+      },
+      alt_text: 'This is fine!!',
+    },
+  };
+
+  constructor(
+    public loc: Location,
+    public exss: ExternalSitesService,
+    public inits: InitializerService,
+    public vcs: ViewControllerService,
+  ) {}
 }

src/app/modules/shared/shared.module.ts

@@ -57,6 +57,7 @@ import { MaintenanceMessageComponent } from './components/maintenance-message/ma
     LoadingSpinnerComponent,
     ColorThemeTogglerComponent,
     AttributionComponent,
+    PageNotFoundComponent,
     HeaderComponent,
     MaintenanceMessageComponent,
     FooterComponent,