diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 32aa3cb0..118c507a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,16 +1,27 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { + Component, + OnInit, + ViewChild, + OnDestroy, + AfterViewInit, +} from '@angular/core'; +import { Router, RouterEvent } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { StorageMap } from '@ngx-pwa/local-storage'; +import { MatSidenav } from '@angular/material/sidenav'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) -export class AppComponent implements OnInit { +export class AppComponent implements OnInit, OnDestroy, AfterViewInit { title = 'ledge'; + @ViewChild('sidenav') SideNavRef: MatSidenav; + routeEvSub: Subscription; + constructor( private route: Router, public translate: TranslateService, @@ -42,7 +53,19 @@ export class AppComponent implements OnInit { }); } + ngAfterViewInit(): void { + this.routeEvSub = this.route.events.subscribe(() => { + if (this.SideNavRef.opened) { + this.SideNavRef.close(); + } + }); + } + openLink(link: string) { window.open(link, '_blank'); } + + ngOnDestroy(): void { + this.routeEvSub.unsubscribe(); + } } diff --git a/src/app/features/periodic-table/atom-dialog/atom-dialog.component.html b/src/app/features/periodic-table/atom-dialog/atom-dialog.component.html index e44013e2..2d2f162f 100644 --- a/src/app/features/periodic-table/atom-dialog/atom-dialog.component.html +++ b/src/app/features/periodic-table/atom-dialog/atom-dialog.component.html @@ -1,4 +1,8 @@

{{data.name}}

+ + discontinued on {{data.discontinued}} + +

首页：{{data.homepage}}

简介：

@@ -30,3 +34,4 @@

{{data.name}}

找不到满意的内容？有错误？欢迎来 Pull Request -> Ledge GitHub

 + diff --git a/src/app/features/periodic-table/atom-dialog/atom-dialog.component.scss b/src/app/features/periodic-table/atom-dialog/atom-dialog.component.scss index f0bd48d2..ea22269d 100644 --- a/src/app/features/periodic-table/atom-dialog/atom-dialog.component.scss +++ b/src/app/features/periodic-table/atom-dialog/atom-dialog.component.scss @@ -16,3 +16,11 @@ p { color: $black; } } + +.discontinued { + display: block; + margin-top: -1.8em; + font-size: 0.8em; + text-indent: 0.1em; + color: gray; +} diff --git a/src/app/features/periodic-table/atom/atom.component.html b/src/app/features/periodic-table/atom/atom.component.html index 7f04e9ce..e8a70ceb 100755 --- a/src/app/features/periodic-table/atom/atom.component.html +++ b/src/app/features/periodic-table/atom/atom.component.html @@ -1,17 +1,21 @@ -
- -

- {{ data.number }} - {{ data.pay }} -

-

- {{ data.symbol }} -

-

{{ data.name }}

+
+

+ {{ data.number }} + {{ data.pay }} +

+

+ {{ data.symbol }} +

+

