fix: fix left bar issue

src/app/presentation/case-study/case-study.component.html

@@ -3,13 +3,13 @@
     <h2>案例（出处见来源）</h2>
     <ul>
       <li *ngFor="let casestudy of cases"
-          (click)="clickCase(casestudy.source)"
+          (click)="getCase(casestudy.source)"
           [ngClass]="casestudy.source === currentSource ? 'active' : '' ">
         <span>{{casestudy.displayName}}</span>
       </li>
     </ul>
   </mat-drawer>
   <mat-drawer-content>
-    <component-markdown-render [src]="src"></component-markdown-render>
+    <component-markdown-render [data]="content"></component-markdown-render>
   </mat-drawer-content>
 </mat-drawer-container>

src/app/presentation/case-study/case-study.component.ts

@@ -1,45 +1,53 @@
-import {Component, OnInit} from '@angular/core';
-import {Title} from '@angular/platform-browser';
-import {StorageMap} from '@ngx-pwa/local-storage';
-import {ActivatedRoute, Params, Router} from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { StorageMap } from '@ngx-pwa/local-storage';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Component({
   selector: 'app-case-study',
   templateUrl: './case-study.component.html',
-  styleUrls: ['./case-study.component.scss']
+  styleUrls: ['./case-study.component.scss'],
 })
 export class CaseStudyComponent implements OnInit {
   cases = [
-    {displayName: '美团', source: 'meituan'},
-    {displayName: 'Ledge', source: 'ledge'},
-    {displayName: '大型银行转型', source: 'tw-banks'},
-    {displayName: 'DaoCloud', source: 'daocloud'},
-    {displayName: '招商银行', source: 'cmb'},
-    {displayName: 'HP', source: 'hp'},
-    {displayName: 'Etsy', source: 'etsy'},
-    {displayName: '中国银行', source: 'china-bank'},
-    {displayName: '携程', source: 'xuecheng'},
-    {displayName: '农业银行', source: 'nonghang'},
-    {displayName: '华为', source: 'huawei'},
-    {displayName: '百度', source: 'baidu'},
-    {displayName: '腾讯', source: 'tencent'},
-    {displayName: '博云', source: 'bocloud'},
-    {displayName: '阿里巴巴', source: 'alibaba'},
-    {displayName: 'Atlassian', source: 'atlassian'},
-    {displayName: '政采云', source: 'zhengcaiyun'},
-    {displayName: '大搜车', source: 'dasouche'},
-    {displayName: '小米', source: 'xiaomi'},
-    {displayName: '微博', source: 'weibo'}
+    { displayName: '美团', source: 'meituan' },
+    { displayName: 'Ledge', source: 'ledge' },
+    { displayName: '大型银行转型', source: 'tw-banks' },
+    { displayName: 'DaoCloud', source: 'daocloud' },
+    { displayName: '招商银行', source: 'cmb' },
+    { displayName: 'HP', source: 'hp' },
+    { displayName: 'Etsy', source: 'etsy' },
+    { displayName: '中国银行', source: 'china-bank' },
+    { displayName: '携程', source: 'xuecheng' },
+    { displayName: '农业银行', source: 'nonghang' },
+    { displayName: '华为', source: 'huawei' },
+    { displayName: '百度', source: 'baidu' },
+    { displayName: '腾讯', source: 'tencent' },
+    { displayName: '博云', source: 'bocloud' },
+    { displayName: '阿里巴巴', source: 'alibaba' },
+    { displayName: 'Atlassian', source: 'atlassian' },
+    { displayName: '政采云', source: 'zhengcaiyun' },
+    { displayName: '大搜车', source: 'dasouche' },
+    { displayName: '小米', source: 'xiaomi' },
+    { displayName: '微博', source: 'weibo' },
   ];
   currentSource: string;
   src: string;
+  content: string;
 
-  constructor(title: Title, private storage: StorageMap, private activatedRoute: ActivatedRoute, private router: Router) {
+  constructor(
+    title: Title,
+    private storage: StorageMap,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private http: HttpClient
+  ) {
     title.setTitle('DevOps 知识平台 Ledge - 案例学习');
   }
 
   ngOnInit(): void {
-    this.activatedRoute.queryParams.subscribe(params => {
+    this.activatedRoute.queryParams.subscribe((params) => {
       const source = params.source;
       if (source) {
         this.configSource(source);
@@ -60,23 +68,28 @@ export class CaseStudyComponent implements OnInit {
   }
 
   private configSource(value: string) {
-    this.currentSource = value;
-    this.src = this.buildSrc(this.currentSource);
+    this.getCase(value);
   }
 
-  clickCase(source: string) {
+  getCase(source: string) {
     this.src = this.buildSrc(source);
     this.currentSource = source;
 
-    this.storage.set('casestudy.last', source).subscribe();
-
-    const queryParams: Params = { source };
-    this.router.navigate(
-      [],
-      {
-        relativeTo: this.activatedRoute,
-        queryParams,
-        queryParamsHandling: 'merge', // remove to replace all query params by provided
+    const headers = new HttpHeaders().set(
+      'Content-Type',
+      'text/plain; charset=utf-8'
+    );
+    this.http
+      .get(this.src, { headers, responseType: 'text' })
+      .subscribe((response) => {
+        this.storage.set('casestudy.last', source).subscribe();
+        this.content = response;
+        const queryParams: Params = { source };
+        this.router.navigate([], {
+          relativeTo: this.activatedRoute,
+          queryParams,
+          queryParamsHandling: 'merge', // remove to replace all query params by provided
+        });
       });
   }
 

src/app/presentation/mobile/mobile.component.html

@@ -1 +1 @@
-<component-markdown-render [src]="'assets/docs/mobile-andorid.md'" showToc="true"></component-markdown-render>
+<component-markdown-render [data]="data" showToc="true"></component-markdown-render>

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

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
+import * as mdData from 'raw-loader!../../../assets/docs/mobile-andorid.md';
 
 @Component({
   selector: 'app-mobile',
   templateUrl: './mobile.component.html',
-  styleUrls: ['./mobile.component.scss']
+  styleUrls: ['./mobile.component.scss'],
 })
 export class MobileComponent implements OnInit {
+  data = mdData.default;
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

src/app/presentation/resources/resources.component.html

@@ -1 +1 @@
-<component-markdown-render [src]="'assets/docs/resources.md'" showToc="true"></component-markdown-render>
+<component-markdown-render [data]="data" showToc="true"></component-markdown-render>

src/app/presentation/resources/resources.component.ts

@@ -1,18 +1,18 @@
 import { Component, OnInit } from '@angular/core';
-import {Title} from '@angular/platform-browser';
+import { Title } from '@angular/platform-browser';
+import * as mdData from 'raw-loader!../../../assets/docs/resources.md';
 
 @Component({
   selector: 'app-resources',
   templateUrl: './resources.component.html',
-  styleUrls: ['./resources.component.scss']
+  styleUrls: ['./resources.component.scss'],
 })
 export class ResourcesComponent implements OnInit {
+  data = mdData.default;
 
   constructor(title: Title) {
     title.setTitle('DevOps 知识平台 Ledge - 相关资源');
   }
 
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

src/app/presentation/solution/solution.component.html

@@ -3,13 +3,13 @@
     <h2>解决方案</h2>
     <ul>
       <li *ngFor="let casestudy of solutions"
-          (click)="clickCase(casestudy.source)"
+          (click)="getCase(casestudy.source)"
           [ngClass]="casestudy.source === currentSource ? 'active' : '' ">
         <span>{{casestudy.displayName}}</span>
       </li>
     </ul>
   </mat-drawer>
   <mat-drawer-content>
-    <component-markdown-render [src]="src"></component-markdown-render>
+    <component-markdown-render [data]="content"></component-markdown-render>
   </mat-drawer-content>
 </mat-drawer-container>

src/app/presentation/solution/solution.component.ts

@@ -2,25 +2,31 @@ import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { ActivatedRoute, Params, Router } from '@angular/router';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Component({
   selector: 'app-solution',
   templateUrl: './solution.component.html',
-  styleUrls: ['./solution.component.scss']
+  styleUrls: ['./solution.component.scss'],
 })
 export class SolutionComponent implements OnInit {
-  solutions = [
-    {displayName: 'Coding', source: 'coding'},
-  ];
+  solutions = [{ displayName: 'Coding', source: 'coding' }];
   currentSource: string;
   src: string;
+  content: string;
 
-  constructor(title: Title, private storage: StorageMap, private activatedRoute: ActivatedRoute, private router: Router) {
+  constructor(
+    title: Title,
+    private storage: StorageMap,
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private http: HttpClient
+  ) {
     title.setTitle('DevOps 知识平台 Ledge - 解决方案');
   }
 
   ngOnInit(): void {
-    this.activatedRoute.queryParams.subscribe(params => {
+    this.activatedRoute.queryParams.subscribe((params) => {
       const source = params.source;
       if (source) {
         this.configSource(source);
@@ -41,23 +47,29 @@ export class SolutionComponent implements OnInit {
   }
 
   private configSource(value: string) {
-    this.currentSource = value;
-    this.src = this.buildSrc(this.currentSource);
+    this.getCase(value);
   }
 
-  clickCase(source: string) {
+  getCase(source: string) {
     this.src = this.buildSrc(source);
     this.currentSource = source;
 
-    this.storage.set('solution.last', source).subscribe();
+    const headers = new HttpHeaders().set(
+      'Content-Type',
+      'text/plain; charset=utf-8'
+    );
+    this.http
+      .get(this.src, { headers, responseType: 'text' })
+      .subscribe((response) => {
+        const queryParams: Params = { source };
+        this.storage.set('solution.last', source).subscribe();
+        this.content = response;
 
-    const queryParams: Params = { source };
-    this.router.navigate(
-      [],
-      {
-        relativeTo: this.activatedRoute,
-        queryParams,
-        queryParamsHandling: 'merge', // remove to replace all query params by provided
+        this.router.navigate([], {
+          relativeTo: this.activatedRoute,
+          queryParams,
+          queryParamsHandling: 'merge', // remove to replace all query params by provided
+        });
       });
   }
 

src/app/shared/components/markdown-render/markdown-render.component.ts

@@ -25,9 +25,6 @@ import Tocify, { TocItem } from './tocify';
 })
 export class MarkdownRenderComponent
   implements OnInit, OnChanges, AfterViewInit {
-  @Input()
-  src: string;
-
   @Input()
   showToc = false;
   @Input()