Figured out the param map... goddamnit.

src/app/app-routing.module.ts

@@ -1,30 +1,36 @@
-import { NgModule }              from '@angular/core';
+import {NgModule} from '@angular/core';
-import { RouterModule, Routes }  from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
+
+import {AppComponent} from './app.component';
+import {HomeComponent} from './components/home/home.component';
+import {PostsComponent} from './components/posts/posts.component';
+import {CvComponent} from './components/cv/cv.component';
+import {RootComponent} from './components/root/root.component';
 
-import { AppComponent } from './app.component';
-import { HomeComponent } from './components/home/home.component';
-import { PostsComponent } from './components/posts/posts.component';
-import { CvComponent } from './components/cv/cv.component';
- 
 const appRoutes: Routes = [
-//   { path: 'crisis-center', component: CrisisListComponent },
+    {
-  { path: 'home', component: HomeComponent },
+      path: ':language',
-  { path: 'posts', component: PostsComponent },
+      component: RootComponent,
-  { path: 'cv', component: CvComponent },
+      children: [
-  { path: '',   redirectTo: '/home', pathMatch: 'full' },
+        {path: 'home', component: HomeComponent},
-  { path: '*',   redirectTo: '/home', pathMatch: 'full' },
+        {path: 'posts', component: PostsComponent},
-  // { path: '**', component: AppComponent }
+        {path: 'cv', component: CvComponent},
-];
+        {path: '', redirectTo: 'home', pathMatch: 'full'},
- 
+        {path: '*', redirectTo: 'home', pathMatch: 'full'}
+      ]
+    }
+  ]
+;
+
 @NgModule({
   imports: [
     RouterModule.forRoot(
       appRoutes,
-      { enableTracing: true } // <-- debugging purposes only
+      {enableTracing: false}) // <-- debugging purposes only )
-    )
   ],
   exports: [
     RouterModule
   ]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -1,45 +1 @@
-<!--this is bootstrap super container-->
+<router-outlet></router-outlet>
-<div class="container-fluid">
-
-  <div class="row" id="namerow">
-    <div class="col-md-8 offset-md-2">
-      <div class="centercontents" id="topname" [class.active]="mousingOver === null">
-        <span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
-      </div>
-      <div class="" id="highlightedlink" [class.active]="mousingOver !== null">
-        {{mousingOver}}
-      </div>
-    </div>
-  </div>
-
-  <!--the top menu... should be always visible, everywhere-->
-  <div class="row">
-    <div class="col-md-8 offset-md-2 centercontents">
-      <div id="topmenubuttons">
-        <div class="btn-group mx-auto" role="group">
-          <!--removed this from the <i: tooltip="Huis" placement="bottom"-->
-          <a routerLink="/home" (mouseout)="mouseOut('home')" (mouseover)="mouseOver('home')"><i class="fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
-          <a routerLink="/posts" (mouseout)="mouseOut('posts')" (mouseover)="mouseOver('posts')"><i class="fa fa-sticky-note fa-fw  fa-2x" aria-hidden="true"></i></a>
-          <a routerLink="/cv" (mouseout)="mouseOut('cv')" (mouseover)="mouseOver('cv')"><i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
-        </div>
-      </div>
-    </div>
-  <!--row-->
-  </div>
-
-  <div class="row">
-    <div class="col-md-8 offset-md-2">
-      <div class="pagetype">
-        {{getPageType()}}
-      </div>
-    </div>
-  </div>
-
-  <!--this shows the current route's content-->
-  <div class="row">
-    <div class="col-md-8 offset-md-2">
-      <router-outlet></router-outlet>
-    </div>
-  </div>
-
-</div>

src/app/app.component.scss

@@ -1,81 +1 @@
-@import "../globals";
 
-#namerow {
-  height: 66pt;
-}
-
-.centercontents {
-    text-align: center;
-    margin-left: auto;
-    margin-right: auto
-}
-
-#topname {
-  //font-family: $mainFont;
-  margin-top: 25px;
-  padding-bottom: 9px;
-  font-size: 80%;
-  transition: font-size 0.15s ease;
-}
-#topname.active {
-  font-size: 100%;
-  transition: font-size 0.15s ease;
-}
-
-#topname #first {
-    font-size: 250%
-}
-
-#topname #dot {
-    line-height: 20pt;
-    font-size: 600%;
-}
-
-#topname #last {
-  font-size: 150%;
-}
-
-#topmenubuttons, #topname {
-  //border-left: 1px solid black;
-  //border-right: 1px solid black;
-}
-
-//this is the row below the name, will use this for styling
-.row.below-name {
-}
-
-.pagetype {
-  text-align: center;
-  font-size: 200%;
-  border-bottom: 1px solid black;
-  border-top: 1px solid black;
-  margin: 35px 30px 25px 30px;
-}
-
-#topmenubuttons {
-  a {
-    color: lightgrey;
-  }
-
-  a:hover {
-    color: darkorange;
-  }
-}
-
-#highlightedlink {
-  color: gray;
-  opacity: 0;
-  //background-color: aqua;
-  position: absolute;
-  width: 100%;
-  bottom: -3px;
-  left: 0px;
-  font-size: 89%;
-  text-align: center;
-  transition: opacity 0.5s ease-in-out;
-}
-
-#highlightedlink.active {
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-}

