got basic implementation of project cards and the suppporting services/routing working. need to style project page now and will have first pass done

src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { LinksComponent } from './links/links.component';
+import { Page404Component } from './page404/page404.component';
 import { PetComponent } from './pet/pet.component';
 import { ProjectsComponent } from './projects/projects.component';
 import { Pages } from './shared/models/pages.model';
@@ -12,6 +13,7 @@ const routes: Routes = [
   // { path: AppRoutes.CORE, loadChildren: () => import('./galler/gallery.module').then((m) => m.GalleryModule) }, // for future use maybe
   { path: Pages.LINKS, component: LinksComponent },
   { path: Pages.PET, component: PetComponent },
+  { path: Pages.PAGE_404, component: Page404Component },
   { path: '**', redirectTo: Pages.HOME, pathMatch: 'full' }];
 
 @NgModule({

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { HomeComponent } from './home/home.component';
 import { LinksComponent } from './links/links.component';
 import { PetComponent } from './pet/pet.component';
 import { HttpClientModule } from '@angular/common/http';
+import { Page404Component } from './page404/page404.component';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { HttpClientModule } from '@angular/common/http';
     FooterComponent,
     HomeComponent,
     LinksComponent,
-    PetComponent
+    PetComponent,
+    Page404Component
   ],
   imports: [
     SharedModule,

src/app/page404/page404.component.html

@@ -0,0 +1,2 @@
+<h1>Page Not Found?</h1>
+<h3>Sorry.</h3>

src/app/page404/page404.component.scss

@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}

src/app/page404/page404.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Page404Component } from './page404.component';
+
+describe('Page404Component', () => {
+  let component: Page404Component;
+  let fixture: ComponentFixture<Page404Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Page404Component ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Page404Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/page404/page404.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page404',
+  templateUrl: './page404.component.html',
+  styleUrls: ['./page404.component.scss']
+})
+export class Page404Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/projects/project-card/project-card.component.html

@@ -1 +1,4 @@
-<p>project-card works!</p>
+<a routerLink="{{project.slug}}">
+    <h2>{{project.title}}</h2>
+    <p>{{project.description}}</p>
+</a>

src/app/projects/project-card/project-card.component.scss

@@ -0,0 +1,22 @@
+@use 'src/app/shared/styles/_variables.color' as colors;
+
+:host {
+    flex-direction: column;
+    display: flex;
+    background-color: colors.$inklets-color-bg;
+    margin-bottom: 20px;
+
+    a {
+        color: colors.$inklets-color-white;
+        border: colors.$inklets-color-highlight-bg 2px dashed;
+        background-color: colors.$inklets-color-fg;
+        text-decoration: none;
+        padding: 0 20px 0 20px;
+    }
+
+    a:hover {
+        background-color: colors.$inklets-color-highlight-fg;
+        color: colors.$inklets-color-black;
+    }
+
+}

