Merge branch 'feature/projects' into 'develop'

Projects is complete

See merge request inkletblot/inkletblot-com-v2!5

src/app/app-routing.module.ts

@@ -2,16 +2,18 @@ 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';
 
 const routes: Routes = [
   { path: Pages.HOME, component: HomeComponent },
-  { path: Pages.PROJECTS, component: ProjectsComponent },
+  { path: Pages.PROJECTS, loadChildren: () => import('./projects/projects.module').then((m) => m.ProjectsModule) },
-  // { path: AppRoutes.CORE, loadChildren: () => import('./galler/gallery.module').then((m) => m.GalleryModule) }, // for future use
+  // { 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

@@ -9,8 +9,9 @@ import { FooterComponent } from './footer/footer.component';
 import { SharedModule } from './shared/shared.module';
 import { HomeComponent } from './home/home.component';
 import { LinksComponent } from './links/links.component';
-import { ProjectsComponent } from './projects/projects.component';
 import { PetComponent } from './pet/pet.component';
+import { HttpClientModule } from '@angular/common/http';
+import { Page404Component } from './page404/page404.component';
 
 @NgModule({
   declarations: [
@@ -20,13 +21,14 @@ import { PetComponent } from './pet/pet.component';
     FooterComponent,
     HomeComponent,
     LinksComponent,
-    ProjectsComponent,
+    PetComponent,
-    PetComponent
+    Page404Component
   ],
   imports: [
     SharedModule,
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -0,0 +1,3 @@
+<a routerLink="{{project.slug}}">
+    {{project.title + " - " + project.date}}
+</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: 5px 20px 5px 20px;
+    }
+
+    a:hover {
+        background-color: colors.$inklets-color-highlight-fg;
+        color: colors.$inklets-color-black;
+    }
+
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Project } from 'src/app/shared/models/project.model';
+
+@Component({
+  selector: 'app-project-card',
+  templateUrl: './project-card.component.html',
+  styleUrls: ['./project-card.component.scss']
+})
+export class ProjectCardComponent implements OnInit {
+
+  @Input()
+  project: Project;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1 @@
+<span [innerHTML]="project.content"></span>

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

@@ -0,0 +1,10 @@
+@use 'src/app/shared/styles/_variables.color' as colors;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 0 20px 0 20px;
+    margin: 0 140px 10px 140px;
+}

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

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

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

@@ -0,0 +1,53 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } 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',
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./project.component.scss']
+})
+export class ProjectComponent implements OnInit, OnDestroy {
+  _unsubscribe$: Subject<boolean> = new Subject();
+
+  project: Project = {
+    slug: '',
+    title: '',
+    date: '',
+    category: '',
+    content: '',
+  };
+
+  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-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProjectComponent } from './project/project.component';
+import { ProjectsComponent } from './projects.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ProjectsComponent
+    },
+    {
+        path: ':id',
+        component: ProjectComponent
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class ProjectsRoutingModule {}

src/app/projects/projects.component.html

@@ -1 +1,8 @@
-<p>projects works!</p>
+<h2>Projects on git</h2>
+<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>
+
+<app-project-card *ngFor="let project of uncategorizedProjects" [project]="project">
+</app-project-card>

src/app/projects/projects.component.ts

@@ -1,18 +1,37 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs/internal/Subject';
+import { takeUntil } from 'rxjs/operators';
 import { NavService } from '../nav/nav.service';
 import { Pages } from '../shared/models/pages.model';
+import { Project } from '../shared/models/project.model';
+import { ProjectsService } from './projects.service';
 
 @Component({
   selector: 'app-projects',
   templateUrl: './projects.component.html',
   styleUrls: ['./projects.component.scss']
 })
-export class ProjectsComponent implements OnInit {
+export class ProjectsComponent implements OnInit, OnDestroy {
+  _unsubscribe$: Subject<boolean> = new Subject();
 
-  constructor(private navService:NavService) { }
+  uncategorizedProjects: Array<Project>;
+
+  constructor(private navService: NavService, private projectsService: ProjectsService) { }
 
   ngOnInit(): void {
     this.navService.setPageTitle(Pages.PROJECTS);
+
+    this.projectsService.allProjects$
+        .pipe(takeUntil(this._unsubscribe$))
+        .subscribe((result: Project[]) => {
+            this.uncategorizedProjects = result;
+        });
+    this.projectsService.getProjects();
+  }
+
+  ngOnDestroy(): void {
+      this._unsubscribe$.next(false);
+      this._unsubscribe$.complete();
   }
 
 }

src/app/projects/projects.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProjectCardComponent } from './project-card/project-card.component';
+import { ProjectComponent } from './project/project.component';
+import { ProjectsComponent } from './projects.component';
+import { ProjectsRoutingModule } from './projects-routing.module';
+
+@NgModule({
+  declarations: [ProjectsComponent, ProjectCardComponent, ProjectComponent],
+  imports: [
+    CommonModule,
+    ProjectsRoutingModule
+  ],
+  providers: []
+})
+export class ProjectsModule { }

src/app/projects/projects.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectsService } from './projects.service';
+
+describe('ProjectsService', () => {
+  let service: ProjectsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProjectsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/projects/projects.service.ts

@@ -0,0 +1,110 @@
+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';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectsService {
+
+  private _allProjects = new BehaviorSubject<Array<Project>>([]);
+  readonly allProjects$ = this._allProjects.asObservable();
+
+  private set allProjects(projects: Array<Project>) {
+      this._allProjects.next(projects);
+  }
+  private get allProjects(): Array<Project> {
+      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();
+
+  private set apiErrored(errored: boolean) {
+      this._apiErrored.next(errored);
+  }
+  private get apiErrored(): boolean {
+      return this._apiErrored.getValue();
+  }
+
+  /**
+   * I am actively avoiding any kind of environment management, this is a very basic site and currently this is the only api call.
+   */
+
+  private PROJECT_API_URL = "https://cms.inkletblot.com"
+
+  constructor(private http: HttpClient, private router: Router) { }
+
+  httpOptions = {
+      headers: new HttpHeaders({
+          'Content-Type': 'text/plain'
+      })
+  };
+
+  getProjects(): void {
+    this.http
+        .get(`${this.PROJECT_API_URL}/posts`, this.httpOptions)
+        .subscribe(
+            (response: Project[]) => {
+                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 = response;
+                    // filter out different categories here currently only one
+                }
+            },
+            (error) => {
+                this.apiErrored = true;
+            }
+        );
+    }
+
+    getSingleProject(id: string): void {
+      this.http
+          .get(`${this.PROJECT_API_URL}/post/${id}`, this.httpOptions)
+          .subscribe(
+              (response: Project) => {
+                  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.currentProject = response;
+                      // filter out different categories here currently only one
+                  }
+              },
+              (error) => {
+                  this.apiErrored = true;
+                  this.router.navigate(['not-found'])
+              }
+          );
+      }
+
+    /**
+     * 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.getSingleProject(id)
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+export interface Project {
+    slug: string,
+    title: string,
+    date: string,
+    category: string,
+    content: string
+}

src/styles.scss

@@ -10,4 +10,94 @@ body {
     font-family: Roboto, 'Helvetica Neue', sans-serif;
     background-color: colors.$inklets-color-black;
     color: colors.$inklets-color-white;
+}
+
+/*
+
+    Codehilite styles for api content
+
+*/
+pre { line-height: 125%; }
+td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+.codehilite .hll { background-color: #ffffcc }
+.codehilite { background: #000000; padding: 5px; }
+.codehilite .c { color: #408080; font-style: italic } /* Comment */
+.codehilite .err { border: 1px solid #FF0000 } /* Error */
+.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
+.codehilite .o { color: #666666 } /* Operator */
+.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
+.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
+.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
+.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
+.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
+.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
+.codehilite .gd { color: #A00000 } /* Generic.Deleted */
+.codehilite .ge { font-style: italic } /* Generic.Emph */
+.codehilite .gr { color: #FF0000 } /* Generic.Error */
+.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #00A000 } /* Generic.Inserted */
+.codehilite .go { color: #888888 } /* Generic.Output */
+.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.codehilite .gs { font-weight: bold } /* Generic.Strong */
+.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.codehilite .gt { color: #0044DD } /* Generic.Traceback */
+.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
+.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kt { color: #B00040 } /* Keyword.Type */
+.codehilite .m { color: #666666 } /* Literal.Number */
+.codehilite .s { color: #BA2121 } /* Literal.String */
+.codehilite .na { color: #7D9029 } /* Name.Attribute */
+.codehilite .nb { color: #008000 } /* Name.Builtin */
+.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+.codehilite .no { color: #880000 } /* Name.Constant */
+.codehilite .nd { color: #AA22FF } /* Name.Decorator */
+.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.codehilite .nf { color: #0000FF } /* Name.Function */
+.codehilite .nl { color: #A0A000 } /* Name.Label */
+.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
+.codehilite .nv { color: #19177C } /* Name.Variable */
+.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
+.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
+.codehilite .mf { color: #666666 } /* Literal.Number.Float */
+.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
+.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
+.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
+.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
+.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
+.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
+.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
+.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
+.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
+.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.codehilite .sx { color: #008000 } /* Literal.String.Other */
+.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
+.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
+.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
+.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
+.codehilite .fm { color: #0000FF } /* Name.Function.Magic */
+.codehilite .vc { color: #19177C } /* Name.Variable.Class */
+.codehilite .vg { color: #19177C } /* Name.Variable.Global */
+.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
+.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
+.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
+
+
+* a {
+    text-decoration: none;
+    color: colors.$inklets-color-fg;
+}
+
+* a:hover {
+    color: colors.$inklets-color-highlight-fg;
 }