Basic CSS + browser-compat-data Interfaces

src/app/app-nav.component.scss

+
+
+ul {
+    padding-left: 20px;
+}
+
+.folder > div {
+    font-weight: bold;
+}
+
+.file {
+
+    &:hover {
+        background-color: antiquewhite;
+        cursor: pointer;
+    }
+}
\ No newline at end of file

src/app/app-nav.component.ts

@@ -2,47 +2,47 @@ import { Component, Input } from '@angular/core';
 import { DataValue, AppService } from './app.service';
 
 @Component({
-  selector: 'app-nav',
-  templateUrl: './app-nav.component.html',
-  styleUrls: ['./app-nav.component.scss']
+    selector: 'app-nav',
+    templateUrl: './app-nav.component.html',
+    styleUrls: ['./app-nav.component.scss']
 })
 export class AppNavComponent {
 
-  @Input() path = '';
-  @Input() data: DataValue;
-
-  get folders(): { name: string; data: DataValue; }[] {
-    const list = [];
-    for (const i in this.data) {
-      if (i.match(/[^\d]+/)) {
-        list.push({
-          name: i,
-          data: this.data[i]
-        });
-      }
+    @Input() path = '';
+    @Input() data: DataValue;
+
+    get folders(): { name: string; data: DataValue; }[] {
+        const list = [];
+        for (const i in this.data) {
+            if (i.match(/[^\d]+/)) {
+                list.push({
+                    name: i,
+                    data: this.data[i]
+                });
+            }
+        }
+
+        return list;
     }
 
-    return list;
-  }
-
-  get files(): { fileName: string; name: string; }[] {
-    const list = [];
-    for (const i in this.data) {
-      if (i.match(/[\d]+/)) {
-        list.push({
-          fileName: this.data[i],
-          name: (this.data[i] as string).replace('.json', '')
-        });
-      }
+    get files(): { fileName: string; name: string; }[] {
+        const list = [];
+        for (const i in this.data) {
+            if (i.match(/[\d]+/)) {
+                list.push({
+                    fileName: this.data[i],
+                    name: (this.data[i] as string).replace('.json', '')
+                });
+            }
+        }
+
+        return list;
     }
 
-    return list;
-  }
+    constructor(private appService: AppService) { }
 
-  constructor(private appService: AppService) { }
-
-  action(path: string) {
-    this.appService.show(this.path + '/' + path);
-  }
+    action(path: string) {
+        this.appService.show(this.path + '/' + path);
+    }
 
 }

src/app/app.component.html

@@ -3,6 +3,9 @@
     <app-nav [data]="data">
     </app-nav>
   </nav>
+  <h1>
+    Section
+  </h1>
   <div>
     <router-outlet></router-outlet>
   </div>

src/app/app.component.scss

+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+app-root {
+    display: grid;
+    grid-template: [header-left] "nav title" auto [header-right]
+                   [footer-left] "nav page"  1fr  [footer-right] / 350px 1fr;
+}
+
+nav {
+    grid-area: nav;
+}
+
+h1 {
+    grid-area: title;
+    margin: 0;
+    padding: 10px 0;
+}
+
+div {
+    grid-area: page;
+}
\ No newline at end of file

src/app/app.component.ts

-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { AppService, DataValue } from './app.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   version = '0.1.0';

src/app/app.service.ts

@@ -3,6 +3,8 @@ import { HttpClient } from '@angular/common/http';
 
 import { Subject } from 'rxjs';
 
+import { BcdData } from './browser-compat-data';
+
 export type DataValue = (string | { [key: string]: DataValue })[];
 
 const pattern = /\.\/([^\/]+)\/(.*)/;
@@ -19,6 +21,7 @@ export class AppService {
 
   browsers: string[] = [];
   data: { [key: string]: DataValue } = {};
+  page: BcdData;
 
   constructor(
     private http: HttpClient
@@ -85,11 +88,9 @@ export class AppService {
     this.http
       .get('./assets/browser-compat-data' + path, { responseType: 'json' })
       .subscribe(
-        (data: any) => {
+        (data: BcdData) => {
           console.log(data);
-
-
-
+          this.page = data;
         },
         () => { },
         () => {

src/app/browser-compat-data.ts

+
+export interface BcdSupport {
+    version_added: boolean | string;
+    partial_implementation?: boolean;
+    notes?: string | string[];
+}
+
+export interface BcdSupport {
+    __compat: {
+        mdn_url: string;
+        description?: string;
+        status: {
+            deprecated: boolean;
+            experimental: boolean;
+            standard_track: boolean;
+        };
+        support: {
+            [key: string]: BcdSupport | BcdSupport[];
+        }
+    };
+}
+
+export interface BcdDataType {
+    [key: string]: BcdDataType;
+}
+
+export interface BcdData {
+    [key: string]: BcdDataType & BcdSupport;
+}