merged master into develop

src/app/app-routing.module.ts

@@ -1,7 +1,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 { PetComponent } from './pet/pet.component';
+import { ProjectsComponent } from './projects/projects.component';
+import { Pages } from './shared/models/pages.model';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: Pages.HOME, component: HomeComponent },
+  { path: Pages.PROJECTS, component: ProjectsComponent },
+  // { path: AppRoutes.CORE, loadChildren: () => import('./galler/gallery.module').then((m) => m.GalleryModule) }, // for future use
+  { path: Pages.LINKS, component: LinksComponent },
+  { path: Pages.PET, component: PetComponent },
+  { path: '**', redirectTo: Pages.HOME, pathMatch: 'full' }];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,7 +1,11 @@
-<div class="content-fixed-width content-wrapper">
+<div class="page-fixed-width">
   <app-header></app-header>
 
   <app-nav></app-nav>
 
+  <div class="content no-scroll-bar">
+    <router-outlet></router-outlet>
+  </div>
+
   <app-footer></app-footer>
 </div>

src/app/app.component.scss

@@ -2,27 +2,34 @@
 
 :host {
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto;
 }
 
-.content-wrapper {
+.page-fixed-width {
+    width: 1000px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     overflow-y: auto;
-    align-items: center;
+    border-left: colors.$inklets-color-fg 2px dashed;
+    border-right: colors.$inklets-color-fg 2px dashed;
 }
 
-.content-fixed-width {
+.content {
-    width: 1000px;
+    flex-grow: 1;
+    overflow-y: auto;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-.content-fixed-width::-webkit-scrollbar {
+.no-scroll-bar::-webkit-scrollbar {
     display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
-.content-fixed-width {
+.no-scroll-bar {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
 }

src/app/app.module.ts

@@ -5,19 +5,23 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { NavComponent } from './nav/nav.component';
-import { CardComponent } from './card/card.component';
 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';
 
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     NavComponent,
-    CardComponent,
     FooterComponent,
-    HomeComponent
+    HomeComponent,
+    LinksComponent,
+    ProjectsComponent,
+    PetComponent
   ],
   imports: [
     SharedModule,

src/app/card/card.component.html

@@ -1 +0,0 @@
-<p>cards works!</p>

src/app/card/card.component.ts

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

src/app/footer/footer.component.html

@@ -1 +1 @@
-<p>footer works!</p>
+<p>Everything on this site is free for all possible public use.</p>

src/app/footer/footer.component.scss

@@ -0,0 +1,11 @@
+@use 'src/app/shared/styles/_variables.color' as colors;
+
+:host {
+    padding: 0 20px 0 20px;
+    margin: 10px 0 10px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+	font-size: 9pt;
+	color: #FAFAFA;
+}

src/app/header/header.component.html

@@ -1 +1 @@
-<p>header works!</p>
+<h1>Inks {{ pageTitle }}</h1>

src/app/header/header.component.scss

@@ -0,0 +1,6 @@
+@use 'src/app/shared/styles/_variables.color' as colors;
+
+:host {
+    padding: 0 20px 0 20px;
+    margin: 10px 0 10px 0;
+}

src/app/header/header.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { NavService } from '../nav/nav.service';
 
 @Component({
   selector: 'app-header',
@@ -6,10 +10,23 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit {
+  _unsubscribe$: Subject<boolean> = new Subject();
 
-  constructor() { }
+  pageTitle: string;
+
+  constructor(public navService: NavService) { }
 
   ngOnInit(): void {
+    this.navService.currentPage$
+      .pipe(takeUntil(this._unsubscribe$))
+      .subscribe((page: string) => {
+        this.pageTitle = page;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribe$.next(false);
+    this._unsubscribe$.complete();
   }
 
 }

src/app/home/home.component.html

@@ -1 +1,56 @@
 <p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>
+<p>home works!</p>

src/app/home/home.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: 50px 140px 10px 140px;
+}

src/app/home/home.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { NavService } from '../nav/nav.service';
+import { Pages } from '../shared/models/pages.model';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +9,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private navService: NavService) { }
 
   ngOnInit(): void {
+    this.navService.setPageTitle(Pages.HOME);
   }
 
 }

src/app/links/links.component.html

@@ -0,0 +1,6 @@
+<div class="card-wrapper">
+    <a *ngFor="let link of links" href="{{link.location}}" target="_blank">
+        <p class="text">item: {{link.name}}</p>
+        <h1 class="text">CLICK!</h1>
+    </a>
+</div>

src/app/links/links.component.scss

@@ -0,0 +1,42 @@
+@use 'src/app/shared/styles/_variables.color' as colors;
+
+:host {
+    padding: 0 20px 0 20px;
+    margin: 50px 140px 10px 140px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+}
+
+// padding 20, total width 1000, width 700 so 280/2 = margin left and right of 140
+.card-wrapper {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    grid-template-rows: auto auto auto auto;
+    row-gap: 50px;
+    column-gap: 50px;
+    width: 960px;
+    height: fit-content;
+}
+
+a {
+    color: colors.$inklets-color-white;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+    margin: 0;
+    border: colors.$inklets-color-highlight-bg 2px dashed;
+    background-color: colors.$inklets-color-fg;
+
+    > * {
+        margin: 10px;
+        padding: 0;
+    }
+}
+
+a:hover {
+    background-color: colors.$inklets-color-highlight-fg;
+    color: colors.$inklets-color-black;
+  }

src/app/links/links.component.spec.ts

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

src/app/links/links.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { NavService } from '../nav/nav.service';
+import { Link } from '../shared/models/link.model';
+import { Links } from '../shared/models/links.model';
+import { Pages } from '../shared/models/pages.model';
+
+@Component({
+  selector: 'app-links',
+  templateUrl: './links.component.html',
+  styleUrls: ['./links.component.scss']
+})
+export class LinksComponent implements OnInit {
+
+  constructor(private navService: NavService) { }
+
+  links: Array<Link> = Links;
+
+  ngOnInit(): void {
+    this.navService.setPageTitle(Pages.LINKS);
+  }
+
+}

src/app/nav/nav.component.html

@@ -1 +1,6 @@
-<p>nav works!</p>
+<ul>
+    <li><a routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
+    <li><a routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
+    <!-- <li><a routerLink="{{Pages.GALLERY}}" routerLinkActive="activeRoute">{{Pages.GALLERY}}</a></li> -->
+    <li><a routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
+</ul>

src/app/nav/nav.component.scss

@@ -0,0 +1,35 @@
+@use 'src/app/shared/styles/_variables.color'as colors;
+
+:host {
+  padding: 0 20px 0 20px;
+  margin: 10px 0 10px 0;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+li {
+  float: left;
+  background-color: colors.$inklets-color-fg;
+}
+
+li a {
+  color: colors.$inklets-color-white;
+  display: block;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.activeRoute {
+  background-color: colors.$inklets-color-highlight-bg;
+}
+
+li a:hover {
+  background-color: colors.$inklets-color-highlight-fg;
+  color: colors.$inklets-color-black;
+}

src/app/nav/nav.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { Pages } from '../shared/models/pages.model';
+import { NavService } from './nav.service';
 
 @Component({
   selector: 'app-nav',
@@ -7,6 +12,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NavComponent implements OnInit {
 
+  Pages = Pages;
+
   constructor() { }
 
   ngOnInit(): void {

src/app/nav/nav.service.spec.ts

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

src/app/nav/nav.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Pages } from '../shared/models/pages.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavService {
+
+  private _currentPage = new BehaviorSubject<string>(Pages.HOME);
+  readonly currentPage$ = this._currentPage.asObservable();
+
+  private set currentPage(currentPage: string) {
+      this._currentPage.next(currentPage);
+  }
+  private get currentPage(): string {
+      return this._currentPage.getValue();
+  }
+
+  constructor() { }
+
+  setPageTitle(page: Pages): void {
+    this.currentPage = page;
+  }
+}

src/app/pet/pet.component.html

@@ -0,0 +1 @@
+<p>pet</p>

src/app/pet/pet.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: 50px 140px 10px 140px;
+}

src/app/pet/pet.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CardComponent } from './card.component';
+import { PetComponent } from './pet.component';
 
-describe('CardComponent', () => {
+describe('PetComponent', () => {
-  let component: CardComponent;
+  let component: PetComponent;
-  let fixture: ComponentFixture<CardComponent>;
+  let fixture: ComponentFixture<PetComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CardComponent ]
+      declarations: [ PetComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CardComponent);
+    fixture = TestBed.createComponent(PetComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pet/pet.component.ts

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

src/app/projects/projects.component.html

@@ -0,0 +1 @@
+<p>projects works!</p>

src/app/projects/projects.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: 50px 140px 10px 140px;
+}

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

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

src/app/projects/projects.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { NavService } from '../nav/nav.service';
+import { Pages } from '../shared/models/pages.model';
+
+@Component({
+  selector: 'app-projects',
+  templateUrl: './projects.component.html',
+  styleUrls: ['./projects.component.scss']
+})
+export class ProjectsComponent implements OnInit {
+
+  constructor(private navService:NavService) { }
+
+  ngOnInit(): void {
+    this.navService.setPageTitle(Pages.PROJECTS);
+  }
+
+}

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

@@ -0,0 +1,4 @@
+export interface Link {
+    name: string;
+    location: string;
+}

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

@@ -0,0 +1,50 @@
+import { Link } from "./link.model";
+import { Pages } from "./pages.model";
+
+export const Links: Array<Link> =
+[
+    {
+        name: "cloud",
+        location: "https://cloud.inkletblot.com"
+    },
+    {
+        name: "pet",
+        location: Pages.PET
+    },
+    {
+        name: "gitlab",
+        location: "https://gitlab.inkletblot.com/"
+    },
+    {
+        name: "forum",
+        location: "https://www.inkletblot.com/forum/"
+    },
+    {
+        name: "books",
+        location: "https://www.inkletblot.com/books/"
+    },
+    {
+        name: "known",
+        location: "https://www.inkletblot.com/known/"
+    },
+    {
+        name: "tng",
+        location: "https://www.inkletblot.com/tng/"
+    },
+    {
+        name: "pico",
+        location: "https://www.inkletblot.com/pico/"
+    },
+    {
+        name: "pasty",
+        location: "https://www.inkletblot.com/pasty/"
+    },
+    {
+        name: "mail",
+        location: "https://www.inkletblot.com/webmail/"
+    },
+    {
+        name: "chk",
+        location: "https://www.chkseven.com"
+    }
+]

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

@@ -0,0 +1,10 @@
+/**
+ * Defines routes for the site, makes it easy to change later
+ */
+export enum Pages {
+    HOME = 'home',
+    PROJECTS = 'projects',
+    GALLERY = 'gallery',
+    LINKS = 'links',
+    PET = 'pet'
+}

src/app/shared/styles/_variables.color.scss

@@ -11,8 +11,10 @@
 * e.g. body { background-color: colors.$inklets-color-black; }
 */
 
-$inklets-color-black: #0F0F0F;
+$inklets-color-black: #0f0f0f;
-$inklets-color-pink: pink;
+$inklets-color-white: #fafafa;
-$inklets-color-white: #FAFAFA;
+$inklets-color-bg: #1b262c;
-$inklets-color-purple: purple;
+$inklets-color-fg:#0f4c75;
-$inklets-color-blue: #009FC1;
+$inklets-color-highlight-bg:#3282b8;
+$inklets-color-highlight-fg:#bbe1fa;
+$inklets-color-text-highlight: #009fc1;