Everything is dynamic now. Let's go for styling.

.angular-cli.json

@@ -26,7 +26,7 @@
       "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
-        "../node_modules/popper.js/dist/popper.min.js"
+        "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.linting.pylintEnabled": false
+}

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

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

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

@@ -16,9 +16,10 @@ export class PostComponent implements OnInit {
 
   ngOnInit() {
     //TODO load the relevant HTML file!
-    console.log('post component has inited: '+this.post.filename); 
+    console.log('post component has inited: '+this.post.id); 
+    console.log(this.post);
 
-    this.dataloaderService.getPost("project", "test").subscribe(content=>{
+    this.dataloaderService.getPost(this.post.type, this.post.id).subscribe(content=>{
       this.htmlContainer.nativeElement.innerHTML = content;
     });
   }

src/app/model/post.ts

@@ -1,9 +1,12 @@
-export class Post {
-    filename:String;
+export class Post {    
+    
+    type: string;
+    title: any;
+    id:String;
     date:Date;
 
-    constructor(filename:String) {
+    constructor(id:String) {
         this.date = new Date();
-        this.filename = filename;
+        this.id = id;
     }
 }

src/app/services/dataloader.service.ts

@@ -12,8 +12,22 @@ export class DataloaderService {
   constructor(private http:HttpClient) { }
 
   getPosts(): Observable<Post[]> {
-    console.log('dataloadersdervice.getPosts called');
-    return of([new Post('placeholderservice')]);
+    return this.http.get("assets/posts.json").map(posts=>{
+      let res:Post[] = [];
+      //fill it up
+      for(var index in posts) {
+          let post:any = posts[index];
+          console.log('got this key: '+post);
+          console.log(post);
+          let temp:Post = new Post(post.post.id);
+          temp.title = post.post.title;
+          temp.type = post.type;
+          res.push(temp);
+      }
+      console.log('these are the posts...');
+      console.log(res);
+      return res;
+    });
   }
 
   /**
@@ -21,17 +35,14 @@ export class DataloaderService {
    * @param filename the filename for which the post needs to be fetched
    */
   getPost(type:String, id:String): Observable<String> {
-    //load the relevant file
-    if(type!="project") {
-      return of(null);
-    }
-
     const httpOptions = {
       headers: new HttpHeaders({ 'Content-Type': 'text/html', 'Accept':'text/html' })
     };
 
     console.log('launching GET');
-    return this.http.get("assets/post/"+type+"/"+id+"/"+id+".html", {responseType: 'text'});
+    let url = "assets/post/"+type+"/"+id+"/full.html";
+    console.log('fetching: '+url);
+    return this.http.get(url, {responseType: 'text'});
   }
 
 }

src/assets/post/project/cupboard1/full.html

@@ -0,0 +1 @@
+<p>The cupboard is great, the cupboard is powerful!</p>

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

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

src/assets/post/tech/lxdarch/full.html

@@ -0,0 +1 @@
+<p>LXD is pretty cool guys.</p>

src/assets/post/tech/lxdarch/info.json

@@ -0,0 +1,3 @@
+{
+    "title":"some things about lxc in arch"
+}

src/assets/posts.json

@@ -1,7 +1 @@
-[
-    {
-        "projects": [
-            "test"
-        ]
-    }
-]
+[{"post": {"id": "test", "title": "Test title"}, "type": "project"}, {"post": {"id": "cupboard1", "title": "cupboard"}, "type": "project"}, {"post": {"id": "lxdarch", "title": "some things about lxc in arch"}, "type": "tech"}]

src/scripts/compileposts.py

@@ -0,0 +1,41 @@
+import os;
+import json;
+
+# each folder in the post folder is a type of post
+base = '../assets/post'
+types = os.listdir(base);
+outputfile = '../assets/posts.json'
+
+# go over the types
+for type in types:
+   print type
+
+# build ourselves a json object
+jsonresult = [];
+for type in types:
+    # now read that folder
+    posts = os.listdir(base+"/"+type);
+
+    # each folder in the current one is a post! the name of the folder is the _id_
+    for post in posts:
+        print('doing post '+post)
+        postdir = base+"/"+type+"/"+post;
+        infofile = postdir+"/info.json";
+        print(infofile)
+        with open(infofile) as j:
+            tt = j.read()
+            d = json.loads(tt)
+        d['id'] = post;
+        temp = {};
+        temp['type'] = type;
+        if 'post' not in temp:
+            temp['post'] = [];
+        temp['post'] = d;
+        jsonresult.append(temp);
+
+        # completely append the info.json file
+
+# print the result of the json parse
+print(json.dumps(jsonresult));
+with open(outputfile, 'w') as outfile:
+    json.dump(jsonresult, outfile)