feat: init solution for community

src/app/app-routing.module.ts

@@ -14,6 +14,7 @@ import { ToolsetComponent } from './shared/toolset/toolset.component';
 import { LedgeHelperComponent } from './presentation/ledge-helper/ledge-helper.component';
 import { ThinkTankComponent } from './presentation/think-tank/think-tank.component';
 import { ResourcesComponent } from './presentation/resources/resources.component';
+import { SolutionComponent } from './presentation/solution/solution.component';
 
 const routes: Routes = [
   {path: '', pathMatch: 'full', redirectTo: '/home'},
@@ -69,6 +70,10 @@ const routes: Routes = [
     path: 'think-tank',
     component: ThinkTankComponent
   },
+  {
+    path: 'solution',
+    component: SolutionComponent
+  },
   {
     path: 'helper',
     component: LedgeHelperComponent

src/app/app.component.html

@@ -8,6 +8,7 @@
       <button mat-button routerLink="/pattern" routerLinkActive="active">模式与原则</button>
       <button mat-button routerLink="/practise" routerLinkActive="active">最佳实践</button>
       <button mat-button routerLink="/manual" routerLinkActive="active">操作手册</button>
+      <button mat-button routerLink="/solution" routerLinkActive="active">解决方案</button>
       <button mat-button routerLink="/tool" routerLinkActive="active">工具</button>
       <button mat-button routerLink="/mobile" routerLinkActive="active">移动端</button>
       <button mat-button routerLink="/maturity" routerLinkActive="active">度量</button>

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { AwesomeToolComponent } from './presentation/awesome-tool/awesome-tool.c
 import { MobileComponent } from './presentation/mobile/mobile.component';
 import { LedgeHelperComponent } from './presentation/ledge-helper/ledge-helper.component';
 import { ThinkTankComponent } from './presentation/think-tank/think-tank.component';
+import { SolutionComponent } from './presentation/solution/solution.component';
 
 @NgModule({
   declarations: [
@@ -51,7 +52,8 @@ import { ThinkTankComponent } from './presentation/think-tank/think-tank.compone
     AwesomeToolComponent,
     MobileComponent,
     LedgeHelperComponent,
-    ThinkTankComponent
+    ThinkTankComponent,
+    SolutionComponent
   ],
   imports: [
     SharedModule,

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

@@ -0,0 +1,15 @@
+<mat-drawer-container class="solution">
+  <mat-drawer mode="side" opened class="left-drawer">
+    <h2>解决方案</h2>
+    <ul>
+      <li *ngFor="let casestudy of solutions"
+          (click)="clickCase(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>
+  </mat-drawer-content>
+</mat-drawer-container>

src/app/presentation/solution/solution.component.scss

@@ -0,0 +1,44 @@
+@import '~@angular/material/theming';
+@import '../../../styles/behavior';
+
+.solution {
+  min-height: 600px;
+  height: calc(100% - 64px);
+
+  .active {
+    background-color: #ff4081;
+    color: #fff;
+  }
+}
+
+.left-drawer {
+  width: 15%;
+  min-width: 200px;
+  min-height: 100vh;
+
+  h2 {
+    padding: 20px 0;
+    text-align: center;
+    font-weight: bold;
+    border-bottom: 1px solid rgba(0,0,0,.12);
+
+    margin-bottom: 0;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      font-size: 1.2rem;
+      padding: 1rem;
+      display: block;
+
+      @extend .noselect;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SolutionComponent } from './solution.component';
+
+describe('SolutionComponent', () => {
+  let component: SolutionComponent;
+  let fixture: ComponentFixture<SolutionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SolutionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SolutionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,67 @@
+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';
+
+@Component({
+  selector: 'app-solution',
+  templateUrl: './solution.component.html',
+  styleUrls: ['./solution.component.scss']
+})
+export class SolutionComponent implements OnInit {
+  solutions = [
+    {displayName: 'Coding', source: 'coding'},
+  ];
+  currentSource: string;
+  src: string;
+
+  constructor(title: Title, private storage: StorageMap, private activatedRoute: ActivatedRoute, private router: Router) {
+    title.setTitle('DevOps 知识平台 Ledge - 解决方案');
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.queryParams.subscribe(params => {
+      const source = params.source;
+      if (source) {
+        this.configSource(source);
+      } else {
+        this.getSourceFromLocalStorage();
+      }
+    });
+  }
+
+  private getSourceFromLocalStorage() {
+    this.storage.get('solution.last').subscribe((value: string) => {
+      if (!!value) {
+        this.configSource(value);
+      } else {
+        this.configSource('coding');
+      }
+    });
+  }
+
+  private configSource(value: string) {
+    this.currentSource = value;
+    this.src = this.buildSrc(this.currentSource);
+  }
+
+  clickCase(source: string) {
+    this.src = this.buildSrc(source);
+    this.currentSource = source;
+
+    this.storage.set('solution.last', source).subscribe();
+
+    const queryParams: Params = { source };
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.activatedRoute,
+        queryParams,
+        queryParamsHandling: 'merge', // remove to replace all query params by provided
+      });
+  }
+
+  private buildSrc(source: string) {
+    return `assets/docs/solutions/${source}.md`;
+  }
+}

src/assets/docs/solutions/coding.md

@@ -0,0 +1 @@
+# Coding DevOps 平台