src/app/app.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, AfterViewChecked } from "@angular/core";
+import { Component, OnInit} from '@angular/core';
-import {Router} from '@angular/router';
+import 'rxjs/add/operator/switchMap';
-declare var $: any;
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -8,29 +8,12 @@ declare var $: any;
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  title = 'Joachim Homepage';
-  mousingOver: string = null;
 
-  constructor(private router:Router) {}
+  constructor() {
+  }
 
   ngOnInit() {
   }
 
-  getPageType() {
-    switch (this.router.url) {
-      case '/posts': return 'Posts';
-      case '/cv': return 'Curriculum Vitae';
-      case '/home': return 'Home';
-      default: return 'Unknown path';
-    }
-  }
 
-  mouseOver(s: string) {
-    console.log('mouseover!'+s);
-    this.mousingOver = s;
-  }
-
-  mouseOut(s: string) {
-    this.mousingOver = null;
-  }
 }

src/app/app.module.ts

@@ -17,6 +17,8 @@ import { PosttagComponent } from './components/post/posttag/posttag.component';
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
 import {FormsModule} from '@angular/forms';
 import {StateService} from './services/state.service';
+import { ContactComponent } from './components/contact/contact.component';
+import { RootComponent } from './components/root/root.component';
 
 @NgModule({
   declarations: [
@@ -27,7 +29,9 @@ import {StateService} from './services/state.service';
     CvComponent,
     PosttypepipePipe,
     SimpledatePipe,
-    PosttagComponent
+    PosttagComponent,
+    ContactComponent,
+    RootComponent
   ],
   imports: [
     BrowserModule,
@@ -38,6 +42,8 @@ import {StateService} from './services/state.service';
     ButtonsModule.forRoot()
   ],
   providers: [DataloaderService, StateService],
-  bootstrap: [AppComponent]
+  bootstrap: [
+    AppComponent
+  ]
 })
 export class AppModule { }

src/app/components/contact/contact.component.html

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

src/app/components/contact/contact.component.spec.ts

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

src/app/components/contact/contact.component.ts

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

src/app/components/home/home.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, ParamMap} from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
+  console.log('homecomponent onInit')
+    // fix up the language, fetch it from the route!
+    this.route.parent.paramMap.subscribe((params: ParamMap) => {
+      console.log(params);
+      console.log(params.get('language'));
+    });
   }
 
 }

src/app/components/root/root.component.html

