[home]开源官网初始化

2022-02-02 22:49:50 +08:00
parent 9347097905
commit c47706be17
132 changed files with 15971 additions and 1 deletions
--- a/home/src/CdnTransfer.js
+++ b/home/src/CdnTransfer.js
@@ -0,0 +1,11 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+
+export default function transfer(imageUrl) {
+    const {siteConfig} = useDocusaurusContext();
+    const {cdnUrl} = siteConfig.customFields;
+    if (cdnUrl !== null && imageUrl !== undefined && imageUrl !== null) {
+        return cdnUrl + imageUrl;
+    } else {
+        return imageUrl;
+    }
+}
--- a/home/src/constants.js
+++ b/home/src/constants.js
@@ -0,0 +1,171 @@
+import React from 'react'
+
+import Translate, {translate} from '@docusaurus/Translate'
+
+
+export const features = [{
+    title: translate({
+        message: '开箱即用'
+    }),
+    description: (
+        <>
+            <Translate values={{
+                TANCLOUD: <strong>TANCLOUD</strong>,
+                SAAS: <strong>SAAS</strong>,
+                console: <a href={'https://www.console.tancloud.cn'}><strong>注册登陆</strong></a>,
+                authorization: <strong>authorization</strong>,
+                simple: <strong>simple</strong>,
+                useful: <strong>useful</strong>,
+                interface: <strong>扩展接口</strong>,
+                sample: <strong>样例</strong>,
+                doc: <strong>文档</strong>,
+                br: <br/>
+            }}>
+                {'中小团队和个人无需再为了监控自己的网站资源，而去部署一套繁琐的监控系统。往往有时候，那套监控系统比自身网站消耗的资源还大。' +
+                '{TANCLOUD} 提供{SAAS}云版本，{console}即可开始您的服务监控。{br}' +
+                '安全是最重要的，我们对账户密钥和监控密钥全链路加密。'
+                }
+            </Translate>
+        </>
+    ),
+}, {
+    title: translate({
+        message: '多支持与自定义'
+    }),
+    description: (
+        <>
+            <Translate values={{
+                WebSockets: <strong>WebSockets</strong>,
+                Servlet: <strong>Servlet</strong>,
+                JaxRs: <strong>JAX-RS</strong>,
+                native: <strong>Native</strong>,
+                SpringBoot: <strong>Spring Boot</strong>,
+                SpringWebFlux: <strong>Spring WebFlux</strong>,
+                Javalin: <strong>Javalin</strong>,
+                Quarkus: <strong>Quarkus</strong>,
+                Ktor: <strong>Ktor</strong>,
+                Micronaut: <strong>Micronaut</strong>,
+                Solon: <strong>Solon</strong>,
+                Jfinal: <strong>Jfinal</strong>,
+                br: <br/>
+            }}>
+                {'TANCLOUD目前支持对网站，API，PING连通性，端口可用性，MYSQL数据库等的监控，不久我们将兼容 prometheus 协议，提供更多的监控类型和性能指标。{br}' +
+                '我们提供了更自由化的阈值告警配置，支持邮箱，短信，webhook等告警通知，更多三方应用通知正在集成中。{br}' +
+                '不同团队的监控需求千变万化，我们提供自定义监控，仅需配置YML就能快速接入监控系统。'
+                }
+            </Translate>
+        </>
+    ),
+},
+    {
+        title: translate({
+            message: '拥抱开源'
+        }),
+        description: (
+            <>
+                <Translate values={{
+                    jwt: <strong>JWT</strong>,
+                    basic: <strong>Basic Auth</strong>,
+                    digest: <strong>Digest Auth</strong>,
+                    dynamic: <strong>Dynamic</strong>,
+                    perm: <strong>permissions</strong>,
+                    dynamicCn: <strong>动态修改权限</strong>,
+                    high: <strong>High performance</strong>,
+                    highCn: <strong>高性能</strong>,
+                    tree: <strong>Dictionary Matching Tree</strong>,
+                    treeCn: <strong>改进的字典匹配树</strong>,
+                    br: <br/>
+                }}>
+                    {'TANCLOUD监控系统代码开源，非常欢迎任何对此有兴趣的同学参与中来，我们一起进步，丰富的资源文档正在完善中。{br}' +
+                    '我们相信开源改变世界！'
+                    }
+                </Translate>
+            </>
+        ),
+    }]
+
+export const friendLinks = [
+    {
+        img: 'ShenYu_logo.png',
+        alt: 'ShenYu',
+        url: 'https://dromara.org/projects/soul/overview/'
+    }, {
+        img: 'maxkey_logo.png',
+        alt: 'MaxKey',
+        url: 'https://maxkey.top/'
+    }, {
+        img: 'tlog_logo.png',
+        alt: 'TLog',
+        url: 'https://yomahub.com/tlog/'
+    }, {
+        img: 'hutool_logo.jpg',
+        alt: 'Hutool',
+        url: 'https://hutool.cn/'
+    }, {
+        img: 'satoken_logo.png',
+        alt: 'Sa-Token',
+        url: 'http://sa-token.dev33.cn/'
+    }, {
+        img: 'justauth_logo.png',
+        alt: 'Justauth',
+        url: 'https://justauth.wiki/'
+    }, {
+        img: 'pha_logo.jfif',
+        alt: 'pha_api',
+        url: 'https://www.phalapi.net/'
+    }, {
+        img: 'liteflow_logo.png',
+        alt: 'LiteFlow',
+        url: 'https://yomahub.com/liteflow/'
+    }
+]
+
+export const mediaPartners = [
+    {
+        img: 'dromara_qr.png',
+        alt: 'Dromara',
+        url: 'https://mp.weixin.qq.com/s/Q3b7ZE802IMF6MwIPJIGQA'
+    },
+    {
+        img: 'JavaHouDuan_logo.png',
+        alt: 'JavaHouDuan',
+        url: 'https://mp.weixin.qq.com/s/Ylq51a7Av8ZRuH811xZnDA'
+    }
+]
+
+
+export const SetupExample = `
+<dependency>
+    <groupId>com.usthe.sureness</groupId>
+    <artifactId>sureness-core</artifactId>
+    <version>1.0.6</version>
+</dependency>
+
+compile group: 'com.usthe.sureness', name: 'sureness-core', version: '1.0.6'
+`
+
+export const SurenessIntegration = `
+    @Override
+    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
+            throws IOException, ServletException {
+        try {
+            SubjectSum subject = SurenessSecurityManager.getInstance().checkIn(servletRequest);
+        } catch (IncorrectCredentialsException | UnknownAccountException | ExpiredCredentialsException e1) {
+            logger.debug("this request account info is illegal");
+            responseWrite(ResponseEntity
+                    .status(HttpStatus.UNAUTHORIZED).body(e1.getMessage()), servletResponse);
+            return;
+        } catch (UnauthorizedException e4) {
+            logger.debug("this account can not access this resource");
+            responseWrite(ResponseEntity
+                    .status(HttpStatus.FORBIDDEN).body(e4.getMessage()), servletResponse);
+            return;
+        } catch (RuntimeException e) {
+            logger.error("other exception happen: ", e);
+            responseWrite(ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build(),
+                    servletResponse);
+            return;
+        }
+        filterChain.doFilter(servletRequest, servletResponse);
+    }
+`
--- a/home/src/css/buttons.css
+++ b/home/src/css/buttons.css
@@ -0,0 +1,14 @@
+html[data-theme=dark] .button {
+    --ifm-button-border-color: transparent;
+}
+
+.button--secondary {
+    background-color: var(--ifm-color-primary);
+    color: #fff;
+    font-family: 'IBM Plex Mono';
+    font-size: 1em;
+}
+
+body .button.button--secondary {
+    color: var(--ifm-color-white)!important;
+}
--- a/home/src/css/custom.css
+++ b/home/src/css/custom.css
@@ -0,0 +1,280 @@
+@import url(navbar.css);
+@import url(docsearch.css);
+@import url(hero.css);
+@import url(buttons.css);
+
+:root {
+    --ifm-color-primary: #7228B5;
+    --ifm-color-primary-dark: #6228B5;
+    --ifm-color-primary-darker: #5228B5;
+    --ifm-color-primary-darkest: #5128B5;
+    --ifm-color-primary-light: #7228B5;
+    --ifm-color-primary-lighter: #8228B5;
+    --ifm-color-primary-lightest: #9228B5;
+    --ifm-navbar-link-hover-color: var(--ifm-color-primary);
+    --ifm-background-color: #fafafa;
+    --ifm-code-font-size: 95%;
+    --ifm-navbar-link-color: #000;
+    --ifm-font-family-base: 'IBM Plex Sans', PT Sans, Montserrat, Lato;
+    --ifm-font-family-monospace: 'IBM Plex Mono', PT Sans, Open Sans, Roboto Slab, Roboto Condensed;
+    --ifm-button-padding-horizontal: 0.55rem;
+    --ifm-button-padding-vertical: .7rem;
+    --ifm-menu-color: #000;
+    --ifm-menu-color-background-active: transparent;
+    --ifm-toc-link-color: #000;
+    --ifm-table-border-color: #efefef;
+    --ifm-navbar-height: 85px;
+    --ifm-button-border-width: 0;
+
+    --wdio-spacing-vertical: 60px;
+    --wdio-link-background-color: #eee0d7;
+    --wdio-link-color: #000;
+    --wdio-section-background-color: #fff;
+    --wdio-dark-section-background-color: #efefef;
+}
+
+html[data-theme=dark] {
+    --wdio-link-background-color: #4e1e02;
+    --wdio-link-color: #fff;
+    --ifm-menu-color: #fff;
+    --ifm-table-border-color: var(--ifm-color-emphasis-300);
+    --ifm-toc-link-color: #fff;
+}
+
+@media (max-width: 996px) {
+    :root {
+        --wdio-spacing-vertical: 20px;
+    }
+}
+
+@media (max-width: 500px) {
+    :root {
+        --wdio-spacing-vertical: 10px;
+    }
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1) {
+    :root {
+        --ifm-line-height-base: 1.85;
+    }
+}
+
+.menu__link {
+    font-weight: bold;
+}
+
+.menu__link {
+    font-size: 1.1em;
+}
+
+.menu__list .menu__list {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+.menu__list .menu__list .menu__list-item {
+    margin: 0;
+}
+
+.menu__list .menu__list .menu__list-item .menu__link {
+    border-left: 1px solid transparent;
+}
+
+.menu__list .menu__list .menu__list-item .menu__link:hover,
+.menu__list .menu__list .menu__list-item .menu__link--active {
+    border-left: 1px solid var(--ifm-color-primary);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.menu__list .menu__list .menu__list-item .menu__link {
+    font-size: 0.9em;
+    font-weight: normal;
+}
+
+.menu__list .menu__list .menu__list-item .menu__link--active {
+    font-weight: bold;
+    color: var(--wdio-link-color);
+}
+
+.footer__links {
+    width: 75%;
+    float: right;
+}
+.footer__bottom {
+    width: 25%;
+}
+.footer__bottom > div {
+    text-align: left;
+}
+.footer--dark {
+    --ifm-footer-background-color: #20232a;
+    --ifm-footer-padding-vertical: 85px;
+}
+.footer__copyright {
+    font-size: .8em;
+    text-align: left;
+}
+
+/*.footer__link-item[target="_blank"]:after {*/
+/*    padding: 0 4px;*/
+/*    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100' width='15' height='15'%3E%3Cpath fill='gray' d=' M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0, 0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z '%3E%3C/path%3E%3Cpolygon fill='gray' points=' 45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8, 14.9 62.8,22.9 71.5,22.9 '%3E%3C/polygon%3E%3C/svg%3E")*/
+/*}*/
+
+html[data-theme=dark] {
+    --wdio-section-background-color: var(--ifm-footer-background-color);
+    --wdio-dark-section-background-color: #18191A;
+}
+
+.docusaurus-highlight-code-line {
+    background-color: #484d5b;
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+}
+
+.features_src-pages- h3 {
+    text-align: center;
+}
+.features_src-pages- .featureImage_src-pages- {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 20px;
+}
+
+.twitterProfile,
+.githubProfile {
+    margin-left: 10px;
+}
+.twitterProfile svg,
+.githubProfile svg {
+    width: 23px;
+    color: #1B98E4;
+    transform: translate(0, 3px);
+}
+
+.githubProfile:before {
+    content: '';
+    width: 27px;
+    height: 25px;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
+
+html[data-theme="dark"] .githubProfile:before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+img[alt^=Support] {
+    width: 20px;
+    margin-right: 5px;
+    display: inline-block;
+}
+
+.main-wrapper .markdown p > a,
+.main-wrapper .container p > a {
+    background-color: var(--wdio-link-background-color);
+    color: var(--wdio-link-color);
+    text-decoration: none!important;
+    border-bottom: 1px solid var(--ifm-color-primary);
+    padding: 2px;
+}
+.main-wrapper .container .admonition p > a {
+    background-color: transparent;
+    color: inherit;
+    text-decoration: underline!important;
+    border-bottom: 0;
+}
+
+.main-wrapper .markdown p > a:hover,
+.main-wrapper .container p > a:hover {
+    color: var(--ifm-color-primary)
+}
+
+article thead {
+    background-color: var(--ifm-table-border-color);
+    font-family: 'IBM Plex Mono';
+    text-align: left;
+}
+
+h1, h2, h3 {
+    font-weight: 400;
+}
+
+.prism-code > div {
+    background-color: var(--ifm-table-border-color)!important;
+}
+.darkSection .prism-code > div {
+    background-color: var(--wdio-section-background-color)!important;
+}
+html[data-theme=dark] .prism-code > div {
+    background-color: #282B36!important;
+}
+div[class^='codeBlockTitle'] {
+    background-color: var(--ifm-table-border-color)!important;
+    border-bottom: var(--ifm-color-emphasis-300) 1px solid;
+}
+html[data-theme=dark] div[class^='codeBlockTitle'] {
+    background-color: #282B36!important;
+}
+div[role="tabpanel"] .prism-code {
+    border-top-left-radius: 0;
+}
+.tabs__item:hover {
+    border-bottom-left-radius: 0;
+}
+.markdown > div > .margin-vert--md {
+    margin-top: 0!important;
+}
+
+a code {
+    background-color: transparent;
+}
+
+.highlightSection .token-line {
+    font-size: 90%!important
+}
+
+.highlightSection .prism-code:before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background: #ff5f56;
+    display: block;
+    border-radius: 50%;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+}
+
+.highlightSection .prism-code:after {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background: #ffbd2e;
+    display: block;
+    border-radius: 50%;
+    position: absolute;
+    top: 12px;
+    left: 32px;
+}
+
+.highlightSection .prism-code > div {
+    padding-top: calc(var(--ifm-pre-padding) + 5px);
+}
+.highlightSection .prism-code > div:before {
+    content: "";
+    display: block;
+    width: 12px;
+    height: 12px;
+    background: #27C941;
+    border-radius: 50%;
+    position: absolute;
+    top: 12px;
+    left: 52px;
+}
+
+div[role="tabpanel"] .margin-vert--md {
+    margin-top: 0!important;
+    margin-bottom: 0!important;
+}
--- a/home/src/css/docsearch.css
+++ b/home/src/css/docsearch.css
@@ -0,0 +1,21 @@
+.navbar .DocSearch-Button {
+    height: 30px;
+}
+
+.navbar .DocSearch-Button-Placeholder {
+    font-size: 1.1rem;
+    font-family: 'IBM Plex Mono';
+    color: #999
+}
+
+body .navbar .DocSearch-Search-Icon {
+    width: 15px;
+    height: 15px;
+    color:#999
+}
+
+.navbar .DocSearch-Button-Key {
+    width: 18px;
+    height: 16px;
+    top: 0px;
+}
--- a/home/src/css/hero.css
+++ b/home/src/css/hero.css
@@ -0,0 +1,38 @@
+.hero--primary {
+    --ifm-hero-background-color: #fff;
+    --ifm-hero-text-color: #000;
+}
+
+html[data-theme=dark] .hero--primary {
+    --ifm-hero-background-color: var(--ifm-footer-background-color);
+    --ifm-hero-text-color: #fff;
+}
+
+.hero__title {
+    background-size: 110%;
+    color: transparent;
+    width: 100%;
+    max-width: 600px;
+    margin: 0 auto;
+    height: 280px;
+}
+
+.hero__subtitle {
+    font-size: 2em;
+    max-width: 600px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+@media (max-width: 400px) {
+    .hero__subtitle {
+        font-size: 1.3em;
+    }
+}
+
+#fblike {
+    height: 20px;
+}
+#fblike, #twitter-widget-1 {
+    margin-right: 20px;
+}
--- a/home/src/css/navbar.css
+++ b/home/src/css/navbar.css
@@ -0,0 +1,92 @@
+:root {
+    --ifm-navbar-background-color: #efefef;
+}
+
+html[data-theme=dark] {
+    --ifm-navbar-link-color: #ffffff;
+    --ifm-navbar-background-color: #000000;
+}
+
+.navbar {
+    background: var(--ifm-navbar-background-color);
+    text-align: left;
+    padding: 0;
+    height: 60px;
+}
+
+.navbar__items--right {
+    margin-right: 20px;
+}
+
+.navbar .navbar__items > .navbar__brand {
+    height: 40px;
+    margin: 5px 10px 10px 25px;
+}
+
+.navbar .navbar-sidebar .navbar__brand {
+    margin-left: 8px;
+}
+
+.navbar__link {
+    font-size: 16px;
+}
+
+@media (max-width: 996px) {
+    .navbar__toggle {
+        margin-left: 1rem;
+    }
+}
+
+.header-console-link {
+    background-color: var(--ifm-color-primary);
+    color: #fff;
+    border-radius: 4px;
+    margin-right: 30px;
+}
+
+.header-github-link:hover {
+    opacity: 0.6;
+}
+
+.header-github-link:before {
+    content: '';
+    width: 30px;
+    height: 30px;
+    display: flex;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+}
+.teamProfile {
+    margin-bottom: 20px;
+}
+.githubProfile {
+    margin-left: 15px;
+}
+.githubProfile:before {
+    content: '';
+    display: inline-block;
+    transform: translate(0, 3px);
+    height: 20px;
+    width: 20px;
+}
+html[data-theme="dark"] .header-github-link:before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+.toggle_node_modules-\@docusaurus-theme-classic-lib-next-theme-Toggle- {
+    width: 0
+}
+
+body .react-toggle-track {
+    width: 55px;
+    height: 30px;
+}
+
+body .react-toggle-track-x {
+    right: 15px;
+}
+
+body .react-toggle-thumb {
+    top: 4px;
+    left: 3px;
+}
--- a/home/src/pages/components/Feature.js
+++ b/home/src/pages/components/Feature.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import clsx from 'clsx'
+import styles from './Feature.module.css'
+import cdnTransfer from '../../CdnTransfer'
+
+export default function Feature({ imageUrl, title, description }) {
+    const imgUrl = cdnTransfer(imageUrl)
+    return (
+        <div className={clsx('col col--4', styles.feature)}>
+            {imgUrl && (
+                <div className="text--center">
+                    <img className={styles.featureImage} src={imgUrl} alt={title} />
+                </div>
+            )}
+            <h3>{title}</h3>
+            <p>{description}</p>
+        </div>
+    )
+}
--- a/home/src/pages/components/Feature.module.css
+++ b/home/src/pages/components/Feature.module.css
@@ -0,0 +1,15 @@
+.features {
+    display: flex;
+    align-items: center;
+}
+
+.featureImage {
+    height: 200px;
+    width: 200px;
+}
+
+.features h3 {
+    font-size: 1.7em;
+    font-weight: 500;
+    text-align: left;
+}
--- a/home/src/pages/components/Highlight.js
+++ b/home/src/pages/components/Highlight.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import clsx from 'clsx'
+
+import styles from './highlight.module.css'
+
+export default function Highlight({ reversed, title, img, text, isDark }) {
+    const left = <div className={clsx('col col--6', styles.featureImage, reversed ? styles.featureImageReversed : '')}>{img}</div>
+    const right = (
+        <div className={clsx('col col--6', styles.featureContent, reversed ? styles.featureContentReversed : '')}>
+            <h3 className={styles.featureTitle}>{title}</h3>
+            {text}
+        </div>
+    )
+
+    return (
+        <section className={clsx('highlightSection', isDark ? styles.darkSection + ' darkSection' : '')}>
+            <div className="container">
+                <div className="row">
+                    {reversed ? (
+                        <>
+                            {right}
+                            {left}
+                        </>
+                    ) : (
+                        <>
+                            {left}
+                            {right}
+                        </>
+                    )}
+                </div>
+            </div>
+        </section>
+    )
+}
--- a/home/src/pages/components/LogoCarousel.js
+++ b/home/src/pages/components/LogoCarousel.js
@@ -0,0 +1,96 @@
+import React from 'react'
+import clsx from 'clsx'
+import styles from './LogoCarousel.module.css'
+
+const INTERVAL_LENGTH = 5000
+const LOGO_WIDTH = 150
+const cdnUrl = 'https://cdn.jsdelivr.net/gh/usthe/sureness@gh-pages/img/icons/'
+
+let ticks = 0
+
+export default class LogoCarousel extends React.Component {
+    constructor (props) {
+        super(props)
+        this.state = {
+            position: -0,
+            activePage: 0,
+            swapInterval: 0,
+            pages: Math.ceil(props.logos ? props.logos.length / 6 : 1),
+            margin: 70
+        }
+
+        this.imgUrl = 
+
+        this.containerRef = React.createRef()
+    }
+
+    componentDidMount() {
+        const rect = this.containerRef.current.getBoundingClientRect()
+        const logosPerPage = Math.floor(rect.width / LOGO_WIDTH)
+        this.setState({
+            swapInterval: setInterval(this.nextPage.bind(this), INTERVAL_LENGTH),
+            pages: Math.ceil(this.props.logos ? this.props.logos.length / logosPerPage : 1),
+            margin: rect.width < 700 ? 0 : 70
+        })
+    }
+
+    componentWillUnmount () {
+        clearInterval(this.state.swapInterval)
+    }
+
+    animateTo (i) {
+        const width = this.containerRef.current.getBoundingClientRect().width - this.state.margin
+        const x = i * -width
+        this.setState({ position: x, activePage: i })
+    }
+
+    handleClick (i) {
+        this.animateTo(i)
+        clearInterval(this.state.swapInterval)
+        this.setState({
+            swapInterval: setInterval(this.nextPage.bind(this), INTERVAL_LENGTH)
+        })
+    }
+
+    nextPage () {
+        const pages = this.state.pages - 1
+        const direction = Math.floor(ticks / pages) % 2
+        this.animateTo(direction
+            ? pages - (ticks % pages)
+            : ticks % pages
+        )
+        ++ticks
+    }
+
+    render () {
+        if (!this.props || !this.props.logos) {
+            return (
+                <div></div>
+            )
+        }
+
+        this.buttons = () => [...Array(this.state.pages)].map((_, index) => (
+            <button onClick={() => this.handleClick(index)} key={index} className={clsx(styles.button, index === this.state.activePage ? styles.buttonActive : '')}>{index + 1}</button>
+        ))
+
+        this.list = () => (
+            <ul style={{ transform: `translate(${this.state.position}px, 0px)` }}>
+                {this.props.logos.map((value, index) => (
+                    <li key={index}><a href={value.url} target="_blank" rel="noopener noreferrer"><img src={cdnUrl + value.img} alt={value.alt} /></a></li>
+                ))}
+            </ul>
+        )
+
+        return (
+            <div className={styles.companyUsage} ref={this.containerRef}>
+                <h3>{this.props.headerTitle}</h3>
+                <div className={clsx(styles.logos)}>
+                    {this.list()}
+                    <div className={styles.logoNavigation}>
+                        {this.buttons()}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
--- a/home/src/pages/components/LogoCarousel.module.css
+++ b/home/src/pages/components/LogoCarousel.module.css
@@ -0,0 +1,82 @@
+.companyUsage {
+    width: 100%;
+}
+
+body .companyUsage h3 {
+    font-size: 1.1em;
+    font-weight: 900;
+}
+
+.logos {
+    overflow: hidden;
+    margin: 0 25px;
+}
+
+.logos ul {
+    display: flex;
+    justify-content: space-around;
+    /*width: 3200px;*/
+    margin: 0;
+    transition: transform 1000ms ease;
+}
+
+@media screen and (max-width: 1100px) {
+    .logos {
+        margin: 0;
+    }
+    .logos ul {
+        padding: 0;
+        width: 3000px;
+    }
+    .logos ul li {
+        min-width: 125px;
+    }
+}
+
+.logos ul li {
+    display: flex;
+    min-width: 150px;
+    justify-content: center;
+    align-items: center;
+}
+.logos ul img {
+    transition: filter 200ms;
+    width: 100px;
+}
+
+.logos ul a {
+    background: none;
+    border: 0;
+}
+
+.logoNavigation {
+    text-align: center;
+}
+
+.button:focus {
+    outline: none;
+}
+
+.button::before {
+    content: "\2022";
+    color: var(--wdio-link-color);
+    font-size: 50px;
+    opacity: .25;
+}
+
+.button.buttonActive::before {
+    opacity: 1;
+}
+
+.button {
+    transition: opacity 200ms ease;
+    color: transparent;
+    border: 0;
+    background: 0;
+    cursor: pointer;
+    padding: 10px 10px 0 10px;
+    width: 30px;
+    line-height: 10px;
+    margin: 0 5px;
+    transform: translateY(20px);
+}
--- a/home/src/pages/components/Robot.js
+++ b/home/src/pages/components/Robot.js
--- a/home/src/pages/components/Robot.module.css
+++ b/home/src/pages/components/Robot.module.css
@@ -0,0 +1,122 @@
+.svg {
+    width: 60%;
+    transform: translateY(10%);
+}
+
+#headDot1, #headDot2 {
+    animation: headblinker 5000ms infinite;
+}
+@keyframes headblinker {
+    0% { opacity: 0; }
+    10% { opacity: 1; }
+    20% { opacity: 0; }
+    30% { opacity: 1; }
+    40% { opacity: 0; }
+    50% { opacity: 1; }
+    60% { opacity: 0; }
+    70% { opacity: 1; }
+    75% { opacity: 0; }
+    100% { opacity: 0; }
+}
+
+#bodyDot1 {
+    animation: blinker1st 1s ease-in-out infinite;
+}
+@keyframes blinker1st {
+    10% { opacity: 0; }
+    20% { opacity: 1; }
+    60% { opacity: 1; }
+    70% { opacity: 0; }
+    80% { opacity: 1; }
+    90% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+#bodyDot2 {
+    animation: blinker2nd 1s ease-in-out infinite;
+}
+@keyframes blinker2nd {
+    10% { opacity: 1; }
+    20% { opacity: 0; }
+    30% { opacity: 1; }
+    60% { opacity: 1; }
+    70% { opacity: 0; }
+    80% { opacity: 1; }
+    90% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+#bodyDot3 {
+    animation: blinker3rd 1s ease-in-out infinite;
+}
+@keyframes blinker3rd {
+    20% { opacity: 1; }
+    30% { opacity: 0; }
+    40% { opacity: 1; }
+    60% { opacity: 1; }
+    70% { opacity: 0; }
+    80% { opacity: 1; }
+    90% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+#bodyDot4 {
+    animation: blinker4th 1s ease-in-out infinite;
+}
+@keyframes blinker4th {
+    30% { opacity: 1; }
+    40% { opacity: 0; }
+    50% { opacity: 1; }
+    60% { opacity: 1; }
+    70% { opacity: 0; }
+    80% { opacity: 1; }
+    90% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+#head,
+.ear,
+.eye {
+    animation-name: wiggle;
+    animation-duration: 5000ms;
+    animation-iteration-count: infinite;
+    transform-origin: unset;
+}
+@keyframes wiggle {
+    75% {transform: rotate(0deg);}
+    80% {transform: rotate(5deg);}
+    85% {transform: rotate(-5deg);}
+    90% {transform: rotate(10deg);}
+    95% {transform: rotate(-3deg);}
+    100% {transform: rotate(0deg);}
+}
+
+#lineTop {
+    stroke-dasharray: 38;
+    stroke-dashoffset: 0;
+    animation: lineAnimation 1s ease-in-out infinite alternate;
+}
+#lineMiddle {
+    stroke-dasharray: 38;
+    stroke-dashoffset: 0;
+    animation: lineAnimation 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite alternate;
+}
+#lineBottom {
+    stroke-dasharray: 38;
+    stroke-dashoffset: 0;
+    animation: lineAnimation 1s cubic-bezier(0.5, 0.2, .3, 0.9) infinite alternate;
+}
+@keyframes lineAnimation {
+    0% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: 38; }
+}
+
+#processLine {
+    stroke-dasharray: 82;
+    stroke-dashoffset: -82;
+    animation: processAnimation 4s linear infinite;
+}
+@keyframes processAnimation {
+    0% { stroke-dashoffset: -82; }
+    100% { stroke-dashoffset: -246; }
+}
--- a/home/src/pages/components/Section.js
+++ b/home/src/pages/components/Section.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+import styles from './Section.module.css'
+
+export default function Section({ isDark, children }) {
+    return (
+        <section className={[styles.section, ...(isDark ? [styles.darkSection, 'darkSection'] : [])].join(' ')}>
+            <div className="container">
+                <div className="row">
+                    {children}
+                </div>
+            </div>
+        </section>
+    )
+}
+
--- a/home/src/pages/components/Section.module.css
+++ b/home/src/pages/components/Section.module.css
@@ -0,0 +1,19 @@
+.section {
+    padding: 4rem 0;
+    width: 100%;
+    background-color: var(--wdio-section-background-color);
+}
+
+.section h3 {
+    text-align: center;
+    font-size: 1.7em;
+    font-weight: 500;
+}
+
+.darkSection {
+    background-color: var(--wdio-dark-section-background-color);
+}
+
+html[data-theme=dark] {
+    background-color: var(--wdio-section-background-color);
+}
--- a/home/src/pages/components/highlight.module.css
+++ b/home/src/pages/components/highlight.module.css
@@ -0,0 +1,61 @@
+.featureTitle {
+    font-size: 36px;
+    font-weight: 500;
+}
+
+.featureContent {
+    padding: var(--wdio-spacing-vertical) 0 var(--wdio-spacing-vertical) calc(var(--ifm-spacing-horizontal) + 20px)!important;
+}
+
+.featureContentReversed {
+    padding: var(--wdio-spacing-vertical) calc(var(--ifm-spacing-horizontal) + 20px) var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal)!important;
+}
+
+.featureImage {
+    height: 100%;
+    padding: var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal)!important;
+}
+
+.featureImage iframe {
+    width: 100%;
+}
+
+.darkSection {
+    background-color: var(--wdio-dark-section-background-color);
+}
+
+@media (max-width: 996px) {
+    .featureContent {
+        padding: var(--wdio-spacing-vertical) 0 calc(var(--wdio-spacing-vertical) * 4) calc(var(--ifm-spacing-horizontal) + 20px)!important;
+    }
+
+    .featureImage {
+        padding: calc(var(--wdio-spacing-vertical) * 4) var(--ifm-spacing-horizontal) var(--wdio-spacing-vertical)!important;
+    }
+
+    .featureContentReversed {
+        padding: calc(var(--wdio-spacing-vertical) * 4) calc(var(--ifm-spacing-horizontal) + 20px) var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal)!important;
+    }
+
+    .featureImageReversed {
+        padding: var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal) calc(var(--wdio-spacing-vertical) * 4)!important;
+    }
+}
+
+@media (max-width: 500px) {
+    .featureContent {
+        padding: var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal) calc(var(--wdio-spacing-vertical) * 4) var(--ifm-spacing-horizontal)!important;
+    }
+
+    .featureImage {
+        padding: calc(var(--wdio-spacing-vertical) * 4) var(--ifm-spacing-horizontal) var(--wdio-spacing-vertical)!important;
+    }
+
+    .featureContentReversed {
+        padding: calc(var(--wdio-spacing-vertical) * 4) var(--ifm-spacing-horizontal) var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal)!important;
+    }
+
+    .featureImageReversed {
+        padding: var(--wdio-spacing-vertical) var(--ifm-spacing-horizontal) calc(var(--wdio-spacing-vertical) * 4)!important;
+    }
+}
--- a/home/src/pages/index.js
+++ b/home/src/pages/index.js
@@ -0,0 +1,79 @@
+import React from 'react'
+import clsx from 'clsx'
+import Layout from '@theme/Layout'
+import CodeBlock from '@theme/CodeBlock'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import Translate, {translate} from '@docusaurus/Translate';
+
+import Feature from './components/Feature'
+import Section from './components/Section'
+import Highlight from './components/Highlight'
+import LogoCarousel from './components/LogoCarousel'
+import cdnTransfer from '../CdnTransfer'
+
+import styles from './styles.module.css'
+import { features, SetupExample, SurenessIntegration, friendLinks, mediaPartners } from '../constants'
+
+function Home() {
+    const context = useDocusaurusContext()
+    const {siteConfig = {}} = context
+    return (
+        <Layout
+            title={`${siteConfig.title} · ${siteConfig.tagline}`}
+            description={`${siteConfig.tagline}`}>
+            <header className={clsx('hero hero--primary', styles.heroBanner)}>
+                <div className="container">
+                    <h1 className="hero__title">
+                        <img style={{width: '500px', marginTop: '100px'}} src={cdnTransfer('img/tancloud-brand.svg')} alt={'#'}/>
+                    </h1>
+                    <p className="hero__subtitle"><Translate>易用友好的高性能监控云</Translate></p>
+                    <div className={styles.social}>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/网站监控-4EB1BA.svg" alt={''}/></a>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/PING连通性监控-blue.svg" alt={''}/></a>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/端口可用性监控-green.svg" alt={''}/></a>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/数据库监控-yellow.svg" alt={''}/></a>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/自定义监控-orange.svg" alt={''}/></a>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/阈值告警-red.svg" alt={''}/></a>
+                        <a href="https://console.tancloud.cn"><img src="https://img.shields.io/badge/告警转发通知-blueviolet.svg" alt={''}/></a>
+                    </div>
+                    <div className={styles.buttons}>
+                        <Link
+                            to="https://console.tancloud.cn"
+                            className={clsx(
+                                'button button--outline button--secondary button--lg',
+                                styles.getStarted,
+                            )}>
+                            <Translate>即刻登陆免费使用</Translate>
+                        </Link>
+                    </div>
+                </div>
+            </header>
+            <main>
+                {features && features.length > 0 && (
+                    <Section isDark>
+                        {features.map((props, idx) => (
+                            <Feature key={idx} {...props} />
+                        ))}
+                    </Section>
+                )}
+                {/*who is using*/}
+                {/*<Section>*/}
+                {/*    <LogoCarousel logos={logos}></LogoCarousel>*/}
+                {/*</Section>*/}
+
+                {/*Friend Links*/}
+                {/*<Section>*/}
+                {/*    <LogoCarousel logos={friendLinks} headerTitle={translate({message: 'Friend Links'})}></LogoCarousel>*/}
+                {/*</Section>*/}
+                {/*/!*Media Partners*!/*/}
+                {/*<Section>*/}
+                {/*    <LogoCarousel logos={mediaPartners} headerTitle={translate({message: 'Media Partners'})}></LogoCarousel>*/}
+                {/*</Section>*/}
+            </main>
+        </Layout>
+    )
+}
+
+export default Home
--- a/home/src/pages/styles.module.css
+++ b/home/src/pages/styles.module.css
@@ -0,0 +1,101 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+    padding: 1rem 0 5rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+    .heroBanner {
+        padding: 2rem;
+    }
+}
+
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin: 30px 0 0;
+}
+
+.buttons > a {
+    margin: 0 5px;
+}
+
+.frameworkLogos {
+    background-color: transparent!important;
+    border-bottom: 0!important;
+}
+.frameworkLogos img {
+    height: 60px;
+    padding: 0 10px 0 0;
+}
+
+.reactImage {
+    max-width: 115%;
+    transform: translateX(-45px);
+}
+
+.social {
+    margin-top: 20px;
+}
+
+.social > a {
+    margin-left: 10px;
+}
+
+@media (max-width: 650px) {
+    .buttons > a {
+        margin: 10px 5px;
+    }
+
+    .frameworkLogos img {
+        height: 45px;
+    }
+}
+
+.tweetBtn {
+    position: relative;
+    height: 20px;
+    box-sizing: border-box;
+    padding: 2px 8px 4px 22px;
+    background-color: #1b95e0;
+    color: #fff;
+    border-radius: 3px;
+    cursor: pointer;
+    font-family: "Helvetica Neue", Arial, sans-serif;
+    font-weight: 900;
+    font-size: 11px;
+    font-stretch: 100%;
+    line-height: 18px;
+    margin-left: 3px;
+    margin-right: 20px;
+    text-decoration-thickness: auto;
+    vertical-align: top;
+    zoom: 1;
+}
+.tweetBtn:hover {
+    color: white;
+    text-decoration: none;
+    background-color: #0c7abf;
+}
+.tweetBtn::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 5px;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin: 0 3px 0 0px;
+    background: transparent 0 0 no-repeat;
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
+}
--- a/home/src/sw.js
+++ b/home/src/sw.js
@@ -0,0 +1,17 @@
+import { registerRoute } from 'workbox-routing'
+import { StaleWhileRevalidate } from 'workbox-strategies'
+
+export default function swCustom(params) {
+    if (params.debug) {
+        console.log('[WebdriverIO-PWA][SW]: running swCustom code', params)
+    }
+
+    // Cache responses from external resources
+    registerRoute((context) => {
+        return [
+            /graph\.facebook\.com\/.*\/picture/,
+            /netlify\.com\/img/,
+            /avatars1\.githubusercontent/,
+        ].some((regex) => context.url.href.match(regex))
+    }, new StaleWhileRevalidate())
+}
--- a/home/src/theme/card.jsx
+++ b/home/src/theme/card.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+
+function TwitterLink ({ url }) {
+    if (!url) {
+        return null
+    }
+
+    return (
+        <a href={ url } className="twitterProfile">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3" className="octicon"><path d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1" fill="currentColor"></path></svg>
+        </a>
+    )
+}
+
+function GitHubLink ({ url }) {
+    if (!url) {
+        return null
+    }
+
+    return (
+        <a href={url}
+            className="githubProfile"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub profile"
+        >
+        </a>
+    )
+}
+
+export default function Card ({
+    name,
+    avatar,
+    github,
+    twitter,
+    children
+}) {
+    return (
+        <div className="avatar teamProfile">
+            <img
+                className="avatar__photo avatar__photo--lg"
+                src={ avatar }
+            />
+            <div className="avatar__intro">
+                <h4 className="avatar__name">
+                    { name }
+                    <GitHubLink url={github && `https://github.com/${github}`} />
+                    <TwitterLink url={twitter && `https://twitter.com/${twitter}`} />
+                </h4>
+                <small className="avatar__subtitle">{ children }</small>
+            </div>
+        </div>
+    )
+}