Got post working.

.angular-cli.json

@@ -21,12 +21,12 @@
       "styles": [
         "styles.css",
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
-        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css",
         "../node_modules/font-awesome/css/font-awesome.min.css"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
-        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
+        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
+        "../node_modules/popper.js/dist/popper.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

package-lock.json

@@ -802,9 +802,9 @@
       }
     },
     "bootstrap": {
-      "version": "3.3.7",
+      "version": "4.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.2.tgz",
-      "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
+      "integrity": "sha512-DzGtdTlKbrMoGMpz0LigKSqJ+MgtFKxA791PU/q062OlRG0HybNZcTLH7rpDAmLS66Y3esN9yzKHLLbqa5UR3w=="
     },
     "brace-expansion": {
       "version": "1.1.8",
@@ -5618,6 +5618,11 @@
         "pinkie": "2.0.4"
       }
     },
+    "popper.js": {
+      "version": "1.12.9",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz",
+      "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",

package.json

@@ -25,10 +25,11 @@
     "@angular/platform-browser": "^4.4.6",
     "@angular/platform-browser-dynamic": "^4.4.6",
     "@angular/router": "^4.4.6",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.0.0-beta.2",
     "core-js": "^2.5.3",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
+    "popper.js": "^1.12.9",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

src/app/app-routing.module.ts

@@ -4,13 +4,16 @@ 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';
  
 const appRoutes: Routes = [
 //   { path: 'crisis-center', component: CrisisListComponent },
   { path: 'home', component: HomeComponent },
   { path: 'posts', component: PostsComponent },
+  { path: 'cv', component: CvComponent },
   { path: '',   redirectTo: '/home', pathMatch: 'full' },
-  { path: '**', component: AppComponent }
+  { path: '*',   redirectTo: '/home', pathMatch: 'full' },
+  // { path: '**', component: AppComponent }
 ];
  
 @NgModule({

src/app/app.component.css

@@ -0,0 +1,5 @@
+.centercontents {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto
+}

src/app/app.component.html

@@ -3,11 +3,13 @@
 
   <!--the top menu... should be always visible, everywhere-->
   <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-12 centercontents" id="topmenubuttons">
-      <div id="topmenu" class="text-center">
+      <div class="btn-group mx-auto" role="group" aria-label="Basic example">
-        <!--each item is an icon-->
+        <!-- <button type="button" class="btn btn-secondary">Left</button> -->
+        <!-- <button type="button" class="btn btn-secondary">Middle</button> -->
+        <!-- <button type="button" class="btn btn-secondary">Right</button> -->
         <a routerLink="/home"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
-        <a routerLink="/posts"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></a>
+        <a routerLink="/posts"><i class="fa fa-sticky-note fa-2x" aria-hidden="true"></i></a>
         <a routerLink="/cv"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a>
       </div>
     </div>
@@ -15,6 +17,10 @@
   </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.module.ts

@@ -8,13 +8,15 @@ import { PostsComponent } from './components/posts/posts.component';
 import { PostComponent } from './components/post/post.component';
 import { DataloaderService } from 'app/services/dataloader.service';
 import { HttpClientModule } from '@angular/common/http';
+import { CvComponent } from './components/cv/cv.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     PostsComponent,
-    PostComponent
+    PostComponent,
+    CvComponent
   ],
   imports: [
     BrowserModule,

src/app/components/cv/cv.component.html

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

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

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

src/app/components/cv/cv.component.ts

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

src/app/components/post/post.component.html

@@ -1,7 +1,7 @@
-<p>
+<div class="card">
-  post works!
+  <div class="card-body">
-</p>
+    <h5 class="card-title">Placeholder title</h5>
-<div>
+    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
-  {{post.filename}}
+    <div class="card-text" #htmlcontainer></div>
+  </div>
 </div>
-<div #htmlcontainer></div>

src/app/components/post/post.component.ts

@@ -12,7 +12,6 @@ export class PostComponent implements OnInit {
   @Input() post:Post;
   @ViewChild('htmlcontainer') htmlContainer: ElementRef;
 
-
   constructor(private dataloaderService:DataloaderService) { }
 
   ngOnInit() {
@@ -23,5 +22,4 @@ export class PostComponent implements OnInit {
       this.htmlContainer.nativeElement.innerHTML = content;
     });
   }
-
 }

src/app/components/posts/posts.component.html

@@ -1,9 +1,11 @@
-<p>
+<div class="card text-center">
-  These are all the posts... put some filter buttons here or something?
+  <div class="card-body">
-</p>
+    <p class="card-text">All the previously made posts are shown below.</p>
+  </div>
+</div>
+
 
 <!-- <div *ngFor='let post of posts | async'> {{post.filename}} </div> -->
 <div>
   <app-post *ngFor='let post of posts | async' [post]="post"></app-post>
 </div>
-

src/app/services/dataloader.service.ts

@@ -31,7 +31,7 @@ export class DataloaderService {
     };
 
     console.log('launching GET');
-    return this.http.get("assets/post/"+type+"/"+id+".html", {responseType: 'text'});
+    return this.http.get("assets/post/"+type+"/"+id+"/"+id+".html", {responseType: 'text'});
   }
 
 }

src/assets/post/project/test/info.json

@@ -0,0 +1,3 @@
+{
+    "title": "Test title"
+}

src/assets/post/project/test/test.html

@@ -1,3 +1,3 @@
 <p>This is a project post</p>
 <p>Typically, all these project posts will have a number of paragraphs.</p>
-<p>Even images: <img src="assets/images/baby-duck.jpg"></img></p>
+<img src="assets/images/baby-duck.jpg" class="img-fluid" alt="Responsive image">

src/styles.css

@@ -1,10 +1 @@
 /* You can add global styles to this file, and also import other style files */
-
-
-/*top menu*/
-#topmenu {
-    border-bottom: 1px solid gray;
-    margin-bottom: 15px;
-    padding-bottom: 8px;
-    padding-top: 8px;
-}