Usage: Dynamically load other markdown files

Author: vbakke

src/app/app-routing.module.ts

@@ -14,7 +14,8 @@ const routes: Routes = [
   { path: 'circular-heatmap', component: CircularHeatmapComponent },
   { path: 'activity-description', component: ActivityDescriptionComponent },
   { path: 'mapping', component: MappingComponent },
-  { path: 'usage', component: UsageComponent },
+  { path: 'usage', redirectTo: 'usage/' },
+  { path: 'usage/:page', component: UsageComponent },
   { path: 'teams', component: TeamsComponent },
   { path: 'about', component: AboutUsComponent },
   { path: 'userday', component: UserdayComponent },

src/app/component/readme-to-html/readme-to-html.component.css

@@ -2,5 +2,5 @@
     /*background-color: aqua;*/
     padding: 30px;
     padding-top: 0px;
-    
-}
+    max-width: 40rem;
+}

src/app/component/readme-to-html/readme-to-html.component.html

@@ -1,3 +1,3 @@
 <div class="main-section">
-  <div [innerHTML]="toRender"></div>
+  <article [innerHTML]="toRender"></article>
 </div>

src/app/component/teams/teams.component.ts

@@ -13,6 +13,7 @@ export class TeamsComponent implements OnInit {
   teamGroups: Map<string, string[]> = new Map();
 
   constructor(private yaml: ymlService) {}
+  
   ngOnInit(): void {
     this.yaml.setURI('./assets/YAML/meta.yaml');
     // Function sets column header

src/app/component/usage/usage.component.html

@@ -1,3 +1,3 @@
 <app-top-header section="Usage"></app-top-header>
-<app-readme-to-html MDFile="./assets/Markdown Files/USAGE.md">
+<app-readme-to-html class="usage-{{ page }}" MDFile="./assets/Markdown Files/{{ page }}.md">
 </app-readme-to-html>

src/app/component/usage/usage.component.ts

@@ -1,10 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-usage',
   templateUrl: './usage.component.html',
   styleUrls: ['./usage.component.css'],
 })
-export class UsageComponent {
-  constructor() {}
+export class UsageComponent implements OnInit {
+  page: string = 'USAGE';
+  constructor(private route: ActivatedRoute) {}
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      let page = params['page'];
+      if (page.match(/^[\w.-]+$/)) {
+        this.page = page;
+      }
+    });
+  }
 }

src/styles.css

@@ -16,4 +16,8 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
     max-height: 100px;
     float: left;
     margin-right: 10px;
+}
+
+.usage-dimensions img {
+    max-width: 40rem;
 }