@@ -0,0 +1,45 @@
+<!--this is bootstrap super container-->
+<div class="container-fluid">
+
+  <div class="row" id="namerow">
+    <div class="col-md-8 offset-md-2">
+      <div class="centercontents" id="topname" [class.active]="mousingOver === null">
+        <span class="display-1" id="first">Joachim</span><span id="dot">.</span><span id="last" class="display-1">Nielandt</span>
+      </div>
+      <div class="" id="highlightedlink" [class.active]="mousingOver !== null">
+        {{mousingOver}}
+      </div>
+    </div>
+  </div>
+
+  <!--the top menu... should be always visible, everywhere-->
+  <div class="row">
+    <div class="col-md-8 offset-md-2 centercontents">
+      <div id="topmenubuttons">
+        <div class="btn-group mx-auto" role="group">
+          <!--removed this from the <i: tooltip="Huis" placement="bottom"-->
+          <a routerLink="/home" (mouseout)="mouseOut('home')" (mouseover)="mouseOver('home')"><i class="fa fa-home fa-fw fa-2x" aria-hidden="true"></i></a>
+          <a routerLink="/posts" (mouseout)="mouseOut('posts')" (mouseover)="mouseOver('posts')"><i class="fa fa-sticky-note fa-fw  fa-2x" aria-hidden="true"></i></a>
+          <a routerLink="/cv" (mouseout)="mouseOut('cv')" (mouseover)="mouseOver('cv')"><i class="fa fa-id-badge fa-fw fa-2x" aria-hidden="true"></i></a>
+        </div>
+      </div>
+    </div>
+  <!--row-->
+  </div>
+
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <div class="pagetype">
+        {{getPageType()}}
+      </div>
+    </div>
+  </div>
+
+  <!--this shows the current route's content-->
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+
+</div>

src/app/components/root/root.component.scss

@@ -0,0 +1,82 @@
+@import "../../../globals";
+
+#namerow {
+  height: 66pt;
+}
+
+.centercontents {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto
+}
+
+#topname {
+  //font-family: $mainFont;
+  margin-top: 25px;
+  padding-bottom: 9px;
+  font-size: 80%;
+  transition: font-size 0.15s ease;
+}
+
+#topname.active {
+  font-size: 100%;
+  transition: font-size 0.15s ease;
+}
+
+#topname #first {
+  font-size: 250%
+}
+
+#topname #dot {
+  line-height: 20pt;
+  font-size: 600%;
+}
+
+#topname #last {
+  font-size: 150%;
+}
+
+#topmenubuttons, #topname {
+  //border-left: 1px solid black;
+  //border-right: 1px solid black;
+}
+
+//this is the row below the name, will use this for styling
+.row.below-name {
+}
+
+.pagetype {
+  text-align: center;
+  font-size: 200%;
+  border-bottom: 1px solid black;
+  border-top: 1px solid black;
+  margin: 35px 30px 25px 30px;
+}
+
+#topmenubuttons {
+  a {
+    color: lightgrey;
+  }
+
+  a:hover {
+    color: darkorange;
+  }
+}
+
+#highlightedlink {
+  color: gray;
+  opacity: 0;
+  //background-color: aqua;
+  position: absolute;
+  width: 100%;
+  bottom: -3px;
+  left: 0px;
+  font-size: 89%;
+  text-align: center;
+  transition: opacity 0.5s ease-in-out;
+}
+
+#highlightedlink.active {
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}

src/app/components/root/root.component.spec.ts

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

src/app/components/root/root.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './root.component.html',
+  styleUrls: ['./root.component.scss']
+})
+export class RootComponent implements OnInit {
+
+  title = 'Joachim Homepage';
+  mousingOver: string = null;
+
+  constructor(private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    console.log('oninit of root component');
+    this.route.paramMap.subscribe(val => console.log(val));
+  }
+  getPageType() {
+    if (this.router.url.endsWith('posts')) {
+        return 'Posts';
+    }
+    if (this.router.url.endsWith('cv')) {
+      return 'Curricululm Vitae';
+    }
+    if ( this.router.url.endsWith('home')) {
+      return 'Home';
+    }
+    return 'Joa did something wrong...'
+  }
+
+  mouseOver(s: string) {
+    console.log('mouseover!' + s);
+    this.mousingOver = s;
+  }
+
+  mouseOut(s: string) {
+    this.mousingOver = null;
+  }
+}

src/app/services/dataloader.service.ts