{{ data.name }}

 

 diff --git a/src/app/features/periodic-table/atom/atom.component.scss b/src/app/features/periodic-table/atom/atom.component.scss index e9ef442c..8807c615 100755 --- a/src/app/features/periodic-table/atom/atom.component.scss +++ b/src/app/features/periodic-table/atom/atom.component.scss @@ -63,3 +63,22 @@ $selected-color: #fff; opacity: 0.5; } } + +.discontinued-dot { + &::after { + width: 8px; + height: 8px; + content: ''; + display: inline-block; + margin-left: 80%; + margin-top: 15%; + border-radius: 50%; + background-color: rgba(86, 86, 86, 0.549); + } +} + +@media screen and (max-width: 1280px) { + .discontinued-dot::after { + margin-top: 0; + } +} diff --git a/src/app/features/periodic-table/periodic-table/periodic-table.component.html b/src/app/features/periodic-table/periodic-table/periodic-table.component.html index 2a64afb4..a0053869 100755 --- a/src/app/features/periodic-table/periodic-table/periodic-table.component.html +++ b/src/app/features/periodic-table/periodic-table/periodic-table.component.html @@ -23,6 +23,7 @@ [selectedCategory]="selectCategory" [metalSelected]="metalClass" (hoverAtom)="showAtomDetails($event)" + [class.discontinued]="atom.discontinued" > diff --git a/src/app/features/periodic-table/support/interfaces.ts b/src/app/features/periodic-table/support/interfaces.ts index 63de1f98..14b03f03 100755 --- a/src/app/features/periodic-table/support/interfaces.ts +++ b/src/app/features/periodic-table/support/interfaces.ts @@ -26,4 +26,5 @@ export interface Atom { pd: string; resources?: AtomResources[]; books?: AtomResources[]; + discontinued?: string; } diff --git a/src/assets/docs/maturities/team-topologies.md b/src/assets/docs/maturities/team-topologies.md index d2ba2419..776dbba9 100644 --- a/src/assets/docs/maturities/team-topologies.md +++ b/src/assets/docs/maturities/team-topologies.md @@ -26,7 +26,7 @@ config: {"legend": ["当前", "未来"]} ``` ```radar - - 能力模型 + - 产品开发者 vs 平台开发者 - 架构设计: 4 -> 5 - 工程实践: 3 -> 5 - 业务认知: 5 -> 3 @@ -41,7 +41,7 @@ config: {"legend": ["产品开发者", "平台开发者"]} ``` ```radar - - 能力模型 + - 产品开发者 vs 赋能教练 - 架构设计: 4 -> 4 - 工程实践: 3 -> 5 - 业务认知: 5 -> 3 @@ -57,7 +57,7 @@ config: {"legend": ["产品开发者", "赋能教练"]} ```radar - - 能力模型 + - 领域特定专家 vs 产品开发者 - 架构设计: 4 -> 4 - 工程实践: 3 -> 1 - 业务认知: 5 -> 2 diff --git a/src/assets/docs/pattern.md b/src/assets/docs/pattern.md index e8b8923a..e8d13510 100644 --- a/src/assets/docs/pattern.md +++ b/src/assets/docs/pattern.md @@ -1,6 +1,6 @@ # 核心：价值驱动 -数字化技术（信息技术）的本质目的是创造价值，它的载体是软件，提供价值的是功能特性。越早发布功能特性，便能越快创造价值。采用逐渐增加功能特定的增量式开发方法，能让我们在最等时间内开发出最小可用（MVP）产品。 +数字化技术（信息技术）的本质目的是创造价值，它的载体是软件，提供价值的是功能特性。越早发布功能特性，便能越快创造价值。采用逐渐增加功能特定的增量式开发方法，能让我们在最短时间内开发出最小可用（MVP）产品。 围绕它周围的优秀技术实践，可以让我们开发出运行良好的软件，并且设计也是好的。这个过程需要自上而下的为之付诸行动。 @@ -343,6 +343,10 @@ ThoughtWorks Tech Lead 模型 > MLOps 是数据科学家和操作专业人员之间进行协作和交流的一种做法，可帮助管理生产机器学习生命周期。 +## GitOps +> GitOps是一种正在流行的DevOps最佳实践，最早是由Weaveworks公司于2017年提出。它结合了基础设施即代码(IaC)，版本控制系统(通常是Git)，持续集成/持续交付(CI/CD)，将Git仓库作为声明基础设施和应用代码的唯一事实来源，并通过Pull Request(PR)来自动化地管理基础设施的开发和部署，并对整个过程的状态变化进行持续监控，审计等。 + + ## ChatOps > ChatOps 是指由对话驱动的开发。 将工具植入到对话当中，使用被关键插件和脚本改良过的聊天机器人，团队能够自动执行任务和协作，效果更好、成本更低、速度更快。 diff --git a/src/assets/docs/practises/devops-platform.md b/src/assets/docs/practises/devops-platform.md index 61873849..ffa78578 100644 --- a/src/assets/docs/practises/devops-platform.md +++ b/src/assets/docs/practises/devops-platform.md @@ -24,13 +24,9 @@ 在数字化高速发展的 VUCA 时代下满足企业高效、高质量的交付目标，企业需要一个能够贯穿整个研发生命周期，覆盖从提出想法到生产上线的全过程的企业级的一站式综合研发平台。 -![度量-持续改进-组织升级](https://uploader.shimo.im/f/aSJU2okShFmP7U4A.png) - - 通过企业级一站式综合研发平台把各个阶段的研发数据打通、可视化研发价值流，从而可以识别效能瓶颈、优化流程。同时把企业内部总结沉淀的最佳实践固化到平台上，以减少各团队探索工具链的学习成本，确保一线团队专注业务系统交付。 - 一站式综合研发平台把企业内部众多的工具链进行整合，提供一致的用户体验，统一的数据模型。平台用户覆盖业务需求分析人员、开发人员、测试人员、运维人员、项目管理等。 -![研发活动数据](https://uploader.shimo.im/f/pmBbEKFMrwvej7il.png) - ## 为什么不建议企业直接采购产品型一站式综合研发平台？ 行业内有不少公司提供一站式综合研发平台的产品，企业在采购这类产品的时候尤其要小心，避免陷入又给众多工具链中增加一个成员的尴尬。 diff --git a/src/assets/docs/solutions/zentao.md b/src/assets/docs/solutions/zentao.md index 4258641a..da8a9ac6 100644 --- a/src/assets/docs/solutions/zentao.md +++ b/src/assets/docs/solutions/zentao.md @@ -1,22 +1,24 @@ # 禅道 ## 禅道DevOps解决方案 - -DevOps是一个合成词，即Development+Operations，是软件开发、测试和运维结合的过程、方法及系统，生命周期包括持续开发、持续集成、持续测试、持续反馈、持续监测、持续部署和持续运维，始终以持续交付为核心目标，倡导多个团队建立良好的沟通和协作,以更快更可靠地创建高质量软件。 - DevOps弥补了瀑布和敏捷过程中开发、测试、运维在整个软件开发周期中相对分离的不足，具有加快交付速度、提高交付质量、减少团队摩擦、实现快速反馈等优势。 -禅道对DevOps和持续集成的支持，包括Git、Subversion版本系统集成，Jenkins构建任务触发，以及ZTF自动化测试调度几个方面。通过禅道自研的ZTF自动化测试工具，可很好地驱动8种单元测试框架、3种自动化测试框架来执行测试，并把最终结果回传给禅道，进行统一的报告展示。禅道ZTF打通了项目管理和持续集成工具之间的沟壑，贯穿持续集成、持续测试、持续部署等DevOps生命周期的不同阶段。 - -![](https://cdn.chanzhi.org/web/data/upload/202007/f_6ce328b80c0e606223e680e2257633f0.webp?v=1065) +DevOps以其迅速响应变更、完善沟通渠道,快速识别漏洞的优势得到广泛采用，但相关支持工具较少，禅道为此提供了DevOps—体化解决方案。 -## 禅道持续集成特性 +![](https://dl.cnezsoft.com/devops/image/devops-001.jpg) + +禅道对DevOps和持续集成的支持，包括Git、Subversion版本系统集成，Jenkins构建任务触发，以及ZTF自动化测试调度几个方面。 +![](https://dl.cnezsoft.com/devops/image/devops-002.jpg) + +通过禅道自研的ZTF自动化测试工具，可很好地驱动8种单元测试框架、5种自动化测试框架来执行测试，并把最终结果回传给禅道，进行统一的报告展示。 +![](https://dl.cnezsoft.com/devops/image/devops-003.jpg) -![](https://www.zentao.net/file.php?f=source/default/wide/zentao1.png&t=png&o=source&s=&v=1598603687) +禅道团队自研的开源自动化测试框架ZTF和通用数据生成器ZenData，加上禅道项目管理软件，构成专业的自动化测试解决方案，可以帮助用户实现规模化自动化测试，提升测试效率，助力DevOps生命周期的持续测试环节。 +![](https://dl.cnezsoft.com/devops/image/devops-004.jpg) ## 联系我们 禅道为您提供专业的 DevOps 解决方案，如果您有更多想了解咨询的内容，欢迎联系我们。 -**4006-8899-23** +4006-8899-23 -[https://www.zentao.net](https://www.zentao.net/) +https://www.zentao.net diff --git a/src/assets/images/logo_no_title.svg b/src/assets/images/logo_no_title.svg new file mode 100644 index 00000000..b6d9343c --- /dev/null +++ b/src/assets/images/logo_no_title.svg @@ -0,0 +1,8 @@ + + + Created with Sketch. + + + + + diff --git a/src/assets/periodic-table.json b/src/assets/periodic-table.json index eee8f937..3fd94716 100755 --- a/src/assets/periodic-table.json +++ b/src/assets/periodic-table.json @@ -629,9 +629,9 @@ "pay": "Os", "symbol": "Sw", "homepage": "https://spacewalkproject.github.io/", - "description":"Linux管理工具Spacewalk是红帽大力支持的一个开源项目，红帽也是该发起人之一。Spacewalk可管理Fedora、红帽、CentOS、SUSE与Debian Linux服务器。当你的数据中心拥有多台Linux服务器时，手动管理将不再是一个好的选择。Spacewalk就可以管理补丁、登录、更新。" + "description":"(discontinued on May 31 2020) Linux管理工具Spacewalk是红帽大力支持的一个开源项目，红帽也是该发起人之一。Spacewalk可管理Fedora、红帽、CentOS、SUSE与Debian Linux服务器。当你的数据中心拥有多台Linux服务器时，手动管理将不再是一个好的选择。Spacewalk就可以管理补丁、登录、更新。", + "discontinued":"2020-05-31" }, - { "name": "Ansible", "category": "config", diff --git a/src/styles/_material-ui.scss b/src/styles/_material-ui.scss index 6222cc8e..9589298c 100644 --- a/src/styles/_material-ui.scss +++ b/src/styles/_material-ui.scss @@ -1,4 +1,4 @@ -@import "./color"; +@import './color'; // Navigation Bar .app-header { @@ -14,6 +14,15 @@ font-size: 14px; } } +.mat-drawer:not(.mat-drawer-side) { + box-shadow: 0px 8px 10px -5px rgba(255, 255, 255, 0.2), + 0px 16px 24px 2px rgba(0, 0, 0, 0.14), + 0px 6px 30px 5px rgba(255, 255, 255, 0.12); +} +.mat-drawer.mat-sidenav { + margin-top: 56px; + position: fixed; +} .mat-toolbar { box-shadow: 0 1px 0 0 $lighter-gray; @@ -27,6 +36,9 @@ .mat-toolbar-row { align-items: stretch; + @media screen and (max-width: 640px) { + padding: 0px 0px; + } } .mat-button { @@ -62,7 +74,7 @@ &:hover { color: $purple; - background-color: rgba($purple, .2); + background-color: rgba($purple, 0.2); } } } diff --git a/src/styles/_mobile.scss b/src/styles/_mobile.scss index 2c06bd31..4274cedc 100644 --- a/src/styles/_mobile.scss +++ b/src/styles/_mobile.scss @@ -1,8 +1,15 @@ .ledge-side-menu { button { + font-size: 1rem; + border-radius: 0px; padding: 0.5em; - width: 8em; + width: 100%; + &.active { + color: $white; + background-color: $purple; + } } + width: 200px; } @media screen and (max-width: 1366px) { .button-logo { @@ -16,7 +23,7 @@ } body { - min-width: auto!important; + min-width: auto !important; } .markdown-toc .right-content { @@ -24,4 +31,3 @@ width: 100%; } } -