src/app/projects/project-card/project-card.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Project } from 'src/app/shared/models/project.model';
 
 @Component({
   selector: 'app-project-card',
@@ -7,6 +8,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProjectCardComponent implements OnInit {
 
+  @Input()
+  project: Project;
+
   constructor() { }
 
   ngOnInit(): void {

src/app/projects/project/project.component.html

@@ -1 +1,2 @@
 <p>project works!</p>
+{{project.title}}

src/app/projects/project/project.component.ts

@@ -1,15 +1,52 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Project } from 'src/app/shared/models/project.model';
+import { ProjectsService } from '../projects.service';
 
 @Component({
   selector: 'app-project',
   templateUrl: './project.component.html',
   styleUrls: ['./project.component.scss']
 })
-export class ProjectComponent implements OnInit {
+export class ProjectComponent implements OnInit, OnDestroy {
+  _unsubscribe$: Subject<boolean> = new Subject();
 
-  constructor() { }
+  project: Project = {
+    title: '',
+    description: '',
+    slug: '',
+    ct: '',
+    body: '',
+  };
+
+  constructor(
+    private route: ActivatedRoute,
+    private projectsService: ProjectsService
+    ) { }
 
   ngOnInit(): void {
+    let id: string;
+    this.route.paramMap.subscribe((params) => {
+        id = params.get('id');
+    });
+
+    this.projectsService.getProject(id);
+
+    this.projectsService.currentProject$
+    .pipe(takeUntil(this._unsubscribe$))
+    .subscribe((result: Project) => {
+      if (!!result) {
+        this.project = result;
+      }
+    });
+
+  }
+
+  ngOnDestroy(): void {
+      this._unsubscribe$.next(false);
+      this._unsubscribe$.complete();
   }
 
 }

src/app/projects/projects.component.html

@@ -2,4 +2,7 @@
 <p>These are my projects as can be found on my <a href="https://gitlab.inkletblot.com/explore">gitlab</a>. Mainly my programming projects that are quality enough for me to be happy for the world to see them. There are more in the works but they are currently private.</p>
 
 <h2>Projects of a personal nature</h2>
-<p>This is (will be) a summary of my personal projects be they my homelab, general electronics projects, or anything else.</p>
+<p>This is (will be) a summary of my personal projects be they my homelab, general electronics projects, or anything else.</p>
+
+<app-project-card *ngFor="let project of uncategorizedProjects" [project]="project">
+</app-project-card>

src/app/projects/projects.service.ts

@@ -1,5 +1,6 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
 import { Project } from '../shared/models/project.model';
 
@@ -18,6 +19,16 @@ export class ProjectsService {
       return this._allProjects.getValue();
   }
 
+  private _currentProject = new BehaviorSubject<Project>(null);
+  readonly currentProject$ = this._currentProject.asObservable();
+
+  private set currentProject(project: Project) {
+      this._currentProject.next(project);
+  }
+  private get currentProject(): Project {
+      return this._currentProject.getValue();
+  }
+
   private _apiErrored = new BehaviorSubject<boolean>(false);
   readonly apiErrored$ = this._apiErrored.asObservable();
 
@@ -34,7 +45,7 @@ export class ProjectsService {
 
   private PROJECT_API_URL = "https://cms.inkletblot.com/api/json"
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private router: Router) { }
 
   httpOptions = {
       headers: new HttpHeaders({
@@ -50,11 +61,13 @@ export class ProjectsService {
                 if (response) {
                     // using text/plain so as to not get the preflight options request
                     // as such : Project[] does not work as expected and objects must be parsed.
+                    this.allProjects = []
                     for (let project of response) {
                         this.allProjects.push({
                             title : project.title,
                             description : project.description,
                             ct : project.ct,
+                            slug : this.generateSlug(project.title),
                             body : project.body
                         });
                     }
@@ -66,4 +79,31 @@ export class ProjectsService {
             }
         );
     }
+
+    /**
+     * This is not very efficient code but I'm not planning on having that many projects and (if this turns into a blog) blog posts
+     * If this does become a general blog, then I will make this a bit more efficient.
+     * @param id slug of project to get
+     */
+    getProject(id: string): void {
+        let found = false;
+        this.allProjects.forEach((project) => {
+            if (project.slug === id) {
+                found = true;
+                this.currentProject = project;
+            }
+        })
+        if (!found) {
+            this.router.navigate(['not-found'])
+        }
+    }
+
+    /**
+     * Currently this is very basic and assumes that generated slug will be unique, it may be updated in future.
+     * @param input string to use for generating the slug
+     * @returns a slug representation of the input string
+     */
+    generateSlug(input: string): string {
+        return input.toLocaleLowerCase().split(" ").join("-");
+    }
 }

src/app/shared/models/pages.model.ts

@@ -6,5 +6,6 @@ export enum Pages {
     PROJECTS = 'projects',
     GALLERY = 'gallery',
     LINKS = 'links',
-    PET = 'pet'
+    PET = 'pet',
+    PAGE_404 = 'not-found' 
 }

src/app/shared/models/project.model.ts

@@ -2,5 +2,6 @@ export interface Project {
     title: string,
     description: string,
     ct: string,
+    slug: string,
     body: string
 }