feat(not-found): add not found component

src/app/about/_about-theme.scss

@@ -2,14 +2,12 @@
 @use 'profile-picture/profile-picture-theme';
 @use 'contact-social-icons/contact-social-icons-theme';
 @use 'contact-traditional-icons/contact-traditional-icons-theme';
-@use 'description/description-theme';
 
 @mixin color($theme) {
   app-about {
     @include profile-picture-theme.color($theme);
     @include contact-traditional-icons-theme.color($theme);
     @include contact-social-icons-theme.color($theme);
-    @include description-theme.color($theme);
   }
 }
 

src/app/about/about.component.html

@@ -1,3 +1,4 @@
+<app-jsonld-metadata></app-jsonld-metadata>
 <section>
   <div class="profile">
     <app-profile-picture></app-profile-picture>

src/app/about/about.component.scss

@@ -2,11 +2,10 @@
 @use 'margins';
 @use 'paddings';
 @use 'breakpoints';
+@use 'page';
 
 :host {
-  position: absolute;
-  width: 100%;
-  min-height: 100%;
+  @include page.full-size;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/app/about/about.component.spec.ts

@@ -10,6 +10,7 @@ import { ContactSocialIconsComponent } from './contact-social-icons/contact-soci
 import { ContactTraditionalIconsComponent } from './contact-traditional-icons/contact-traditional-icons.component'
 import { DescriptionComponent } from './description/description.component'
 import { ProfilePictureComponent } from './profile-picture/profile-picture.component'
+import { JsonldMetadataComponent } from '../jsonld-metadata/jsonld-metadata.component'
 
 describe('AboutComponent', () => {
   let component: AboutComponent
@@ -25,6 +26,7 @@ describe('AboutComponent', () => {
       declarations: [
         AboutComponent,
         MockComponents(
+          JsonldMetadataComponent,
           ProfilePictureComponent,
           ContactTraditionalIconsComponent,
           ContactSocialIconsComponent,
@@ -59,6 +61,7 @@ describe('AboutComponent', () => {
 
   ensureHasComponents(
     () => fixture,
+    JsonldMetadataComponent,
     ProfilePictureComponent,
     ContactTraditionalIconsComponent,
     ContactSocialIconsComponent,

src/app/about/contact-traditional-icons/contact-traditional-icons.component.scss

@@ -27,4 +27,8 @@
       );
     }
   }
+
+  a {
+    text-decoration-line: none;
+  }
 }

src/app/about/description/description.component.scss

@@ -33,7 +33,6 @@
 
     // If we move it outside this selector, conflicts with root <a> styles
     ::ng-deep a {
-      text-decoration-line: underline;
       text-decoration-thickness: 1px;
     }
   }
@@ -63,7 +62,6 @@
 
   // Content-specific customizations
   ::ng-deep a.craft {
-    text-decoration-line: underline;
     text-decoration-color: currentColor;
   }
 

src/app/app-routing.module.ts

@@ -1,10 +1,23 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { AboutComponent } from './about/about.component'
+import { NotFoundComponent } from './not-found/not-found.component'
+import { IPageSeoData } from '@ngaox/seo'
+import { METADATA } from './metadata'
 
+const notFoundData: { NgaoxSeo: IPageSeoData } = {
+  NgaoxSeo: {
+    title: `${METADATA.siteName} | Not Found`,
+    description: 'Page could not be found',
+    keywords: undefined,
+    url: undefined,
+    image: undefined,
+  },
+}
 const routes: Routes = [
   { path: '', component: AboutComponent, pathMatch: 'full' },
-  { path: '**', redirectTo: '' },
+  { path: '404', component: NotFoundComponent, data: notFoundData },
+  { path: '**', component: NotFoundComponent, data: notFoundData },
 ]
 
 @NgModule({

src/app/app.component.html

@@ -1,4 +1,3 @@
-<app-jsonld-metadata></app-jsonld-metadata>
 <app-release-info></app-release-info>
 <app-header></app-header>
 <div class="after-header">

src/app/app.component.spec.ts

@@ -5,7 +5,6 @@ import { ensureHasComponents } from '../test/helpers/component-testers'
 import { AboutComponent } from './about/about.component'
 import { AppComponent } from './app.component'
 import { HeaderComponent } from './header/header.component'
-import { JsonldMetadataComponent } from './jsonld-metadata/jsonld-metadata.component'
 import { NoScriptComponent } from './no-script/no-script.component'
 import { ReleaseInfoComponent } from './release-info/release-info.component'
 import { By } from '@angular/platform-browser'
@@ -20,7 +19,6 @@ describe('AppComponent', () => {
       declarations: [
         AppComponent,
         MockComponents(
-          JsonldMetadataComponent,
           ReleaseInfoComponent,
           NoScriptComponent,
           HeaderComponent,
@@ -44,7 +42,6 @@ describe('AppComponent', () => {
 
   ensureHasComponents(
     () => fixture,
-    JsonldMetadataComponent,
     ReleaseInfoComponent,
     NoScriptComponent,
     HeaderComponent,

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { METADATA } from './metadata'
 import { NavigationTabsComponent } from './navigation-tabs/navigation-tabs.component'
 import { NoScriptComponent } from './no-script/no-script.component'
 import { ReleaseInfoComponent } from './release-info/release-info.component'
+import { NotFoundComponent } from './not-found/not-found.component'
 
 @NgModule({
   declarations: [
@@ -33,6 +34,7 @@ import { ReleaseInfoComponent } from './release-info/release-info.component'
     ContactTraditionalIconsComponent,
     ContactSocialIconsComponent,
     DescriptionComponent,
+    NotFoundComponent,
   ],
   imports: [
     BrowserModule,

src/app/material-symbols.ts

@@ -18,3 +18,4 @@ export const DeployedCode = '\uf720'
 export const Terminal = '\ueb8e'
 export const Login = '\uea77'
 export const Security = '\ue32a'
+export const Lightbulb = '\ue0f0'

src/app/not-found/_not-found-theme.scss

@@ -0,0 +1,9 @@
+@use 'borders';
+
+@mixin color($theme) {
+  app-not-found {
+    .tip {
+      border-color: borders.panel-color($theme);
+    }
+  }
+}

src/app/not-found/not-found.component.html

@@ -0,0 +1,25 @@
+<p class="icon">🫠</p>
+<h1>
+  <a
+    href="https://www.rfc-editor.org/rfc/rfc1945#section-9.4:~:text=404%20Not%20Found"
+    >404 Not Found</a
+  >
+</h1>
+<h2>
+  <a href="https://www.youtube.com/watch?v=QCWGZT_oKwI&t=6">Oopsie doopsie!</a>
+  Seems this page doesn't exist now
+</h2>
+<div class="tip">
+  <header>
+    <span [class]="MATERIAL_SYMBOLS_CLASS">{{ MaterialSymbol.Lightbulb }}</span
+    ><b>TIP: What if this page existed before?</b>
+  </header>
+  <p>
+    You can use
+    <a href="https://web.archive.org/">Internet Archive's Wayback Machine</a> to
+    see if a page existed in the past. <br />Maybe
+    <a [href]="currentUrlInWaybackMachine"
+      >this page existed at some other point in time</a
+    >
+  </p>
+</div>

src/app/not-found/not-found.component.scss

@@ -0,0 +1,44 @@
+@use 'borders';
+@use 'page';
+@use 'margins';
+@use 'material-symbols';
+@use 'paddings';
+
+:host {
+  @include page.full-size;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: margins.$m;
+  padding: paddings.$m;
+
+  .icon {
+    font-size: 96px;
+  }
+
+  h1,
+  h2,
+  .tip {
+    text-align: center;
+  }
+
+  .tip {
+    @include borders.panel-style-width;
+    padding: paddings.$m;
+    display: flex;
+    flex-direction: column;
+    gap: margins.$s;
+
+    header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: margins.$xs;
+
+      @include material-symbols.class {
+        font-size: 1em;
+      }
+    }
+  }
+}

src/app/not-found/not-found.component.spec.ts

@@ -0,0 +1,51 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import {
+  NotFoundComponent,
+  WAYBACK_MACHINE_URL_PREFIX,
+} from './not-found.component'
+import { Environment } from '../../environments'
+import { Router } from '@angular/router'
+import { MockProvider } from 'ng-mocks'
+import { ENVIRONMENT } from '../common/injection-tokens'
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent
+  let fixture: ComponentFixture<NotFoundComponent>
+  const fakeEnvUrlNoTrailingSlash: string = 'https://example.com'
+  const fakeEnv: Pick<Environment, 'canonicalUrl'> = {
+    canonicalUrl: new URL(fakeEnvUrlNoTrailingSlash),
+  }
+  const fakeRouter: Pick<Router, 'url'> = {
+    url: '/foo',
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NotFoundComponent],
+      providers: [
+        MockProvider(ENVIRONMENT, fakeEnv),
+        MockProvider(Router, fakeRouter),
+      ],
+    })
+    fixture = TestBed.createComponent(NotFoundComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  describe('#currentUrlInWaybackMachine', () => {
+    it('should be the Wayback Machine URL prefix plus the current URL', () => {
+      expect(component.currentUrlInWaybackMachine).toEqual(
+        new URL(
+          WAYBACK_MACHINE_URL_PREFIX.toString() +
+            fakeEnvUrlNoTrailingSlash +
+            fakeRouter.url,
+        ),
+      )
+    })
+  })
+})

src/app/not-found/not-found.component.ts

@@ -0,0 +1,30 @@
+import { Component, Inject } from '@angular/core'
+import { Lightbulb } from '../material-symbols'
+import { MATERIAL_SYMBOLS_CLASS } from '../common/material-symbols'
+import { Router } from '@angular/router'
+import { Environment } from '../../environments'
+import { ENVIRONMENT } from '../common/injection-tokens'
+
+@Component({
+  selector: 'app-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.scss'],
+})
+export class NotFoundComponent {
+  public readonly currentUrlInWaybackMachine: URL
+  protected readonly MATERIAL_SYMBOLS_CLASS = MATERIAL_SYMBOLS_CLASS
+  protected readonly MaterialSymbol = {
+    Lightbulb,
+  }
+
+  constructor(@Inject(ENVIRONMENT) environment: Environment, router: Router) {
+    const currentUrl = new URL(router.url, environment.canonicalUrl)
+    this.currentUrlInWaybackMachine = new URL(
+      `${WAYBACK_MACHINE_URL_PREFIX}${currentUrl}`,
+    )
+  }
+}
+
+export const WAYBACK_MACHINE_URL_PREFIX = new URL(
+  'https://web.archive.org/web/*/',
+)

src/sass/_borders.scss

@@ -7,10 +7,10 @@ $panel-width: 1px;
   @return map.get($theme, hairline);
 }
 
-@mixin panel-style-width($side) {
+@mixin panel-style-width($side: 'all') {
   $panel-style: solid;
 
-  @if ($side == all) {
+  @if ($side == 'all') {
     border-width: $panel-width;
     border-style: $panel-style;
   } @else {

src/sass/_page.scss

@@ -0,0 +1,5 @@
+@mixin full-size {
+  position: absolute;
+  width: 100%;
+  min-height: 100%;
+}