@@ -12,26 +12,22 @@ export class DataloaderService {
   constructor(private http: HttpClient) { }
 
   getPosts(): Observable<Post[]> {
-    console.log('DataLoader.getPosts() called');
     return this.http.get('assets/posts.json').map(posts => {
       const res: Post[] = [];
       // fill it up
       for (const index in posts) {
-          console.log('DataLoader.getPosts() index '+index);
           const post: any = posts[index];
-          console.log('got this key: '+post);
           console.log(post);
           const temp: Post = new Post(post.id);
           temp.title = post.info.title;
           temp.type = post.type;
           temp.tags = post.info.tags;
-          console.log('got this timestamp: ' + post.info.created_timestamp);
+          // console.log('got this timestamp: ' + post.info.created_timestamp);
           temp.created_timestamp = new Date(post.info.created_timestamp * 1000);
-          console.log('converted it to this: ' + temp.created_timestamp);
+          // console.log('converted it to this: ' + temp.created_timestamp);
           res.push(temp);
       }
       // console.log('these are the posts...');
-      console.log('DataLoader.getPosts() result: '+res);
       // console.log(res);
       return res;
     });
@@ -50,7 +46,7 @@ export class DataloaderService {
     const url = 'assets/post/' + id + '/full.html';
 
     // console.log('fetching: '+url);
-    //console.log('getPost called: '+url);
+    // console.log('getPost called: '+url);
 
     return this.http.get(url, {responseType: 'text'});
   }

src/app/services/state.service.ts

@@ -1,37 +1,43 @@
 import { Injectable } from '@angular/core';
 import {Post} from '../model/post';
+import {ActivatedRoute, ParamMap} from '@angular/router';
+import 'rxjs/add/operator/filter';
 
 @Injectable()
 export class StateService {
 
-  //this keeps track of which type is enabled / disabled
+  // this keeps track of which type is enabled / disabled
-  tagFilter:any = [];
+  tagFilter: any = [];
 
   constructor() {
 
   }
 
-  shouldDisplay(post:Post): boolean {
+  shouldDisplay(post: Post): boolean {
-    //check whether all filters are true or false: that case, just show everything
+    // check whether all filters are true or false: that case, just show everything
-    let foundTrue:boolean = false;
+    let foundTrue = false;
-    let foundFalse:boolean = false;
+    let foundFalse = false;
-    for(let tag of Object.keys(this.tagFilter)) {
+    for (const tag of Object.keys(this.tagFilter)) {
-      if(this.tagFilter[tag] === true)
+      if (this.tagFilter[tag] === true) {
         foundTrue = true;
-      if(this.tagFilter[tag] === false)
+      }
+      if (this.tagFilter[tag] === false) {
         foundFalse = true;
+      }
     }
 //    console.log('foundFalse: '+foundFalse);
 //    console.log('foundTrue: '+foundTrue);
-    if(!foundTrue && foundFalse)
+    if (!foundTrue && foundFalse) {
       return true;
-    if(!foundTrue && !foundFalse)
+    }
-    //some weird case, just show everything
+    if (!foundTrue && !foundFalse) {
+    // some weird case, just show everything
       return true;
+    }
 
     //check whether the post should be displayed
-    for(let tag of Object.keys(this.tagFilter)) {
+    for (const tag of Object.keys(this.tagFilter)) {
-      if(post.tags.indexOf(tag)!=-1 && this.tagFilter[tag]===true) {
+      if (post.tags.indexOf(tag) != -1 && this.tagFilter[tag] === true) {
         //found the tag and its filter is enabled
         return true;
       }
@@ -40,18 +46,19 @@ export class StateService {
     return false;
   }
 
-  isActiveTag(tag:string):boolean {
+  isActiveTag(tag: string): boolean {
   //  console.log('isActive');
   //  console.log(this.tagFilter);
-    return this.tagFilter[tag]===true;
+    return this.tagFilter[tag] === true;
   }
 
   toggleTag(tag: string) {
    // console.log('toggle');
    // console.log(this.tagFilter);
-    if(this.tagFilter[tag]==null)
+    if (this.tagFilter[tag] == null) {
       this.tagFilter[tag] = true;
-    else
+    } else {
       this.tagFilter[tag] = !this.tagFilter[tag];
+    }
   }
 }

src/assets/post/cupboard1/full.html

@@ -1 +1 @@
-<p>The cupboard is great, the cupboard is powerful!</p>
+<p>This post is about the first cupboard project.</p>