feat: support for multiple think tank

projects/ledge-render/src/lib/components/ledge-checklist/ledge-checklist.component.ts

@@ -37,6 +37,7 @@ export class LedgeChecklistComponent implements OnInit, OnChanges {
         subitems: []
       };
       for (const child of item.children) {
+        console.log(child);
         const splitName = child.name.split('：');
         checklist.subitems.push({
           title: splitName[0],

src/app/app.component.html

@@ -34,10 +34,18 @@
   <button mat-button routerLink="/practise" routerLinkActive="active">{{ 'practises' | translate}}</button>
   <button mat-button routerLink="/manual" routerLinkActive="active">{{ 'manual' | translate}}</button>
   <button mat-button routerLink="/solution" routerLinkActive="active">{{ 'solution' | translate}}</button>
-  <button mat-button routerLink="/think-tank" routerLinkActive="active">{{ 'think-tank' | translate}}</button>
+
+  <mat-menu #tankMenu="matMenu" backdropClass="nav-menu-wrapper">
+    <button mat-menu-item routerLink="/think-tank/qa" routerLinkActive="active">QA {{ 'think-tank' | translate}}</button>
+    <button mat-menu-item routerLink="/think-tank/mobile-android" routerLinkActive="active">Android {{ 'think-tank' | translate}}</button>
+  </mat-menu>
+
+  <button mat-button [matMenuTriggerFor]="tankMenu">
+    {{ 'think-tank' | translate}}
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
 
   <mat-menu #appMenu="matMenu" backdropClass="nav-menu-wrapper">
-    <button mat-menu-item routerLink="/mobile" routerLinkActive="active">{{ 'mobile' | translate}}</button>
     <button mat-menu-item routerLink="/maturity" routerLinkActive="active">{{ 'maturity' | translate}}</button>
     <button mat-menu-item routerLink="/report" routerLinkActive="active">{{ 'report' | translate}}</button>
     <button mat-menu-item routerLink="/resources" routerLinkActive="active">{{ 'resources' | translate}}</button>

src/app/features/markdown-render/markdown-render.component.ts

@@ -65,7 +65,12 @@ export class MarkdownRenderComponent
     this.render();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {}
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      this.markdownService.compile(changes.data.currentValue);
+      this.render();
+    }
+  }
 
   @HostListener('window:scroll', ['$event'])
   handleScroll(event) {

src/app/presentation/mobile/mobile.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import * as mdData from 'raw-loader!../../../assets/docs/mobile-andorid.md';
+import * as mdData from 'raw-loader!../../../assets/docs/think-tank/mobile-android.md';
 
 @Component({
   selector: 'app-mobile',

src/app/presentation/think-tank/think-tank.component.html

@@ -1 +1,3 @@
-<component-markdown-render [data]="data" showToc="true"></component-markdown-render>
+<div *ngIf="content">
+  <component-markdown-render [data]="content" showToc="true"></component-markdown-render>
+</div>

src/app/presentation/think-tank/think-tank.component.ts

@@ -1,18 +1,57 @@
 import { Component, OnInit } from '@angular/core';
-import * as mdData from 'raw-loader!../../../assets/docs/think-tank/qa.md';
 import { Title } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Thinktanks, thinktanks } from './thinktanks';
 
 @Component({
   selector: 'app-think-tank',
   templateUrl: './think-tank.component.html',
   styleUrls: ['./think-tank.component.scss'],
 })
 export class ThinkTankComponent implements OnInit {
-  data = mdData.default;
+  currentSource: string;
+  src: string;
+  content: string;
+  tanks: Thinktanks = thinktanks;
 
-  constructor(title: Title) {
-    title.setTitle('Ledge DevOps 知识平台 - 智库');
+  constructor(
+    private title: Title,
+    private activatedRoute: ActivatedRoute,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit(): void {
+    this.activatedRoute.paramMap.subscribe((p) => {
+      const param = p.get('tank');
+      const currentCase = this.tanks.find((ca) => ca.source === param);
+      this.title.setTitle(
+        `${currentCase.displayName} DevOps 案例学习（互联网公司/传统公司） - Ledge DevOps 知识平台`
+      );
+      this.configSource(param);
+    });
+  }
+
+  private configSource(value: string) {
+    this.getCase(value);
   }
 
-  ngOnInit(): void {}
+  async getCase(source: string) {
+    this.src = this.buildSrc(source);
+    this.currentSource = source;
+
+    const headers = new HttpHeaders().set(
+      'Content-Type',
+      'text/plain; charset=utf-8'
+    );
+    this.http
+      .get(this.src, { headers, responseType: 'text' })
+      .subscribe((response) => {
+        this.content = response;
+      });
+  }
+
+  private buildSrc(source: string) {
+    return `assets/docs/think-tank/${source}.md`;
+  }
 }

src/app/presentation/think-tank/think-tank.module.ts

@@ -4,11 +4,13 @@ import { CustomMaterialModule } from '../../shared/custom-material.module';
 import { SharedModule } from '../../shared/shared.module';
 import { RouterModule } from '@angular/router';
 import { ThinkTankComponent } from './think-tank.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [ThinkTankComponent],
   imports: [
     CommonModule,
+    HttpClientModule,
     CustomMaterialModule,
     SharedModule,
     RouterModule.forChild([

src/app/presentation/think-tank/thinktanks.ts

@@ -0,0 +1,13 @@
+export interface Thinktank {
+  displayName: string;
+  source: string;
+  default?: boolean;
+}
+
+export type Thinktanks = Array<Thinktank>;
+
+// todo: 优先级根据内容的质量重新排序。现在的是后来的在后面  + 内容多的在前面，随机组合
+export const thinktanks: Thinktanks = [
+  { displayName: 'QA', source: 'qa', default: true },
+  { displayName: 'Android', source: 'mobile-android', default: true },
+];

src/assets/docs/help.md

@@ -3,7 +3,7 @@
 ```checklist
 - [ ] Eating
   - [ ] Today
-    - [ ] breakfast
+    - [x] breakfast
     - [ ] brunch
     - [ ] elevenses
     - [ ] lunch