From 01db768d726f7c84fc31567b167f48dc03b29f7b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 18 Sep 2019 14:40:59 +0800
Subject: [PATCH 01/75] :zap: change header background

---
 src/components/header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 47132f430..6ec7c3065 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -8,7 +8,6 @@ interface HeaderProps {
 const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
   <header
     style={{
-      background: `rebeccapurple`,
       marginBottom: `1.45rem`,
     }}
   >

From e7efda2643e05f5500df4b4ea8119ade4a58b718 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 18 Sep 2019 19:17:20 +0800
Subject: [PATCH 02/75] :zap: Add rc-footer

---
 package.json              | 21 +++++++++++----------
 src/components/layout.tsx | 16 +++++++++++-----
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index a9e30fd4b..23d51ce40 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,14 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/react": "^9.1.4",
+    "@types/jest": "^24.0.18",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-helmet": "^5.0.10",
+    "babel-jest": "^24.9.0",
+    "babel-preset-gatsby": "^0.2.13",
     "gatsby": "^2.15.16",
     "gatsby-image": "^2.2.19",
     "gatsby-plugin-antd": "^2.0.2",
@@ -29,21 +37,14 @@
     "gatsby-plugin-typescript": "^2.1.8",
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-transformer-sharp": "^2.2.14",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.9.0",
     "less": "^3.10.3",
     "prettier": "^1.18.2",
+    "rc-footer": "^0.1.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.1.4",
-    "@types/jest": "^24.0.18",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-helmet": "^5.0.10",
-    "babel-jest": "^24.9.0",
-    "babel-preset-gatsby": "^0.2.13",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
     "react-test-renderer": "^16.9.0",
     "ts-jest": "^24.1.0",
     "typescript": "^3.6.3"
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 9bfcb48bd..8487e2ae1 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
+import Footer from 'rc-footer';
 
 import Header from './header';
 import './layout.less';
@@ -38,11 +39,16 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
         }}
       >
         <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
+        <Footer
+          columns={[]}
+          bottom={
+            <div>
+              © {new Date().getFullYear()}, Built with
+              {` `}
+              <a href="https://www.gatsbyjs.org">Gatsby</a>
+            </div>
+          }
+        />
       </div>
     </>
   );

From 422d105eb5406d3be966b7e14ed189d7a457f7d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Wed, 18 Sep 2019 22:11:05 +0800
Subject: [PATCH 03/75] :up: upgrade rc-footer to 0.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 23d51ce40..42ea77cc4 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "prettier": "^1.18.2",
-    "rc-footer": "^0.1.0",
+    "rc-footer": "^0.2.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",

From 8f81ed5e3ba58fe0b724fa12ac188c2d1488dd09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Wed, 18 Sep 2019 22:31:25 +0800
Subject: [PATCH 04/75] :up: fix rc-upload ts error

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42ea77cc4..4412e1c27 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "prettier": "^1.18.2",
-    "rc-footer": "^0.2.1",
+    "rc-footer": "^0.2.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",

From e0216896fcd3015ebced204bf436ad344584303a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 19 Sep 2019 10:47:12 +0800
Subject: [PATCH 05/75] :sparkles: footer data

---
 package.json               |   2 +
 src/components/layout.less | 622 +------------------------------------
 src/components/layout.tsx  | 167 ++++++++--
 3 files changed, 153 insertions(+), 638 deletions(-)

diff --git a/package.json b/package.json
index 4412e1c27..08023421d 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-helmet": "^5.0.10",
+    "antd": "^3.23.3",
     "babel-jest": "^24.9.0",
     "babel-preset-gatsby": "^0.2.13",
     "gatsby": "^2.15.16",
@@ -40,6 +41,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "less": "^3.10.3",
+    "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
     "rc-footer": "^0.2.3",
     "react": "^16.9.0",
diff --git a/src/components/layout.less b/src/components/layout.less
index b6f63320f..faaec1199 100644
--- a/src/components/layout.less
+++ b/src/components/layout.less
@@ -1,622 +1,8 @@
+@import '~normalize.css/normalize.css';
+@import '~rc-footer/assets/index.less';
+@import '~antd/dist/antd.css';
+
 html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 8487e2ae1..4ddf56d0f 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -27,29 +27,156 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     }
   `);
 
+  const footerColumns = [{
+    title: 'G2',
+    items: [
+      {
+        title: '关于 G2',
+        url: '',
+      },
+      {
+        title: '图表示例',
+        url: '',
+      },
+      {
+        title: 'API 文档',
+        url: '',
+      },
+      {
+        title: '使用教程',
+        url: '',
+      },
+    ],
+  }, {
+    title: 'G6',
+    items: [
+      {
+        title: '关于 G2',
+        url: '',
+      },
+      {
+        title: '图表示例',
+        url: '',
+      },
+      {
+        title: 'API 文档',
+        url: '',
+      },
+      {
+        title: '使用教程',
+        url: '',
+      },
+    ],
+  }, {
+    title: 'F2',
+    items: [
+      {
+        title: '关于 G2',
+        url: '',
+      },
+      {
+        title: '图表示例',
+        url: '',
+      },
+      {
+        title: 'API 文档',
+        url: '',
+      },
+      {
+        title: '使用教程',
+        url: '',
+      },
+    ],
+  }, {
+    title: 'L7',
+    items: [
+      {
+        title: '关于 G2',
+        url: '',
+      },
+      {
+        title: '图表示例',
+        url: '',
+      },
+      {
+        title: 'API 文档',
+        url: '',
+      },
+      {
+        title: '使用教程',
+        url: '',
+      },
+    ],
+  }, {
+    title: '墨者学院',
+    items: [
+      {
+        title: '关于 G2',
+        url: '',
+      },
+      {
+        title: '图表示例',
+        url: '',
+      },
+      {
+        title: 'API 文档',
+        url: '',
+      },
+      {
+        title: '使用教程',
+        url: '',
+      },
+    ],
+  }, {
+    icon: (
+      <img
+        src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
+        alt="more products"
+      />
+    ),
+    title: '更多产品',
+    items: [
+      {
+        icon: (
+          <img
+            src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+            alt="yuque"
+          />
+        ),
+        title: '语雀',
+        url: 'https://yuque.com',
+        description: '知识创作与分享工具',
+        openExternal: true,
+      },
+      {
+        icon: (
+          <img
+            src="https://gw.alipayobjects.com/zos/rmsportal/uHocHZfNWZOdsRUonZNr.png"
+            alt="yuque"
+          />
+        ),
+        title: '云凤蝶',
+        url: 'https://yunfengdie.com',
+        description: '中台建站平台',
+        openExternal: true,
+      },
+    ],
+  }]
+
   return (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0px 1.0875rem 1.45rem`,
-          paddingTop: 0,
-        }}
-      >
-        <main>{children}</main>
-        <Footer
-          columns={[]}
-          bottom={
-            <div>
-              © {new Date().getFullYear()}, Built with
-              {` `}
-              <a href="https://www.gatsbyjs.org">Gatsby</a>
-            </div>
-          }
-        />
-      </div>
+      <main>{children}</main>
+      <Footer
+        columns={footerColumns}
+        bottom={
+          <div>
+            © {new Date().getFullYear()}, Built with
+            {` `}
+            <a href="http://xtech.antfin.com/">AFX</a>
+          </div>
+        }
+      />
     </>
   );
 };

From b0f9b4e347725b0d3c7f4f6a7012fbce6eb410b6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 19 Sep 2019 15:21:40 +0800
Subject: [PATCH 06/75] :up: upgrade rc-footer

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 08023421d..882f56932 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "less": "^3.10.3",
     "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
-    "rc-footer": "^0.2.3",
+    "rc-footer": "^0.4.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",

From e1638c63a4eb8b4104bf40b583c606fde2ef094d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 23 Sep 2019 11:41:53 +0800
Subject: [PATCH 07/75] :up: upgrade rc-footer

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 882f56932..79a847258 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "less": "^3.10.3",
     "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
-    "rc-footer": "^0.4.1",
+    "rc-footer": "^0.5.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",

From 96ff7e6cfe0a6e5f5c04f6a997a5ecece204b17f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 23 Sep 2019 15:46:13 +0800
Subject: [PATCH 08/75] chore: :wrench: open site defaultly

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 79a847258..b216a00ab 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "develop": "gatsby develop",
+    "develop": "gatsby develop --open",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",

From b49338695978b50cb3b4452ee24208be67143d01 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 11:21:41 +0800
Subject: [PATCH 09/75] chore(actions): :wrench: Automatic Rebase

---
 .github/workflows/rebase.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .github/workflows/rebase.yml

diff --git a/.github/workflows/rebase.yml b/.github/workflows/rebase.yml
new file mode 100644
index 000000000..8b1b97436
--- /dev/null
+++ b/.github/workflows/rebase.yml
@@ -0,0 +1,14 @@
+on:
+  issue_comment:
+    types: [created]
+name: Automatic Rebase
+jobs:
+  rebase:
+    name: Rebase
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Automatic Rebase
+      uses: cirrus-actions/rebase@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 3a9e962519d7a797c8ba0a782a9c96f5776978ef Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 15:57:42 +0800
Subject: [PATCH 10/75] :zap: Header!

---
 package.json                      |  5 +++-
 src/components/header.module.less | 44 +++++++++++++++++++++++++++
 src/components/header.tsx         | 49 ++++++++++++++++---------------
 src/components/search.module.less |  4 +++
 src/components/search.tsx         |  9 ++++++
 src/externals.d.ts                |  1 +
 6 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 src/components/header.module.less
 create mode 100644 src/components/search.module.less
 create mode 100644 src/components/search.tsx
 create mode 100644 src/externals.d.ts

diff --git a/package.json b/package.json
index b216a00ab..c94d6a12a 100644
--- a/package.json
+++ b/package.json
@@ -55,9 +55,12 @@
   "scripts": {
     "build": "gatsby build",
     "develop": "gatsby develop --open",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,less}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "test": "jest"
+  },
+  "dependencies": {
+    "react-github-corner": "^2.3.0"
   }
 }
diff --git a/src/components/header.module.less b/src/components/header.module.less
new file mode 100644
index 000000000..65d4ee34e
--- /dev/null
+++ b/src/components/header.module.less
@@ -0,0 +1,44 @@
+.header {
+  height: 64px;
+  line-height: 64px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(229, 229, 229, 0.5);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 40px;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    .divider {
+      width: 1px;
+      height: 24px;
+      background-color: #ccc;
+      display: inline-block;
+      margin: 0 24px;
+    }
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+
+    .menu {
+      margin-right: 20px;
+    }
+  }
+
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: inline-block;
+    margin-right: 32px;
+  }
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 6ec7c3065..3f129ef3f 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,35 +1,38 @@
 import { Link } from 'gatsby';
 import React from 'react';
+import GithubCorner from 'react-github-corner';
+import Search from './search';
+import styles from './header.module.less';
 
 interface HeaderProps {
   siteTitle?: string;
 }
 
 const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
-  <header
-    style={{
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          to="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          {siteTitle}
-        </Link>
-      </h1>
+  <header className={styles.header}>
+    <div className={styles.left}>
+      <Link to="/">
+        <img src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg" alt={siteTitle} />
+      </Link>
+      <span className={styles.divider} />
+      <Search />
     </div>
+    <nav className={styles.nav}>
+      <ul className={styles.menu}>
+        <li>
+          <Link to="/specification">
+            设计语言
+          </Link>
+        </li>
+        <li>
+          所有产品
+        </li>
+        <li>
+          生态
+        </li>
+      </ul>
+      <GithubCorner href="https://github.com/antvis" size={64} />
+    </nav>
   </header>
 );
 
diff --git a/src/components/search.module.less b/src/components/search.module.less
new file mode 100644
index 000000000..c307d3395
--- /dev/null
+++ b/src/components/search.module.less
@@ -0,0 +1,4 @@
+.input {
+  border: none;
+  height: 32px;
+}
diff --git a/src/components/search.tsx b/src/components/search.tsx
new file mode 100644
index 000000000..b6bd43d88
--- /dev/null
+++ b/src/components/search.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './search.module.less';
+
+export default () => (
+  <input
+    className={styles.input}
+    placeholder="Search..."
+  />
+);
diff --git a/src/externals.d.ts b/src/externals.d.ts
new file mode 100644
index 000000000..6fe5a283e
--- /dev/null
+++ b/src/externals.d.ts
@@ -0,0 +1 @@
+declare module '*.less'

From c99217d255c05e3c460ff7ee4ff203c969e35e95 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 16:12:24 +0800
Subject: [PATCH 11/75] =?UTF-8?q?=E9=AB=98=E4=BA=AE=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header.module.less | 37 +++++++++++++++++++++----------
 src/components/header.tsx         |  6 ++---
 src/pages/specification.tsx       | 13 +++++++++++
 3 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/specification.tsx

diff --git a/src/components/header.module.less b/src/components/header.module.less
index 65d4ee34e..325540b19 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -26,19 +26,32 @@
     align-items: center;
 
     .menu {
-      margin-right: 20px;
-    }
-  }
+      font-weight: 500;
+      color: rgba(0, 0, 0, .65);
+      margin: 0 20px 0 0;
+      padding: 0;
+      list-style: none;
 
-  ul,
-  li {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
+      li {
+        display: inline-block;
+        margin-right: 32px;
+        line-height: 60px;
 
-  li {
-    display: inline-block;
-    margin-right: 32px;
+        a {
+          color: rgba(0, 0, 0, .65);
+          transition: all .3s;
+          display: block;
+          border-top: 2px solid transparent;
+
+          &:hover {
+            color: #1890ff;
+          }
+        }
+      }
+
+      .active {
+        border-top: 2px solid #1890ff;
+      }
+    }
   }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3f129ef3f..bc14dce2e 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -20,15 +20,15 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
     <nav className={styles.nav}>
       <ul className={styles.menu}>
         <li>
-          <Link to="/specification">
+          <Link to="/specification" activeClassName={styles.active}>
             设计语言
           </Link>
         </li>
         <li>
-          所有产品
+          <a>所有产品</a>
         </li>
         <li>
-          生态
+          <a>生态</a>
         </li>
       </ul>
       <GithubCorner href="https://github.com/antvis" size={64} />
diff --git a/src/pages/specification.tsx b/src/pages/specification.tsx
new file mode 100644
index 000000000..2ea704028
--- /dev/null
+++ b/src/pages/specification.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+const IndexPage = () => (
+  <Layout>
+    <SEO title="Home" />
+    <h1>设计文档</h1>
+  </Layout>
+);
+
+export default IndexPage;

From d268dbb9e4c25326be1953f03b7f8dadda8ad89f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 16:21:54 +0800
Subject: [PATCH 12/75] :white_check_mark: fix ci

---
 src/components/__tests__/header.test.js | 9 ++++-----
 src/components/header.tsx               | 8 +++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/__tests__/header.test.js b/src/components/__tests__/header.test.js
index f16812c0a..12c4b46b8 100644
--- a/src/components/__tests__/header.test.js
+++ b/src/components/__tests__/header.test.js
@@ -4,12 +4,11 @@ import { render } from '@testing-library/react';
 import Header from '../header';
 
 describe(`Header`, () => {
-  it(`renders siteTitle`, () => {
+  it(`renders menu`, () => {
     const siteTitle = `Hello World`;
     const { getByText } = render(<Header siteTitle={siteTitle} />);
-
-    const title = getByText(siteTitle);
-
-    expect(title).toBeInTheDocument();
+    expect(getByText('设计语言')).toBeInTheDocument();
+    expect(getByText('所有产品')).toBeInTheDocument();
+    expect(getByText('生态')).toBeInTheDocument();
   });
 });
diff --git a/src/components/header.tsx b/src/components/header.tsx
index bc14dce2e..36217cfff 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -11,9 +11,11 @@ interface HeaderProps {
 const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
   <header className={styles.header}>
     <div className={styles.left}>
-      <Link to="/">
-        <img src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg" alt={siteTitle} />
-      </Link>
+      <h1>
+        <Link to="/">
+          <img src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg" alt={siteTitle} />
+        </Link>
+      </h1>
       <span className={styles.divider} />
       <Search />
     </div>

From 893f115d05c256106fef7a16c8560cf5103e9bb8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 18:13:00 +0800
Subject: [PATCH 13/75] Add products popover card

---
 src/components/header.module.less |  67 +++++++++
 src/components/header.tsx         | 224 +++++++++++++++++++++++++++++-
 2 files changed, 289 insertions(+), 2 deletions(-)

diff --git a/src/components/header.module.less b/src/components/header.module.less
index 325540b19..259cbbb58 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -12,6 +12,14 @@
     display: flex;
     align-items: center;
 
+    h1 {
+      margin: 0;
+
+      img {
+        display: block;
+      }
+    }
+
     .divider {
       width: 1px;
       height: 24px;
@@ -55,3 +63,62 @@
     }
   }
 }
+
+.products {
+  width: 600px;
+  padding: 0 12px;
+  max-width: calc(100vw - 30px);
+
+  h3 {
+    font-size: 16px;
+    margin: 8px 0 24px 0;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .product {
+    overflow: hidden;
+    width: calc(50% - 16px);
+    display: inline-block;
+    margin-bottom: 16px;
+
+    img {
+      width: 28px;
+      height: 28px;
+      border-radius: 100%;
+      margin-right: 8px;
+      float: left;
+      display: block;
+    }
+
+    .productContent {
+      overflow: hidden;
+
+      h4 {
+        margin-bottom: 12px;
+        color: rgba(0, 0, 0, .85);
+      }
+
+      .productDescription {
+        margin-bottom: 8px;
+        color: rgba(0, 0, 0, .45);
+      }
+
+      .productLinks {
+        > a {
+          margin-right: 8px;
+          color: rgba(0, 0, 0, .65);
+          transition: all .3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, .85);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 36217cfff..fb5154e1b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'gatsby';
 import React from 'react';
 import GithubCorner from 'react-github-corner';
+import { Popover } from 'antd';
 import Search from './search';
 import styles from './header.module.less';
 
@@ -8,6 +9,211 @@ interface HeaderProps {
   siteTitle?: string;
 }
 
+interface ProductProps {
+  name?: string;
+  icon?: string;
+  description?: string;
+  links?: Array<{
+    name: string;
+    link: string;
+  }>;
+}
+
+const Product: React.FC<ProductProps> = ({ name, icon, description, links = [] }) => (
+  <li className={styles.product}>
+    <img alt={name} src={icon} />
+    <div className={styles.productContent}>
+      <h4>{name}</h4>
+      <div className={styles.productDescription}>{description}</div>
+      <div className={styles.productLinks}>
+        {links.map(({ link, name }) => <a target="_blank" href={link} key={name}>{name}</a>)}
+      </div>
+    </div>
+  </li>
+);
+
+const Products: React.FC<any> = () => (
+  <div className={styles.products}>
+    <h3>基础产品</h3>
+    <ul>
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+    </ul>
+    <h3>扩展产品</h3>
+    <ul>
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+    </ul>
+  </div>
+);
+
 const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
   <header className={styles.header}>
     <div className={styles.left}>
@@ -27,10 +233,24 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
           </Link>
         </li>
         <li>
-          <a>所有产品</a>
+          <Popover
+            title={null}
+            content={<Products />}
+            placement="bottomRight"
+            arrowPointAtCenter
+          >
+            <a>所有产品</a>
+          </Popover>
         </li>
         <li>
-          <a>生态</a>
+          <Popover
+            title={null}
+            content={<Products />}
+            placement="bottomRight"
+            arrowPointAtCenter
+          >
+            <a>生态</a>
+          </Popover>
         </li>
       </ul>
       <GithubCorner href="https://github.com/antvis" size={64} />

From 2320124aedd3a3136de9bea87b7e68de7f53215e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 18:39:05 +0800
Subject: [PATCH 14/75] article content

---
 src/components/article.module.less |  9 +++++++++
 src/components/article.tsx         | 11 +++++++++++
 src/components/header.module.less  |  5 +++++
 src/components/header.tsx          |  6 ++++--
 src/components/layout.less         |  8 --------
 src/components/layout.module.less  | 14 ++++++++++++++
 src/components/layout.tsx          |  5 ++---
 src/pages/specification.tsx        | 21 +++++++++++++++++++--
 8 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 src/components/article.module.less
 create mode 100644 src/components/article.tsx
 delete mode 100644 src/components/layout.less
 create mode 100644 src/components/layout.module.less

diff --git a/src/components/article.module.less b/src/components/article.module.less
new file mode 100644
index 000000000..a790a7505
--- /dev/null
+++ b/src/components/article.module.less
@@ -0,0 +1,9 @@
+.article {
+  padding: 0 48px;
+  min-height: 600px;
+
+  h2 {
+    font-size: 36px;
+    margin-top: 0;
+  }
+}
diff --git a/src/components/article.tsx b/src/components/article.tsx
new file mode 100644
index 000000000..7ff197c9f
--- /dev/null
+++ b/src/components/article.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Layout } from 'antd';
+import styles from './article.module.less';
+
+const Article: React.FC<any> = (props) => (
+  <Layout.Content className={styles.article}>
+    <article {...props} />
+  </Layout.Content>
+);
+
+export default Article;
diff --git a/src/components/header.module.less b/src/components/header.module.less
index 259cbbb58..24123bd55 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -7,6 +7,8 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 40px;
+  position: relative;
+  z-index: 1;
 
   .left {
     display: flex;
@@ -101,6 +103,9 @@
       h4 {
         margin-bottom: 12px;
         color: rgba(0, 0, 0, .85);
+        a {
+          color: rgba(0, 0, 0, .85);
+        }
       }
 
       .productDescription {
diff --git a/src/components/header.tsx b/src/components/header.tsx
index fb5154e1b..f5e5f263a 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -13,17 +13,18 @@ interface ProductProps {
   name?: string;
   icon?: string;
   description?: string;
+  url?: string;
   links?: Array<{
     name: string;
     link: string;
   }>;
 }
 
-const Product: React.FC<ProductProps> = ({ name, icon, description, links = [] }) => (
+const Product: React.FC<ProductProps> = ({ name, icon, url, description, links = [] }) => (
   <li className={styles.product}>
     <img alt={name} src={icon} />
     <div className={styles.productContent}>
-      <h4>{name}</h4>
+      <a href={url} target="_blank"><h4>{name}</h4></a>
       <div className={styles.productDescription}>{description}</div>
       <div className={styles.productLinks}>
         {links.map(({ link, name }) => <a target="_blank" href={link} key={name}>{name}</a>)}
@@ -38,6 +39,7 @@ const Products: React.FC<any> = () => (
     <ul>
       <Product
         name="G2"
+        url="/g2"
         description="一套基于可视化编码的图形语法"
         icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
         links={[
diff --git a/src/components/layout.less b/src/components/layout.less
deleted file mode 100644
index faaec1199..000000000
--- a/src/components/layout.less
+++ /dev/null
@@ -1,8 +0,0 @@
-@import '~normalize.css/normalize.css';
-@import '~rc-footer/assets/index.less';
-@import '~antd/dist/antd.css';
-
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/components/layout.module.less b/src/components/layout.module.less
new file mode 100644
index 000000000..e7eef00ac
--- /dev/null
+++ b/src/components/layout.module.less
@@ -0,0 +1,14 @@
+:global {
+  @import '~normalize.css/normalize.css';
+  @import '~rc-footer/assets/index.less';
+  @import '~antd/dist/antd.css';
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.main {
+  margin: 24px 0;
+}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 4ddf56d0f..cb99d89c2 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -8,9 +8,8 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import Footer from 'rc-footer';
-
 import Header from './header';
-import './layout.less';
+import styles from './layout.module.less';
 
 interface LayoutProps {
   children?: React.ReactNode;
@@ -166,7 +165,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <main>{children}</main>
+      <main className={styles.main}>{children}</main>
       <Footer
         columns={footerColumns}
         bottom={
diff --git a/src/pages/specification.tsx b/src/pages/specification.tsx
index 2ea704028..a56959150 100644
--- a/src/pages/specification.tsx
+++ b/src/pages/specification.tsx
@@ -1,12 +1,29 @@
 import React from 'react';
-
+import { Layout as AntLayout, Menu } from 'antd';
 import Layout from '../components/layout';
+import Article from '../components/article';
 import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
-    <h1>设计文档</h1>
+    <AntLayout style={{ background: '#fff' }}>
+      <AntLayout.Sider width={240} theme="light">
+        <Menu mode="inline" defaultSelectedKeys={['home']} style={{ height: '100%' }}>
+          <Menu.Item key="home">首页</Menu.Item>
+          <Menu.Item>文章</Menu.Item>
+          <Menu.Item>文章</Menu.Item>
+          <Menu.Item>文章</Menu.Item>
+          <Menu.Item>文章</Menu.Item>
+          <Menu.Item>文章</Menu.Item>
+          <Menu.Item>文章</Menu.Item>
+        </Menu>
+      </AntLayout.Sider>
+      <Article>
+        <h2>标题</h2>
+        内容
+      </Article>
+    </AntLayout>
   </Layout>
 );
 

From 50b82ae34dd5180298423f3b99b48a48ed715b1e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 19:11:35 +0800
Subject: [PATCH 15/75] render markdown page

---
 docs/getting-started.md     | 115 ++++++++++++++++++++++++++++++++++++
 gatsby-config.js            |   5 +-
 gatsby-node.js              |  33 +++++++++++
 package.json                |   2 +
 src/components/header.tsx   |   2 +-
 src/pages/specification.tsx |  30 ----------
 src/templates/document.tsx  |  53 +++++++++++++++++
 7 files changed, 207 insertions(+), 33 deletions(-)
 create mode 100644 docs/getting-started.md
 delete mode 100644 src/pages/specification.tsx
 create mode 100644 src/templates/document.tsx

diff --git a/docs/getting-started.md b/docs/getting-started.md
new file mode 100644
index 000000000..d476ff995
--- /dev/null
+++ b/docs/getting-started.md
@@ -0,0 +1,115 @@
+---
+path: "/docs/specification/getting-started"
+date: "2019-05-04"
+title: "Getting Started"
+---
+
+# G2: The Grammar of Graphics in JavaScript
+
+[![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2)
+![](https://img.shields.io/badge/language-javascript-red.svg)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+[![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
+[![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 "Percentage of issues still open")
+
+G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
+
+**在此衷心感谢[《The Grammar of Graphics》](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html)的作者 [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson)，为 G2 的图形语法提供了理论基础！**
+
+[了解更多 G2 详情](https://antv.alipay.com/zh-cn/g2/3.x/index.html).
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/AOwgKIjknXfggPijmhym.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/nfiOREzMIsENrzUeLOGR.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/uZZmaudtKRnvUhmUdZSZ.gif" width="180"><img src="https://gw.alipayobjects.com/zos/rmsportal/ifSTXzrGbvtLRpnAvAiZ.gif" width="200">
+
+## 安装
+
+```bash
+npm install @antv/g2
+```
+
+## 特性
+
+- ✔︎ 简单、易用
+- ✔︎ 完备的可视化编码
+- ✔︎ 强大的扩展能力
+
+## 文档
+
+- [使用教程](https://antv.alipay.com/zh-cn/g2/3.x/tutorial/index.html)
+- [API 文档](https://antv.alipay.com/zh-cn/g2/3.x/api/index.html)
+- [图表示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+### 快速开始
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import G2 from '@antv/g2';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 1150 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const chart = new G2.Chart({
+  container: 'c1',
+  width: 500,
+  height: 500
+});
+
+chart.source(data);
+chart.interval().position('genre*sold').color('genre');
+chart.render();
+```
+
+[更多示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+![demos](https://user-images.githubusercontent.com/1655789/34187141-d800fe94-e56a-11e7-878a-4dc0e4f538d9.png)
+
+## 本地开发
+
+```bash
+$ npm install
+
+# 跑测试用例
+$ npm run test-live
+
+# 监听文件变化构建，并打开 demo 页面
+$ npm run dev
+
+# 打开 demo
+$ npm run demos
+```
+
+## ~~体验改进计划说明~~
+
+~~为了更好服务用户，G2 会将 URL 和版本信息发送回 AntV 服务器：~~
+
+~~https://kcart.alipay.com/web/bi.do~~
+
+~~**除了 URL 与 G2 版本信息外，不会收集任何其他信息**，一切为了能对 G2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：~~
+
+```js
+// 关闭 G2 的体验改进计划打点请求
+G2.track(false)
+```
+
+**更新**
+
+**我们已决定终止体验改进计划**
+
+**从 `@antv/g2@3.4.7` 版本开始，所有打点代码已被移除。后续版本的 G2 不会再发送任何远程请求**
+
+## 如何贡献
+
+如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/g2/issues) 看看有没有类似的 bug 或者建议。
+
+如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md)。
diff --git a/gatsby-config.js b/gatsby-config.js
index 6e07b3362..223360341 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -9,10 +9,11 @@ module.exports = {
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
+        name: `docs`,
+        path: `${__dirname}/docs`,
       },
     },
+    `gatsby-transformer-remark`,
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-offline`,
diff --git a/gatsby-node.js b/gatsby-node.js
index 2f4266513..dc849ddbc 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,3 +5,36 @@
  */
 
 // You can delete this file if you're not using it
+const path = require(`path`)
+exports.createPages = async ({ actions, graphql, reporter }) => {
+  const { createPage } = actions
+  const blogPostTemplate = path.resolve(`src/templates/document.tsx`)
+  const result = await graphql(`
+    {
+      allMarkdownRemark(
+        sort: { order: DESC, fields: [frontmatter___date] }
+        limit: 1000
+      ) {
+        edges {
+          node {
+            frontmatter {
+              path
+            }
+          }
+        }
+      }
+    }
+  `)
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
+  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    createPage({
+      path: node.frontmatter.path,
+      component: blogPostTemplate,
+      context: {}, // additional data can be passed via context
+    })
+  })
+}
diff --git a/package.json b/package.json
index c94d6a12a..23a7e4fde 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,8 @@
     "test": "jest"
   },
   "dependencies": {
+    "gatsby-source-filesystem": "^2.1.26",
+    "gatsby-transformer-remark": "^2.6.24",
     "react-github-corner": "^2.3.0"
   }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index f5e5f263a..a01b60920 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -230,7 +230,7 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
     <nav className={styles.nav}>
       <ul className={styles.menu}>
         <li>
-          <Link to="/specification" activeClassName={styles.active}>
+          <Link to="/docs/specification" activeClassName={styles.active}>
             设计语言
           </Link>
         </li>
diff --git a/src/pages/specification.tsx b/src/pages/specification.tsx
deleted file mode 100644
index a56959150..000000000
--- a/src/pages/specification.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { Layout as AntLayout, Menu } from 'antd';
-import Layout from '../components/layout';
-import Article from '../components/article';
-import SEO from '../components/seo';
-
-const IndexPage = () => (
-  <Layout>
-    <SEO title="Home" />
-    <AntLayout style={{ background: '#fff' }}>
-      <AntLayout.Sider width={240} theme="light">
-        <Menu mode="inline" defaultSelectedKeys={['home']} style={{ height: '100%' }}>
-          <Menu.Item key="home">首页</Menu.Item>
-          <Menu.Item>文章</Menu.Item>
-          <Menu.Item>文章</Menu.Item>
-          <Menu.Item>文章</Menu.Item>
-          <Menu.Item>文章</Menu.Item>
-          <Menu.Item>文章</Menu.Item>
-          <Menu.Item>文章</Menu.Item>
-        </Menu>
-      </AntLayout.Sider>
-      <Article>
-        <h2>标题</h2>
-        内容
-      </Article>
-    </AntLayout>
-  </Layout>
-);
-
-export default IndexPage;
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
new file mode 100644
index 000000000..a1ff6013e
--- /dev/null
+++ b/src/templates/document.tsx
@@ -0,0 +1,53 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { Layout as AntLayout, Menu } from 'antd';
+import Layout from '../components/layout';
+import Article from '../components/article';
+import SEO from '../components/seo';
+
+export default function Template({
+  data, // this prop will be injected by the GraphQL query below.
+}: {
+  data: any;
+}) {
+  const { markdownRemark } = data // data.markdownRemark holds our post data
+  const { frontmatter, html } = markdownRemark
+  return (
+    <Layout>
+      <SEO title="Home" />
+      <AntLayout style={{ background: '#fff' }}>
+        <AntLayout.Sider width={240} theme="light">
+          <Menu mode="inline" defaultSelectedKeys={['home']} style={{ height: '100%' }}>
+            <Menu.Item key="home">首页</Menu.Item>
+            <Menu.Item>文章</Menu.Item>
+            <Menu.Item>文章</Menu.Item>
+            <Menu.Item>文章</Menu.Item>
+            <Menu.Item>文章</Menu.Item>
+            <Menu.Item>文章</Menu.Item>
+            <Menu.Item>文章</Menu.Item>
+          </Menu>
+        </AntLayout.Sider>
+        <Article>
+          <h2>{frontmatter.title}</h2>
+          <div
+            className="blog-post-content"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </Article>
+      </AntLayout>
+    </Layout>
+  )
+}
+
+export const pageQuery = graphql`
+  query($path: String!) {
+    markdownRemark(frontmatter: { path: { eq: $path } }) {
+      html
+      frontmatter {
+        date(formatString: "MMMM DD, YYYY")
+        path
+        title
+      }
+    }
+  }
+`

From a0d95e059ec6da935252d0ea041bcdfdfd046a28 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 19:33:45 +0800
Subject: [PATCH 16/75] render md to docs menu

---
 docs/faq.md                |  7 +++++++
 gatsby-node.js             |  3 ++-
 src/templates/document.tsx | 42 +++++++++++++++++++++++++++++---------
 3 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 docs/faq.md

diff --git a/docs/faq.md b/docs/faq.md
new file mode 100644
index 000000000..8316048e7
--- /dev/null
+++ b/docs/faq.md
@@ -0,0 +1,7 @@
+---
+path: "/docs/specification/faq"
+date: "2019-05-04"
+title: FAQ
+---
+
+常见问题。
diff --git a/gatsby-node.js b/gatsby-node.js
index dc849ddbc..d2beeb3e1 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -5,7 +5,8 @@
  */
 
 // You can delete this file if you're not using it
-const path = require(`path`)
+const path = require(`path`);
+
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions
   const blogPostTemplate = path.resolve(`src/templates/document.tsx`)
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index a1ff6013e..385eb70b0 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { graphql } from "gatsby"
+import { graphql, Link } from "gatsby"
 import { Layout as AntLayout, Menu } from 'antd';
 import Layout from '../components/layout';
 import Article from '../components/article';
@@ -10,21 +10,29 @@ export default function Template({
 }: {
   data: any;
 }) {
-  const { markdownRemark } = data // data.markdownRemark holds our post data
+  const { markdownRemark, allMarkdownRemark } = data // data.markdownRemark holds our post data
   const { frontmatter, html } = markdownRemark
+  const { edges = [] } = allMarkdownRemark
   return (
     <Layout>
       <SEO title="Home" />
       <AntLayout style={{ background: '#fff' }}>
         <AntLayout.Sider width={240} theme="light">
-          <Menu mode="inline" defaultSelectedKeys={['home']} style={{ height: '100%' }}>
-            <Menu.Item key="home">首页</Menu.Item>
-            <Menu.Item>文章</Menu.Item>
-            <Menu.Item>文章</Menu.Item>
-            <Menu.Item>文章</Menu.Item>
-            <Menu.Item>文章</Menu.Item>
-            <Menu.Item>文章</Menu.Item>
-            <Menu.Item>文章</Menu.Item>
+          <Menu
+            mode="inline"
+            selectedKeys={[frontmatter.path]}
+            style={{ height: '100%' }}
+          >
+            {
+              edges.map((edge: any) => {
+                const { node: { frontmatter: { title, path } }} = edge;
+                return (
+                  <Menu.Item key={path}>
+                    <Link to={path}>{title}</Link>
+                  </Menu.Item>
+                );
+              })
+            }
           </Menu>
         </AntLayout.Sider>
         <Article>
@@ -49,5 +57,19 @@ export const pageQuery = graphql`
         title
       }
     }
+    allMarkdownRemark(
+      sort: { order: DESC, fields: [frontmatter___date] }
+      limit: 1000
+    ) {
+      edges {
+        node {
+          frontmatter {
+            date(formatString: "MMMM DD, YYYY")
+            path
+            title
+          }
+        }
+      }
+    }
   }
 `

From 1d507653c933c8c2dc603aaeaafd4ef40d902196 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 19:53:00 +0800
Subject: [PATCH 17/75] fix active menu and order

---
 docs/faq.md               | 1 +
 docs/getting-started.md   | 7 ++++---
 gatsby-node.js            | 2 +-
 package.json              | 9 ++++-----
 src/components/header.tsx | 9 ++++++++-
 src/components/layout.tsx | 7 ++++---
 src/pages/index.tsx       | 1 -
 7 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/docs/faq.md b/docs/faq.md
index 8316048e7..264b362be 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -2,6 +2,7 @@
 path: "/docs/specification/faq"
 date: "2019-05-04"
 title: FAQ
+order: 1
 ---
 
 常见问题。
diff --git a/docs/getting-started.md b/docs/getting-started.md
index d476ff995..5c9130647 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -1,7 +1,8 @@
 ---
-path: "/docs/specification/getting-started"
-date: "2019-05-04"
-title: "Getting Started"
+path: /docs/specification/getting-started
+date: 2019-05-04
+title: Getting Started
+order: 0
 ---
 
 # G2: The Grammar of Graphics in JavaScript
diff --git a/gatsby-node.js b/gatsby-node.js
index d2beeb3e1..19c30a32b 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -13,7 +13,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const result = await graphql(`
     {
       allMarkdownRemark(
-        sort: { order: DESC, fields: [frontmatter___date] }
+        sort: { order: ASC, fields: [order] }
         limit: 1000
       ) {
         edges {
diff --git a/package.json b/package.json
index 23a7e4fde..e3f649b64 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
+    "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.18",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
@@ -26,6 +27,7 @@
     "antd": "^3.23.3",
     "babel-jest": "^24.9.0",
     "babel-preset-gatsby": "^0.2.13",
+    "classnames": "^2.2.6",
     "gatsby": "^2.15.16",
     "gatsby-image": "^2.2.19",
     "gatsby-plugin-antd": "^2.0.2",
@@ -37,6 +39,7 @@
     "gatsby-plugin-sharp": "^2.2.22",
     "gatsby-plugin-typescript": "^2.1.8",
     "gatsby-source-filesystem": "^2.1.22",
+    "gatsby-transformer-remark": "^2.6.24",
     "gatsby-transformer-sharp": "^2.2.14",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
@@ -46,6 +49,7 @@
     "rc-footer": "^0.5.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-github-corner": "^2.3.0",
     "react-helmet": "^5.2.1",
     "react-test-renderer": "^16.9.0",
     "ts-jest": "^24.1.0",
@@ -59,10 +63,5 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "test": "jest"
-  },
-  "dependencies": {
-    "gatsby-source-filesystem": "^2.1.26",
-    "gatsby-transformer-remark": "^2.6.24",
-    "react-github-corner": "^2.3.0"
   }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index a01b60920..01cc53235 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,11 +2,13 @@ import { Link } from 'gatsby';
 import React from 'react';
 import GithubCorner from 'react-github-corner';
 import { Popover } from 'antd';
+import classNames from 'classnames';
 import Search from './search';
 import styles from './header.module.less';
 
 interface HeaderProps {
   siteTitle?: string;
+  location?: Location;
 }
 
 interface ProductProps {
@@ -230,7 +232,12 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
     <nav className={styles.nav}>
       <ul className={styles.menu}>
         <li>
-          <Link to="/docs/specification" activeClassName={styles.active}>
+          <Link
+            to="/docs/specification/getting-started"
+            className={classNames({
+              [styles.active]: location.pathname.startsWith('/docs'),
+            })}
+          >
             设计语言
           </Link>
         </li>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index cb99d89c2..5da52ba06 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -13,9 +13,10 @@ import styles from './layout.module.less';
 
 interface LayoutProps {
   children?: React.ReactNode;
+  location?: Location;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({ children, location }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -160,11 +161,11 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
         openExternal: true,
       },
     ],
-  }]
+  }];
 
   return (
     <>
-      <Header siteTitle={data.site.siteMetadata.title} />
+      <Header siteTitle={data.site.siteMetadata.title} location={location} />
       <main className={styles.main}>{children}</main>
       <Footer
         columns={footerColumns}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 211b76195..a5cad7871 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import Layout from '../components/layout';
 import SEO from '../components/seo';
 

From f18a563357f7a4d1a0b79c77fb1bd33ffea92af8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 25 Sep 2019 20:19:08 +0800
Subject: [PATCH 18/75] adding markdown style

---
 docs/getting-started.md            |   2 -
 gatsby-node.js                     |   2 +-
 src/components/layout.module.less  |   5 -
 src/templates/document.tsx         |   6 +-
 src/templates/markdown.module.less | 160 +++++++++++++++++++++++++++++
 5 files changed, 164 insertions(+), 11 deletions(-)
 create mode 100644 src/templates/markdown.module.less

diff --git a/docs/getting-started.md b/docs/getting-started.md
index 5c9130647..f42160527 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -5,8 +5,6 @@ title: Getting Started
 order: 0
 ---
 
-# G2: The Grammar of Graphics in JavaScript
-
 [![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2)
 ![](https://img.shields.io/badge/language-javascript-red.svg)
 ![](https://img.shields.io/badge/license-MIT-000000.svg)
diff --git a/gatsby-node.js b/gatsby-node.js
index 19c30a32b..4fa616cf2 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -13,7 +13,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   const result = await graphql(`
     {
       allMarkdownRemark(
-        sort: { order: ASC, fields: [order] }
+        sort: { order: ASC, fields: [frontmatter___order] }
         limit: 1000
       ) {
         edges {
diff --git a/src/components/layout.module.less b/src/components/layout.module.less
index e7eef00ac..e2174397c 100644
--- a/src/components/layout.module.less
+++ b/src/components/layout.module.less
@@ -4,11 +4,6 @@
   @import '~antd/dist/antd.css';
 }
 
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 .main {
   margin: 24px 0;
 }
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 385eb70b0..337034d5a 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -4,6 +4,7 @@ import { Layout as AntLayout, Menu } from 'antd';
 import Layout from '../components/layout';
 import Article from '../components/article';
 import SEO from '../components/seo';
+import styles from './markdown.module.less';
 
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
@@ -35,10 +36,9 @@ export default function Template({
             }
           </Menu>
         </AntLayout.Sider>
-        <Article>
-          <h2>{frontmatter.title}</h2>
+        <Article className={styles.markdown}>
+          <h1>{frontmatter.title}</h1>
           <div
-            className="blog-post-content"
             dangerouslySetInnerHTML={{ __html: html }}
           />
         </Article>
diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
new file mode 100644
index 000000000..a7a98211b
--- /dev/null
+++ b/src/templates/markdown.module.less
@@ -0,0 +1,160 @@
+@import "~antd/es/style/themes/default.less";
+
+.markdown {
+  font-size: 14px;
+  line-height: 2;
+
+  > img {
+    max-width: ~'calc(100% - 32px)';
+    margin: 34px 0;
+  }
+
+  h1 {
+    margin-top: 8px;
+    margin-bottom: 20px;
+    font-weight: 500;
+    font-size: 30px;
+    font-family: Avenir, @font-family, sans-serif;
+    line-height: 38px;
+  }
+
+  h2 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    clear: both;
+    margin: 1.6em 0 0.6em;
+    font-weight: 500;
+    font-family: Avenir, @font-family, sans-serif;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+  h4 {
+    font-size: 16px;
+  }
+  h5 {
+    font-size: 14px;
+  }
+  h6 {
+    font-size: 12px;
+  }
+
+  hr {
+    clear: both;
+    height: 1px;
+    margin: 56px 0;
+    background: @border-color-split;
+    border: 0;
+  }
+
+  p,
+  pre {
+    margin: 1em 0;
+  }
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+  }
+
+  ul > li {
+    margin-left: 20px;
+    padding-left: 4px;
+    list-style-type: circle;
+    &:empty {
+      display: none;
+    }
+  }
+
+  ol > li {
+    margin-left: 20px;
+    padding-left: 4px;
+    list-style-type: decimal;
+  }
+
+  ul > li > p,
+  ol > li > p {
+    margin: 0.2em 0;
+  }
+
+  code {
+    margin: 0 1px;
+    padding: 0.2em 0.4em;
+    font-size: 0.9em;
+    background: #f2f4f5;
+    border: 1px solid #eee;
+    border-radius: 3px;
+  }
+
+  pre {
+    font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    background: #f2f4f5;
+    border-radius: @border-radius-sm;
+    margin: 1em 0;
+    padding: 12px;
+    overflow: auto;
+    color: @text-color;
+    background: #f2f4f5;
+  }
+
+  pre code {
+    border: none;
+    background: transparent;
+    padding: 0;
+    font-size: @font-size-base - 1px;
+  }
+
+  strong,
+  b {
+    font-weight: 500;
+  }
+
+  > table {
+    width: 100%;
+    margin: 8px 0 16px;
+    empty-cells: show;
+    border: 1px solid @border-color-split;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  > table th {
+    color: #5c6b77;
+    font-weight: 500;
+    white-space: nowrap;
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  > table th,
+  > table td {
+    padding: 16px 24px;
+    text-align: left;
+    border: 1px solid @border-color-split;
+  }
+
+  blockquote {
+    margin: 1em 0;
+    padding-left: 0.8em;
+    color: @text-color-secondary;
+    font-size: 90%;
+    border-left: 4px solid @border-color-split;
+  }
+
+  blockquote p {
+    margin: 0;
+  }
+
+  > br,
+  > p > br {
+    clear: both;
+  }
+}

From e9e31df04df380152e76f851480d5ed14b0c7483 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 26 Sep 2019 16:21:27 +0800
Subject: [PATCH 19/75] read slug from dir path

---
 docs/faq.md                                 |  8 ------
 docs/specification/category/test1.md        |  7 +++++
 docs/specification/category/test2.md        |  7 +++++
 docs/specification/category/test3.md        |  7 +++++
 docs/specification/faq.md                   |  7 +++++
 docs/{ => specification}/getting-started.md |  1 -
 gatsby-node.js                              | 32 +++++++++++++++++++--
 src/components/header.tsx                   |  2 +-
 src/templates/document.tsx                  |  5 ++--
 9 files changed, 60 insertions(+), 16 deletions(-)
 delete mode 100644 docs/faq.md
 create mode 100644 docs/specification/category/test1.md
 create mode 100644 docs/specification/category/test2.md
 create mode 100644 docs/specification/category/test3.md
 create mode 100644 docs/specification/faq.md
 rename docs/{ => specification}/getting-started.md (99%)

diff --git a/docs/faq.md b/docs/faq.md
deleted file mode 100644
index 264b362be..000000000
--- a/docs/faq.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-path: "/docs/specification/faq"
-date: "2019-05-04"
-title: FAQ
-order: 1
----
-
-常见问题。
diff --git a/docs/specification/category/test1.md b/docs/specification/category/test1.md
new file mode 100644
index 000000000..929dd2d48
--- /dev/null
+++ b/docs/specification/category/test1.md
@@ -0,0 +1,7 @@
+---
+path: /docs/specification/category/test1
+title: 分类测试文章一
+order: 0
+---
+
+内容。
diff --git a/docs/specification/category/test2.md b/docs/specification/category/test2.md
new file mode 100644
index 000000000..f31cf5ab2
--- /dev/null
+++ b/docs/specification/category/test2.md
@@ -0,0 +1,7 @@
+---
+path: /docs/specification/category/test2
+title: 分类测试文章二
+order: 1
+---
+
+内容。
diff --git a/docs/specification/category/test3.md b/docs/specification/category/test3.md
new file mode 100644
index 000000000..96a7c5838
--- /dev/null
+++ b/docs/specification/category/test3.md
@@ -0,0 +1,7 @@
+---
+path: /docs/specification/category/test3
+title: 分类测试文章三
+order: 1
+---
+
+内容。
diff --git a/docs/specification/faq.md b/docs/specification/faq.md
new file mode 100644
index 000000000..63c3a8d39
--- /dev/null
+++ b/docs/specification/faq.md
@@ -0,0 +1,7 @@
+---
+path: /docs/specification/faq
+title: FAQ
+order: 1
+---
+
+常见问题。
diff --git a/docs/getting-started.md b/docs/specification/getting-started.md
similarity index 99%
rename from docs/getting-started.md
rename to docs/specification/getting-started.md
index f42160527..f62146b5d 100644
--- a/docs/getting-started.md
+++ b/docs/specification/getting-started.md
@@ -1,6 +1,5 @@
 ---
 path: /docs/specification/getting-started
-date: 2019-05-04
 title: Getting Started
 order: 0
 ---
diff --git a/gatsby-node.js b/gatsby-node.js
index 4fa616cf2..553d6a874 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -7,9 +7,31 @@
 // You can delete this file if you're not using it
 const path = require(`path`);
 
+// Add custom url pathname for posts
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
+  if (node.internal.type === `File`) {
+    const { dir, name } = path.parse(node.absolutePath)
+    createNodeField({
+      node,
+      name: `slug`,
+      value: path.relative(__dirname, path.join(dir, name)),
+    })
+  } else if (
+    node.internal.type === `MarkdownRemark` &&
+    typeof node.slug === `undefined`
+  ) {
+    const fileNode = getNode(node.parent)
+    createNodeField({
+      node,
+      name: `slug`,
+      value: fileNode.fields.slug,
+    })
+  }
+}
+
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions
-  const blogPostTemplate = path.resolve(`src/templates/document.tsx`)
   const result = await graphql(`
     {
       allMarkdownRemark(
@@ -18,6 +40,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       ) {
         edges {
           node {
+            fields {
+              slug
+            }
             frontmatter {
               path
             }
@@ -32,9 +57,10 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return
   }
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    console.log(node.fields.slug, '!');
     createPage({
-      path: node.frontmatter.path,
-      component: blogPostTemplate,
+      path: node.fields.slug, // required
+      component: path.resolve(`src/templates/document.tsx`),
       context: {}, // additional data can be passed via context
     })
   })
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 01cc53235..f2b7d3baf 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -29,7 +29,7 @@ const Product: React.FC<ProductProps> = ({ name, icon, url, description, links =
       <a href={url} target="_blank"><h4>{name}</h4></a>
       <div className={styles.productDescription}>{description}</div>
       <div className={styles.productLinks}>
-        {links.map(({ link, name }) => <a target="_blank" href={link} key={name}>{name}</a>)}
+        {links.map(({ link, name }, i) => <a target="_blank" href={link} key={i}>{name}</a>)}
       </div>
     </div>
   </li>
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 337034d5a..e82a0967e 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -14,6 +14,7 @@ export default function Template({
   const { markdownRemark, allMarkdownRemark } = data // data.markdownRemark holds our post data
   const { frontmatter, html } = markdownRemark
   const { edges = [] } = allMarkdownRemark
+  console.log(edges);
   return (
     <Layout>
       <SEO title="Home" />
@@ -52,19 +53,17 @@ export const pageQuery = graphql`
     markdownRemark(frontmatter: { path: { eq: $path } }) {
       html
       frontmatter {
-        date(formatString: "MMMM DD, YYYY")
         path
         title
       }
     }
     allMarkdownRemark(
-      sort: { order: DESC, fields: [frontmatter___date] }
+      sort: { order: ASC, fields: [frontmatter___order] }
       limit: 1000
     ) {
       edges {
         node {
           frontmatter {
-            date(formatString: "MMMM DD, YYYY")
             path
             title
           }

From 609c78d938e02df674ea6c7b2fcdc2e4654de119 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 26 Sep 2019 17:40:54 +0800
Subject: [PATCH 20/75] move documentation files

---
 docs/specification/category/test1.md  | 1 -
 docs/specification/category/test2.md  | 1 -
 docs/specification/category/test3.md  | 1 -
 docs/specification/faq.md             | 1 -
 docs/specification/getting-started.md | 1 -
 5 files changed, 5 deletions(-)

diff --git a/docs/specification/category/test1.md b/docs/specification/category/test1.md
index 929dd2d48..b56d26ade 100644
--- a/docs/specification/category/test1.md
+++ b/docs/specification/category/test1.md
@@ -1,5 +1,4 @@
 ---
-path: /docs/specification/category/test1
 title: 分类测试文章一
 order: 0
 ---
diff --git a/docs/specification/category/test2.md b/docs/specification/category/test2.md
index f31cf5ab2..6482796a7 100644
--- a/docs/specification/category/test2.md
+++ b/docs/specification/category/test2.md
@@ -1,5 +1,4 @@
 ---
-path: /docs/specification/category/test2
 title: 分类测试文章二
 order: 1
 ---
diff --git a/docs/specification/category/test3.md b/docs/specification/category/test3.md
index 96a7c5838..0224dad38 100644
--- a/docs/specification/category/test3.md
+++ b/docs/specification/category/test3.md
@@ -1,5 +1,4 @@
 ---
-path: /docs/specification/category/test3
 title: 分类测试文章三
 order: 1
 ---
diff --git a/docs/specification/faq.md b/docs/specification/faq.md
index 63c3a8d39..dffb7cf4d 100644
--- a/docs/specification/faq.md
+++ b/docs/specification/faq.md
@@ -1,5 +1,4 @@
 ---
-path: /docs/specification/faq
 title: FAQ
 order: 1
 ---
diff --git a/docs/specification/getting-started.md b/docs/specification/getting-started.md
index f62146b5d..4723f4256 100644
--- a/docs/specification/getting-started.md
+++ b/docs/specification/getting-started.md
@@ -1,5 +1,4 @@
 ---
-path: /docs/specification/getting-started
 title: Getting Started
 order: 0
 ---

From a9754c6b59a9cca48d70719759cb6f51c24ce87b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 26 Sep 2019 17:47:14 +0800
Subject: [PATCH 21/75] use slug over path

---
 gatsby-node.js             |  7 ++-----
 src/templates/document.tsx | 10 +++++++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 553d6a874..636300484 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -12,10 +12,11 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
   if (node.internal.type === `File`) {
     const { dir, name } = path.parse(node.absolutePath)
+    const slug = path.relative(__dirname, path.join(dir, name));
     createNodeField({
       node,
       name: `slug`,
-      value: path.relative(__dirname, path.join(dir, name)),
+      value: `/${slug}`,
     })
   } else if (
     node.internal.type === `MarkdownRemark` &&
@@ -43,9 +44,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
             fields {
               slug
             }
-            frontmatter {
-              path
-            }
           }
         }
       }
@@ -57,7 +55,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return
   }
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-    console.log(node.fields.slug, '!');
     createPage({
       path: node.fields.slug, // required
       component: path.resolve(`src/templates/document.tsx`),
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index e82a0967e..52aec22ef 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -50,10 +50,12 @@ export default function Template({
 
 export const pageQuery = graphql`
   query($path: String!) {
-    markdownRemark(frontmatter: { path: { eq: $path } }) {
+    markdownRemark(fields: { slug: { eq: $path } }) {
       html
+      fields {
+        slug
+      }
       frontmatter {
-        path
         title
       }
     }
@@ -63,8 +65,10 @@ export const pageQuery = graphql`
     ) {
       edges {
         node {
+          fields {
+            slug
+          }
           frontmatter {
-            path
             title
           }
         }

From 272cb73246e1dc63dfdbe26e0034a3def5da753b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 15:09:37 +0800
Subject: [PATCH 22/75] use slug as menu key

---
 src/templates/document.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 52aec22ef..24c88574b 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -12,9 +12,9 @@ export default function Template({
   data: any;
 }) {
   const { markdownRemark, allMarkdownRemark } = data // data.markdownRemark holds our post data
-  const { frontmatter, html } = markdownRemark
+  const { frontmatter, html, fields: { slug } } = markdownRemark
   const { edges = [] } = allMarkdownRemark
-  console.log(edges);
+
   return (
     <Layout>
       <SEO title="Home" />
@@ -22,15 +22,15 @@ export default function Template({
         <AntLayout.Sider width={240} theme="light">
           <Menu
             mode="inline"
-            selectedKeys={[frontmatter.path]}
+            selectedKeys={[slug]}
             style={{ height: '100%' }}
           >
             {
               edges.map((edge: any) => {
-                const { node: { frontmatter: { title, path } }} = edge;
+                const { node: { frontmatter: { title }, fields: { slug } }} = edge;
                 return (
-                  <Menu.Item key={path}>
-                    <Link to={path}>{title}</Link>
+                  <Menu.Item key={slug}>
+                    <Link to={slug}>{title}</Link>
                   </Menu.Item>
                 );
               })

From 598366a5932ec8cb70a55c5f05a229cf0c566ac8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 15:10:04 +0800
Subject: [PATCH 23/75] :lipstick: format code

---
 docs/specification/getting-started.md |  11 +-
 gatsby-node.js                        |  26 +--
 src/components/article.tsx            |   2 +-
 src/components/header.module.less     |  18 +-
 src/components/header.tsx             |  23 ++-
 src/components/layout.tsx             | 277 +++++++++++++-------------
 src/components/search.tsx             |   7 +-
 src/externals.d.ts                    |   2 +-
 src/templates/document.tsx            |  51 ++---
 src/templates/markdown.module.less    |   5 +-
 10 files changed, 222 insertions(+), 200 deletions(-)

diff --git a/docs/specification/getting-started.md b/docs/specification/getting-started.md
index 4723f4256..2f1c05410 100644
--- a/docs/specification/getting-started.md
+++ b/docs/specification/getting-started.md
@@ -9,7 +9,7 @@ order: 0
 
 [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
 [![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 "Percentage of issues still open")
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
 
 G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
 
@@ -59,11 +59,14 @@ const data = [
 const chart = new G2.Chart({
   container: 'c1',
   width: 500,
-  height: 500
+  height: 500,
 });
 
 chart.source(data);
-chart.interval().position('genre*sold').color('genre');
+chart
+  .interval()
+  .position('genre*sold')
+  .color('genre');
 chart.render();
 ```
 
@@ -96,7 +99,7 @@ $ npm run demos
 
 ```js
 // 关闭 G2 的体验改进计划打点请求
-G2.track(false)
+G2.track(false);
 ```
 
 **更新**
diff --git a/gatsby-node.js b/gatsby-node.js
index 636300484..6f7c95f3b 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -9,30 +9,30 @@ const path = require(`path`);
 
 // Add custom url pathname for posts
 exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
+  const { createNodeField } = actions;
   if (node.internal.type === `File`) {
-    const { dir, name } = path.parse(node.absolutePath)
+    const { dir, name } = path.parse(node.absolutePath);
     const slug = path.relative(__dirname, path.join(dir, name));
     createNodeField({
       node,
       name: `slug`,
       value: `/${slug}`,
-    })
+    });
   } else if (
     node.internal.type === `MarkdownRemark` &&
     typeof node.slug === `undefined`
   ) {
-    const fileNode = getNode(node.parent)
+    const fileNode = getNode(node.parent);
     createNodeField({
       node,
       name: `slug`,
       value: fileNode.fields.slug,
-    })
+    });
   }
-}
+};
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions
+  const { createPage } = actions;
   const result = await graphql(`
     {
       allMarkdownRemark(
@@ -48,17 +48,17 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         }
       }
     }
-  `)
+  `);
   // Handle errors
   if (result.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`)
-    return
+    reporter.panicOnBuild(`Error while running GraphQL query.`);
+    return;
   }
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
     createPage({
       path: node.fields.slug, // required
       component: path.resolve(`src/templates/document.tsx`),
       context: {}, // additional data can be passed via context
-    })
-  })
-}
+    });
+  });
+};
diff --git a/src/components/article.tsx b/src/components/article.tsx
index 7ff197c9f..80d72cdbb 100644
--- a/src/components/article.tsx
+++ b/src/components/article.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Layout } from 'antd';
 import styles from './article.module.less';
 
-const Article: React.FC<any> = (props) => (
+const Article: React.FC<any> = props => (
   <Layout.Content className={styles.article}>
     <article {...props} />
   </Layout.Content>
diff --git a/src/components/header.module.less b/src/components/header.module.less
index 24123bd55..04178431d 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -37,7 +37,7 @@
 
     .menu {
       font-weight: 500;
-      color: rgba(0, 0, 0, .65);
+      color: rgba(0, 0, 0, 0.65);
       margin: 0 20px 0 0;
       padding: 0;
       list-style: none;
@@ -48,8 +48,8 @@
         line-height: 60px;
 
         a {
-          color: rgba(0, 0, 0, .65);
-          transition: all .3s;
+          color: rgba(0, 0, 0, 0.65);
+          transition: all 0.3s;
           display: block;
           border-top: 2px solid transparent;
 
@@ -102,25 +102,25 @@
 
       h4 {
         margin-bottom: 12px;
-        color: rgba(0, 0, 0, .85);
+        color: rgba(0, 0, 0, 0.85);
         a {
-          color: rgba(0, 0, 0, .85);
+          color: rgba(0, 0, 0, 0.85);
         }
       }
 
       .productDescription {
         margin-bottom: 8px;
-        color: rgba(0, 0, 0, .45);
+        color: rgba(0, 0, 0, 0.45);
       }
 
       .productLinks {
         > a {
           margin-right: 8px;
-          color: rgba(0, 0, 0, .65);
-          transition: all .3s;
+          color: rgba(0, 0, 0, 0.65);
+          transition: all 0.3s;
 
           &:hover {
-            color: rgba(0, 0, 0, .85);
+            color: rgba(0, 0, 0, 0.85);
           }
         }
       }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index f2b7d3baf..70740277d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -22,14 +22,26 @@ interface ProductProps {
   }>;
 }
 
-const Product: React.FC<ProductProps> = ({ name, icon, url, description, links = [] }) => (
+const Product: React.FC<ProductProps> = ({
+  name,
+  icon,
+  url,
+  description,
+  links = [],
+}) => (
   <li className={styles.product}>
     <img alt={name} src={icon} />
     <div className={styles.productContent}>
-      <a href={url} target="_blank"><h4>{name}</h4></a>
+      <a href={url} target="_blank">
+        <h4>{name}</h4>
+      </a>
       <div className={styles.productDescription}>{description}</div>
       <div className={styles.productLinks}>
-        {links.map(({ link, name }, i) => <a target="_blank" href={link} key={i}>{name}</a>)}
+        {links.map(({ link, name }, i) => (
+          <a target="_blank" href={link} key={i}>
+            {name}
+          </a>
+        ))}
       </div>
     </div>
   </li>
@@ -223,7 +235,10 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
     <div className={styles.left}>
       <h1>
         <Link to="/">
-          <img src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg" alt={siteTitle} />
+          <img
+            src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
+            alt={siteTitle}
+          />
         </Link>
       </h1>
       <span className={styles.divider} />
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 5da52ba06..45af5a640 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -27,141 +27,148 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
     }
   `);
 
-  const footerColumns = [{
-    title: 'G2',
-    items: [
-      {
-        title: '关于 G2',
-        url: '',
-      },
-      {
-        title: '图表示例',
-        url: '',
-      },
-      {
-        title: 'API 文档',
-        url: '',
-      },
-      {
-        title: '使用教程',
-        url: '',
-      },
-    ],
-  }, {
-    title: 'G6',
-    items: [
-      {
-        title: '关于 G2',
-        url: '',
-      },
-      {
-        title: '图表示例',
-        url: '',
-      },
-      {
-        title: 'API 文档',
-        url: '',
-      },
-      {
-        title: '使用教程',
-        url: '',
-      },
-    ],
-  }, {
-    title: 'F2',
-    items: [
-      {
-        title: '关于 G2',
-        url: '',
-      },
-      {
-        title: '图表示例',
-        url: '',
-      },
-      {
-        title: 'API 文档',
-        url: '',
-      },
-      {
-        title: '使用教程',
-        url: '',
-      },
-    ],
-  }, {
-    title: 'L7',
-    items: [
-      {
-        title: '关于 G2',
-        url: '',
-      },
-      {
-        title: '图表示例',
-        url: '',
-      },
-      {
-        title: 'API 文档',
-        url: '',
-      },
-      {
-        title: '使用教程',
-        url: '',
-      },
-    ],
-  }, {
-    title: '墨者学院',
-    items: [
-      {
-        title: '关于 G2',
-        url: '',
-      },
-      {
-        title: '图表示例',
-        url: '',
-      },
-      {
-        title: 'API 文档',
-        url: '',
-      },
-      {
-        title: '使用教程',
-        url: '',
-      },
-    ],
-  }, {
-    icon: (
-      <img
-        src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
-        alt="more products"
-      />
-    ),
-    title: '更多产品',
-    items: [
-      {
-        icon: (
-          <img
-            src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-            alt="yuque"
-          />
-        ),
-        title: '语雀',
-        url: 'https://yuque.com',
-        description: '知识创作与分享工具',
-        openExternal: true,
-      },
-      {
-        icon: (
-          <img
-            src="https://gw.alipayobjects.com/zos/rmsportal/uHocHZfNWZOdsRUonZNr.png"
-            alt="yuque"
-          />
-        ),
-        title: '云凤蝶',
-        url: 'https://yunfengdie.com',
-        description: '中台建站平台',
-        openExternal: true,
-      },
-    ],
-  }];
+  const footerColumns = [
+    {
+      title: 'G2',
+      items: [
+        {
+          title: '关于 G2',
+          url: '',
+        },
+        {
+          title: '图表示例',
+          url: '',
+        },
+        {
+          title: 'API 文档',
+          url: '',
+        },
+        {
+          title: '使用教程',
+          url: '',
+        },
+      ],
+    },
+    {
+      title: 'G6',
+      items: [
+        {
+          title: '关于 G2',
+          url: '',
+        },
+        {
+          title: '图表示例',
+          url: '',
+        },
+        {
+          title: 'API 文档',
+          url: '',
+        },
+        {
+          title: '使用教程',
+          url: '',
+        },
+      ],
+    },
+    {
+      title: 'F2',
+      items: [
+        {
+          title: '关于 G2',
+          url: '',
+        },
+        {
+          title: '图表示例',
+          url: '',
+        },
+        {
+          title: 'API 文档',
+          url: '',
+        },
+        {
+          title: '使用教程',
+          url: '',
+        },
+      ],
+    },
+    {
+      title: 'L7',
+      items: [
+        {
+          title: '关于 G2',
+          url: '',
+        },
+        {
+          title: '图表示例',
+          url: '',
+        },
+        {
+          title: 'API 文档',
+          url: '',
+        },
+        {
+          title: '使用教程',
+          url: '',
+        },
+      ],
+    },
+    {
+      title: '墨者学院',
+      items: [
+        {
+          title: '关于 G2',
+          url: '',
+        },
+        {
+          title: '图表示例',
+          url: '',
+        },
+        {
+          title: 'API 文档',
+          url: '',
+        },
+        {
+          title: '使用教程',
+          url: '',
+        },
+      ],
+    },
+    {
+      icon: (
+        <img
+          src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
+          alt="more products"
+        />
+      ),
+      title: '更多产品',
+      items: [
+        {
+          icon: (
+            <img
+              src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
+              alt="yuque"
+            />
+          ),
+          title: '语雀',
+          url: 'https://yuque.com',
+          description: '知识创作与分享工具',
+          openExternal: true,
+        },
+        {
+          icon: (
+            <img
+              src="https://gw.alipayobjects.com/zos/rmsportal/uHocHZfNWZOdsRUonZNr.png"
+              alt="yuque"
+            />
+          ),
+          title: '云凤蝶',
+          url: 'https://yunfengdie.com',
+          description: '中台建站平台',
+          openExternal: true,
+        },
+      ],
+    },
+  ];
 
   return (
     <>
diff --git a/src/components/search.tsx b/src/components/search.tsx
index b6bd43d88..f29923ba5 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -1,9 +1,4 @@
 import React from 'react';
 import styles from './search.module.less';
 
-export default () => (
-  <input
-    className={styles.input}
-    placeholder="Search..."
-  />
-);
+export default () => <input className={styles.input} placeholder="Search..." />;
diff --git a/src/externals.d.ts b/src/externals.d.ts
index 6fe5a283e..1ea39606b 100644
--- a/src/externals.d.ts
+++ b/src/externals.d.ts
@@ -1 +1 @@
-declare module '*.less'
+declare module '*.less';
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 24c88574b..4ae3db6cc 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,5 +1,5 @@
-import React from "react"
-import { graphql, Link } from "gatsby"
+import React from 'react';
+import { graphql, Link } from 'gatsby';
 import { Layout as AntLayout, Menu } from 'antd';
 import Layout from '../components/layout';
 import Article from '../components/article';
@@ -11,41 +11,42 @@ export default function Template({
 }: {
   data: any;
 }) {
-  const { markdownRemark, allMarkdownRemark } = data // data.markdownRemark holds our post data
-  const { frontmatter, html, fields: { slug } } = markdownRemark
-  const { edges = [] } = allMarkdownRemark
+  const { markdownRemark, allMarkdownRemark } = data; // data.markdownRemark holds our post data
+  const {
+    frontmatter,
+    html,
+    fields: { slug },
+  } = markdownRemark;
+  const { edges = [] } = allMarkdownRemark;
 
   return (
     <Layout>
       <SEO title="Home" />
       <AntLayout style={{ background: '#fff' }}>
         <AntLayout.Sider width={240} theme="light">
-          <Menu
-            mode="inline"
-            selectedKeys={[slug]}
-            style={{ height: '100%' }}
-          >
-            {
-              edges.map((edge: any) => {
-                const { node: { frontmatter: { title }, fields: { slug } }} = edge;
-                return (
-                  <Menu.Item key={slug}>
-                    <Link to={slug}>{title}</Link>
-                  </Menu.Item>
-                );
-              })
-            }
+          <Menu mode="inline" selectedKeys={[slug]} style={{ height: '100%' }}>
+            {edges.map((edge: any) => {
+              const {
+                node: {
+                  frontmatter: { title },
+                  fields: { slug },
+                },
+              } = edge;
+              return (
+                <Menu.Item key={slug}>
+                  <Link to={slug}>{title}</Link>
+                </Menu.Item>
+              );
+            })}
           </Menu>
         </AntLayout.Sider>
         <Article className={styles.markdown}>
           <h1>{frontmatter.title}</h1>
-          <div
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
+          <div dangerouslySetInnerHTML={{ __html: html }} />
         </Article>
       </AntLayout>
     </Layout>
-  )
+  );
 }
 
 export const pageQuery = graphql`
@@ -75,4 +76,4 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
index a7a98211b..48335eb27 100644
--- a/src/templates/markdown.module.less
+++ b/src/templates/markdown.module.less
@@ -1,4 +1,4 @@
-@import "~antd/es/style/themes/default.less";
+@import '~antd/es/style/themes/default.less';
 
 .markdown {
   font-size: 14px;
@@ -96,7 +96,8 @@
   }
 
   pre {
-    font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono',
+      'Ubuntu Mono', monospace;
     background: #f2f4f5;
     border-radius: @border-radius-sm;
     margin: 1em 0;

From beed6e095b3d68161e90399500ebb32f48a431fe Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 16:21:41 +0800
Subject: [PATCH 24/75] support SubMenu for documentations

---
 .antvisrc.ts                          | 25 ++++++++++++
 docs/specification/category2/test1.md |  6 +++
 docs/specification/category2/test2.md |  6 +++
 docs/specification/category2/test3.md |  6 +++
 package.json                          |  2 +
 src/templates/document.tsx            | 58 +++++++++++++++++++++------
 6 files changed, 90 insertions(+), 13 deletions(-)
 create mode 100644 .antvisrc.ts
 create mode 100644 docs/specification/category2/test1.md
 create mode 100644 docs/specification/category2/test2.md
 create mode 100644 docs/specification/category2/test3.md

diff --git a/.antvisrc.ts b/.antvisrc.ts
new file mode 100644
index 000000000..05ea736f8
--- /dev/null
+++ b/.antvisrc.ts
@@ -0,0 +1,25 @@
+export default {
+  'docs': {
+    'specification': {
+      'title': {
+        'zh-CN': '设计语言',
+        'en-US': 'Specification',
+      },
+      order: 0,
+    },
+    'specification/category': {
+      title: {
+        'zh-CN': '分类一',
+        'en-US': 'category',
+      },
+      order: 1,
+    },
+    'specification/category2': {
+      title: {
+        'zh-CN': '分类二',
+        'en-US': 'category',
+      },
+      order: 2,
+    },
+  } as { [key: string] : any },
+};
diff --git a/docs/specification/category2/test1.md b/docs/specification/category2/test1.md
new file mode 100644
index 000000000..b56d26ade
--- /dev/null
+++ b/docs/specification/category2/test1.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+内容。
diff --git a/docs/specification/category2/test2.md b/docs/specification/category2/test2.md
new file mode 100644
index 000000000..6482796a7
--- /dev/null
+++ b/docs/specification/category2/test2.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章二
+order: 1
+---
+
+内容。
diff --git a/docs/specification/category2/test3.md b/docs/specification/category2/test3.md
new file mode 100644
index 000000000..0224dad38
--- /dev/null
+++ b/docs/specification/category2/test3.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章三
+order: 1
+---
+
+内容。
diff --git a/package.json b/package.json
index e3f649b64..831c7d85e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@testing-library/react": "^9.1.4",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.18",
+    "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-helmet": "^5.0.10",
@@ -44,6 +45,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "less": "^3.10.3",
+    "lodash-es": "^4.17.15",
     "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
     "rc-footer": "^0.5.0",
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 4ae3db6cc..020f20066 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,11 +1,29 @@
 import React from 'react';
 import { graphql, Link } from 'gatsby';
 import { Layout as AntLayout, Menu } from 'antd';
+import { groupBy } from 'lodash-es';
 import Layout from '../components/layout';
 import Article from '../components/article';
 import SEO from '../components/seo';
+import meta from '../../.antvisrc';
 import styles from './markdown.module.less';
 
+const { docs } = meta;
+
+const renderMenuItems = (edges: any[]) => edges.map((edge: any) => {
+  const {
+    node: {
+      frontmatter: { title },
+      fields: { slug },
+    },
+  } = edge;
+  return (
+    <Menu.Item key={slug}>
+      <Link to={slug}>{title}</Link>
+    </Menu.Item>
+  );
+});
+
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
 }: {
@@ -19,25 +37,34 @@ export default function Template({
   } = markdownRemark;
   const { edges = [] } = allMarkdownRemark;
 
+  const groupedEdges = groupBy(edges, ({
+    node: {
+      parent: { relativeDirectory },
+    },
+  }: any) => relativeDirectory);
+
   return (
     <Layout>
       <SEO title="Home" />
       <AntLayout style={{ background: '#fff' }}>
         <AntLayout.Sider width={240} theme="light">
           <Menu mode="inline" selectedKeys={[slug]} style={{ height: '100%' }}>
-            {edges.map((edge: any) => {
-              const {
-                node: {
-                  frontmatter: { title },
-                  fields: { slug },
-                },
-              } = edge;
-              return (
-                <Menu.Item key={slug}>
-                  <Link to={slug}>{title}</Link>
-                </Menu.Item>
-              );
-            })}
+            {
+              Object.keys(groupedEdges)
+                .sort((a: string, b: string) => docs[a].order - docs[b].order)
+                .map(path => {
+                if (path === 'specification') {
+                  return renderMenuItems(groupedEdges[path]);
+                }
+                if (path.split('/').length > 1) {
+                  return (
+                    <Menu.SubMenu key={path} title={docs[path].title['zh-CN']}>
+                      {renderMenuItems(groupedEdges[path])}
+                    </Menu.SubMenu>
+                  );
+                }
+              })
+            }
           </Menu>
         </AntLayout.Sider>
         <Article className={styles.markdown}>
@@ -72,6 +99,11 @@ export const pageQuery = graphql`
           frontmatter {
             title
           }
+          parent {
+            ... on File {
+              relativeDirectory
+            }
+          }
         }
       }
     }

From 8b1244e7a2c46d3837403498d23ca073e3471d1b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 16:25:03 +0800
Subject: [PATCH 25/75] defaultly expand all sub menu

---
 src/templates/document.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 020f20066..5caa3432c 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { graphql, Link } from 'gatsby';
 import { Layout as AntLayout, Menu } from 'antd';
 import { groupBy } from 'lodash-es';
@@ -43,12 +43,20 @@ export default function Template({
     },
   }: any) => relativeDirectory);
 
+  const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
+
   return (
     <Layout>
       <SEO title="Home" />
       <AntLayout style={{ background: '#fff' }}>
-        <AntLayout.Sider width={240} theme="light">
-          <Menu mode="inline" selectedKeys={[slug]} style={{ height: '100%' }}>
+        <AntLayout.Sider width={280} theme="light">
+          <Menu
+            mode="inline"
+            selectedKeys={[slug]}
+            style={{ height: '100%' }}
+            openKeys={openKeys}
+            onOpenChange={openKeys => setOpenKeys(openKeys)}
+          >
             {
               Object.keys(groupedEdges)
                 .sort((a: string, b: string) => docs[a].order - docs[b].order)

From e1a5e29ef23a5f9ff49a0fa33fa003e04973000e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 16:51:26 +0800
Subject: [PATCH 26/75] documents can be split to different folders

---
 .antvisrc.ts                 |  7 ++++++
 docs/other/category/test1.md |  6 +++++
 docs/other/category/test2.md |  6 +++++
 docs/other/category/test3.md |  6 +++++
 docs/other/other.md          |  6 +++++
 src/components/header.tsx    | 12 +++++++++-
 src/templates/document.tsx   | 46 +++++++++++++++++++++++++-----------
 7 files changed, 74 insertions(+), 15 deletions(-)
 create mode 100644 docs/other/category/test1.md
 create mode 100644 docs/other/category/test2.md
 create mode 100644 docs/other/category/test3.md
 create mode 100644 docs/other/other.md

diff --git a/.antvisrc.ts b/.antvisrc.ts
index 05ea736f8..97fe47a6f 100644
--- a/.antvisrc.ts
+++ b/.antvisrc.ts
@@ -21,5 +21,12 @@ export default {
       },
       order: 2,
     },
+    'other': {
+      'title': {
+        'zh-CN': '其他文档',
+        'en-US': 'other',
+      },
+      order: 0,
+    },
   } as { [key: string] : any },
 };
diff --git a/docs/other/category/test1.md b/docs/other/category/test1.md
new file mode 100644
index 000000000..b56d26ade
--- /dev/null
+++ b/docs/other/category/test1.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+内容。
diff --git a/docs/other/category/test2.md b/docs/other/category/test2.md
new file mode 100644
index 000000000..6482796a7
--- /dev/null
+++ b/docs/other/category/test2.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章二
+order: 1
+---
+
+内容。
diff --git a/docs/other/category/test3.md b/docs/other/category/test3.md
new file mode 100644
index 000000000..0224dad38
--- /dev/null
+++ b/docs/other/category/test3.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章三
+order: 1
+---
+
+内容。
diff --git a/docs/other/other.md b/docs/other/other.md
new file mode 100644
index 000000000..88c0f5440
--- /dev/null
+++ b/docs/other/other.md
@@ -0,0 +1,6 @@
+---
+title: Other
+order: 0
+---
+
+测试用。
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 70740277d..bbcad0227 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -250,12 +250,22 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
           <Link
             to="/docs/specification/getting-started"
             className={classNames({
-              [styles.active]: location.pathname.startsWith('/docs'),
+              [styles.active]: location.pathname.startsWith('/docs/specification'),
             })}
           >
             设计语言
           </Link>
         </li>
+        <li>
+          <Link
+            to="/docs/other/other"
+            className={classNames({
+              [styles.active]: location.pathname.startsWith('/docs/other'),
+            })}
+          >
+            其他文档
+          </Link>
+        </li>
         <li>
           <Popover
             title={null}
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 5caa3432c..3ffd5d1c6 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -24,10 +24,18 @@ const renderMenuItems = (edges: any[]) => edges.map((edge: any) => {
   );
 });
 
+const shouldBeShown = (slug: string, path: string) => {
+  const slugPieces = slug.split('/');
+  const pathPieces = path.split('/').slice(2);
+  return slugPieces.some(slugPiece => pathPieces.includes(slugPiece));
+};
+
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
+  path,
 }: {
   data: any;
+  path: string;
 }) {
   const { markdownRemark, allMarkdownRemark } = data; // data.markdownRemark holds our post data
   const {
@@ -36,7 +44,6 @@ export default function Template({
     fields: { slug },
   } = markdownRemark;
   const { edges = [] } = allMarkdownRemark;
-
   const groupedEdges = groupBy(edges, ({
     node: {
       parent: { relativeDirectory },
@@ -59,19 +66,30 @@ export default function Template({
           >
             {
               Object.keys(groupedEdges)
-                .sort((a: string, b: string) => docs[a].order - docs[b].order)
-                .map(path => {
-                if (path === 'specification') {
-                  return renderMenuItems(groupedEdges[path]);
-                }
-                if (path.split('/').length > 1) {
-                  return (
-                    <Menu.SubMenu key={path} title={docs[path].title['zh-CN']}>
-                      {renderMenuItems(groupedEdges[path])}
-                    </Menu.SubMenu>
-                  );
-                }
-              })
+                .sort((a: string, b: string) => {
+                  if (docs[a] && docs[b]) {
+                    return docs[a].order - docs[b].order;
+                  }
+                  return 0;
+                })
+                .map(slug => {
+                  if (!shouldBeShown(slug, path)) {
+                    return null;
+                  }
+                  if (slug.split('/').length === 1 && docs[slug.split('/')[0]]) {
+                    return renderMenuItems(groupedEdges[slug]);
+                  }
+                  if (slug.split('/').length > 1) {
+                    return (
+                      <Menu.SubMenu
+                        key={slug}
+                        title={(docs[slug] && docs[slug].title) ? docs[slug].title['zh-CN'] : slug}
+                      >
+                        {renderMenuItems(groupedEdges[slug])}
+                      </Menu.SubMenu>
+                    );
+                  }
+                })
             }
           </Menu>
         </AntLayout.Sider>

From cf03598a6fc0a4a2cab1f6a2a746fac011e43437 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 16:55:36 +0800
Subject: [PATCH 27/75] localize the document menu title

---
 package.json              | 7 +++++++
 src/components/header.tsx | 9 ++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 831c7d85e..9f90f2354 100644
--- a/package.json
+++ b/package.json
@@ -42,12 +42,14 @@
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-transformer-remark": "^2.6.24",
     "gatsby-transformer-sharp": "^2.2.14",
+    "husky": "^3.0.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "lodash-es": "^4.17.15",
     "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.0",
     "rc-footer": "^0.5.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -65,5 +67,10 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "test": "jest"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
   }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index bbcad0227..0685e3818 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -4,6 +4,7 @@ import GithubCorner from 'react-github-corner';
 import { Popover } from 'antd';
 import classNames from 'classnames';
 import Search from './search';
+import meta from '../../.antvisrc';
 import styles from './header.module.less';
 
 interface HeaderProps {
@@ -250,10 +251,12 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
           <Link
             to="/docs/specification/getting-started"
             className={classNames({
-              [styles.active]: location.pathname.startsWith('/docs/specification'),
+              [styles.active]: location.pathname.startsWith(
+                '/docs/specification',
+              ),
             })}
           >
-            设计语言
+            {meta.docs['specification'].title['zh-CN']}
           </Link>
         </li>
         <li>
@@ -263,7 +266,7 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
               [styles.active]: location.pathname.startsWith('/docs/other'),
             })}
           >
-            其他文档
+            {meta.docs['other'].title['zh-CN']}
           </Link>
         </li>
         <li>

From cdadcb642196bc99aa6442d502c2294707dd58de Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 16:57:26 +0800
Subject: [PATCH 28/75] export docs from .antvisrc

---
 .antvisrc.ts               |  54 ++++++++++----------
 src/components/header.tsx  |   6 +--
 src/templates/document.tsx | 100 +++++++++++++++++++------------------
 3 files changed, 81 insertions(+), 79 deletions(-)

diff --git a/.antvisrc.ts b/.antvisrc.ts
index 97fe47a6f..e75c9d0ed 100644
--- a/.antvisrc.ts
+++ b/.antvisrc.ts
@@ -1,32 +1,30 @@
-export default {
-  'docs': {
-    'specification': {
-      'title': {
-        'zh-CN': '设计语言',
-        'en-US': 'Specification',
-      },
-      order: 0,
+export const docs = {
+  specification: {
+    title: {
+      'zh-CN': '设计语言',
+      'en-US': 'Specification',
     },
-    'specification/category': {
-      title: {
-        'zh-CN': '分类一',
-        'en-US': 'category',
-      },
-      order: 1,
+    order: 0,
+  },
+  'specification/category': {
+    title: {
+      'zh-CN': '分类一',
+      'en-US': 'category',
     },
-    'specification/category2': {
-      title: {
-        'zh-CN': '分类二',
-        'en-US': 'category',
-      },
-      order: 2,
+    order: 1,
+  },
+  'specification/category2': {
+    title: {
+      'zh-CN': '分类二',
+      'en-US': 'category',
     },
-    'other': {
-      'title': {
-        'zh-CN': '其他文档',
-        'en-US': 'other',
-      },
-      order: 0,
+    order: 2,
+  },
+  other: {
+    title: {
+      'zh-CN': '其他文档',
+      'en-US': 'other',
     },
-  } as { [key: string] : any },
-};
+    order: 0,
+  },
+} as { [key: string]: any };
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 0685e3818..58fbc5320 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -4,7 +4,7 @@ import GithubCorner from 'react-github-corner';
 import { Popover } from 'antd';
 import classNames from 'classnames';
 import Search from './search';
-import meta from '../../.antvisrc';
+import { docs } from '../../.antvisrc';
 import styles from './header.module.less';
 
 interface HeaderProps {
@@ -256,7 +256,7 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
               ),
             })}
           >
-            {meta.docs['specification'].title['zh-CN']}
+            {docs['specification'].title['zh-CN']}
           </Link>
         </li>
         <li>
@@ -266,7 +266,7 @@ const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
               [styles.active]: location.pathname.startsWith('/docs/other'),
             })}
           >
-            {meta.docs['other'].title['zh-CN']}
+            {docs['other'].title['zh-CN']}
           </Link>
         </li>
         <li>
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 3ffd5d1c6..07e008e6f 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -5,24 +5,23 @@ import { groupBy } from 'lodash-es';
 import Layout from '../components/layout';
 import Article from '../components/article';
 import SEO from '../components/seo';
-import meta from '../../.antvisrc';
+import { docs } from '../../.antvisrc';
 import styles from './markdown.module.less';
 
-const { docs } = meta;
-
-const renderMenuItems = (edges: any[]) => edges.map((edge: any) => {
-  const {
-    node: {
-      frontmatter: { title },
-      fields: { slug },
-    },
-  } = edge;
-  return (
-    <Menu.Item key={slug}>
-      <Link to={slug}>{title}</Link>
-    </Menu.Item>
-  );
-});
+const renderMenuItems = (edges: any[]) =>
+  edges.map((edge: any) => {
+    const {
+      node: {
+        frontmatter: { title },
+        fields: { slug },
+      },
+    } = edge;
+    return (
+      <Menu.Item key={slug}>
+        <Link to={slug}>{title}</Link>
+      </Menu.Item>
+    );
+  });
 
 const shouldBeShown = (slug: string, path: string) => {
   const slugPieces = slug.split('/');
@@ -44,11 +43,14 @@ export default function Template({
     fields: { slug },
   } = markdownRemark;
   const { edges = [] } = allMarkdownRemark;
-  const groupedEdges = groupBy(edges, ({
-    node: {
-      parent: { relativeDirectory },
-    },
-  }: any) => relativeDirectory);
+  const groupedEdges = groupBy(
+    edges,
+    ({
+      node: {
+        parent: { relativeDirectory },
+      },
+    }: any) => relativeDirectory,
+  );
 
   const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
 
@@ -64,33 +66,35 @@ export default function Template({
             openKeys={openKeys}
             onOpenChange={openKeys => setOpenKeys(openKeys)}
           >
-            {
-              Object.keys(groupedEdges)
-                .sort((a: string, b: string) => {
-                  if (docs[a] && docs[b]) {
-                    return docs[a].order - docs[b].order;
-                  }
-                  return 0;
-                })
-                .map(slug => {
-                  if (!shouldBeShown(slug, path)) {
-                    return null;
-                  }
-                  if (slug.split('/').length === 1 && docs[slug.split('/')[0]]) {
-                    return renderMenuItems(groupedEdges[slug]);
-                  }
-                  if (slug.split('/').length > 1) {
-                    return (
-                      <Menu.SubMenu
-                        key={slug}
-                        title={(docs[slug] && docs[slug].title) ? docs[slug].title['zh-CN'] : slug}
-                      >
-                        {renderMenuItems(groupedEdges[slug])}
-                      </Menu.SubMenu>
-                    );
-                  }
-                })
-            }
+            {Object.keys(groupedEdges)
+              .sort((a: string, b: string) => {
+                if (docs[a] && docs[b]) {
+                  return docs[a].order - docs[b].order;
+                }
+                return 0;
+              })
+              .map(slug => {
+                if (!shouldBeShown(slug, path)) {
+                  return null;
+                }
+                if (slug.split('/').length === 1 && docs[slug.split('/')[0]]) {
+                  return renderMenuItems(groupedEdges[slug]);
+                }
+                if (slug.split('/').length > 1) {
+                  return (
+                    <Menu.SubMenu
+                      key={slug}
+                      title={
+                        docs[slug] && docs[slug].title
+                          ? docs[slug].title['zh-CN']
+                          : slug
+                      }
+                    >
+                      {renderMenuItems(groupedEdges[slug])}
+                    </Menu.SubMenu>
+                  );
+                }
+              })}
           </Menu>
         </AntLayout.Sider>
         <Article className={styles.markdown}>

From e9451781305ec1d5c0503ec573e640cd01db26e4 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 17:01:02 +0800
Subject: [PATCH 29/75] fix location missing in ssr

---
 gatsby-node.js            | 10 ++++++++++
 package.json              |  3 +++
 src/components/header.tsx |  5 ++++-
 src/components/layout.tsx | 36 ++++++++++++++++++++----------------
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index 6f7c95f3b..c41673251 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -62,3 +62,13 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     });
   });
 };
+
+exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
+  const config = getConfig()
+  if (stage.startsWith('develop') && config.resolve) {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'react-dom': '@hot-loader/react-dom',
+    }
+  }
+};
diff --git a/package.json b/package.json
index 9f90f2354..3bc4dfda0 100644
--- a/package.json
+++ b/package.json
@@ -72,5 +72,8 @@
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
+  },
+  "dependencies": {
+    "@hot-loader/react-dom": "^16.9.0+4.12.11"
   }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 58fbc5320..30a702230 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -231,7 +231,10 @@ const Products: React.FC<any> = () => (
   </div>
 );
 
-const Header: React.FC<HeaderProps> = ({ siteTitle }) => (
+const Header: React.FC<HeaderProps> = ({
+  siteTitle,
+  location = { pathname: '' },
+}) => (
   <header className={styles.header}>
     <div className={styles.left}>
       <h1>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 45af5a640..37b320b97 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -7,16 +7,16 @@
 
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
+import { Location } from '@reach/router';
 import Footer from 'rc-footer';
 import Header from './header';
 import styles from './layout.module.less';
 
 interface LayoutProps {
   children?: React.ReactNode;
-  location?: Location;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children, location }) => {
+const Layout: React.FC<LayoutProps> = ({ children }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -171,20 +171,24 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
   ];
 
   return (
-    <>
-      <Header siteTitle={data.site.siteMetadata.title} location={location} />
-      <main className={styles.main}>{children}</main>
-      <Footer
-        columns={footerColumns}
-        bottom={
-          <div>
-            © {new Date().getFullYear()}, Built with
-            {` `}
-            <a href="http://xtech.antfin.com/">AFX</a>
-          </div>
-        }
-      />
-    </>
+    <Location>
+      {({ location }) => (
+        <>
+          <Header siteTitle={data.site.siteMetadata.title} location={location} />
+          <main className={styles.main}>{children}</main>
+          <Footer
+            columns={footerColumns}
+            bottom={
+              <div>
+                © {new Date().getFullYear()}, Built with
+                {` `}
+                <a href="http://xtech.antfin.com/">AFX</a>
+              </div>
+            }
+          />
+        </>
+      )}
+    </Location>
   );
 };
 

From c7a9659e80eff92ef9411faf478adf1a5c3f5bfa Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 17:51:59 +0800
Subject: [PATCH 30/75] update home and 404 pages

---
 src/pages/404.tsx   | 18 +++++++++++++++---
 src/pages/index.tsx | 10 ++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index a152c70bd..669050ae2 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,13 +1,25 @@
 import React from 'react';
-
+import { Result, Button, Icon } from 'antd';
+import { Link } from 'gatsby';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
 
 const NotFoundPage = () => (
   <Layout>
     <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <Result
+      status="404"
+      title="404"
+      subTitle="Sorry, the page you visited does not exist."
+      extra={
+        <Link to="/">
+          <Button type="primary">
+            <Icon type="home" />
+            Back Home
+          </Button>
+        </Link>
+      }
+    />
   </Layout>
 );
 
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a5cad7871..8b8402b98 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
+import { Skeleton } from 'antd';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
-    <SEO title="Home" />
-    <h1>Hi people</h1>
+    <SEO title="首页" />
+    <div style={{ margin: '0 auto', padding: '0 80px' }}>
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+    </div>
   </Layout>
 );
 

From a489c6fe5b343cb5aeace732ee4a261d6825def0 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 17:56:44 +0800
Subject: [PATCH 31/75] fix mixed content

---
 docs/specification/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/specification/getting-started.md b/docs/specification/getting-started.md
index 2f1c05410..6e62aad4b 100644
--- a/docs/specification/getting-started.md
+++ b/docs/specification/getting-started.md
@@ -8,7 +8,7 @@ order: 0
 ![](https://img.shields.io/badge/license-MIT-000000.svg)
 
 [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
-[![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![NPM Downloads](https://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
 [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
 
 G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

From d72151666162950d9277092ac5324b2342a4d55a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 20:41:30 +0800
Subject: [PATCH 32/75] highlight markdown code block

---
 docs/specification/getting-started.md |  4 +++-
 gatsby-browser.js                     |  5 +++++
 gatsby-config.js                      | 14 ++++++++++++-
 package.json                          |  7 ++++---
 src/components/layout.module.less     | 12 ++++++++---
 src/templates/markdown.module.less    | 29 +--------------------------
 6 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/docs/specification/getting-started.md b/docs/specification/getting-started.md
index 6e62aad4b..8d25cb0de 100644
--- a/docs/specification/getting-started.md
+++ b/docs/specification/getting-started.md
@@ -65,7 +65,7 @@ const chart = new G2.Chart({
 chart.source(data);
 chart
   .interval()
-  .position('genre*sold')
+  .position('genre*sold') // highlight-line
   .color('genre');
 chart.render();
 ```
@@ -113,3 +113,5 @@ G2.track(false);
 如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/g2/issues) 看看有没有类似的 bug 或者建议。
 
 如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md)。
+
+I can highlight `css±.some-class { background-color: red }` with CSS syntax.
diff --git a/gatsby-browser.js b/gatsby-browser.js
index b1e5c316b..3febca4fc 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -5,3 +5,8 @@
  */
 
 // You can delete this file if you're not using it
+import 'normalize.css/normalize.css';
+import 'rc-footer/assets/index.less';
+import 'antd/dist/antd.css';
+import 'prism-themes/themes/prism-base16-ateliersulphurpool.light.css';
+import 'prismjs/plugins/command-line/prism-command-line.css';
diff --git a/gatsby-config.js b/gatsby-config.js
index 223360341..55483462d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -13,7 +13,19 @@ module.exports = {
         path: `${__dirname}/docs`,
       },
     },
-    `gatsby-transformer-remark`,
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              inlineCodeMarker: '±',
+            },
+          },
+        ],
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-offline`,
diff --git a/package.json b/package.json
index 3bc4dfda0..50b99526f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "devDependencies": {
+    "@hot-loader/react-dom": "^16.9.0+4.12.11",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
     "@types/classnames": "^2.2.9",
@@ -39,6 +40,7 @@
     "gatsby-plugin-react-helmet": "^3.1.7",
     "gatsby-plugin-sharp": "^2.2.22",
     "gatsby-plugin-typescript": "^2.1.8",
+    "gatsby-remark-prismjs": "^3.3.16",
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-transformer-remark": "^2.6.24",
     "gatsby-transformer-sharp": "^2.2.14",
@@ -50,6 +52,8 @@
     "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.0",
+    "prism-themes": "^1.2.0",
+    "prismjs": "^1.17.1",
     "rc-footer": "^0.5.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -72,8 +76,5 @@
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
-  },
-  "dependencies": {
-    "@hot-loader/react-dom": "^16.9.0+4.12.11"
   }
 }
diff --git a/src/components/layout.module.less b/src/components/layout.module.less
index e2174397c..ee126ce56 100644
--- a/src/components/layout.module.less
+++ b/src/components/layout.module.less
@@ -1,7 +1,13 @@
 :global {
-  @import '~normalize.css/normalize.css';
-  @import '~rc-footer/assets/index.less';
-  @import '~antd/dist/antd.css';
+  .gatsby-highlight-code-line {
+    background-color: #feb;
+    display: block;
+    margin-right: -1em;
+    margin-left: -1em;
+    padding-right: 1em;
+    padding-left: 0.75em;
+    border-left: 0.25em solid #f99;
+  }
 }
 
 .main {
diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
index 48335eb27..58ef4fa16 100644
--- a/src/templates/markdown.module.less
+++ b/src/templates/markdown.module.less
@@ -3,6 +3,7 @@
 .markdown {
   font-size: 14px;
   line-height: 2;
+  color: #222;
 
   > img {
     max-width: ~'calc(100% - 32px)';
@@ -86,34 +87,6 @@
     margin: 0.2em 0;
   }
 
-  code {
-    margin: 0 1px;
-    padding: 0.2em 0.4em;
-    font-size: 0.9em;
-    background: #f2f4f5;
-    border: 1px solid #eee;
-    border-radius: 3px;
-  }
-
-  pre {
-    font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono',
-      'Ubuntu Mono', monospace;
-    background: #f2f4f5;
-    border-radius: @border-radius-sm;
-    margin: 1em 0;
-    padding: 12px;
-    overflow: auto;
-    color: @text-color;
-    background: #f2f4f5;
-  }
-
-  pre code {
-    border: none;
-    background: transparent;
-    padding: 0;
-    font-size: @font-size-base - 1px;
-  }
-
   strong,
   b {
     font-weight: 500;

From 2ea692d4fbc13411f82135da652a22f7bc803a44 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 20:49:54 +0800
Subject: [PATCH 33/75] add gatsby-remark-autolink-headers

---
 gatsby-config.js | 1 +
 package.json     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/gatsby-config.js b/gatsby-config.js
index 55483462d..a660fb066 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -23,6 +23,7 @@ module.exports = {
               inlineCodeMarker: '±',
             },
           },
+          `gatsby-remark-autolink-headers`,
         ],
       },
     },
diff --git a/package.json b/package.json
index 50b99526f..41833dd1f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "gatsby-plugin-react-helmet": "^3.1.7",
     "gatsby-plugin-sharp": "^2.2.22",
     "gatsby-plugin-typescript": "^2.1.8",
+    "gatsby-remark-autolink-headers": "^2.1.13",
     "gatsby-remark-prismjs": "^3.3.16",
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-transformer-remark": "^2.6.24",

From 6009ba788acc9005bb2a615092c880f6beccd0ed Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 20:57:06 +0800
Subject: [PATCH 34/75] fix document category

---
 src/templates/document.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 07e008e6f..a3344843e 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -26,7 +26,7 @@ const renderMenuItems = (edges: any[]) =>
 const shouldBeShown = (slug: string, path: string) => {
   const slugPieces = slug.split('/');
   const pathPieces = path.split('/').slice(2);
-  return slugPieces.some(slugPiece => pathPieces.includes(slugPiece));
+  return slugPieces[0] === pathPieces[0];
 };
 
 export default function Template({

From 8cde478ced8289b8b189b307a8dd7b8cfde4e80f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 27 Sep 2019 20:58:40 +0800
Subject: [PATCH 35/75] fix mixed content

---
 .gitignore                            | 4 ++--
 docs/specification/getting-started.md | 2 +-
 src/components/layout.tsx             | 7 +++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index e86fe2555..9f6608aec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,7 +20,7 @@ coverage
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)
@@ -29,7 +29,7 @@ bower_components
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
+# Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 
 # Dependency directories
diff --git a/docs/specification/getting-started.md b/docs/specification/getting-started.md
index 8d25cb0de..1a5ef430a 100644
--- a/docs/specification/getting-started.md
+++ b/docs/specification/getting-started.md
@@ -9,7 +9,7 @@ order: 0
 
 [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
 [![NPM Downloads](https://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+[![Percentage of issues still open](https://isitmaintained.com/badge/open/antvis/g2.svg)](https://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
 
 G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
 
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 37b320b97..beb3a1ca4 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -174,7 +174,10 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     <Location>
       {({ location }) => (
         <>
-          <Header siteTitle={data.site.siteMetadata.title} location={location} />
+          <Header
+            siteTitle={data.site.siteMetadata.title}
+            location={location}
+          />
           <main className={styles.main}>{children}</main>
           <Footer
             columns={footerColumns}
@@ -182,7 +185,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
               <div>
                 © {new Date().getFullYear()}, Built with
                 {` `}
-                <a href="http://xtech.antfin.com/">AFX</a>
+                <a href="https://xtech.antfin.com/">AFX</a>
               </div>
             }
           />

From d36639c75c4f68746104a60a6caf15f8191b22b3 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 16:20:36 +0800
Subject: [PATCH 36/75] :globe_with_meridians: i18n docs support

---
 docs/other/category/{test1.md => test2.en.md} |   0
 docs/other/category/test2.md                  |   6 -
 .../test1.md => other/category/test2.zh.md}   |   0
 docs/other/category/test3.md                  |   6 -
 docs/other/getting-started.en.md              | 116 +++++++++++++++++
 .../getting-started.zh.md}                    |   2 +-
 docs/other/other.md                           |   6 -
 .../test1.md => category/test2.en.md}         |   0
 docs/specification/category/test2.md          |   6 -
 docs/specification/category/test2.zh.md       |   6 +
 docs/specification/category/test3.md          |   6 -
 docs/specification/category2/test2.md         |   6 -
 docs/specification/category2/test3.md         |   6 -
 docs/specification/faq.md                     |   6 -
 docs/specification/getting-started.en.md      | 116 +++++++++++++++++
 docs/specification/getting-started.zh.md      | 117 ++++++++++++++++++
 gatsby-config.js                              |  14 ++-
 gatsby-node.js                                |  40 +++---
 package.json                                  |   2 +
 src/externals.d.ts                            |   2 +
 src/pages/index.en.tsx                        |  19 +++
 src/pages/index.tsx                           |  49 +++++---
 src/pages/index.zh.tsx                        |  19 +++
 23 files changed, 469 insertions(+), 81 deletions(-)
 rename docs/other/category/{test1.md => test2.en.md} (100%)
 delete mode 100644 docs/other/category/test2.md
 rename docs/{specification/category/test1.md => other/category/test2.zh.md} (100%)
 delete mode 100644 docs/other/category/test3.md
 create mode 100644 docs/other/getting-started.en.md
 rename docs/{specification/getting-started.md => other/getting-started.zh.md} (99%)
 delete mode 100644 docs/other/other.md
 rename docs/specification/{category2/test1.md => category/test2.en.md} (100%)
 delete mode 100644 docs/specification/category/test2.md
 create mode 100644 docs/specification/category/test2.zh.md
 delete mode 100644 docs/specification/category/test3.md
 delete mode 100644 docs/specification/category2/test2.md
 delete mode 100644 docs/specification/category2/test3.md
 delete mode 100644 docs/specification/faq.md
 create mode 100644 docs/specification/getting-started.en.md
 create mode 100644 docs/specification/getting-started.zh.md
 create mode 100644 src/pages/index.en.tsx
 create mode 100644 src/pages/index.zh.tsx

diff --git a/docs/other/category/test1.md b/docs/other/category/test2.en.md
similarity index 100%
rename from docs/other/category/test1.md
rename to docs/other/category/test2.en.md
diff --git a/docs/other/category/test2.md b/docs/other/category/test2.md
deleted file mode 100644
index 6482796a7..000000000
--- a/docs/other/category/test2.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 分类测试文章二
-order: 1
----
-
-内容。
diff --git a/docs/specification/category/test1.md b/docs/other/category/test2.zh.md
similarity index 100%
rename from docs/specification/category/test1.md
rename to docs/other/category/test2.zh.md
diff --git a/docs/other/category/test3.md b/docs/other/category/test3.md
deleted file mode 100644
index 0224dad38..000000000
--- a/docs/other/category/test3.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 分类测试文章三
-order: 1
----
-
-内容。
diff --git a/docs/other/getting-started.en.md b/docs/other/getting-started.en.md
new file mode 100644
index 000000000..ab59e22f6
--- /dev/null
+++ b/docs/other/getting-started.en.md
@@ -0,0 +1,116 @@
+---
+title: Getting Started
+order: 0
+---
+
+[![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2)
+![](https://img.shields.io/badge/language-javascript-red.svg)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+[![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
+[![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+
+G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.
+
+**Special thanks to [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson), the author of [_The Grammar Of Graphics_](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), whose book served as the foundation for G2.**
+
+[More details about G2](https://antv.alipay.com/zh-cn/g2/3.x/index.html).
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/AOwgKIjknXfggPijmhym.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/nfiOREzMIsENrzUeLOGR.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/uZZmaudtKRnvUhmUdZSZ.gif" width="180"><img src="https://gw.alipayobjects.com/zos/rmsportal/ifSTXzrGbvtLRpnAvAiZ.gif" width="200">
+
+## Installation
+
+```bash
+$ npm install @antv/g2
+```
+
+### Usage
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import G2 from '@antv/g2';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 1150 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const chart = new G2.Chart({
+  container: 'c1',
+  width: 500,
+  height: 500,
+});
+
+chart.source(data);
+chart
+  .interval()
+  .position('genre*sold')
+  .color('genre');
+chart.render();
+```
+
+[More examples](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+![demos](https://user-images.githubusercontent.com/1655789/34187141-d800fe94-e56a-11e7-878a-4dc0e4f538d9.png)
+
+## Development
+
+```bash
+$ npm install
+
+# run test case
+$ npm run test-live
+
+# build watching file changes and run demos
+$ npm run dev
+
+# run demos
+$ npm run demos
+```
+
+## How to Contribute
+
+Please let us know how can we help. Do check out [issues](https://github.com/antvis/g2/issues) for bug reports or suggestions first.
+
+To become a contributor, please follow our [contributing guide](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md).
+
+## ~~Experience Improvement Program Description~~
+
+~~In order to serve the users better, G2 will send the URL and version information back to the AntV server:~~
+
+~~https://kcart.alipay.com/web/bi.do~~
+
+~~**Except for URL and G2 version information, no other information will be collected.** You can also turn it off with the following code:~~
+
+```js
+// disable tracking
+G2.track(false);
+```
+
+**update:**
+
+**We decided to terminate the "Experience Improvement Program". In verson `@antv/g2@3.4.7` and above, all tracking code is removed, no unexpected remote request will be sent while you are using G2.**
+
+<!-- GITCONTRIBUTOR_START -->
+
+## Contributors
+
+|     [<img src="https://avatars1.githubusercontent.com/u/1655789?v=4" width="100px;"/><br/><sub><b>leungwensen</b></sub>](https://github.com/leungwensen)<br/>     |         [<img src="https://avatars3.githubusercontent.com/u/6628666?v=4" width="100px;"/><br/><sub><b>simaQ</b></sub>](https://github.com/simaQ)<br/>         |   [<img src="https://avatars1.githubusercontent.com/u/1264678?v=4" width="100px;"/><br/><sub><b>dxq613</b></sub>](https://github.com/dxq613)<br/>   | [<img src="https://avatars3.githubusercontent.com/u/8325822?v=4" width="100px;"/><br/><sub><b>elaine1234</b></sub>](https://github.com/elaine1234)<br/> |  [<img src="https://avatars0.githubusercontent.com/u/7098619?v=4" width="100px;"/><br/><sub><b>guisturdy</b></sub>](https://github.com/guisturdy)<br/>  | [<img src="https://avatars3.githubusercontent.com/u/5888974?v=4" width="100px;"/><br/><sub><b>paleface001</b></sub>](https://github.com/paleface001)<br/> |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|   [<img src="https://avatars0.githubusercontent.com/u/8186664?v=4" width="100px;"/><br/><sub><b>chenshuai2144</b></sub>](https://github.com/chenshuai2144)<br/>   |       [<img src="https://avatars3.githubusercontent.com/u/6111424?v=4" width="100px;"/><br/><sub><b>xile611</b></sub>](https://github.com/xile611)<br/>       |   [<img src="https://avatars3.githubusercontent.com/u/5591805?v=4" width="100px;"/><br/><sub><b>maplor</b></sub>](https://github.com/maplor)<br/>   |   [<img src="https://avatars3.githubusercontent.com/u/6560377?v=4" width="100px;"/><br/><sub><b>zhfanrui</b></sub>](https://github.com/zhfanrui)<br/>   |      [<img src="https://avatars2.githubusercontent.com/u/6942296?v=4" width="100px;"/><br/><sub><b>Frezc</b></sub>](https://github.com/Frezc)<br/>      |   [<img src="https://avatars1.githubusercontent.com/u/6812138?v=4" width="100px;"/><br/><sub><b>Leannechn</b></sub>](https://github.com/Leannechn)<br/>   |
+| [<img src="https://avatars2.githubusercontent.com/u/1451480?v=4" width="100px;"/><br/><sub><b>janjakubnanista</b></sub>](https://github.com/janjakubnanista)<br/> |     [<img src="https://avatars1.githubusercontent.com/u/11624840?v=4" width="100px;"/><br/><sub><b>ParryQiu</b></sub>](https://github.com/ParryQiu)<br/>      | [<img src="https://avatars3.githubusercontent.com/u/22516098?v=4" width="100px;"/><br/><sub><b>Sai0514</b></sub>](https://github.com/Sai0514)<br/>  |   [<img src="https://avatars0.githubusercontent.com/u/9816225?v=4" width="100px;"/><br/><sub><b>liximomo</b></sub>](https://github.com/liximomo)<br/>   | [<img src="https://avatars1.githubusercontent.com/u/9054130?v=4" width="100px;"/><br/><sub><b>wensen-lws</b></sub>](https://github.com/wensen-lws)<br/> |    [<img src="https://avatars1.githubusercontent.com/u/1011681?v=4" width="100px;"/><br/><sub><b>xudafeng</b></sub>](https://github.com/xudafeng)<br/>    |
+|    [<img src="https://avatars1.githubusercontent.com/u/2370929?v=4" width="100px;"/><br/><sub><b>wangyu-kelly</b></sub>](https://github.com/wangyu-kelly)<br/>    | [<img src="https://avatars0.githubusercontent.com/u/9314735?v=4" width="100px;"/><br/><sub><b>BlackGanglion</b></sub>](https://github.com/BlackGanglion)<br/> |  [<img src="https://avatars3.githubusercontent.com/u/210810?v=4" width="100px;"/><br/><sub><b>illumen</b></sub>](https://github.com/illumen)<br/>   |  [<img src="https://avatars1.githubusercontent.com/u/827205?v=4" width="100px;"/><br/><sub><b>DanielRuf</b></sub>](https://github.com/DanielRuf)<br/>   |    [<img src="https://avatars2.githubusercontent.com/u/5518?v=4" width="100px;"/><br/><sub><b>huacnlee</b></sub>](https://github.com/huacnlee)<br/>     |   [<img src="https://avatars2.githubusercontent.com/u/13056641?v=4" width="100px;"/><br/><sub><b>0nza1101</b></sub>](https://github.com/0nza1101)<br/>    |
+|          [<img src="https://avatars2.githubusercontent.com/u/566097?v=4" width="100px;"/><br/><sub><b>RaoHai</b></sub>](https://github.com/RaoHai)<br/>           |     [<img src="https://avatars0.githubusercontent.com/u/8731922?v=4" width="100px;"/><br/><sub><b>tbroadley</b></sub>](https://github.com/tbroadley)<br/>     | [<img src="https://avatars2.githubusercontent.com/u/1860329?v=4" width="100px;"/><br/><sub><b>charleyw</b></sub>](https://github.com/charleyw)<br/> |    [<img src="https://avatars0.githubusercontent.com/u/21355783?v=4" width="100px;"/><br/><sub><b>Hazyzh</b></sub>](https://github.com/Hazyzh)<br/>     |   [<img src="https://avatars0.githubusercontent.com/u/6947976?v=4" width="100px;"/><br/><sub><b>forbreak</b></sub>](https://github.com/forbreak)<br/>   |    [<img src="https://avatars0.githubusercontent.com/u/4783781?v=4" width="100px;"/><br/><sub><b>nekocode</b></sub>](https://github.com/nekocode)<br/>    |
+
+This project follows the git-contributor [spec](https://github.com/xudafeng/git-contributor), auto updated at `Sat Jul 27 2019 14:06:08 GMT+0800`.
+
+<!-- GITCONTRIBUTOR_END -->
diff --git a/docs/specification/getting-started.md b/docs/other/getting-started.zh.md
similarity index 99%
rename from docs/specification/getting-started.md
rename to docs/other/getting-started.zh.md
index 1a5ef430a..7d2c1c7ee 100644
--- a/docs/specification/getting-started.md
+++ b/docs/other/getting-started.zh.md
@@ -1,5 +1,5 @@
 ---
-title: Getting Started
+title: 开始使用
 order: 0
 ---
 
diff --git a/docs/other/other.md b/docs/other/other.md
deleted file mode 100644
index 88c0f5440..000000000
--- a/docs/other/other.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Other
-order: 0
----
-
-测试用。
diff --git a/docs/specification/category2/test1.md b/docs/specification/category/test2.en.md
similarity index 100%
rename from docs/specification/category2/test1.md
rename to docs/specification/category/test2.en.md
diff --git a/docs/specification/category/test2.md b/docs/specification/category/test2.md
deleted file mode 100644
index 6482796a7..000000000
--- a/docs/specification/category/test2.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 分类测试文章二
-order: 1
----
-
-内容。
diff --git a/docs/specification/category/test2.zh.md b/docs/specification/category/test2.zh.md
new file mode 100644
index 000000000..b56d26ade
--- /dev/null
+++ b/docs/specification/category/test2.zh.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+内容。
diff --git a/docs/specification/category/test3.md b/docs/specification/category/test3.md
deleted file mode 100644
index 0224dad38..000000000
--- a/docs/specification/category/test3.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 分类测试文章三
-order: 1
----
-
-内容。
diff --git a/docs/specification/category2/test2.md b/docs/specification/category2/test2.md
deleted file mode 100644
index 6482796a7..000000000
--- a/docs/specification/category2/test2.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 分类测试文章二
-order: 1
----
-
-内容。
diff --git a/docs/specification/category2/test3.md b/docs/specification/category2/test3.md
deleted file mode 100644
index 0224dad38..000000000
--- a/docs/specification/category2/test3.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: 分类测试文章三
-order: 1
----
-
-内容。
diff --git a/docs/specification/faq.md b/docs/specification/faq.md
deleted file mode 100644
index dffb7cf4d..000000000
--- a/docs/specification/faq.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: FAQ
-order: 1
----
-
-常见问题。
diff --git a/docs/specification/getting-started.en.md b/docs/specification/getting-started.en.md
new file mode 100644
index 000000000..ab59e22f6
--- /dev/null
+++ b/docs/specification/getting-started.en.md
@@ -0,0 +1,116 @@
+---
+title: Getting Started
+order: 0
+---
+
+[![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2)
+![](https://img.shields.io/badge/language-javascript-red.svg)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+[![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
+[![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+
+G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.
+
+**Special thanks to [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson), the author of [_The Grammar Of Graphics_](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), whose book served as the foundation for G2.**
+
+[More details about G2](https://antv.alipay.com/zh-cn/g2/3.x/index.html).
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/AOwgKIjknXfggPijmhym.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/nfiOREzMIsENrzUeLOGR.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/uZZmaudtKRnvUhmUdZSZ.gif" width="180"><img src="https://gw.alipayobjects.com/zos/rmsportal/ifSTXzrGbvtLRpnAvAiZ.gif" width="200">
+
+## Installation
+
+```bash
+$ npm install @antv/g2
+```
+
+### Usage
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import G2 from '@antv/g2';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 1150 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const chart = new G2.Chart({
+  container: 'c1',
+  width: 500,
+  height: 500,
+});
+
+chart.source(data);
+chart
+  .interval()
+  .position('genre*sold')
+  .color('genre');
+chart.render();
+```
+
+[More examples](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+![demos](https://user-images.githubusercontent.com/1655789/34187141-d800fe94-e56a-11e7-878a-4dc0e4f538d9.png)
+
+## Development
+
+```bash
+$ npm install
+
+# run test case
+$ npm run test-live
+
+# build watching file changes and run demos
+$ npm run dev
+
+# run demos
+$ npm run demos
+```
+
+## How to Contribute
+
+Please let us know how can we help. Do check out [issues](https://github.com/antvis/g2/issues) for bug reports or suggestions first.
+
+To become a contributor, please follow our [contributing guide](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md).
+
+## ~~Experience Improvement Program Description~~
+
+~~In order to serve the users better, G2 will send the URL and version information back to the AntV server:~~
+
+~~https://kcart.alipay.com/web/bi.do~~
+
+~~**Except for URL and G2 version information, no other information will be collected.** You can also turn it off with the following code:~~
+
+```js
+// disable tracking
+G2.track(false);
+```
+
+**update:**
+
+**We decided to terminate the "Experience Improvement Program". In verson `@antv/g2@3.4.7` and above, all tracking code is removed, no unexpected remote request will be sent while you are using G2.**
+
+<!-- GITCONTRIBUTOR_START -->
+
+## Contributors
+
+|     [<img src="https://avatars1.githubusercontent.com/u/1655789?v=4" width="100px;"/><br/><sub><b>leungwensen</b></sub>](https://github.com/leungwensen)<br/>     |         [<img src="https://avatars3.githubusercontent.com/u/6628666?v=4" width="100px;"/><br/><sub><b>simaQ</b></sub>](https://github.com/simaQ)<br/>         |   [<img src="https://avatars1.githubusercontent.com/u/1264678?v=4" width="100px;"/><br/><sub><b>dxq613</b></sub>](https://github.com/dxq613)<br/>   | [<img src="https://avatars3.githubusercontent.com/u/8325822?v=4" width="100px;"/><br/><sub><b>elaine1234</b></sub>](https://github.com/elaine1234)<br/> |  [<img src="https://avatars0.githubusercontent.com/u/7098619?v=4" width="100px;"/><br/><sub><b>guisturdy</b></sub>](https://github.com/guisturdy)<br/>  | [<img src="https://avatars3.githubusercontent.com/u/5888974?v=4" width="100px;"/><br/><sub><b>paleface001</b></sub>](https://github.com/paleface001)<br/> |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|   [<img src="https://avatars0.githubusercontent.com/u/8186664?v=4" width="100px;"/><br/><sub><b>chenshuai2144</b></sub>](https://github.com/chenshuai2144)<br/>   |       [<img src="https://avatars3.githubusercontent.com/u/6111424?v=4" width="100px;"/><br/><sub><b>xile611</b></sub>](https://github.com/xile611)<br/>       |   [<img src="https://avatars3.githubusercontent.com/u/5591805?v=4" width="100px;"/><br/><sub><b>maplor</b></sub>](https://github.com/maplor)<br/>   |   [<img src="https://avatars3.githubusercontent.com/u/6560377?v=4" width="100px;"/><br/><sub><b>zhfanrui</b></sub>](https://github.com/zhfanrui)<br/>   |      [<img src="https://avatars2.githubusercontent.com/u/6942296?v=4" width="100px;"/><br/><sub><b>Frezc</b></sub>](https://github.com/Frezc)<br/>      |   [<img src="https://avatars1.githubusercontent.com/u/6812138?v=4" width="100px;"/><br/><sub><b>Leannechn</b></sub>](https://github.com/Leannechn)<br/>   |
+| [<img src="https://avatars2.githubusercontent.com/u/1451480?v=4" width="100px;"/><br/><sub><b>janjakubnanista</b></sub>](https://github.com/janjakubnanista)<br/> |     [<img src="https://avatars1.githubusercontent.com/u/11624840?v=4" width="100px;"/><br/><sub><b>ParryQiu</b></sub>](https://github.com/ParryQiu)<br/>      | [<img src="https://avatars3.githubusercontent.com/u/22516098?v=4" width="100px;"/><br/><sub><b>Sai0514</b></sub>](https://github.com/Sai0514)<br/>  |   [<img src="https://avatars0.githubusercontent.com/u/9816225?v=4" width="100px;"/><br/><sub><b>liximomo</b></sub>](https://github.com/liximomo)<br/>   | [<img src="https://avatars1.githubusercontent.com/u/9054130?v=4" width="100px;"/><br/><sub><b>wensen-lws</b></sub>](https://github.com/wensen-lws)<br/> |    [<img src="https://avatars1.githubusercontent.com/u/1011681?v=4" width="100px;"/><br/><sub><b>xudafeng</b></sub>](https://github.com/xudafeng)<br/>    |
+|    [<img src="https://avatars1.githubusercontent.com/u/2370929?v=4" width="100px;"/><br/><sub><b>wangyu-kelly</b></sub>](https://github.com/wangyu-kelly)<br/>    | [<img src="https://avatars0.githubusercontent.com/u/9314735?v=4" width="100px;"/><br/><sub><b>BlackGanglion</b></sub>](https://github.com/BlackGanglion)<br/> |  [<img src="https://avatars3.githubusercontent.com/u/210810?v=4" width="100px;"/><br/><sub><b>illumen</b></sub>](https://github.com/illumen)<br/>   |  [<img src="https://avatars1.githubusercontent.com/u/827205?v=4" width="100px;"/><br/><sub><b>DanielRuf</b></sub>](https://github.com/DanielRuf)<br/>   |    [<img src="https://avatars2.githubusercontent.com/u/5518?v=4" width="100px;"/><br/><sub><b>huacnlee</b></sub>](https://github.com/huacnlee)<br/>     |   [<img src="https://avatars2.githubusercontent.com/u/13056641?v=4" width="100px;"/><br/><sub><b>0nza1101</b></sub>](https://github.com/0nza1101)<br/>    |
+|          [<img src="https://avatars2.githubusercontent.com/u/566097?v=4" width="100px;"/><br/><sub><b>RaoHai</b></sub>](https://github.com/RaoHai)<br/>           |     [<img src="https://avatars0.githubusercontent.com/u/8731922?v=4" width="100px;"/><br/><sub><b>tbroadley</b></sub>](https://github.com/tbroadley)<br/>     | [<img src="https://avatars2.githubusercontent.com/u/1860329?v=4" width="100px;"/><br/><sub><b>charleyw</b></sub>](https://github.com/charleyw)<br/> |    [<img src="https://avatars0.githubusercontent.com/u/21355783?v=4" width="100px;"/><br/><sub><b>Hazyzh</b></sub>](https://github.com/Hazyzh)<br/>     |   [<img src="https://avatars0.githubusercontent.com/u/6947976?v=4" width="100px;"/><br/><sub><b>forbreak</b></sub>](https://github.com/forbreak)<br/>   |    [<img src="https://avatars0.githubusercontent.com/u/4783781?v=4" width="100px;"/><br/><sub><b>nekocode</b></sub>](https://github.com/nekocode)<br/>    |
+
+This project follows the git-contributor [spec](https://github.com/xudafeng/git-contributor), auto updated at `Sat Jul 27 2019 14:06:08 GMT+0800`.
+
+<!-- GITCONTRIBUTOR_END -->
diff --git a/docs/specification/getting-started.zh.md b/docs/specification/getting-started.zh.md
new file mode 100644
index 000000000..7d2c1c7ee
--- /dev/null
+++ b/docs/specification/getting-started.zh.md
@@ -0,0 +1,117 @@
+---
+title: 开始使用
+order: 0
+---
+
+[![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2)
+![](https://img.shields.io/badge/language-javascript-red.svg)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+[![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
+[![NPM Downloads](https://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](https://isitmaintained.com/badge/open/antvis/g2.svg)](https://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+
+G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
+
+**在此衷心感谢[《The Grammar of Graphics》](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html)的作者 [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson)，为 G2 的图形语法提供了理论基础！**
+
+[了解更多 G2 详情](https://antv.alipay.com/zh-cn/g2/3.x/index.html).
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/AOwgKIjknXfggPijmhym.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/nfiOREzMIsENrzUeLOGR.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/uZZmaudtKRnvUhmUdZSZ.gif" width="180"><img src="https://gw.alipayobjects.com/zos/rmsportal/ifSTXzrGbvtLRpnAvAiZ.gif" width="200">
+
+## 安装
+
+```bash
+npm install @antv/g2
+```
+
+## 特性
+
+- ✔︎ 简单、易用
+- ✔︎ 完备的可视化编码
+- ✔︎ 强大的扩展能力
+
+## 文档
+
+- [使用教程](https://antv.alipay.com/zh-cn/g2/3.x/tutorial/index.html)
+- [API 文档](https://antv.alipay.com/zh-cn/g2/3.x/api/index.html)
+- [图表示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+### 快速开始
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import G2 from '@antv/g2';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 1150 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const chart = new G2.Chart({
+  container: 'c1',
+  width: 500,
+  height: 500,
+});
+
+chart.source(data);
+chart
+  .interval()
+  .position('genre*sold') // highlight-line
+  .color('genre');
+chart.render();
+```
+
+[更多示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+![demos](https://user-images.githubusercontent.com/1655789/34187141-d800fe94-e56a-11e7-878a-4dc0e4f538d9.png)
+
+## 本地开发
+
+```bash
+$ npm install
+
+# 跑测试用例
+$ npm run test-live
+
+# 监听文件变化构建，并打开 demo 页面
+$ npm run dev
+
+# 打开 demo
+$ npm run demos
+```
+
+## ~~体验改进计划说明~~
+
+~~为了更好服务用户，G2 会将 URL 和版本信息发送回 AntV 服务器：~~
+
+~~https://kcart.alipay.com/web/bi.do~~
+
+~~**除了 URL 与 G2 版本信息外，不会收集任何其他信息**，一切为了能对 G2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：~~
+
+```js
+// 关闭 G2 的体验改进计划打点请求
+G2.track(false);
+```
+
+**更新**
+
+**我们已决定终止体验改进计划**
+
+**从 `@antv/g2@3.4.7` 版本开始，所有打点代码已被移除。后续版本的 G2 不会再发送任何远程请求**
+
+## 如何贡献
+
+如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/g2/issues) 看看有没有类似的 bug 或者建议。
+
+如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md)。
+
+I can highlight `css±.some-class { background-color: red }` with CSS syntax.
diff --git a/gatsby-config.js b/gatsby-config.js
index a660fb066..3d9d2cb3d 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -3,6 +3,10 @@ module.exports = {
     title: `AntV`,
     siteUrl: `https://antvis.github.io`,
     description: `Ant Visualization solution home page`,
+    languages: {
+      langs: ['en', 'zh'],
+      defaultLangKey: 'en',
+    },
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -13,6 +17,13 @@ module.exports = {
         path: `${__dirname}/docs`,
       },
     },
+    {
+      resolve: 'gatsby-plugin-i18n',
+      options: {
+        langKeyDefault: 'en',
+        useLangKeyLayout: false
+      }
+    },
     {
       resolve: `gatsby-transformer-remark`,
       options: {
@@ -61,8 +72,5 @@ module.exports = {
         trackingId: `UA-148148901-1`,
       },
     },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
   ],
 };
diff --git a/gatsby-node.js b/gatsby-node.js
index c41673251..5df2b4113 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -6,27 +6,35 @@
 
 // You can delete this file if you're not using it
 const path = require(`path`);
+const { getSlugAndLang } = require('ptz-i18n');
 
 // Add custom url pathname for posts
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
   if (node.internal.type === `File`) {
-    const { dir, name } = path.parse(node.absolutePath);
-    const slug = path.relative(__dirname, path.join(dir, name));
     createNodeField({
       node,
-      name: `slug`,
-      value: `/${slug}`,
     });
-  } else if (
-    node.internal.type === `MarkdownRemark` &&
-    typeof node.slug === `undefined`
-  ) {
-    const fileNode = getNode(node.parent);
+  } else if (node.internal.type === `MarkdownRemark`) {
+    const { slug, langKey } = getSlugAndLang(
+      {
+        langKeyForNull: 'any',
+        langKeyDefault: 'en',
+        useLangKeyLayout: false,
+        pagesPaths: [__dirname],
+        prefixDefault: true,
+      },
+      node.fileAbsolutePath,
+    );
     createNodeField({
       node,
       name: `slug`,
-      value: fileNode.fields.slug,
+      value: slug,
+    });
+    createNodeField({
+      node,
+      name: `langKey`,
+      value: langKey,
     });
   }
 };
@@ -55,20 +63,24 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     return;
   }
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    const { slug, langKey } = node.fields;
     createPage({
-      path: node.fields.slug, // required
+      path: slug, // required
       component: path.resolve(`src/templates/document.tsx`),
-      context: {}, // additional data can be passed via context
+      context: {
+        slug,
+        langKey,
+      },
     });
   });
 };
 
 exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
-  const config = getConfig()
+  const config = getConfig();
   if (stage.startsWith('develop') && config.resolve) {
     config.resolve.alias = {
       ...config.resolve.alias,
       'react-dom': '@hot-loader/react-dom',
-    }
+    };
   }
 };
diff --git a/package.json b/package.json
index 41833dd1f..f07c9e33b 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "gatsby-image": "^2.2.19",
     "gatsby-plugin-antd": "^2.0.2",
     "gatsby-plugin-google-analytics": "^2.1.16",
+    "gatsby-plugin-i18n": "^1.0.1",
     "gatsby-plugin-less": "^3.0.6",
     "gatsby-plugin-manifest": "^2.2.16",
     "gatsby-plugin-offline": "^3.0.7",
@@ -55,6 +56,7 @@
     "pretty-quick": "^1.11.0",
     "prism-themes": "^1.2.0",
     "prismjs": "^1.17.1",
+    "ptz-i18n": "^1.0.0",
     "rc-footer": "^0.5.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
diff --git a/src/externals.d.ts b/src/externals.d.ts
index 1ea39606b..a286cdfcf 100644
--- a/src/externals.d.ts
+++ b/src/externals.d.ts
@@ -1 +1,3 @@
 declare module '*.less';
+
+declare module 'ptz-i18n';
diff --git a/src/pages/index.en.tsx b/src/pages/index.en.tsx
new file mode 100644
index 000000000..c4fd752ec
--- /dev/null
+++ b/src/pages/index.en.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Skeleton } from 'antd';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+const IndexPage = () => (
+  <Layout>
+    <SEO title="Home" />
+    <div style={{ margin: '0 auto', padding: '0 80px' }}>
+      Home Page
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+    </div>
+  </Layout>
+);
+
+export default IndexPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8b8402b98..86fae132a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,18 +1,37 @@
 import React from 'react';
-import { Skeleton } from 'antd';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
+import { graphql, navigate, withPrefix } from 'gatsby';
+import { getUserLangKey } from 'ptz-i18n';
 
-const IndexPage = () => (
-  <Layout>
-    <SEO title="首页" />
-    <div style={{ margin: '0 auto', padding: '0 80px' }}>
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-    </div>
-  </Layout>
-);
+class RedirectIndex extends React.PureComponent {
+  constructor(args: any) {
+    super(args);
 
-export default IndexPage;
+    // Skip build, Browsers only
+    if (typeof window !== 'undefined') {
+      const { langs, defaultLangKey } = args.data.site.siteMetadata.languages;
+      const langKey = getUserLangKey(langs, defaultLangKey);
+      const homeUrl = withPrefix(`/${langKey}/`);
+      // https://github.com/angeloocana/gatsby-plugin-i18n/issues/52#issuecomment-451590961
+      navigate(homeUrl);
+    }
+  }
+
+  render() {
+    return <div />;
+  }
+}
+
+export default RedirectIndex;
+
+export const pageQuery = graphql`
+  query IndexQuery {
+    site{
+      siteMetadata {
+        languages {
+          defaultLangKey
+          langs
+        }
+      }
+    }
+  }
+`;
diff --git a/src/pages/index.zh.tsx b/src/pages/index.zh.tsx
new file mode 100644
index 000000000..7808c1b06
--- /dev/null
+++ b/src/pages/index.zh.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Skeleton } from 'antd';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+const IndexPage = () => (
+  <Layout>
+    <SEO title="首页" />
+    <div style={{ margin: '0 auto', padding: '0 80px' }}>
+      中文首页
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+    </div>
+  </Layout>
+);
+
+export default IndexPage;

From 4f684866422363ad9df10b1b457e106df9316fa5 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 18:25:46 +0800
Subject: [PATCH 37/75] Add lang switcher

---
 src/components/header.module.less |   2 +-
 src/components/header.tsx         | 151 +++++++++++++++++-------------
 2 files changed, 88 insertions(+), 65 deletions(-)

diff --git a/src/components/header.module.less b/src/components/header.module.less
index 04178431d..c5047ee4d 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -38,7 +38,7 @@
     .menu {
       font-weight: 500;
       color: rgba(0, 0, 0, 0.65);
-      margin: 0 20px 0 0;
+      margin: 0;
       padding: 0;
       list-style: none;
 
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 30a702230..3b17761c1 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,12 +1,15 @@
-import { Link } from 'gatsby';
+import { Link, navigate } from 'gatsby';
 import React from 'react';
 import GithubCorner from 'react-github-corner';
-import { Popover } from 'antd';
+import { Popover, Select } from 'antd';
 import classNames from 'classnames';
+import { getCurrentLangKey } from 'ptz-i18n';
 import Search from './search';
 import { docs } from '../../.antvisrc';
 import styles from './header.module.less';
 
+const { Option } = Select;
+
 interface HeaderProps {
   siteTitle?: string;
   location?: Location;
@@ -234,69 +237,89 @@ const Products: React.FC<any> = () => (
 const Header: React.FC<HeaderProps> = ({
   siteTitle,
   location = { pathname: '' },
-}) => (
-  <header className={styles.header}>
-    <div className={styles.left}>
-      <h1>
-        <Link to="/">
-          <img
-            src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
-            alt={siteTitle}
-          />
-        </Link>
-      </h1>
-      <span className={styles.divider} />
-      <Search />
-    </div>
-    <nav className={styles.nav}>
-      <ul className={styles.menu}>
-        <li>
-          <Link
-            to="/docs/specification/getting-started"
-            className={classNames({
-              [styles.active]: location.pathname.startsWith(
-                '/docs/specification',
-              ),
-            })}
-          >
-            {docs['specification'].title['zh-CN']}
-          </Link>
-        </li>
-        <li>
-          <Link
-            to="/docs/other/other"
-            className={classNames({
-              [styles.active]: location.pathname.startsWith('/docs/other'),
-            })}
-          >
-            {docs['other'].title['zh-CN']}
+}) => {
+  const currentLangKey = getCurrentLangKey(
+    ['en', 'zh'],
+    'en',
+    location.pathname,
+  );
+  return (
+    <header className={styles.header}>
+      <div className={styles.left}>
+        <h1>
+          <Link to="/">
+            <img
+              src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
+              alt={siteTitle}
+            />
           </Link>
-        </li>
-        <li>
-          <Popover
-            title={null}
-            content={<Products />}
-            placement="bottomRight"
-            arrowPointAtCenter
-          >
-            <a>所有产品</a>
-          </Popover>
-        </li>
-        <li>
-          <Popover
-            title={null}
-            content={<Products />}
-            placement="bottomRight"
-            arrowPointAtCenter
-          >
-            <a>生态</a>
-          </Popover>
-        </li>
-      </ul>
-      <GithubCorner href="https://github.com/antvis" size={64} />
-    </nav>
-  </header>
-);
+        </h1>
+        <span className={styles.divider} />
+        <Search />
+      </div>
+      <nav className={styles.nav}>
+        <ul className={styles.menu}>
+          <li>
+            <Link
+              to="/docs/specification/getting-started"
+              className={classNames({
+                [styles.active]: location.pathname.startsWith(
+                  '/docs/specification',
+                ),
+              })}
+            >
+              {docs['specification'].title['zh-CN']}
+            </Link>
+          </li>
+          <li>
+            <Link
+              to="/docs/other/other"
+              className={classNames({
+                [styles.active]: location.pathname.startsWith('/docs/other'),
+              })}
+            >
+              {docs['other'].title['zh-CN']}
+            </Link>
+          </li>
+          <li>
+            <Popover
+              title={null}
+              content={<Products />}
+              placement="bottomRight"
+              arrowPointAtCenter
+            >
+              <a>所有产品</a>
+            </Popover>
+          </li>
+          <li>
+            <Popover
+              title={null}
+              content={<Products />}
+              placement="bottomRight"
+              arrowPointAtCenter
+            >
+              <a>生态</a>
+            </Popover>
+          </li>
+        </ul>
+        <Select
+          size="small"
+          style={{ width: 80, fontSize: 12 }}
+          value={currentLangKey}
+          onChange={(value: string) => {
+            navigate(
+              location.pathname.replace(`/${currentLangKey}/`, `/${value}/`),
+            );
+          }}
+        >
+          <Option value="en">🇺🇸 Eng</Option>
+          <Option value="zh">🇨🇳 中文</Option>
+        </Select>
+        <GithubCorner href="https://github.com/antvis" size={64} />
+      </nav>
+    </header>
+  );
+};
 
 Header.defaultProps = {
   siteTitle: ``,

From a09d9ded80b9d084d65c762e91e2a43f750fec62 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 18:31:58 +0800
Subject: [PATCH 38/75] fix menu show and active

---
 src/components/header.tsx  | 10 ++++++----
 src/templates/document.tsx |  5 +++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 3b17761c1..7220daf46 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -261,10 +261,10 @@ const Header: React.FC<HeaderProps> = ({
         <ul className={styles.menu}>
           <li>
             <Link
-              to="/docs/specification/getting-started"
+              to={`/${currentLangKey}/docs/specification/getting-started`}
               className={classNames({
                 [styles.active]: location.pathname.startsWith(
-                  '/docs/specification',
+                  `/${currentLangKey}/docs/specification`,
                 ),
               })}
             >
@@ -273,9 +273,11 @@ const Header: React.FC<HeaderProps> = ({
           </li>
           <li>
             <Link
-              to="/docs/other/other"
+              to={`/${currentLangKey}/docs/other/getting-started`}
               className={classNames({
-                [styles.active]: location.pathname.startsWith('/docs/other'),
+                [styles.active]: location.pathname.startsWith(
+                  `/${currentLangKey}/docs/other`,
+                ),
               })}
             >
               {docs['other'].title['zh-CN']}
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index a3344843e..b52bcb834 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -24,8 +24,9 @@ const renderMenuItems = (edges: any[]) =>
   });
 
 const shouldBeShown = (slug: string, path: string) => {
-  const slugPieces = slug.split('/');
-  const pathPieces = path.split('/').slice(2);
+  const slugPieces = slug.split('/').slice(0);
+  const pathPieces = path.split('/').slice(3);
+  console.log(slug, path);
   return slugPieces[0] === pathPieces[0];
 };
 

From 3b996e6f934b23e51a355dfa885f14c87f84bcca Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 19:36:41 +0800
Subject: [PATCH 39/75] fix locale menu

---
 .antvisrc.ts                            |  24 ++--
 docs/other/category/test1.en.md         |   6 +
 docs/other/category/test1.zh.md         |   6 +
 docs/other/category/test2.en.md         |   4 +-
 docs/specification/category/test1.en.md |   6 +
 docs/specification/category/test1.zh.md |   6 +
 docs/specification/category/test2.en.md |   4 +-
 src/components/header.tsx               | 170 +++++++++++-------------
 src/components/layout.tsx               |  59 +++++---
 src/templates/document.tsx              |  59 +++++---
 10 files changed, 197 insertions(+), 147 deletions(-)
 create mode 100644 docs/other/category/test1.en.md
 create mode 100644 docs/other/category/test1.zh.md
 create mode 100644 docs/specification/category/test1.en.md
 create mode 100644 docs/specification/category/test1.zh.md

diff --git a/.antvisrc.ts b/.antvisrc.ts
index e75c9d0ed..cc3d01964 100644
--- a/.antvisrc.ts
+++ b/.antvisrc.ts
@@ -1,30 +1,30 @@
 export const docs = {
   specification: {
     title: {
-      'zh-CN': '设计语言',
-      'en-US': 'Specification',
+      zh: '设计语言',
+      en: 'Specification',
     },
     order: 0,
   },
   'specification/category': {
     title: {
-      'zh-CN': '分类一',
-      'en-US': 'category',
+      zh: '分类一',
+      en: 'category1',
     },
     order: 1,
   },
-  'specification/category2': {
+  other: {
     title: {
-      'zh-CN': '分类二',
-      'en-US': 'category',
+      zh: '其他文档',
+      en: 'other',
     },
-    order: 2,
+    order: 0,
   },
-  other: {
+  'other/category': {
     title: {
-      'zh-CN': '其他文档',
-      'en-US': 'other',
+      zh: '分类二',
+      en: 'category2',
     },
-    order: 0,
+    order: 2,
   },
 } as { [key: string]: any };
diff --git a/docs/other/category/test1.en.md b/docs/other/category/test1.en.md
new file mode 100644
index 000000000..56947c427
--- /dev/null
+++ b/docs/other/category/test1.en.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+content
diff --git a/docs/other/category/test1.zh.md b/docs/other/category/test1.zh.md
new file mode 100644
index 000000000..b56d26ade
--- /dev/null
+++ b/docs/other/category/test1.zh.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+内容。
diff --git a/docs/other/category/test2.en.md b/docs/other/category/test2.en.md
index b56d26ade..a9b90fa0e 100644
--- a/docs/other/category/test2.en.md
+++ b/docs/other/category/test2.en.md
@@ -1,6 +1,6 @@
 ---
-title: 分类测试文章一
+title: 分类测试文章二
 order: 0
 ---
 
-内容。
+content.
diff --git a/docs/specification/category/test1.en.md b/docs/specification/category/test1.en.md
new file mode 100644
index 000000000..56947c427
--- /dev/null
+++ b/docs/specification/category/test1.en.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+content
diff --git a/docs/specification/category/test1.zh.md b/docs/specification/category/test1.zh.md
new file mode 100644
index 000000000..b56d26ade
--- /dev/null
+++ b/docs/specification/category/test1.zh.md
@@ -0,0 +1,6 @@
+---
+title: 分类测试文章一
+order: 0
+---
+
+内容。
diff --git a/docs/specification/category/test2.en.md b/docs/specification/category/test2.en.md
index b56d26ade..a9b90fa0e 100644
--- a/docs/specification/category/test2.en.md
+++ b/docs/specification/category/test2.en.md
@@ -1,6 +1,6 @@
 ---
-title: 分类测试文章一
+title: 分类测试文章二
 order: 0
 ---
 
-内容。
+content.
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 7220daf46..2504f4716 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import GithubCorner from 'react-github-corner';
 import { Popover, Select } from 'antd';
 import classNames from 'classnames';
-import { getCurrentLangKey } from 'ptz-i18n';
 import Search from './search';
 import { docs } from '../../.antvisrc';
 import styles from './header.module.less';
@@ -13,6 +12,7 @@ const { Option } = Select;
 interface HeaderProps {
   siteTitle?: string;
   location?: Location;
+  currentLangKey?: string;
 }
 
 interface ProductProps {
@@ -235,96 +235,86 @@ const Products: React.FC<any> = () => (
 );
 
 const Header: React.FC<HeaderProps> = ({
-  siteTitle,
+  siteTitle = '',
   location = { pathname: '' },
-}) => {
-  const currentLangKey = getCurrentLangKey(
-    ['en', 'zh'],
-    'en',
-    location.pathname,
-  );
-  return (
-    <header className={styles.header}>
-      <div className={styles.left}>
-        <h1>
-          <Link to="/">
-            <img
-              src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
-              alt={siteTitle}
-            />
+  currentLangKey,
+}) => (
+  <header className={styles.header}>
+    <div className={styles.left}>
+      <h1>
+        <Link to="/">
+          <img
+            src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
+            alt={siteTitle}
+          />
+        </Link>
+      </h1>
+      <span className={styles.divider} />
+      <Search />
+    </div>
+    <nav className={styles.nav}>
+      <ul className={styles.menu}>
+        <li>
+          <Link
+            to={`/${currentLangKey}/docs/specification/getting-started`}
+            className={classNames({
+              [styles.active]: location.pathname.startsWith(
+                `/${currentLangKey}/docs/specification`,
+              ),
+            })}
+          >
+            {docs['specification'].title['zh-CN']}
           </Link>
-        </h1>
-        <span className={styles.divider} />
-        <Search />
-      </div>
-      <nav className={styles.nav}>
-        <ul className={styles.menu}>
-          <li>
-            <Link
-              to={`/${currentLangKey}/docs/specification/getting-started`}
-              className={classNames({
-                [styles.active]: location.pathname.startsWith(
-                  `/${currentLangKey}/docs/specification`,
-                ),
-              })}
-            >
-              {docs['specification'].title['zh-CN']}
-            </Link>
-          </li>
-          <li>
-            <Link
-              to={`/${currentLangKey}/docs/other/getting-started`}
-              className={classNames({
-                [styles.active]: location.pathname.startsWith(
-                  `/${currentLangKey}/docs/other`,
-                ),
-              })}
-            >
-              {docs['other'].title['zh-CN']}
-            </Link>
-          </li>
-          <li>
-            <Popover
-              title={null}
-              content={<Products />}
-              placement="bottomRight"
-              arrowPointAtCenter
-            >
-              <a>所有产品</a>
-            </Popover>
-          </li>
-          <li>
-            <Popover
-              title={null}
-              content={<Products />}
-              placement="bottomRight"
-              arrowPointAtCenter
-            >
-              <a>生态</a>
-            </Popover>
-          </li>
-        </ul>
-        <Select
-          size="small"
-          style={{ width: 80, fontSize: 12 }}
-          value={currentLangKey}
-          onChange={(value: string) => {
-            navigate(
-              location.pathname.replace(`/${currentLangKey}/`, `/${value}/`),
-            );
-          }}
-        >
-          <Option value="en">🇺🇸 Eng</Option>
-          <Option value="zh">🇨🇳 中文</Option>
-        </Select>
-        <GithubCorner href="https://github.com/antvis" size={64} />
-      </nav>
-    </header>
-  );
-};
-
-Header.defaultProps = {
-  siteTitle: ``,
-};
+        </li>
+        <li>
+          <Link
+            to={`/${currentLangKey}/docs/other/getting-started`}
+            className={classNames({
+              [styles.active]: location.pathname.startsWith(
+                `/${currentLangKey}/docs/other`,
+              ),
+            })}
+          >
+            {docs['other'].title['zh-CN']}
+          </Link>
+        </li>
+        <li>
+          <Popover
+            title={null}
+            content={<Products />}
+            placement="bottomRight"
+            arrowPointAtCenter
+          >
+            <a>所有产品</a>
+          </Popover>
+        </li>
+        <li>
+          <Popover
+            title={null}
+            content={<Products />}
+            placement="bottomRight"
+            arrowPointAtCenter
+          >
+            <a>生态</a>
+          </Popover>
+        </li>
+      </ul>
+      <Select
+        size="small"
+        style={{ width: 80, fontSize: 12 }}
+        value={currentLangKey}
+        onChange={(value: string) => {
+          navigate(
+            location.pathname.replace(`/${currentLangKey}/`, `/${value}/`),
+          );
+        }}
+      >
+        <Option value="en">🇺🇸 Eng</Option>
+        <Option value="zh">🇨🇳 中文</Option>
+      </Select>
+      <GithubCorner href="https://github.com/antvis" size={64} />
+    </nav>
+  </header>
+);
 
 export default Header;
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index beb3a1ca4..6dc11ffb3 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { Location } from '@reach/router';
 import Footer from 'rc-footer';
+import { getCurrentLangKey } from 'ptz-i18n';
 import Header from './header';
 import styles from './layout.module.less';
 
@@ -22,6 +23,10 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       site {
         siteMetadata {
           title
+          languages {
+            langs
+            defaultLangKey
+          }
         }
       }
     }
@@ -172,25 +177,41 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
   return (
     <Location>
-      {({ location }) => (
-        <>
-          <Header
-            siteTitle={data.site.siteMetadata.title}
-            location={location}
-          />
-          <main className={styles.main}>{children}</main>
-          <Footer
-            columns={footerColumns}
-            bottom={
-              <div>
-                © {new Date().getFullYear()}, Built with
-                {` `}
-                <a href="https://xtech.antfin.com/">AFX</a>
-              </div>
-            }
-          />
-        </>
-      )}
+      {({ location }) => {
+        const {
+          site: {
+            siteMetadata: {
+              title,
+              languages: { langs, defaultLangKey },
+            },
+          },
+        } = data;
+        const currentLangKey = getCurrentLangKey(
+          langs,
+          defaultLangKey,
+          location.pathname,
+        );
+        return (
+          <>
+            <Header
+              siteTitle={title}
+              location={location}
+              currentLangKey={currentLangKey}
+            />
+            <main className={styles.main}>{children}</main>
+            <Footer
+              columns={footerColumns}
+              bottom={
+                <div>
+                  © {new Date().getFullYear()}, Built with
+                  {` `}
+                  <a href="https://xtech.antfin.com/">AFX</a>
+                </div>
+              }
+            />
+          </>
+        );
+      }}
     </Location>
   );
 };
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index b52bcb834..959827a4d 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { graphql, Link } from 'gatsby';
 import { Layout as AntLayout, Menu } from 'antd';
 import { groupBy } from 'lodash-es';
+import { getCurrentLangKey } from 'ptz-i18n';
 import Layout from '../components/layout';
 import Article from '../components/article';
 import SEO from '../components/seo';
@@ -24,9 +25,8 @@ const renderMenuItems = (edges: any[]) =>
   });
 
 const shouldBeShown = (slug: string, path: string) => {
-  const slugPieces = slug.split('/').slice(0);
-  const pathPieces = path.split('/').slice(3);
-  console.log(slug, path);
+  const slugPieces = slug.split('/').slice(slug.split('/').indexOf('docs') + 1);
+  const pathPieces = path.split('/').slice(slug.split('/').indexOf('docs') + 1);
   return slugPieces[0] === pathPieces[0];
 };
 
@@ -37,20 +37,24 @@ export default function Template({
   data: any;
   path: string;
 }) {
-  const { markdownRemark, allMarkdownRemark } = data; // data.markdownRemark holds our post data
+  const { markdownRemark, allMarkdownRemark, site } = data; // data.markdownRemark holds our post data
   const {
     frontmatter,
     html,
     fields: { slug },
   } = markdownRemark;
   const { edges = [] } = allMarkdownRemark;
-  const groupedEdges = groupBy(
-    edges,
-    ({
-      node: {
-        parent: { relativeDirectory },
-      },
-    }: any) => relativeDirectory,
+  const {
+    siteMetadata: {
+      languages: { langs, defaultLangKey },
+    },
+  } = site;
+  const currentLangKey = getCurrentLangKey(langs, defaultLangKey, path);
+  const groupedEdges = groupBy(edges, ({ node: { fields: { slug } } }: any) =>
+    slug
+      .split('/')
+      .slice(0, -2)
+      .join('/'),
   );
 
   const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
@@ -68,6 +72,7 @@ export default function Template({
             onOpenChange={openKeys => setOpenKeys(openKeys)}
           >
             {Object.keys(groupedEdges)
+              .filter(key => key.startsWith(`/${currentLangKey}/`))
               .sort((a: string, b: string) => {
                 if (docs[a] && docs[b]) {
                   return docs[a].order - docs[b].order;
@@ -78,17 +83,21 @@ export default function Template({
                 if (!shouldBeShown(slug, path)) {
                   return null;
                 }
-                if (slug.split('/').length === 1 && docs[slug.split('/')[0]]) {
+                const slugPieces = slug.split('/');
+                if (slugPieces.length <= 4) {
                   return renderMenuItems(groupedEdges[slug]);
-                }
-                if (slug.split('/').length > 1) {
+                } else {
+                  const menuItemlocaleKey = slugPieces
+                    .slice(slugPieces.indexOf('docs') + 1)
+                    .filter(key => key)
+                    .join('/');
                   return (
                     <Menu.SubMenu
                       key={slug}
                       title={
-                        docs[slug] && docs[slug].title
-                          ? docs[slug].title['zh-CN']
-                          : slug
+                        docs[menuItemlocaleKey] && docs[menuItemlocaleKey].title
+                          ? docs[menuItemlocaleKey].title[currentLangKey]
+                          : menuItemlocaleKey
                       }
                     >
                       {renderMenuItems(groupedEdges[slug])}
@@ -109,10 +118,20 @@ export default function Template({
 
 export const pageQuery = graphql`
   query($path: String!) {
+    site {
+      siteMetadata {
+        title
+        languages {
+          langs
+          defaultLangKey
+        }
+      }
+    }
     markdownRemark(fields: { slug: { eq: $path } }) {
       html
       fields {
         slug
+        langKey
       }
       frontmatter {
         title
@@ -126,15 +145,11 @@ export const pageQuery = graphql`
         node {
           fields {
             slug
+            langKey
           }
           frontmatter {
             title
           }
-          parent {
-            ... on File {
-              relativeDirectory
-            }
-          }
         }
       }
     }

From 66072986ec5ef53014a9209220384d995b4ee29e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 19:41:57 +0800
Subject: [PATCH 40/75] fix document order

---
 docs/other/category/test2.en.md         |  2 +-
 docs/other/category/test2.zh.md         |  4 ++--
 docs/other/getting-started.zh.md        |  2 +-
 docs/specification/category/test2.en.md |  2 +-
 docs/specification/category/test2.zh.md |  4 ++--
 src/components/header.tsx               |  6 +++---
 src/templates/document.tsx              | 20 ++++++++++++++------
 7 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/docs/other/category/test2.en.md b/docs/other/category/test2.en.md
index a9b90fa0e..c35456ad4 100644
--- a/docs/other/category/test2.en.md
+++ b/docs/other/category/test2.en.md
@@ -1,6 +1,6 @@
 ---
 title: 分类测试文章二
-order: 0
+order: 1
 ---
 
 content.
diff --git a/docs/other/category/test2.zh.md b/docs/other/category/test2.zh.md
index b56d26ade..6482796a7 100644
--- a/docs/other/category/test2.zh.md
+++ b/docs/other/category/test2.zh.md
@@ -1,6 +1,6 @@
 ---
-title: 分类测试文章一
-order: 0
+title: 分类测试文章二
+order: 1
 ---
 
 内容。
diff --git a/docs/other/getting-started.zh.md b/docs/other/getting-started.zh.md
index 7d2c1c7ee..6aae65366 100644
--- a/docs/other/getting-started.zh.md
+++ b/docs/other/getting-started.zh.md
@@ -1,5 +1,5 @@
 ---
-title: 开始使用
+title: 其他文档
 order: 0
 ---
 
diff --git a/docs/specification/category/test2.en.md b/docs/specification/category/test2.en.md
index a9b90fa0e..c35456ad4 100644
--- a/docs/specification/category/test2.en.md
+++ b/docs/specification/category/test2.en.md
@@ -1,6 +1,6 @@
 ---
 title: 分类测试文章二
-order: 0
+order: 1
 ---
 
 content.
diff --git a/docs/specification/category/test2.zh.md b/docs/specification/category/test2.zh.md
index b56d26ade..6482796a7 100644
--- a/docs/specification/category/test2.zh.md
+++ b/docs/specification/category/test2.zh.md
@@ -1,6 +1,6 @@
 ---
-title: 分类测试文章一
-order: 0
+title: 分类测试文章二
+order: 1
 ---
 
 内容。
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 2504f4716..19dfe1300 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -237,7 +237,7 @@ const Products: React.FC<any> = () => (
 const Header: React.FC<HeaderProps> = ({
   siteTitle = '',
   location = { pathname: '' },
-  currentLangKey,
+  currentLangKey = '',
 }) => (
   <header className={styles.header}>
     <div className={styles.left}>
@@ -263,7 +263,7 @@ const Header: React.FC<HeaderProps> = ({
               ),
             })}
           >
-            {docs['specification'].title['zh-CN']}
+            {docs['specification'].title[currentLangKey]}
           </Link>
         </li>
         <li>
@@ -275,7 +275,7 @@ const Header: React.FC<HeaderProps> = ({
               ),
             })}
           >
-            {docs['other'].title['zh-CN']}
+            {docs['other'].title[currentLangKey]}
           </Link>
         </li>
         <li>
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 959827a4d..178391a8e 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -30,6 +30,15 @@ const shouldBeShown = (slug: string, path: string) => {
   return slugPieces[0] === pathPieces[0];
 };
 
+const getMenuItemlocaleKey = (slug: string = '') => {
+  const slugPieces = slug.split('/');
+  const menuItemlocaleKey = slugPieces
+    .slice(slugPieces.indexOf('docs') + 1)
+    .filter(key => key)
+    .join('/');
+  return menuItemlocaleKey;
+};
+
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
   path,
@@ -74,8 +83,10 @@ export default function Template({
             {Object.keys(groupedEdges)
               .filter(key => key.startsWith(`/${currentLangKey}/`))
               .sort((a: string, b: string) => {
-                if (docs[a] && docs[b]) {
-                  return docs[a].order - docs[b].order;
+                const aKey = getMenuItemlocaleKey(a);
+                const bKey = getMenuItemlocaleKey(b);
+                if (docs[aKey] && docs[bKey]) {
+                  return docs[aKey].order - docs[bKey].order;
                 }
                 return 0;
               })
@@ -87,10 +98,7 @@ export default function Template({
                 if (slugPieces.length <= 4) {
                   return renderMenuItems(groupedEdges[slug]);
                 } else {
-                  const menuItemlocaleKey = slugPieces
-                    .slice(slugPieces.indexOf('docs') + 1)
-                    .filter(key => key)
-                    .join('/');
+                  const menuItemlocaleKey = getMenuItemlocaleKey(slug);
                   return (
                     <Menu.SubMenu
                       key={slug}

From 714c5f1044498d07affbc3df865faca9659c4dd1 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 19:43:49 +0800
Subject: [PATCH 41/75] tweak header style

---
 src/components/header.module.less | 2 +-
 src/components/search.module.less | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/header.module.less b/src/components/header.module.less
index c5047ee4d..41aae998f 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -6,7 +6,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 40px;
+  padding: 0 60px;
   position: relative;
   z-index: 1;
 
diff --git a/src/components/search.module.less b/src/components/search.module.less
index c307d3395..7d48b6536 100644
--- a/src/components/search.module.less
+++ b/src/components/search.module.less
@@ -1,4 +1,5 @@
 .input {
   border: none;
   height: 32px;
+  outline: none;
 }

From 4de90fc037d381786f1d09f9abb6b67f95254c67 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 19:47:23 +0800
Subject: [PATCH 42/75] split products and product components

---
 src/components/header.module.less  |  62 --------
 src/components/header.tsx          | 220 +----------------------------
 src/components/product.module.less |  61 ++++++++
 src/components/product.tsx         |  40 ++++++
 src/components/products.tsx        | 188 ++++++++++++++++++++++++
 5 files changed, 290 insertions(+), 281 deletions(-)
 create mode 100644 src/components/product.module.less
 create mode 100644 src/components/product.tsx
 create mode 100644 src/components/products.tsx

diff --git a/src/components/header.module.less b/src/components/header.module.less
index 41aae998f..69cedb4db 100644
--- a/src/components/header.module.less
+++ b/src/components/header.module.less
@@ -65,65 +65,3 @@
     }
   }
 }
-
-.products {
-  width: 600px;
-  padding: 0 12px;
-  max-width: calc(100vw - 30px);
-
-  h3 {
-    font-size: 16px;
-    margin: 8px 0 24px 0;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .product {
-    overflow: hidden;
-    width: calc(50% - 16px);
-    display: inline-block;
-    margin-bottom: 16px;
-
-    img {
-      width: 28px;
-      height: 28px;
-      border-radius: 100%;
-      margin-right: 8px;
-      float: left;
-      display: block;
-    }
-
-    .productContent {
-      overflow: hidden;
-
-      h4 {
-        margin-bottom: 12px;
-        color: rgba(0, 0, 0, 0.85);
-        a {
-          color: rgba(0, 0, 0, 0.85);
-        }
-      }
-
-      .productDescription {
-        margin-bottom: 8px;
-        color: rgba(0, 0, 0, 0.45);
-      }
-
-      .productLinks {
-        > a {
-          margin-right: 8px;
-          color: rgba(0, 0, 0, 0.65);
-          transition: all 0.3s;
-
-          &:hover {
-            color: rgba(0, 0, 0, 0.85);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 19dfe1300..7eb0a36b9 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -4,6 +4,7 @@ import GithubCorner from 'react-github-corner';
 import { Popover, Select } from 'antd';
 import classNames from 'classnames';
 import Search from './search';
+import Products from './products';
 import { docs } from '../../.antvisrc';
 import styles from './header.module.less';
 
@@ -15,225 +16,6 @@ interface HeaderProps {
   currentLangKey?: string;
 }
 
-interface ProductProps {
-  name?: string;
-  icon?: string;
-  description?: string;
-  url?: string;
-  links?: Array<{
-    name: string;
-    link: string;
-  }>;
-}
-
-const Product: React.FC<ProductProps> = ({
-  name,
-  icon,
-  url,
-  description,
-  links = [],
-}) => (
-  <li className={styles.product}>
-    <img alt={name} src={icon} />
-    <div className={styles.productContent}>
-      <a href={url} target="_blank">
-        <h4>{name}</h4>
-      </a>
-      <div className={styles.productDescription}>{description}</div>
-      <div className={styles.productLinks}>
-        {links.map(({ link, name }, i) => (
-          <a target="_blank" href={link} key={i}>
-            {name}
-          </a>
-        ))}
-      </div>
-    </div>
-  </li>
-);
-
-const Products: React.FC<any> = () => (
-  <div className={styles.products}>
-    <h3>基础产品</h3>
-    <ul>
-      <Product
-        name="G2"
-        url="/g2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-    </ul>
-    <h3>扩展产品</h3>
-    <ul>
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-    </ul>
-  </div>
-);
-
 const Header: React.FC<HeaderProps> = ({
   siteTitle = '',
   location = { pathname: '' },
diff --git a/src/components/product.module.less b/src/components/product.module.less
new file mode 100644
index 000000000..c1a24a768
--- /dev/null
+++ b/src/components/product.module.less
@@ -0,0 +1,61 @@
+.products {
+  width: 600px;
+  padding: 0 12px;
+  max-width: calc(100vw - 30px);
+
+  h3 {
+    font-size: 16px;
+    margin: 8px 0 24px 0;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .product {
+    overflow: hidden;
+    width: calc(50% - 16px);
+    display: inline-block;
+    margin-bottom: 16px;
+
+    img {
+      width: 28px;
+      height: 28px;
+      border-radius: 100%;
+      margin-right: 8px;
+      float: left;
+      display: block;
+    }
+
+    .productContent {
+      overflow: hidden;
+
+      h4 {
+        margin-bottom: 12px;
+        color: rgba(0, 0, 0, 0.85);
+        a {
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+
+      .productDescription {
+        margin-bottom: 8px;
+        color: rgba(0, 0, 0, 0.45);
+      }
+
+      .productLinks {
+        > a {
+          margin-right: 8px;
+          color: rgba(0, 0, 0, 0.65);
+          transition: all 0.3s;
+
+          &:hover {
+            color: rgba(0, 0, 0, 0.85);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/product.tsx b/src/components/product.tsx
new file mode 100644
index 000000000..92c79c6b5
--- /dev/null
+++ b/src/components/product.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from './product.module.less';
+
+interface ProductProps {
+  name?: string;
+  icon?: string;
+  description?: string;
+  url?: string;
+  links?: Array<{
+    name: string;
+    link: string;
+  }>;
+}
+
+const Product: React.FC<ProductProps> = ({
+  name,
+  icon,
+  url,
+  description,
+  links = [],
+}) => (
+  <li className={styles.product}>
+    <img alt={name} src={icon} />
+    <div className={styles.productContent}>
+      <a href={url} target="_blank">
+        <h4>{name}</h4>
+      </a>
+      <div className={styles.productDescription}>{description}</div>
+      <div className={styles.productLinks}>
+        {links.map(({ link, name }, i) => (
+          <a target="_blank" href={link} key={i}>
+            {name}
+          </a>
+        ))}
+      </div>
+    </div>
+  </li>
+);
+
+export default Product;
diff --git a/src/components/products.tsx b/src/components/products.tsx
new file mode 100644
index 000000000..1eb86d319
--- /dev/null
+++ b/src/components/products.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import Product from './product';
+import styles from './product.module.less';
+
+const Products: React.FC<{}> = () => (
+  <div className={styles.products}>
+    <h3>基础产品</h3>
+    <ul>
+      <Product
+        name="G2"
+        url="/g2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+    </ul>
+    <h3>扩展产品</h3>
+    <ul>
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+      <Product
+        name="G2"
+        description="一套基于可视化编码的图形语法"
+        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
+        links={[
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+          {
+            name: '关于',
+            link: '',
+          },
+        ]}
+      />
+    </ul>
+  </div>
+);
+
+export default Products;

From 64a13443f80ac945d3fe846e26ab5aa24fad992d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 19:48:48 +0800
Subject: [PATCH 43/75] fix mixed content

---
 README.md                                | 2 +-
 docs/other/getting-started.en.md         | 4 ++--
 docs/specification/getting-started.en.md | 4 ++--
 jest.config.js                           | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 8a7a132d5..b610b9163 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ npm install
 npm start
 ```
 
-Visit http://127.0.0.1:8000
+Visit https://127.0.0.1:8000
 
 ## Prettier
 
diff --git a/docs/other/getting-started.en.md b/docs/other/getting-started.en.md
index ab59e22f6..835eb573d 100644
--- a/docs/other/getting-started.en.md
+++ b/docs/other/getting-started.en.md
@@ -8,8 +8,8 @@ order: 0
 ![](https://img.shields.io/badge/license-MIT-000000.svg)
 
 [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
-[![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+[![NPM Downloads](https://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](https://isitmaintained.com/badge/open/antvis/g2.svg)](https://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
 
 G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.
 
diff --git a/docs/specification/getting-started.en.md b/docs/specification/getting-started.en.md
index ab59e22f6..835eb573d 100644
--- a/docs/specification/getting-started.en.md
+++ b/docs/specification/getting-started.en.md
@@ -8,8 +8,8 @@ order: 0
 ![](https://img.shields.io/badge/license-MIT-000000.svg)
 
 [![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
-[![NPM Downloads](http://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
-[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g2.svg)](http://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+[![NPM Downloads](https://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](https://isitmaintained.com/badge/open/antvis/g2.svg)](https://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
 
 G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.
 
diff --git a/jest.config.js b/jest.config.js
index 3ce12ba0a..297f153c0 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,7 +13,7 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: ``,
   },
-  testURL: `http://localhost`,
+  testURL: `https://localhost`,
   setupFilesAfterEnv: [`<rootDir>/jest.setup.js`],
   setupFiles: [`<rootDir>/loadershim.js`],
 };

From 7e64f94a7173d88da9ee17a24b441e1059431865 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 20:26:42 +0800
Subject: [PATCH 44/75] import react i18next

---
 package.json              |   2 +
 src/components/header.tsx | 158 +++++++++++++++++++-------------------
 src/components/layout.tsx | 118 ++++++++++++++++------------
 src/components/search.tsx |   8 +-
 src/locale.json           |   9 +++
 tsconfig.json             |   1 +
 6 files changed, 170 insertions(+), 126 deletions(-)
 create mode 100644 src/locale.json

diff --git a/package.json b/package.json
index f07c9e33b..4a2528942 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "gatsby-transformer-remark": "^2.6.24",
     "gatsby-transformer-sharp": "^2.2.14",
     "husky": "^3.0.5",
+    "i18next": "^17.0.16",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "less": "^3.10.3",
@@ -62,6 +63,7 @@
     "react-dom": "^16.9.0",
     "react-github-corner": "^2.3.0",
     "react-helmet": "^5.2.1",
+    "react-i18next": "^10.13.1",
     "react-test-renderer": "^16.9.0",
     "ts-jest": "^24.1.0",
     "typescript": "^3.6.3"
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 7eb0a36b9..b7b758124 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,6 +1,7 @@
 import { Link, navigate } from 'gatsby';
 import React from 'react';
 import GithubCorner from 'react-github-corner';
+import { useTranslation } from 'react-i18next';
 import { Popover, Select } from 'antd';
 import classNames from 'classnames';
 import Search from './search';
@@ -20,83 +21,86 @@ const Header: React.FC<HeaderProps> = ({
   siteTitle = '',
   location = { pathname: '' },
   currentLangKey = '',
-}) => (
-  <header className={styles.header}>
-    <div className={styles.left}>
-      <h1>
-        <Link to="/">
-          <img
-            src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
-            alt={siteTitle}
-          />
-        </Link>
-      </h1>
-      <span className={styles.divider} />
-      <Search />
-    </div>
-    <nav className={styles.nav}>
-      <ul className={styles.menu}>
-        <li>
-          <Link
-            to={`/${currentLangKey}/docs/specification/getting-started`}
-            className={classNames({
-              [styles.active]: location.pathname.startsWith(
-                `/${currentLangKey}/docs/specification`,
-              ),
-            })}
-          >
-            {docs['specification'].title[currentLangKey]}
+}) => {
+  const { t } = useTranslation();
+  return (
+    <header className={styles.header}>
+      <div className={styles.left}>
+        <h1>
+          <Link to="/">
+            <img
+              src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
+              alt={siteTitle}
+            />
           </Link>
-        </li>
-        <li>
-          <Link
-            to={`/${currentLangKey}/docs/other/getting-started`}
-            className={classNames({
-              [styles.active]: location.pathname.startsWith(
-                `/${currentLangKey}/docs/other`,
-              ),
-            })}
-          >
-            {docs['other'].title[currentLangKey]}
-          </Link>
-        </li>
-        <li>
-          <Popover
-            title={null}
-            content={<Products />}
-            placement="bottomRight"
-            arrowPointAtCenter
-          >
-            <a>所有产品</a>
-          </Popover>
-        </li>
-        <li>
-          <Popover
-            title={null}
-            content={<Products />}
-            placement="bottomRight"
-            arrowPointAtCenter
-          >
-            <a>生态</a>
-          </Popover>
-        </li>
-      </ul>
-      <Select
-        size="small"
-        style={{ width: 80, fontSize: 12 }}
-        value={currentLangKey}
-        onChange={(value: string) => {
-          navigate(
-            location.pathname.replace(`/${currentLangKey}/`, `/${value}/`),
-          );
-        }}
-      >
-        <Option value="en">🇺🇸 Eng</Option>
-        <Option value="zh">🇨🇳 中文</Option>
-      </Select>
-      <GithubCorner href="https://github.com/antvis" size={64} />
-    </nav>
-  </header>
-);
+        </h1>
+        <span className={styles.divider} />
+        <Search />
+      </div>
+      <nav className={styles.nav}>
+        <ul className={styles.menu}>
+          <li>
+            <Link
+              to={`/${currentLangKey}/docs/specification/getting-started`}
+              className={classNames({
+                [styles.active]: location.pathname.startsWith(
+                  `/${currentLangKey}/docs/specification`,
+                ),
+              })}
+            >
+              {docs['specification'].title[currentLangKey]}
+            </Link>
+          </li>
+          <li>
+            <Link
+              to={`/${currentLangKey}/docs/other/getting-started`}
+              className={classNames({
+                [styles.active]: location.pathname.startsWith(
+                  `/${currentLangKey}/docs/other`,
+                ),
+              })}
+            >
+              {docs['other'].title[currentLangKey]}
+            </Link>
+          </li>
+          <li>
+            <Popover
+              title={null}
+              content={<Products />}
+              placement="bottomRight"
+              arrowPointAtCenter
+            >
+              <a>{t('所有产品')}</a>
+            </Popover>
+          </li>
+          <li>
+            <Popover
+              title={null}
+              content={<Products />}
+              placement="bottomRight"
+              arrowPointAtCenter
+            >
+              <a>{t('生态')}</a>
+            </Popover>
+          </li>
+        </ul>
+        <Select
+          size="small"
+          style={{ width: 80, fontSize: 12 }}
+          value={currentLangKey}
+          onChange={(value: string) => {
+            navigate(
+              location.pathname.replace(`/${currentLangKey}/`, `/${value}/`),
+            );
+          }}
+        >
+          <Option value="en">🇺🇸 Eng</Option>
+          <Option value="zh">🇨🇳 中文</Option>
+        </Select>
+        <GithubCorner href="https://github.com/antvis" size={64} />
+      </nav>
+    </header>
+  );
+};
 
 export default Header;
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 6dc11ffb3..479ccd520 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -1,23 +1,32 @@
-/**
- * Layout component that queries for data
- * with Gatsby's useStaticQuery component
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
-import { Location } from '@reach/router';
+import { Location as RouterLocation } from '@reach/router';
 import Footer from 'rc-footer';
 import { getCurrentLangKey } from 'ptz-i18n';
+import i18n from 'i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
 import Header from './header';
+import locale from '../locale.json';
 import styles from './layout.module.less';
 
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources: locale,
+    lng: 'zh',
+    fallbackLng: 'zh',
+  });
+
 interface LayoutProps {
   children?: React.ReactNode;
+  location?: Location;
 }
 
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC<LayoutProps> = ({
+  children,
+  location,
+}) => {
+  const { i18n } = useTranslation();
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -175,45 +184,58 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     },
   ];
 
+  const {
+    site: {
+      siteMetadata: {
+        title,
+        languages: { langs, defaultLangKey },
+      },
+    },
+  } = data;
+
+  const currentLangKey = getCurrentLangKey(
+    langs,
+    defaultLangKey,
+    location!.pathname,
+  );
+
+  useEffect(() => {
+    if (i18n.language !== currentLangKey) {
+      i18n.changeLanguage(currentLangKey);
+    }
+  }, [currentLangKey]);
+
   return (
-    <Location>
-      {({ location }) => {
-        const {
-          site: {
-            siteMetadata: {
-              title,
-              languages: { langs, defaultLangKey },
-            },
-          },
-        } = data;
-        const currentLangKey = getCurrentLangKey(
-          langs,
-          defaultLangKey,
-          location.pathname,
-        );
-        return (
-          <>
-            <Header
-              siteTitle={title}
-              location={location}
-              currentLangKey={currentLangKey}
-            />
-            <main className={styles.main}>{children}</main>
-            <Footer
-              columns={footerColumns}
-              bottom={
-                <div>
-                  © {new Date().getFullYear()}, Built with
-                  {` `}
-                  <a href="https://xtech.antfin.com/">AFX</a>
-                </div>
-              }
-            />
-          </>
-        );
-      }}
-    </Location>
+    <>
+      <Header
+        siteTitle={title}
+        location={location}
+        currentLangKey={currentLangKey}
+      />
+      <main className={styles.main}>{children}</main>
+      <Footer
+        columns={footerColumns}
+        bottom={
+          <div>
+            © {new Date().getFullYear()}, Built with
+            {` `}
+            <a href="https://xtech.antfin.com/">AFX</a>
+          </div>
+        }
+      />
+    </>
   );
 };
 
-export default Layout;
+// here app catches the suspense from page in case translations are not yet loaded
+export default function App(props: any) {
+  return (
+    <Suspense fallback={<div />}>
+      <RouterLocation>
+        {({ location }) => (
+          <Layout location={location} {...props} />
+        )}
+      </RouterLocation>
+    </Suspense>
+  );
+}
diff --git a/src/components/search.tsx b/src/components/search.tsx
index f29923ba5..1280649e1 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -1,4 +1,10 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styles from './search.module.less';
 
-export default () => <input className={styles.input} placeholder="Search..." />;
+export default () => {
+  const { t } = useTranslation();
+  return (
+    <input className={styles.input} placeholder={t('搜索…')} />
+  );
+};
diff --git a/src/locale.json b/src/locale.json
new file mode 100644
index 000000000..821a1b707
--- /dev/null
+++ b/src/locale.json
@@ -0,0 +1,9 @@
+{
+  "en": {
+    "translation": {
+      "所有产品": "All products",
+      "生态": "Ecosystem",
+      "搜索…": "Search..."
+    }
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 66bdf3e88..acdefd4a8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "noEmit": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true
   }
 }

From 4b7eb33606c206a3e4a22154a4b692ea8af9574c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 20:47:03 +0800
Subject: [PATCH 45/75] Add libs in README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index b610b9163..8298aa485 100644
--- a/README.md
+++ b/README.md
@@ -38,5 +38,8 @@ Not ready.
 ## Used libraries
 
 - [Gatsby](https://www.gatsbyjs.org/docs/)
+- [Ant Design](https://github.com/ant-design/ant-design)
+- [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/)
 - [Jest](https://jestjs.io/)
 - [Testing Library](https://testing-library.com/)
+- [react-i18next](https://react.i18next.com/)

From 563baa532892b1cf3b82775eb15d2a0abd949638 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 29 Sep 2019 21:04:14 +0800
Subject: [PATCH 46/75] :lipstick: format code

---
 gatsby-config.js          | 4 ++--
 src/components/layout.tsx | 9 ++-------
 src/components/search.tsx | 4 +---
 src/pages/index.tsx       | 2 +-
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 3d9d2cb3d..0ffa75885 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -21,8 +21,8 @@ module.exports = {
       resolve: 'gatsby-plugin-i18n',
       options: {
         langKeyDefault: 'en',
-        useLangKeyLayout: false
-      }
+        useLangKeyLayout: false,
+      },
     },
     {
       resolve: `gatsby-transformer-remark`,
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 479ccd520..7d40c759c 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -22,10 +22,7 @@ interface LayoutProps {
   location?: Location;
 }
 
-const Layout: React.FC<LayoutProps> = ({
-  children,
-  location,
-}) => {
+const Layout: React.FC<LayoutProps> = ({ children, location }) => {
   const { i18n } = useTranslation();
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
@@ -232,9 +229,7 @@ export default function App(props: any) {
   return (
     <Suspense fallback={<div />}>
       <RouterLocation>
-        {({ location }) => (
-          <Layout location={location} {...props} />
-        )}
+        {({ location }) => <Layout location={location} {...props} />}
       </RouterLocation>
     </Suspense>
   );
diff --git a/src/components/search.tsx b/src/components/search.tsx
index 1280649e1..e362b51ec 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -4,7 +4,5 @@ import styles from './search.module.less';
 
 export default () => {
   const { t } = useTranslation();
-  return (
-    <input className={styles.input} placeholder={t('搜索…')} />
-  );
+  return <input className={styles.input} placeholder={t('搜索…')} />;
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 86fae132a..5b8d2ae63 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,7 +25,7 @@ export default RedirectIndex;
 
 export const pageQuery = graphql`
   query IndexQuery {
-    site{
+    site {
       siteMetadata {
         languages {
           defaultLangKey

From 0e29cb446d48d0fa0a7b7480bf79f2218d2886d6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 11:42:28 +0800
Subject: [PATCH 47/75] remove Suspense for ssr

---
 src/components/layout.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index 7d40c759c..d6c9028e9 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { Location as RouterLocation } from '@reach/router';
 import Footer from 'rc-footer';
@@ -227,10 +227,8 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
 // here app catches the suspense from page in case translations are not yet loaded
 export default function App(props: any) {
   return (
-    <Suspense fallback={<div />}>
-      <RouterLocation>
-        {({ location }) => <Layout location={location} {...props} />}
-      </RouterLocation>
-    </Suspense>
+    <RouterLocation>
+      {({ location }) => <Layout location={location} {...props} />}
+    </RouterLocation>
   );
 }

From c06977a3681a2a1e45455b6c1a60a53905905e46 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 12:31:20 +0800
Subject: [PATCH 48/75] Add remark plugins

---
 gatsby-config.js           | 21 +++++++++++++++++++++
 gatsby-node.js             |  2 +-
 package.json               |  6 ++++++
 src/templates/document.tsx |  2 +-
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 0ffa75885..94fe3fd0a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -28,13 +28,31 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          {
+            resolve: `gatsby-remark-prettier`,
+            options: {
+              // Look for local .prettierrc file.
+              // The same as `prettier.resolveConfig(process.cwd())`
+              usePrettierrc: true,
+              // Overwrite prettier options, check out https://prettier.io/docs/en/options.html
+              prettierOptions: {},
+            },
+          },
           {
             resolve: `gatsby-remark-prismjs`,
             options: {
               inlineCodeMarker: '±',
             },
           },
+          {
+            resolve: 'gatsby-remark-external-links',
+            options: {
+              target: '_self',
+              rel: 'nofollow',
+            },
+          },
           `gatsby-remark-autolink-headers`,
+          `gatsby-remark-reading-time`,
         ],
       },
     },
@@ -72,5 +90,8 @@ module.exports = {
         trackingId: `UA-148148901-1`,
       },
     },
+    `gatsby-plugin-catch-links`,
+    `gatsby-plugin-nprogress`,
+    `gatsby-plugin-remove-trailing-slashes`,
   ],
 };
diff --git a/gatsby-node.js b/gatsby-node.js
index 5df2b4113..85c5f7f05 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -29,7 +29,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
     createNodeField({
       node,
       name: `slug`,
-      value: slug,
+      value: slug.replace(/\/$/, ''),
     });
     createNodeField({
       node,
diff --git a/package.json b/package.json
index 4a2528942..2278adeff 100644
--- a/package.json
+++ b/package.json
@@ -33,16 +33,22 @@
     "gatsby": "^2.15.16",
     "gatsby-image": "^2.2.19",
     "gatsby-plugin-antd": "^2.0.2",
+    "gatsby-plugin-catch-links": "^2.1.12",
     "gatsby-plugin-google-analytics": "^2.1.16",
     "gatsby-plugin-i18n": "^1.0.1",
     "gatsby-plugin-less": "^3.0.6",
     "gatsby-plugin-manifest": "^2.2.16",
+    "gatsby-plugin-nprogress": "^2.1.9",
     "gatsby-plugin-offline": "^3.0.7",
     "gatsby-plugin-react-helmet": "^3.1.7",
+    "gatsby-plugin-remove-trailing-slashes": "^2.1.9",
     "gatsby-plugin-sharp": "^2.2.22",
     "gatsby-plugin-typescript": "^2.1.8",
     "gatsby-remark-autolink-headers": "^2.1.13",
+    "gatsby-remark-external-links": "^0.0.4",
+    "gatsby-remark-prettier": "^1.0.0",
     "gatsby-remark-prismjs": "^3.3.16",
+    "gatsby-remark-reading-time": "^1.0.1",
     "gatsby-source-filesystem": "^2.1.22",
     "gatsby-transformer-remark": "^2.6.24",
     "gatsby-transformer-sharp": "^2.2.14",
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 178391a8e..0abd3ac82 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -62,7 +62,7 @@ export default function Template({
   const groupedEdges = groupBy(edges, ({ node: { fields: { slug } } }: any) =>
     slug
       .split('/')
-      .slice(0, -2)
+      .slice(0, -1)
       .join('/'),
   );
 

From cd25581eb918467ebad922b94aa296b3609f49ee Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 12:46:32 +0800
Subject: [PATCH 49/75] Add edit on GitHub button

---
 src/templates/document.tsx         | 28 +++++++++++++++++++++++++---
 src/templates/markdown.module.less |  9 +++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 0abd3ac82..1bc7f07c4 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { graphql, Link } from 'gatsby';
-import { Layout as AntLayout, Menu } from 'antd';
+import { Layout as AntLayout, Menu, Icon, Tooltip } from 'antd';
 import { groupBy } from 'lodash-es';
 import { getCurrentLangKey } from 'ptz-i18n';
+import packageJson from '../../package.json';
 import Layout from '../components/layout';
 import Article from '../components/article';
 import SEO from '../components/seo';
@@ -50,7 +51,8 @@ export default function Template({
   const {
     frontmatter,
     html,
-    fields: { slug },
+    fields: { slug, readingTime },
+    parent: { relativePath },
   } = markdownRemark;
   const { edges = [] } = allMarkdownRemark;
   const {
@@ -116,7 +118,19 @@ export default function Template({
           </Menu>
         </AntLayout.Sider>
         <Article className={styles.markdown}>
-          <h1>{frontmatter.title}</h1>
+          <h1>
+            {frontmatter.title}
+            <Tooltip title="在 GitHub 上编辑">
+              <a
+                href={`${packageJson.repository.url}/edit/master/${relativePath}`}
+                target="_blank"
+                className={styles.editOnGtiHubButton}
+              >
+                <Icon type="edit" />
+              </a>
+            </Tooltip>
+          </h1>
+          <div>{readingTime.text}</div>
           <div dangerouslySetInnerHTML={{ __html: html }} />
         </Article>
       </AntLayout>
@@ -140,10 +154,18 @@ export const pageQuery = graphql`
       fields {
         slug
         langKey
+        readingTime {
+          text
+        }
       }
       frontmatter {
         title
       }
+      parent {
+        ... on File {
+          relativePath
+        }
+      }
     }
     allMarkdownRemark(
       sort: { order: ASC, fields: [frontmatter___order] }
diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
index 58ef4fa16..5694daa8c 100644
--- a/src/templates/markdown.module.less
+++ b/src/templates/markdown.module.less
@@ -132,3 +132,12 @@
     clear: both;
   }
 }
+
+.editOnGtiHubButton {
+  margin-left: 0.5em;
+  font-size: 16px;
+  color: #999;
+  vertical-align: middle;
+  position: relative;
+  top: -2px;
+}

From 286f3e66898f4d631eaf5e51b0f92734ebc38d35 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 12:49:06 +0800
Subject: [PATCH 50/75] fix SEO

---
 src/pages/index.en.tsx     | 2 +-
 src/pages/index.zh.tsx     | 2 +-
 src/templates/document.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.en.tsx b/src/pages/index.en.tsx
index c4fd752ec..60e954dc0 100644
--- a/src/pages/index.en.tsx
+++ b/src/pages/index.en.tsx
@@ -5,7 +5,7 @@ import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
-    <SEO title="Home" />
+    <SEO title="Home" lang="en" />
     <div style={{ margin: '0 auto', padding: '0 80px' }}>
       Home Page
       <Skeleton />
diff --git a/src/pages/index.zh.tsx b/src/pages/index.zh.tsx
index 7808c1b06..e6a64a77f 100644
--- a/src/pages/index.zh.tsx
+++ b/src/pages/index.zh.tsx
@@ -5,7 +5,7 @@ import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
-    <SEO title="首页" />
+    <SEO title="首页" lang="zh" />
     <div style={{ margin: '0 auto', padding: '0 80px' }}>
       中文首页
       <Skeleton />
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 1bc7f07c4..b3fdefa86 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -72,7 +72,7 @@ export default function Template({
 
   return (
     <Layout>
-      <SEO title="Home" />
+      <SEO title={frontmatter.title} lang={currentLangKey} />
       <AntLayout style={{ background: '#fff' }}>
         <AntLayout.Sider width={280} theme="light">
           <Menu

From dacb9a46450eada901f3e9597b4fba48e0519155 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 12:51:18 +0800
Subject: [PATCH 51/75] fix react-helmet ts error

---
 src/components/seo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
index 9bc019d27..8609bc658 100644
--- a/src/components/seo.tsx
+++ b/src/components/seo.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet';
 import { useStaticQuery, graphql } from 'gatsby';
 
 interface SEOProps {

From 235ea194e918b89a601f30353e6123f8cf21ab0c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 13:44:34 +0800
Subject: [PATCH 52/75] fix test case

---
 src/components/__tests__/header.test.js | 1 -
 src/components/__tests__/layout.test.js | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/__tests__/header.test.js b/src/components/__tests__/header.test.js
index 12c4b46b8..f63dca539 100644
--- a/src/components/__tests__/header.test.js
+++ b/src/components/__tests__/header.test.js
@@ -7,7 +7,6 @@ describe(`Header`, () => {
   it(`renders menu`, () => {
     const siteTitle = `Hello World`;
     const { getByText } = render(<Header siteTitle={siteTitle} />);
-    expect(getByText('设计语言')).toBeInTheDocument();
     expect(getByText('所有产品')).toBeInTheDocument();
     expect(getByText('生态')).toBeInTheDocument();
   });
diff --git a/src/components/__tests__/layout.test.js b/src/components/__tests__/layout.test.js
index f596c4273..76256b385 100644
--- a/src/components/__tests__/layout.test.js
+++ b/src/components/__tests__/layout.test.js
@@ -9,6 +9,10 @@ beforeEach(() => {
     site: {
       siteMetadata: {
         title: `GatsbyJS`,
+        languages: {
+          langs: ['en', 'zh'],
+          defaultLangKey: 'zh',
+        },
       },
     },
   }));

From 18dcbed7e0d7430122ee4a9d6da3a43a9f498e79 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 30 Sep 2019 15:22:54 +0800
Subject: [PATCH 53/75] Add toc for markdown doc

---
 src/components/article.module.less |  2 +-
 src/templates/document.tsx         | 40 +++++++++++++++++++-----------
 src/templates/markdown.module.less | 21 ++++++++++++++++
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/components/article.module.less b/src/components/article.module.less
index a790a7505..0b71dc76c 100644
--- a/src/components/article.module.less
+++ b/src/components/article.module.less
@@ -1,5 +1,5 @@
 .article {
-  padding: 0 48px;
+  padding: 0 16px 0 48px;
   min-height: 600px;
 
   h2 {
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index b3fdefa86..65bad6581 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { graphql, Link } from 'gatsby';
-import { Layout as AntLayout, Menu, Icon, Tooltip } from 'antd';
+import { Layout as AntLayout, Menu, Icon, Tooltip, Affix } from 'antd';
 import { groupBy } from 'lodash-es';
 import { getCurrentLangKey } from 'ptz-i18n';
 import packageJson from '../../package.json';
@@ -51,6 +51,7 @@ export default function Template({
   const {
     frontmatter,
     html,
+    tableOfContents,
     fields: { slug, readingTime },
     parent: { relativePath },
   } = markdownRemark;
@@ -118,20 +119,28 @@ export default function Template({
           </Menu>
         </AntLayout.Sider>
         <Article className={styles.markdown}>
-          <h1>
-            {frontmatter.title}
-            <Tooltip title="在 GitHub 上编辑">
-              <a
-                href={`${packageJson.repository.url}/edit/master/${relativePath}`}
-                target="_blank"
-                className={styles.editOnGtiHubButton}
-              >
-                <Icon type="edit" />
-              </a>
-            </Tooltip>
-          </h1>
-          <div>{readingTime.text}</div>
-          <div dangerouslySetInnerHTML={{ __html: html }} />
+          <Affix>
+            <div
+              className={styles.toc}
+              dangerouslySetInnerHTML={{ __html: tableOfContents }}
+            />
+          </Affix>
+          <div className={styles.main}>
+            <h1>
+              {frontmatter.title}
+              <Tooltip title="在 GitHub 上编辑">
+                <a
+                  href={`${packageJson.repository.url}/edit/master/${relativePath}`}
+                  target="_blank"
+                  className={styles.editOnGtiHubButton}
+                >
+                  <Icon type="edit" />
+                </a>
+              </Tooltip>
+            </h1>
+            <div>{readingTime.text}</div>
+            <div dangerouslySetInnerHTML={{ __html: html }} />
+          </div>
         </Article>
       </AntLayout>
     </Layout>
@@ -151,6 +160,7 @@ export const pageQuery = graphql`
     }
     markdownRemark(fields: { slug: { eq: $path } }) {
       html
+      tableOfContents
       fields {
         slug
         langKey
diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
index 5694daa8c..4eec113b4 100644
--- a/src/templates/markdown.module.less
+++ b/src/templates/markdown.module.less
@@ -141,3 +141,24 @@
   position: relative;
   top: -2px;
 }
+
+.main {
+  width: calc(100% - 160px);
+  padding-right: 24px;
+}
+
+.toc {
+  width: 160px;
+  border-left: 2px solid #eee;
+  float: right;
+  font-size: 13px;
+
+  ul > li {
+    list-style: none;
+    padding: 0;
+    margin-left: 16px;
+    a {
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}

From d55fbe4e2064daf6cb03b23296719eb38b5ace4d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 17:27:04 +0800
Subject: [PATCH 54/75] support default chinese doc

---
 docs/specification/test-only-cn.md | 117 +++++++++++++++++++++++++++++
 gatsby-node.js                     |  11 +--
 src/templates/document.tsx         |   2 +
 3 files changed, 123 insertions(+), 7 deletions(-)
 create mode 100644 docs/specification/test-only-cn.md

diff --git a/docs/specification/test-only-cn.md b/docs/specification/test-only-cn.md
new file mode 100644
index 000000000..079070ba0
--- /dev/null
+++ b/docs/specification/test-only-cn.md
@@ -0,0 +1,117 @@
+---
+title: 测试只有中文
+order: 3
+---
+
+[![](https://img.shields.io/travis/antvis/g2.svg)](https://travis-ci.org/antvis/g2)
+![](https://img.shields.io/badge/language-javascript-red.svg)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+[![NPM Package](https://img.shields.io/npm/v/@antv/g2.svg)](https://www.npmjs.com/package/@antv/g2)
+[![NPM Downloads](https://img.shields.io/npm/dm/@antv/g2.svg)](https://npmjs.org/package/@antv/g2)
+[![Percentage of issues still open](https://isitmaintained.com/badge/open/antvis/g2.svg)](https://isitmaintained.com/project/antvis/g2 'Percentage of issues still open')
+
+G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
+
+**在此衷心感谢[《The Grammar of Graphics》](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html)的作者 [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson)，为 G2 的图形语法提供了理论基础！**
+
+[了解更多 G2 详情](https://antv.alipay.com/zh-cn/g2/3.x/index.html).
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/AOwgKIjknXfggPijmhym.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/nfiOREzMIsENrzUeLOGR.gif" width="200"><img src="https://gw.alipayobjects.com/zos/rmsportal/uZZmaudtKRnvUhmUdZSZ.gif" width="180"><img src="https://gw.alipayobjects.com/zos/rmsportal/ifSTXzrGbvtLRpnAvAiZ.gif" width="200">
+
+## 安装
+
+```bash
+npm install @antv/g2
+```
+
+## 特性
+
+- ✔︎ 简单、易用
+- ✔︎ 完备的可视化编码
+- ✔︎ 强大的扩展能力
+
+## 文档
+
+- [使用教程](https://antv.alipay.com/zh-cn/g2/3.x/tutorial/index.html)
+- [API 文档](https://antv.alipay.com/zh-cn/g2/3.x/api/index.html)
+- [图表示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+### 快速开始
+
+<img src="https://gw.alipayobjects.com/zos/rmsportal/aHvVgFiBnGzzKCEjdVtL.png" width="450">
+
+```html
+<div id="c1"></div>
+```
+
+```js
+import G2 from '@antv/g2';
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 1150 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const chart = new G2.Chart({
+  container: 'c1',
+  width: 500,
+  height: 500,
+});
+
+chart.source(data);
+chart
+  .interval()
+  .position('genre*sold') // highlight-line
+  .color('genre');
+chart.render();
+```
+
+[更多示例](https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html)
+
+![demos](https://user-images.githubusercontent.com/1655789/34187141-d800fe94-e56a-11e7-878a-4dc0e4f538d9.png)
+
+## 本地开发
+
+```bash
+$ npm install
+
+# 跑测试用例
+$ npm run test-live
+
+# 监听文件变化构建，并打开 demo 页面
+$ npm run dev
+
+# 打开 demo
+$ npm run demos
+```
+
+## ~~体验改进计划说明~~
+
+~~为了更好服务用户，G2 会将 URL 和版本信息发送回 AntV 服务器：~~
+
+~~https://kcart.alipay.com/web/bi.do~~
+
+~~**除了 URL 与 G2 版本信息外，不会收集任何其他信息**，一切为了能对 G2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：~~
+
+```js
+// 关闭 G2 的体验改进计划打点请求
+G2.track(false);
+```
+
+**更新**
+
+**我们已决定终止体验改进计划**
+
+**从 `@antv/g2@3.4.7` 版本开始，所有打点代码已被移除。后续版本的 G2 不会再发送任何远程请求**
+
+## 如何贡献
+
+如果您在使用的过程中碰到问题，可以先通过 [issues](https://github.com/antvis/g2/issues) 看看有没有类似的 bug 或者建议。
+
+如需提交代码，请遵从我们的[贡献指南](https://github.com/antvis/g2/blob/master/CONTRIBUTING.md)。
+
+I can highlight `css±.some-class { background-color: red }` with CSS syntax.
diff --git a/gatsby-node.js b/gatsby-node.js
index 85c5f7f05..ab376069d 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -10,7 +10,7 @@ const { getSlugAndLang } = require('ptz-i18n');
 
 // Add custom url pathname for posts
 exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions;
+  const { createNode, createNodeField } = actions;
   if (node.internal.type === `File`) {
     createNodeField({
       node,
@@ -19,7 +19,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
     const { slug, langKey } = getSlugAndLang(
       {
         langKeyForNull: 'any',
-        langKeyDefault: 'en',
+        langKeyDefault: 'none',
         useLangKeyLayout: false,
         pagesPaths: [__dirname],
         prefixDefault: true,
@@ -29,7 +29,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
     createNodeField({
       node,
       name: `slug`,
-      value: slug.replace(/\/$/, ''),
+      value: (langKey === 'none' ? `/zh${slug}` : slug).replace(/\/$/, ''),
     });
     createNodeField({
       node,
@@ -51,6 +51,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
           node {
             fields {
               slug
+              langKey
             }
           }
         }
@@ -67,10 +68,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     createPage({
       path: slug, // required
       component: path.resolve(`src/templates/document.tsx`),
-      context: {
-        slug,
-        langKey,
-      },
     });
   });
 };
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 65bad6581..4e07b19bb 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -69,6 +69,8 @@ export default function Template({
       .join('/'),
   );
 
+  console.log(currentLangKey, groupedEdges, langs, defaultLangKey);
+
   const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
 
   return (

From 02ba593f2b88fb919c057c9ac0dbb55a98c02ecf Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 17:28:07 +0800
Subject: [PATCH 55/75] remove console log

---
 src/templates/document.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 4e07b19bb..65bad6581 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -69,8 +69,6 @@ export default function Template({
       .join('/'),
   );
 
-  console.log(currentLangKey, groupedEdges, langs, defaultLangKey);
-
   const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
 
   return (

From 209c519d8df2495d0c15a6ec62b514cf1ff1e6d4 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 18:03:19 +0800
Subject: [PATCH 56/75] i18n for reading time

---
 gatsby-node.js             |  2 +-
 package.json               |  1 +
 src/templates/document.tsx | 21 +++++++++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index ab376069d..7ea47aece 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -10,7 +10,7 @@ const { getSlugAndLang } = require('ptz-i18n');
 
 // Add custom url pathname for posts
 exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNode, createNodeField } = actions;
+  const { createNodeField } = actions;
   if (node.internal.type === `File`) {
     createNodeField({
       node,
diff --git a/package.json b/package.json
index 2278adeff..d99fc2d5d 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "jest": "^24.9.0",
     "less": "^3.10.3",
     "lodash-es": "^4.17.15",
+    "moment": "^2.24.0",
     "normalize.css": "^8.0.1",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.0",
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 65bad6581..fd2bdd533 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { graphql, Link } from 'gatsby';
-import { Layout as AntLayout, Menu, Icon, Tooltip, Affix } from 'antd';
+import { Layout as AntLayout, Menu, Icon, Tooltip, Affix, Tag } from 'antd';
 import { groupBy } from 'lodash-es';
+import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { getCurrentLangKey } from 'ptz-i18n';
 import packageJson from '../../package.json';
 import Layout from '../components/layout';
@@ -68,8 +70,12 @@ export default function Template({
       .slice(0, -1)
       .join('/'),
   );
-
   const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
+  const { i18n } = useTranslation();
+  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
+  useEffect(() => {
+    setCurrentLanguage(i18n.language);
+  }, [i18n.language]);
 
   return (
     <Layout>
@@ -138,7 +144,13 @@ export default function Template({
                 </a>
               </Tooltip>
             </h1>
-            <div>{readingTime.text}</div>
+            <div>
+              <Tag>
+                {currentLanguage === 'zh'
+                  ? moment(readingTime.time).format('阅读时间约 M 分钟')
+                  : readingTime.text}
+              </Tag>
+            </div>
             <div dangerouslySetInnerHTML={{ __html: html }} />
           </div>
         </Article>
@@ -166,6 +178,7 @@ export const pageQuery = graphql`
         langKey
         readingTime {
           text
+          time
         }
       }
       frontmatter {

From 70ce3d01717024782b9c94f4ac180d66f289a3ce Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 18:05:03 +0800
Subject: [PATCH 57/75] eng => English

---
 src/components/header.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index b7b758124..4e637545f 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -86,7 +86,8 @@ const Header: React.FC<HeaderProps> = ({
         </ul>
         <Select
           size="small"
-          style={{ width: 80, fontSize: 12 }}
+          style={{ width: 90, fontSize: 12 }}
+          dropdownMatchSelectWidth={false}
           value={currentLangKey}
           onChange={(value: string) => {
             navigate(
@@ -94,7 +95,7 @@ const Header: React.FC<HeaderProps> = ({
             );
           }}
         >
-          <Option value="en">🇺🇸 Eng</Option>
+          <Option value="en">🇺🇸 English</Option>
           <Option value="zh">🇨🇳 中文</Option>
         </Select>
         <GithubCorner href="https://github.com/antvis" size={64} />

From 491819d5f9f73863c6d30c3cd2de8f3e4b42f386 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 18:26:42 +0800
Subject: [PATCH 58/75] default lang => zh

---
 gatsby-config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 94fe3fd0a..dcdcdd563 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,8 +4,8 @@ module.exports = {
     siteUrl: `https://antvis.github.io`,
     description: `Ant Visualization solution home page`,
     languages: {
-      langs: ['en', 'zh'],
-      defaultLangKey: 'en',
+      langs: ['en', 'zh', 'none'],
+      defaultLangKey: 'zh',
     },
   },
   plugins: [
@@ -20,7 +20,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-i18n',
       options: {
-        langKeyDefault: 'en',
+        langKeyDefault: 'zh',
         useLangKeyLayout: false,
       },
     },

From 8eb5892119254a8cb1e3b9f5e1cd9bcf66201a46 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 18:42:58 +0800
Subject: [PATCH 59/75] update site title

---
 src/pages/index.zh.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/index.zh.tsx b/src/pages/index.zh.tsx
index e6a64a77f..2fa526273 100644
--- a/src/pages/index.zh.tsx
+++ b/src/pages/index.zh.tsx
@@ -5,7 +5,7 @@ import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
-    <SEO title="首页" lang="zh" />
+    <SEO title="蚂蚁数据可视化" lang="zh" />
     <div style={{ margin: '0 auto', padding: '0 80px' }}>
       中文首页
       <Skeleton />

From 20cf1627d3214cfffe8da9172ba17d00ad8e1546 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 9 Oct 2019 19:45:32 +0800
Subject: [PATCH 60/75] Add padding for doc page

---
 src/templates/markdown.module.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
index 4eec113b4..b4393a8da 100644
--- a/src/templates/markdown.module.less
+++ b/src/templates/markdown.module.less
@@ -145,6 +145,7 @@
 .main {
   width: calc(100% - 160px);
   padding-right: 24px;
+  padding-bottom: 60px;
 }
 
 .toc {

From 794fd65f25ce7cb15ff3e91c5e3e560b2f53dd0e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Oct 2019 12:03:31 +0800
Subject: [PATCH 61/75] devDependencies => dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d99fc2d5d..dd9de96b1 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "bugs": {
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
-  "devDependencies": {
+  "dependencies": {
     "@hot-loader/react-dom": "^16.9.0+4.12.11",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",

From 791bcf42f5bb35bfd656671e9f9dc46d4208b296 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Oct 2019 12:04:10 +0800
Subject: [PATCH 62/75] change name to @antv/gatsby-theme and publish

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dd9de96b1..21505aff7 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@antv/website",
+  "name": "@antv/gatsby-theme",
   "description": "Ant Visualization solution home page",
   "version": "0.1.0",
   "author": "AntV Team <antv@antfin.com>",

From fa7d4d1613e9a13955d0abed9d091e9ded1a9adf Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Oct 2019 12:26:40 +0800
Subject: [PATCH 63/75] move .antvisrc.ts into siteMetadata

---
 .antvisrc.ts               | 30 ------------------------------
 gatsby-config.js           | 36 +++++++++++++++++++++++++++++++++++-
 src/components/header.tsx  | 18 +++++++++++++++---
 src/components/layout.tsx  | 10 ++++++++++
 src/templates/document.tsx | 25 ++++++++++++++++++++-----
 5 files changed, 80 insertions(+), 39 deletions(-)
 delete mode 100644 .antvisrc.ts

diff --git a/.antvisrc.ts b/.antvisrc.ts
deleted file mode 100644
index cc3d01964..000000000
--- a/.antvisrc.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const docs = {
-  specification: {
-    title: {
-      zh: '设计语言',
-      en: 'Specification',
-    },
-    order: 0,
-  },
-  'specification/category': {
-    title: {
-      zh: '分类一',
-      en: 'category1',
-    },
-    order: 1,
-  },
-  other: {
-    title: {
-      zh: '其他文档',
-      en: 'other',
-    },
-    order: 0,
-  },
-  'other/category': {
-    title: {
-      zh: '分类二',
-      en: 'category2',
-    },
-    order: 2,
-  },
-} as { [key: string]: any };
diff --git a/gatsby-config.js b/gatsby-config.js
index dcdcdd563..1b78a878c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,9 +4,43 @@ module.exports = {
     siteUrl: `https://antvis.github.io`,
     description: `Ant Visualization solution home page`,
     languages: {
-      langs: ['en', 'zh', 'none'],
+      langs: ['en', 'zh'],
       defaultLangKey: 'zh',
     },
+    docs: [
+      {
+        slug: 'specification',
+        title: {
+          zh: '设计语言',
+          en: 'Specification',
+        },
+        order: 0,
+      },
+      {
+        slug: 'specification/category',
+        title: {
+          zh: '分类一',
+          en: 'category1',
+        },
+        order: 1,
+      },
+      {
+        slug: 'other',
+        title: {
+          zh: '其他文档',
+          en: 'other',
+        },
+        order: 0,
+      },
+      {
+        slug: 'other/category',
+        title: {
+          zh: '分类二',
+          en: 'category2',
+        },
+        order: 2,
+      },
+    ],
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 4e637545f..9e75fdad3 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -6,7 +6,6 @@ import { Popover, Select } from 'antd';
 import classNames from 'classnames';
 import Search from './search';
 import Products from './products';
-import { docs } from '../../.antvisrc';
 import styles from './header.module.less';
 
 const { Option } = Select;
@@ -15,12 +14,25 @@ interface HeaderProps {
   siteTitle?: string;
   location?: Location;
   currentLangKey?: string;
+  docs: Array<{
+    slug: string;
+    order: number;
+    title: {
+      zh: string;
+      en: string;
+    };
+  }>;
 }
 
+const getDocument = (docs: any[], slug: string = '') => {
+  return docs.find(doc => doc.slug === slug);
+};
+
 const Header: React.FC<HeaderProps> = ({
   siteTitle = '',
   location = { pathname: '' },
   currentLangKey = '',
+  docs,
 }) => {
   const { t } = useTranslation();
   return (
@@ -48,7 +60,7 @@ const Header: React.FC<HeaderProps> = ({
                 ),
               })}
             >
-              {docs['specification'].title[currentLangKey]}
+              {getDocument(docs, 'specification').title[currentLangKey]}
             </Link>
           </li>
           <li>
@@ -60,7 +72,7 @@ const Header: React.FC<HeaderProps> = ({
                 ),
               })}
             >
-              {docs['other'].title[currentLangKey]}
+              {getDocument(docs, 'other').title[currentLangKey]}
             </Link>
           </li>
           <li>
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index d6c9028e9..eb3cdbda0 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -33,6 +33,14 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
             langs
             defaultLangKey
           }
+          docs {
+            slug
+            title {
+              zh
+              en
+            }
+            order
+          }
         }
       }
     }
@@ -186,6 +194,7 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
       siteMetadata: {
         title,
         languages: { langs, defaultLangKey },
+        docs,
       },
     },
   } = data;
@@ -208,6 +217,7 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
         siteTitle={title}
         location={location}
         currentLangKey={currentLangKey}
+        docs={docs}
       />
       <main className={styles.main}>{children}</main>
       <Footer
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index fd2bdd533..95787ba3c 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -9,7 +9,6 @@ import packageJson from '../../package.json';
 import Layout from '../components/layout';
 import Article from '../components/article';
 import SEO from '../components/seo';
-import { docs } from '../../.antvisrc';
 import styles from './markdown.module.less';
 
 const renderMenuItems = (edges: any[]) =>
@@ -42,6 +41,10 @@ const getMenuItemlocaleKey = (slug: string = '') => {
   return menuItemlocaleKey;
 };
 
+const getDocument = (docs: any[], slug: string = '') => {
+  return docs.find(doc => doc.slug === slug);
+};
+
 export default function Template({
   data, // this prop will be injected by the GraphQL query below.
   path,
@@ -61,6 +64,7 @@ export default function Template({
   const {
     siteMetadata: {
       languages: { langs, defaultLangKey },
+      docs,
     },
   } = site;
   const currentLangKey = getCurrentLangKey(langs, defaultLangKey, path);
@@ -94,8 +98,10 @@ export default function Template({
               .sort((a: string, b: string) => {
                 const aKey = getMenuItemlocaleKey(a);
                 const bKey = getMenuItemlocaleKey(b);
-                if (docs[aKey] && docs[bKey]) {
-                  return docs[aKey].order - docs[bKey].order;
+                const aDoc = getDocument(docs, aKey);
+                const bDoc = getDocument(docs, bKey);
+                if (aDoc && bDoc) {
+                  return aDoc.order - bDoc.order;
                 }
                 return 0;
               })
@@ -108,12 +114,13 @@ export default function Template({
                   return renderMenuItems(groupedEdges[slug]);
                 } else {
                   const menuItemlocaleKey = getMenuItemlocaleKey(slug);
+                  const doc = getDocument(docs, menuItemlocaleKey);
                   return (
                     <Menu.SubMenu
                       key={slug}
                       title={
-                        docs[menuItemlocaleKey] && docs[menuItemlocaleKey].title
-                          ? docs[menuItemlocaleKey].title[currentLangKey]
+                        doc && doc.title
+                          ? doc.title[currentLangKey]
                           : menuItemlocaleKey
                       }
                     >
@@ -168,6 +175,14 @@ export const pageQuery = graphql`
           langs
           defaultLangKey
         }
+        docs {
+          slug
+          title {
+            zh
+            en
+          }
+          order
+        }
       }
     }
     markdownRemark(fields: { slug: { eq: $path } }) {

From b863b16b6474eeaa6d835dc4e4e5aa5c6bcd5243 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Oct 2019 15:50:54 +0800
Subject: [PATCH 64/75] fix test case

---
 src/components/header.tsx  | 8 ++++++--
 src/templates/document.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 9e75fdad3..fa3e4939d 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -25,14 +25,18 @@ interface HeaderProps {
 }
 
 const getDocument = (docs: any[], slug: string = '') => {
-  return docs.find(doc => doc.slug === slug);
+  return (
+    docs.find(doc => doc.slug === slug) || {
+      title: {},
+    }
+  );
 };
 
 const Header: React.FC<HeaderProps> = ({
   siteTitle = '',
   location = { pathname: '' },
   currentLangKey = '',
-  docs,
+  docs = [],
 }) => {
   const { t } = useTranslation();
   return (
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
index 95787ba3c..5c3cadeaf 100644
--- a/src/templates/document.tsx
+++ b/src/templates/document.tsx
@@ -42,7 +42,7 @@ const getMenuItemlocaleKey = (slug: string = '') => {
 };
 
 const getDocument = (docs: any[], slug: string = '') => {
-  return docs.find(doc => doc.slug === slug);
+  return docs.find(doc => doc.slug === slug) || {};
 };
 
 export default function Template({

From 416690c4b3c2c0fe70a5e20c8cf9d67dec4538e4 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 12:29:24 +0800
Subject: [PATCH 65/75] :zap: use @antv/gatsby-theme-antv !

---
 __mocks__/file-mock.js                    |   1 -
 __mocks__/gatsby.js                       |  14 --
 gatsby-browser.js                         |  12 --
 gatsby-config.js                          |  94 +--------
 gatsby-node.js                            |  83 --------
 gatsby-ssr.js                             |   7 -
 jest-preprocess.js                        |   4 -
 jest.config.js                            |  19 --
 jest.setup.js                             |   1 -
 loadershim.js                             |   3 -
 package.json                              |  72 ++-----
 site/externals.d.ts                       |   1 +
 {src => site}/images/gatsby-astronaut.png | Bin
 {src => site}/locale.json                 |   0
 {src => site}/pages/index.en.tsx          |   4 +-
 {src => site}/pages/index.zh.tsx          |   6 +-
 src/components/__tests__/header.test.js   |  13 --
 src/components/__tests__/layout.test.js   |  48 -----
 src/components/article.module.less        |   9 -
 src/components/article.tsx                |  11 -
 src/components/header.module.less         |  67 ------
 src/components/header.tsx                 | 123 -----------
 src/components/image.tsx                  |  37 ----
 src/components/layout.module.less         |  15 --
 src/components/layout.tsx                 | 244 ----------------------
 src/components/product.module.less        |  61 ------
 src/components/product.tsx                |  40 ----
 src/components/products.tsx               | 188 -----------------
 src/components/search.module.less         |   5 -
 src/components/search.tsx                 |   8 -
 src/components/seo.tsx                    |  82 --------
 src/externals.d.ts                        |   3 -
 src/images/favicon.png                    | Bin 14082 -> 0 bytes
 src/pages/404.tsx                         |  26 ---
 src/pages/index.tsx                       |  37 ----
 src/templates/document.tsx                | 225 --------------------
 src/templates/markdown.module.less        | 165 ---------------
 tsconfig.json                             |   2 +-
 38 files changed, 29 insertions(+), 1701 deletions(-)
 delete mode 100644 __mocks__/file-mock.js
 delete mode 100644 __mocks__/gatsby.js
 delete mode 100644 gatsby-browser.js
 delete mode 100644 gatsby-node.js
 delete mode 100644 gatsby-ssr.js
 delete mode 100644 jest-preprocess.js
 delete mode 100644 jest.config.js
 delete mode 100644 jest.setup.js
 delete mode 100644 loadershim.js
 create mode 100644 site/externals.d.ts
 rename {src => site}/images/gatsby-astronaut.png (100%)
 rename {src => site}/locale.json (100%)
 rename {src => site}/pages/index.en.tsx (71%)
 rename {src => site}/pages/index.zh.tsx (59%)
 delete mode 100644 src/components/__tests__/header.test.js
 delete mode 100644 src/components/__tests__/layout.test.js
 delete mode 100644 src/components/article.module.less
 delete mode 100644 src/components/article.tsx
 delete mode 100644 src/components/header.module.less
 delete mode 100644 src/components/header.tsx
 delete mode 100644 src/components/image.tsx
 delete mode 100644 src/components/layout.module.less
 delete mode 100644 src/components/layout.tsx
 delete mode 100644 src/components/product.module.less
 delete mode 100644 src/components/product.tsx
 delete mode 100644 src/components/products.tsx
 delete mode 100644 src/components/search.module.less
 delete mode 100644 src/components/search.tsx
 delete mode 100644 src/components/seo.tsx
 delete mode 100644 src/externals.d.ts
 delete mode 100644 src/images/favicon.png
 delete mode 100644 src/pages/404.tsx
 delete mode 100644 src/pages/index.tsx
 delete mode 100644 src/templates/document.tsx
 delete mode 100644 src/templates/markdown.module.less

diff --git a/__mocks__/file-mock.js b/__mocks__/file-mock.js
deleted file mode 100644
index 4c19aaf3a..000000000
--- a/__mocks__/file-mock.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = `test-file-stub`;
diff --git a/__mocks__/gatsby.js b/__mocks__/gatsby.js
deleted file mode 100644
index 4fd93e0aa..000000000
--- a/__mocks__/gatsby.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const React = require(`react`);
-const gatsby = jest.requireActual(`gatsby`);
-
-module.exports = {
-  ...gatsby,
-  graphql: jest.fn(),
-  Link: jest.fn().mockImplementation(({ to, ...rest }) =>
-    React.createElement(`a`, {
-      ...rest,
-      href: to,
-    }),
-  ),
-  useStaticQuery: jest.fn(),
-};
diff --git a/gatsby-browser.js b/gatsby-browser.js
deleted file mode 100644
index 3febca4fc..000000000
--- a/gatsby-browser.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
-
-// You can delete this file if you're not using it
-import 'normalize.css/normalize.css';
-import 'rc-footer/assets/index.less';
-import 'antd/dist/antd.css';
-import 'prism-themes/themes/prism-base16-ateliersulphurpool.light.css';
-import 'prismjs/plugins/command-line/prism-command-line.css';
diff --git a/gatsby-config.js b/gatsby-config.js
index 1b78a878c..24d37e0a4 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,4 +1,10 @@
 module.exports = {
+  plugins: [
+    {
+      resolve: `@antv/gatsby-theme-antv`,
+      options: {},
+    },
+  ],
   siteMetadata: {
     title: `AntV`,
     siteUrl: `https://antvis.github.io`,
@@ -15,6 +21,7 @@ module.exports = {
           en: 'Specification',
         },
         order: 0,
+        redirect: 'getting-started',
       },
       {
         slug: 'specification/category',
@@ -31,6 +38,7 @@ module.exports = {
           en: 'other',
         },
         order: 0,
+        redirect: 'getting-started',
       },
       {
         slug: 'other/category',
@@ -42,90 +50,4 @@ module.exports = {
       },
     ],
   },
-  plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `docs`,
-        path: `${__dirname}/docs`,
-      },
-    },
-    {
-      resolve: 'gatsby-plugin-i18n',
-      options: {
-        langKeyDefault: 'zh',
-        useLangKeyLayout: false,
-      },
-    },
-    {
-      resolve: `gatsby-transformer-remark`,
-      options: {
-        plugins: [
-          {
-            resolve: `gatsby-remark-prettier`,
-            options: {
-              // Look for local .prettierrc file.
-              // The same as `prettier.resolveConfig(process.cwd())`
-              usePrettierrc: true,
-              // Overwrite prettier options, check out https://prettier.io/docs/en/options.html
-              prettierOptions: {},
-            },
-          },
-          {
-            resolve: `gatsby-remark-prismjs`,
-            options: {
-              inlineCodeMarker: '±',
-            },
-          },
-          {
-            resolve: 'gatsby-remark-external-links',
-            options: {
-              target: '_self',
-              rel: 'nofollow',
-            },
-          },
-          `gatsby-remark-autolink-headers`,
-          `gatsby-remark-reading-time`,
-        ],
-      },
-    },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    `gatsby-plugin-offline`,
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
-      },
-    },
-    `gatsby-plugin-typescript`,
-    {
-      resolve: 'gatsby-plugin-less',
-      options: {
-        javascriptEnabled: true,
-      },
-    },
-    {
-      resolve: 'gatsby-plugin-antd',
-      options: {
-        style: true,
-      },
-    },
-    {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        trackingId: `UA-148148901-1`,
-      },
-    },
-    `gatsby-plugin-catch-links`,
-    `gatsby-plugin-nprogress`,
-    `gatsby-plugin-remove-trailing-slashes`,
-  ],
 };
diff --git a/gatsby-node.js b/gatsby-node.js
deleted file mode 100644
index 7ea47aece..000000000
--- a/gatsby-node.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Implement Gatsby's Node APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
-
-// You can delete this file if you're not using it
-const path = require(`path`);
-const { getSlugAndLang } = require('ptz-i18n');
-
-// Add custom url pathname for posts
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions;
-  if (node.internal.type === `File`) {
-    createNodeField({
-      node,
-    });
-  } else if (node.internal.type === `MarkdownRemark`) {
-    const { slug, langKey } = getSlugAndLang(
-      {
-        langKeyForNull: 'any',
-        langKeyDefault: 'none',
-        useLangKeyLayout: false,
-        pagesPaths: [__dirname],
-        prefixDefault: true,
-      },
-      node.fileAbsolutePath,
-    );
-    createNodeField({
-      node,
-      name: `slug`,
-      value: (langKey === 'none' ? `/zh${slug}` : slug).replace(/\/$/, ''),
-    });
-    createNodeField({
-      node,
-      name: `langKey`,
-      value: langKey,
-    });
-  }
-};
-
-exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions;
-  const result = await graphql(`
-    {
-      allMarkdownRemark(
-        sort: { order: ASC, fields: [frontmatter___order] }
-        limit: 1000
-      ) {
-        edges {
-          node {
-            fields {
-              slug
-              langKey
-            }
-          }
-        }
-      }
-    }
-  `);
-  // Handle errors
-  if (result.errors) {
-    reporter.panicOnBuild(`Error while running GraphQL query.`);
-    return;
-  }
-  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-    const { slug, langKey } = node.fields;
-    createPage({
-      path: slug, // required
-      component: path.resolve(`src/templates/document.tsx`),
-    });
-  });
-};
-
-exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
-  const config = getConfig();
-  if (stage.startsWith('develop') && config.resolve) {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      'react-dom': '@hot-loader/react-dom',
-    };
-  }
-};
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
deleted file mode 100644
index b17b8fc19..000000000
--- a/gatsby-ssr.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
-
-// You can delete this file if you're not using it
diff --git a/jest-preprocess.js b/jest-preprocess.js
deleted file mode 100644
index 732206994..000000000
--- a/jest-preprocess.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const babelOptions = {
-  presets: ['babel-preset-gatsby'],
-};
-module.exports = require('babel-jest').createTransformer(babelOptions);
diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index 297f153c0..000000000
--- a/jest.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-module.exports = {
-  transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.jsx?$': `<rootDir>/jest-preprocess.js`,
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  moduleNameMapper: {
-    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
-    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
-  },
-  testPathIgnorePatterns: [`node_modules`, `.cache`],
-  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
-  globals: {
-    __PATH_PREFIX__: ``,
-  },
-  testURL: `https://localhost`,
-  setupFilesAfterEnv: [`<rootDir>/jest.setup.js`],
-  setupFiles: [`<rootDir>/loadershim.js`],
-};
diff --git a/jest.setup.js b/jest.setup.js
deleted file mode 100644
index 6347c75af..000000000
--- a/jest.setup.js
+++ /dev/null
@@ -1 +0,0 @@
-require(`@testing-library/jest-dom/extend-expect`);
diff --git a/loadershim.js b/loadershim.js
deleted file mode 100644
index 530bd30b3..000000000
--- a/loadershim.js
+++ /dev/null
@@ -1,3 +0,0 @@
-global.___loader = {
-  enqueue: jest.fn(),
-};
diff --git a/package.json b/package.json
index 21505aff7..f92f253b1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "@antv/gatsby-theme",
+  "name": "antv.alipay.com",
+  "private": true,
   "description": "Ant Visualization solution home page",
   "version": "0.1.0",
   "author": "AntV Team <antv@antfin.com>",
@@ -17,72 +18,25 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@hot-loader/react-dom": "^16.9.0+4.12.11",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.1.4",
-    "@types/classnames": "^2.2.9",
-    "@types/jest": "^24.0.18",
-    "@types/lodash-es": "^4.17.3",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-helmet": "^5.0.10",
-    "antd": "^3.23.3",
-    "babel-jest": "^24.9.0",
-    "babel-preset-gatsby": "^0.2.13",
-    "classnames": "^2.2.6",
-    "gatsby": "^2.15.16",
-    "gatsby-image": "^2.2.19",
-    "gatsby-plugin-antd": "^2.0.2",
-    "gatsby-plugin-catch-links": "^2.1.12",
-    "gatsby-plugin-google-analytics": "^2.1.16",
-    "gatsby-plugin-i18n": "^1.0.1",
-    "gatsby-plugin-less": "^3.0.6",
-    "gatsby-plugin-manifest": "^2.2.16",
-    "gatsby-plugin-nprogress": "^2.1.9",
-    "gatsby-plugin-offline": "^3.0.7",
-    "gatsby-plugin-react-helmet": "^3.1.7",
-    "gatsby-plugin-remove-trailing-slashes": "^2.1.9",
-    "gatsby-plugin-sharp": "^2.2.22",
-    "gatsby-plugin-typescript": "^2.1.8",
-    "gatsby-remark-autolink-headers": "^2.1.13",
-    "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-prettier": "^1.0.0",
-    "gatsby-remark-prismjs": "^3.3.16",
-    "gatsby-remark-reading-time": "^1.0.1",
-    "gatsby-source-filesystem": "^2.1.22",
-    "gatsby-transformer-remark": "^2.6.24",
-    "gatsby-transformer-sharp": "^2.2.14",
-    "husky": "^3.0.5",
-    "i18next": "^17.0.16",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
-    "less": "^3.10.3",
-    "lodash-es": "^4.17.15",
-    "moment": "^2.24.0",
-    "normalize.css": "^8.0.1",
+    "@antv/gatsby-theme-antv": "^0.1.1",
+    "@types/react": "^16.9.5",
+    "@types/react-dom": "^16.9.1",
+    "antd": "^3.23.6",
+    "gatsby": "^2.15.36",
+    "husky": "^3.0.8",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.0",
-    "prism-themes": "^1.2.0",
-    "prismjs": "^1.17.1",
-    "ptz-i18n": "^1.0.0",
-    "rc-footer": "^0.5.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-github-corner": "^2.3.0",
-    "react-helmet": "^5.2.1",
-    "react-i18next": "^10.13.1",
-    "react-test-renderer": "^16.9.0",
-    "ts-jest": "^24.1.0",
-    "typescript": "^3.6.3"
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "typescript": "^3.6.4"
   },
   "license": "MIT",
   "scripts": {
+    "start": "npm run develop",
     "build": "gatsby build",
     "develop": "gatsby develop --open",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,less}\"",
-    "start": "npm run develop",
-    "serve": "gatsby serve",
-    "test": "jest"
+    "serve": "gatsby serve"
   },
   "husky": {
     "hooks": {
diff --git a/site/externals.d.ts b/site/externals.d.ts
new file mode 100644
index 000000000..1ea39606b
--- /dev/null
+++ b/site/externals.d.ts
@@ -0,0 +1 @@
+declare module '*.less';
diff --git a/src/images/gatsby-astronaut.png b/site/images/gatsby-astronaut.png
similarity index 100%
rename from src/images/gatsby-astronaut.png
rename to site/images/gatsby-astronaut.png
diff --git a/src/locale.json b/site/locale.json
similarity index 100%
rename from src/locale.json
rename to site/locale.json
diff --git a/src/pages/index.en.tsx b/site/pages/index.en.tsx
similarity index 71%
rename from src/pages/index.en.tsx
rename to site/pages/index.en.tsx
index 60e954dc0..149a43134 100644
--- a/src/pages/index.en.tsx
+++ b/site/pages/index.en.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Skeleton } from 'antd';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Layout from '@antv/gatsby-theme-antv/site/components/layout';
+import SEO from '@antv/gatsby-theme-antv/site/components/seo';
 
 const IndexPage = () => (
   <Layout>
diff --git a/src/pages/index.zh.tsx b/site/pages/index.zh.tsx
similarity index 59%
rename from src/pages/index.zh.tsx
rename to site/pages/index.zh.tsx
index 2fa526273..375126780 100644
--- a/src/pages/index.zh.tsx
+++ b/site/pages/index.zh.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import { Skeleton } from 'antd';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Layout from '@antv/gatsby-theme-antv/site/components/layout';
+import SEO from '@antv/gatsby-theme-antv/site/components/seo';
+import astronaut from '../images/gatsby-astronaut.png';
 
 const IndexPage = () => (
   <Layout>
     <SEO title="蚂蚁数据可视化" lang="zh" />
     <div style={{ margin: '0 auto', padding: '0 80px' }}>
       中文首页
+      <img src={astronaut} alt="astronaut" width="200" />
       <Skeleton />
       <Skeleton />
       <Skeleton />
diff --git a/src/components/__tests__/header.test.js b/src/components/__tests__/header.test.js
deleted file mode 100644
index f63dca539..000000000
--- a/src/components/__tests__/header.test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Header from '../header';
-
-describe(`Header`, () => {
-  it(`renders menu`, () => {
-    const siteTitle = `Hello World`;
-    const { getByText } = render(<Header siteTitle={siteTitle} />);
-    expect(getByText('所有产品')).toBeInTheDocument();
-    expect(getByText('生态')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/__tests__/layout.test.js b/src/components/__tests__/layout.test.js
deleted file mode 100644
index 76256b385..000000000
--- a/src/components/__tests__/layout.test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { useStaticQuery } from 'gatsby'; // mocked
-
-import Layout from '../layout';
-
-beforeEach(() => {
-  useStaticQuery.mockImplementationOnce(() => ({
-    site: {
-      siteMetadata: {
-        title: `GatsbyJS`,
-        languages: {
-          langs: ['en', 'zh'],
-          defaultLangKey: 'zh',
-        },
-      },
-    },
-  }));
-});
-
-describe(`Layout`, () => {
-  it(`renders a header`, () => {
-    const { container } = render(
-      <Layout>
-        <main>
-          <h1>hello</h1>
-        </main>
-      </Layout>,
-    );
-
-    expect(container.querySelector(`header`)).toBeInTheDocument();
-  });
-
-  it(`renders children`, () => {
-    const text = `__Hello world__`;
-    const { getByText } = render(
-      <Layout>
-        <main>
-          <h1>{text}</h1>
-        </main>
-      </Layout>,
-    );
-
-    const child = getByText(text);
-
-    expect(child).toBeInTheDocument();
-  });
-});
diff --git a/src/components/article.module.less b/src/components/article.module.less
deleted file mode 100644
index 0b71dc76c..000000000
--- a/src/components/article.module.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.article {
-  padding: 0 16px 0 48px;
-  min-height: 600px;
-
-  h2 {
-    font-size: 36px;
-    margin-top: 0;
-  }
-}
diff --git a/src/components/article.tsx b/src/components/article.tsx
deleted file mode 100644
index 80d72cdbb..000000000
--- a/src/components/article.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Layout } from 'antd';
-import styles from './article.module.less';
-
-const Article: React.FC<any> = props => (
-  <Layout.Content className={styles.article}>
-    <article {...props} />
-  </Layout.Content>
-);
-
-export default Article;
diff --git a/src/components/header.module.less b/src/components/header.module.less
deleted file mode 100644
index 69cedb4db..000000000
--- a/src/components/header.module.less
+++ /dev/null
@@ -1,67 +0,0 @@
-.header {
-  height: 64px;
-  line-height: 64px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(229, 229, 229, 0.5);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 60px;
-  position: relative;
-  z-index: 1;
-
-  .left {
-    display: flex;
-    align-items: center;
-
-    h1 {
-      margin: 0;
-
-      img {
-        display: block;
-      }
-    }
-
-    .divider {
-      width: 1px;
-      height: 24px;
-      background-color: #ccc;
-      display: inline-block;
-      margin: 0 24px;
-    }
-  }
-
-  .nav {
-    display: flex;
-    align-items: center;
-
-    .menu {
-      font-weight: 500;
-      color: rgba(0, 0, 0, 0.65);
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      li {
-        display: inline-block;
-        margin-right: 32px;
-        line-height: 60px;
-
-        a {
-          color: rgba(0, 0, 0, 0.65);
-          transition: all 0.3s;
-          display: block;
-          border-top: 2px solid transparent;
-
-          &:hover {
-            color: #1890ff;
-          }
-        }
-      }
-
-      .active {
-        border-top: 2px solid #1890ff;
-      }
-    }
-  }
-}
diff --git a/src/components/header.tsx b/src/components/header.tsx
deleted file mode 100644
index fa3e4939d..000000000
--- a/src/components/header.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Link, navigate } from 'gatsby';
-import React from 'react';
-import GithubCorner from 'react-github-corner';
-import { useTranslation } from 'react-i18next';
-import { Popover, Select } from 'antd';
-import classNames from 'classnames';
-import Search from './search';
-import Products from './products';
-import styles from './header.module.less';
-
-const { Option } = Select;
-
-interface HeaderProps {
-  siteTitle?: string;
-  location?: Location;
-  currentLangKey?: string;
-  docs: Array<{
-    slug: string;
-    order: number;
-    title: {
-      zh: string;
-      en: string;
-    };
-  }>;
-}
-
-const getDocument = (docs: any[], slug: string = '') => {
-  return (
-    docs.find(doc => doc.slug === slug) || {
-      title: {},
-    }
-  );
-};
-
-const Header: React.FC<HeaderProps> = ({
-  siteTitle = '',
-  location = { pathname: '' },
-  currentLangKey = '',
-  docs = [],
-}) => {
-  const { t } = useTranslation();
-  return (
-    <header className={styles.header}>
-      <div className={styles.left}>
-        <h1>
-          <Link to="/">
-            <img
-              src="https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg"
-              alt={siteTitle}
-            />
-          </Link>
-        </h1>
-        <span className={styles.divider} />
-        <Search />
-      </div>
-      <nav className={styles.nav}>
-        <ul className={styles.menu}>
-          <li>
-            <Link
-              to={`/${currentLangKey}/docs/specification/getting-started`}
-              className={classNames({
-                [styles.active]: location.pathname.startsWith(
-                  `/${currentLangKey}/docs/specification`,
-                ),
-              })}
-            >
-              {getDocument(docs, 'specification').title[currentLangKey]}
-            </Link>
-          </li>
-          <li>
-            <Link
-              to={`/${currentLangKey}/docs/other/getting-started`}
-              className={classNames({
-                [styles.active]: location.pathname.startsWith(
-                  `/${currentLangKey}/docs/other`,
-                ),
-              })}
-            >
-              {getDocument(docs, 'other').title[currentLangKey]}
-            </Link>
-          </li>
-          <li>
-            <Popover
-              title={null}
-              content={<Products />}
-              placement="bottomRight"
-              arrowPointAtCenter
-            >
-              <a>{t('所有产品')}</a>
-            </Popover>
-          </li>
-          <li>
-            <Popover
-              title={null}
-              content={<Products />}
-              placement="bottomRight"
-              arrowPointAtCenter
-            >
-              <a>{t('生态')}</a>
-            </Popover>
-          </li>
-        </ul>
-        <Select
-          size="small"
-          style={{ width: 90, fontSize: 12 }}
-          dropdownMatchSelectWidth={false}
-          value={currentLangKey}
-          onChange={(value: string) => {
-            navigate(
-              location.pathname.replace(`/${currentLangKey}/`, `/${value}/`),
-            );
-          }}
-        >
-          <Option value="en">🇺🇸 English</Option>
-          <Option value="zh">🇨🇳 中文</Option>
-        </Select>
-        <GithubCorner href="https://github.com/antvis" size={64} />
-      </nav>
-    </header>
-  );
-};
-
-export default Header;
diff --git a/src/components/image.tsx b/src/components/image.tsx
deleted file mode 100644
index a10626dbb..000000000
--- a/src/components/image.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
-import Img from 'gatsby-image';
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `);
-
-  return (
-    <Img
-      alt="placeholder"
-      fluid={data.placeholderImage.childImageSharp.fluid}
-    />
-  );
-};
-
-export default Image;
diff --git a/src/components/layout.module.less b/src/components/layout.module.less
deleted file mode 100644
index ee126ce56..000000000
--- a/src/components/layout.module.less
+++ /dev/null
@@ -1,15 +0,0 @@
-:global {
-  .gatsby-highlight-code-line {
-    background-color: #feb;
-    display: block;
-    margin-right: -1em;
-    margin-left: -1em;
-    padding-right: 1em;
-    padding-left: 0.75em;
-    border-left: 0.25em solid #f99;
-  }
-}
-
-.main {
-  margin: 24px 0;
-}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
deleted file mode 100644
index eb3cdbda0..000000000
--- a/src/components/layout.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { useEffect } from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
-import { Location as RouterLocation } from '@reach/router';
-import Footer from 'rc-footer';
-import { getCurrentLangKey } from 'ptz-i18n';
-import i18n from 'i18next';
-import { initReactI18next, useTranslation } from 'react-i18next';
-import Header from './header';
-import locale from '../locale.json';
-import styles from './layout.module.less';
-
-i18n
-  .use(initReactI18next) // passes i18n down to react-i18next
-  .init({
-    resources: locale,
-    lng: 'zh',
-    fallbackLng: 'zh',
-  });
-
-interface LayoutProps {
-  children?: React.ReactNode;
-  location?: Location;
-}
-
-const Layout: React.FC<LayoutProps> = ({ children, location }) => {
-  const { i18n } = useTranslation();
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-          languages {
-            langs
-            defaultLangKey
-          }
-          docs {
-            slug
-            title {
-              zh
-              en
-            }
-            order
-          }
-        }
-      }
-    }
-  `);
-
-  const footerColumns = [
-    {
-      title: 'G2',
-      items: [
-        {
-          title: '关于 G2',
-          url: '',
-        },
-        {
-          title: '图表示例',
-          url: '',
-        },
-        {
-          title: 'API 文档',
-          url: '',
-        },
-        {
-          title: '使用教程',
-          url: '',
-        },
-      ],
-    },
-    {
-      title: 'G6',
-      items: [
-        {
-          title: '关于 G2',
-          url: '',
-        },
-        {
-          title: '图表示例',
-          url: '',
-        },
-        {
-          title: 'API 文档',
-          url: '',
-        },
-        {
-          title: '使用教程',
-          url: '',
-        },
-      ],
-    },
-    {
-      title: 'F2',
-      items: [
-        {
-          title: '关于 G2',
-          url: '',
-        },
-        {
-          title: '图表示例',
-          url: '',
-        },
-        {
-          title: 'API 文档',
-          url: '',
-        },
-        {
-          title: '使用教程',
-          url: '',
-        },
-      ],
-    },
-    {
-      title: 'L7',
-      items: [
-        {
-          title: '关于 G2',
-          url: '',
-        },
-        {
-          title: '图表示例',
-          url: '',
-        },
-        {
-          title: 'API 文档',
-          url: '',
-        },
-        {
-          title: '使用教程',
-          url: '',
-        },
-      ],
-    },
-    {
-      title: '墨者学院',
-      items: [
-        {
-          title: '关于 G2',
-          url: '',
-        },
-        {
-          title: '图表示例',
-          url: '',
-        },
-        {
-          title: 'API 文档',
-          url: '',
-        },
-        {
-          title: '使用教程',
-          url: '',
-        },
-      ],
-    },
-    {
-      icon: (
-        <img
-          src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"
-          alt="more products"
-        />
-      ),
-      title: '更多产品',
-      items: [
-        {
-          icon: (
-            <img
-              src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-              alt="yuque"
-            />
-          ),
-          title: '语雀',
-          url: 'https://yuque.com',
-          description: '知识创作与分享工具',
-          openExternal: true,
-        },
-        {
-          icon: (
-            <img
-              src="https://gw.alipayobjects.com/zos/rmsportal/uHocHZfNWZOdsRUonZNr.png"
-              alt="yuque"
-            />
-          ),
-          title: '云凤蝶',
-          url: 'https://yunfengdie.com',
-          description: '中台建站平台',
-          openExternal: true,
-        },
-      ],
-    },
-  ];
-
-  const {
-    site: {
-      siteMetadata: {
-        title,
-        languages: { langs, defaultLangKey },
-        docs,
-      },
-    },
-  } = data;
-
-  const currentLangKey = getCurrentLangKey(
-    langs,
-    defaultLangKey,
-    location!.pathname,
-  );
-
-  useEffect(() => {
-    if (i18n.language !== currentLangKey) {
-      i18n.changeLanguage(currentLangKey);
-    }
-  }, [currentLangKey]);
-
-  return (
-    <>
-      <Header
-        siteTitle={title}
-        location={location}
-        currentLangKey={currentLangKey}
-        docs={docs}
-      />
-      <main className={styles.main}>{children}</main>
-      <Footer
-        columns={footerColumns}
-        bottom={
-          <div>
-            © {new Date().getFullYear()}, Built with
-            {` `}
-            <a href="https://xtech.antfin.com/">AFX</a>
-          </div>
-        }
-      />
-    </>
-  );
-};
-
-// here app catches the suspense from page in case translations are not yet loaded
-export default function App(props: any) {
-  return (
-    <RouterLocation>
-      {({ location }) => <Layout location={location} {...props} />}
-    </RouterLocation>
-  );
-}
diff --git a/src/components/product.module.less b/src/components/product.module.less
deleted file mode 100644
index c1a24a768..000000000
--- a/src/components/product.module.less
+++ /dev/null
@@ -1,61 +0,0 @@
-.products {
-  width: 600px;
-  padding: 0 12px;
-  max-width: calc(100vw - 30px);
-
-  h3 {
-    font-size: 16px;
-    margin: 8px 0 24px 0;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .product {
-    overflow: hidden;
-    width: calc(50% - 16px);
-    display: inline-block;
-    margin-bottom: 16px;
-
-    img {
-      width: 28px;
-      height: 28px;
-      border-radius: 100%;
-      margin-right: 8px;
-      float: left;
-      display: block;
-    }
-
-    .productContent {
-      overflow: hidden;
-
-      h4 {
-        margin-bottom: 12px;
-        color: rgba(0, 0, 0, 0.85);
-        a {
-          color: rgba(0, 0, 0, 0.85);
-        }
-      }
-
-      .productDescription {
-        margin-bottom: 8px;
-        color: rgba(0, 0, 0, 0.45);
-      }
-
-      .productLinks {
-        > a {
-          margin-right: 8px;
-          color: rgba(0, 0, 0, 0.65);
-          transition: all 0.3s;
-
-          &:hover {
-            color: rgba(0, 0, 0, 0.85);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/product.tsx b/src/components/product.tsx
deleted file mode 100644
index 92c79c6b5..000000000
--- a/src/components/product.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import styles from './product.module.less';
-
-interface ProductProps {
-  name?: string;
-  icon?: string;
-  description?: string;
-  url?: string;
-  links?: Array<{
-    name: string;
-    link: string;
-  }>;
-}
-
-const Product: React.FC<ProductProps> = ({
-  name,
-  icon,
-  url,
-  description,
-  links = [],
-}) => (
-  <li className={styles.product}>
-    <img alt={name} src={icon} />
-    <div className={styles.productContent}>
-      <a href={url} target="_blank">
-        <h4>{name}</h4>
-      </a>
-      <div className={styles.productDescription}>{description}</div>
-      <div className={styles.productLinks}>
-        {links.map(({ link, name }, i) => (
-          <a target="_blank" href={link} key={i}>
-            {name}
-          </a>
-        ))}
-      </div>
-    </div>
-  </li>
-);
-
-export default Product;
diff --git a/src/components/products.tsx b/src/components/products.tsx
deleted file mode 100644
index 1eb86d319..000000000
--- a/src/components/products.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import React from 'react';
-import Product from './product';
-import styles from './product.module.less';
-
-const Products: React.FC<{}> = () => (
-  <div className={styles.products}>
-    <h3>基础产品</h3>
-    <ul>
-      <Product
-        name="G2"
-        url="/g2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-    </ul>
-    <h3>扩展产品</h3>
-    <ul>
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-      <Product
-        name="G2"
-        description="一套基于可视化编码的图形语法"
-        icon="https://gw.alipayobjects.com/zos/antfincdn/mpz%24sFOwuD/1852987f-0412-44e5-9d0d-75b06f392778.png"
-        links={[
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-          {
-            name: '关于',
-            link: '',
-          },
-        ]}
-      />
-    </ul>
-  </div>
-);
-
-export default Products;
diff --git a/src/components/search.module.less b/src/components/search.module.less
deleted file mode 100644
index 7d48b6536..000000000
--- a/src/components/search.module.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.input {
-  border: none;
-  height: 32px;
-  outline: none;
-}
diff --git a/src/components/search.tsx b/src/components/search.tsx
deleted file mode 100644
index e362b51ec..000000000
--- a/src/components/search.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import styles from './search.module.less';
-
-export default () => {
-  const { t } = useTranslation();
-  return <input className={styles.input} placeholder={t('搜索…')} />;
-};
diff --git a/src/components/seo.tsx b/src/components/seo.tsx
deleted file mode 100644
index 8609bc658..000000000
--- a/src/components/seo.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { useStaticQuery, graphql } from 'gatsby';
-
-interface SEOProps {
-  description?: string;
-  lang?: string;
-  meta?: any[];
-  title?: string;
-}
-
-const SEO: React.FC<SEOProps> = ({ description, lang, meta = [], title }) => {
-  const { site } = useStaticQuery(
-    graphql`
-      query {
-        site {
-          siteMetadata {
-            title
-            description
-          }
-        }
-      }
-    `,
-  );
-
-  const metaDescription = description || site.siteMetadata.description;
-
-  return (
-    <Helmet
-      htmlAttributes={{
-        lang,
-      }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:title`,
-          content: title,
-        },
-        {
-          property: `og:description`,
-          content: metaDescription,
-        },
-        {
-          property: `og:type`,
-          content: `website`,
-        },
-        {
-          name: `twitter:card`,
-          content: `summary`,
-        },
-        {
-          name: `twitter:title`,
-          content: title,
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription,
-        },
-      ].concat(meta)}
-    />
-  );
-};
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-};
-
-export default SEO;
diff --git a/src/externals.d.ts b/src/externals.d.ts
deleted file mode 100644
index a286cdfcf..000000000
--- a/src/externals.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module '*.less';
-
-declare module 'ptz-i18n';
diff --git a/src/images/favicon.png b/src/images/favicon.png
deleted file mode 100644
index 0ca1499e9cdaaee366a28a344611f8f37a0122e2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 14082
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
NoQ(3PDk&4t{{eraOWFVc

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
deleted file mode 100644
index 669050ae2..000000000
--- a/src/pages/404.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Result, Button, Icon } from 'antd';
-import { Link } from 'gatsby';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-
-const NotFoundPage = () => (
-  <Layout>
-    <SEO title="404: Not found" />
-    <Result
-      status="404"
-      title="404"
-      subTitle="Sorry, the page you visited does not exist."
-      extra={
-        <Link to="/">
-          <Button type="primary">
-            <Icon type="home" />
-            Back Home
-          </Button>
-        </Link>
-      }
-    />
-  </Layout>
-);
-
-export default NotFoundPage;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
deleted file mode 100644
index 5b8d2ae63..000000000
--- a/src/pages/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { graphql, navigate, withPrefix } from 'gatsby';
-import { getUserLangKey } from 'ptz-i18n';
-
-class RedirectIndex extends React.PureComponent {
-  constructor(args: any) {
-    super(args);
-
-    // Skip build, Browsers only
-    if (typeof window !== 'undefined') {
-      const { langs, defaultLangKey } = args.data.site.siteMetadata.languages;
-      const langKey = getUserLangKey(langs, defaultLangKey);
-      const homeUrl = withPrefix(`/${langKey}/`);
-      // https://github.com/angeloocana/gatsby-plugin-i18n/issues/52#issuecomment-451590961
-      navigate(homeUrl);
-    }
-  }
-
-  render() {
-    return <div />;
-  }
-}
-
-export default RedirectIndex;
-
-export const pageQuery = graphql`
-  query IndexQuery {
-    site {
-      siteMetadata {
-        languages {
-          defaultLangKey
-          langs
-        }
-      }
-    }
-  }
-`;
diff --git a/src/templates/document.tsx b/src/templates/document.tsx
deleted file mode 100644
index 5c3cadeaf..000000000
--- a/src/templates/document.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { graphql, Link } from 'gatsby';
-import { Layout as AntLayout, Menu, Icon, Tooltip, Affix, Tag } from 'antd';
-import { groupBy } from 'lodash-es';
-import moment from 'moment';
-import { useTranslation } from 'react-i18next';
-import { getCurrentLangKey } from 'ptz-i18n';
-import packageJson from '../../package.json';
-import Layout from '../components/layout';
-import Article from '../components/article';
-import SEO from '../components/seo';
-import styles from './markdown.module.less';
-
-const renderMenuItems = (edges: any[]) =>
-  edges.map((edge: any) => {
-    const {
-      node: {
-        frontmatter: { title },
-        fields: { slug },
-      },
-    } = edge;
-    return (
-      <Menu.Item key={slug}>
-        <Link to={slug}>{title}</Link>
-      </Menu.Item>
-    );
-  });
-
-const shouldBeShown = (slug: string, path: string) => {
-  const slugPieces = slug.split('/').slice(slug.split('/').indexOf('docs') + 1);
-  const pathPieces = path.split('/').slice(slug.split('/').indexOf('docs') + 1);
-  return slugPieces[0] === pathPieces[0];
-};
-
-const getMenuItemlocaleKey = (slug: string = '') => {
-  const slugPieces = slug.split('/');
-  const menuItemlocaleKey = slugPieces
-    .slice(slugPieces.indexOf('docs') + 1)
-    .filter(key => key)
-    .join('/');
-  return menuItemlocaleKey;
-};
-
-const getDocument = (docs: any[], slug: string = '') => {
-  return docs.find(doc => doc.slug === slug) || {};
-};
-
-export default function Template({
-  data, // this prop will be injected by the GraphQL query below.
-  path,
-}: {
-  data: any;
-  path: string;
-}) {
-  const { markdownRemark, allMarkdownRemark, site } = data; // data.markdownRemark holds our post data
-  const {
-    frontmatter,
-    html,
-    tableOfContents,
-    fields: { slug, readingTime },
-    parent: { relativePath },
-  } = markdownRemark;
-  const { edges = [] } = allMarkdownRemark;
-  const {
-    siteMetadata: {
-      languages: { langs, defaultLangKey },
-      docs,
-    },
-  } = site;
-  const currentLangKey = getCurrentLangKey(langs, defaultLangKey, path);
-  const groupedEdges = groupBy(edges, ({ node: { fields: { slug } } }: any) =>
-    slug
-      .split('/')
-      .slice(0, -1)
-      .join('/'),
-  );
-  const [openKeys, setOpenKeys] = useState<string[]>(Object.keys(groupedEdges));
-  const { i18n } = useTranslation();
-  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
-  useEffect(() => {
-    setCurrentLanguage(i18n.language);
-  }, [i18n.language]);
-
-  return (
-    <Layout>
-      <SEO title={frontmatter.title} lang={currentLangKey} />
-      <AntLayout style={{ background: '#fff' }}>
-        <AntLayout.Sider width={280} theme="light">
-          <Menu
-            mode="inline"
-            selectedKeys={[slug]}
-            style={{ height: '100%' }}
-            openKeys={openKeys}
-            onOpenChange={openKeys => setOpenKeys(openKeys)}
-          >
-            {Object.keys(groupedEdges)
-              .filter(key => key.startsWith(`/${currentLangKey}/`))
-              .sort((a: string, b: string) => {
-                const aKey = getMenuItemlocaleKey(a);
-                const bKey = getMenuItemlocaleKey(b);
-                const aDoc = getDocument(docs, aKey);
-                const bDoc = getDocument(docs, bKey);
-                if (aDoc && bDoc) {
-                  return aDoc.order - bDoc.order;
-                }
-                return 0;
-              })
-              .map(slug => {
-                if (!shouldBeShown(slug, path)) {
-                  return null;
-                }
-                const slugPieces = slug.split('/');
-                if (slugPieces.length <= 4) {
-                  return renderMenuItems(groupedEdges[slug]);
-                } else {
-                  const menuItemlocaleKey = getMenuItemlocaleKey(slug);
-                  const doc = getDocument(docs, menuItemlocaleKey);
-                  return (
-                    <Menu.SubMenu
-                      key={slug}
-                      title={
-                        doc && doc.title
-                          ? doc.title[currentLangKey]
-                          : menuItemlocaleKey
-                      }
-                    >
-                      {renderMenuItems(groupedEdges[slug])}
-                    </Menu.SubMenu>
-                  );
-                }
-              })}
-          </Menu>
-        </AntLayout.Sider>
-        <Article className={styles.markdown}>
-          <Affix>
-            <div
-              className={styles.toc}
-              dangerouslySetInnerHTML={{ __html: tableOfContents }}
-            />
-          </Affix>
-          <div className={styles.main}>
-            <h1>
-              {frontmatter.title}
-              <Tooltip title="在 GitHub 上编辑">
-                <a
-                  href={`${packageJson.repository.url}/edit/master/${relativePath}`}
-                  target="_blank"
-                  className={styles.editOnGtiHubButton}
-                >
-                  <Icon type="edit" />
-                </a>
-              </Tooltip>
-            </h1>
-            <div>
-              <Tag>
-                {currentLanguage === 'zh'
-                  ? moment(readingTime.time).format('阅读时间约 M 分钟')
-                  : readingTime.text}
-              </Tag>
-            </div>
-            <div dangerouslySetInnerHTML={{ __html: html }} />
-          </div>
-        </Article>
-      </AntLayout>
-    </Layout>
-  );
-}
-
-export const pageQuery = graphql`
-  query($path: String!) {
-    site {
-      siteMetadata {
-        title
-        languages {
-          langs
-          defaultLangKey
-        }
-        docs {
-          slug
-          title {
-            zh
-            en
-          }
-          order
-        }
-      }
-    }
-    markdownRemark(fields: { slug: { eq: $path } }) {
-      html
-      tableOfContents
-      fields {
-        slug
-        langKey
-        readingTime {
-          text
-          time
-        }
-      }
-      frontmatter {
-        title
-      }
-      parent {
-        ... on File {
-          relativePath
-        }
-      }
-    }
-    allMarkdownRemark(
-      sort: { order: ASC, fields: [frontmatter___order] }
-      limit: 1000
-    ) {
-      edges {
-        node {
-          fields {
-            slug
-            langKey
-          }
-          frontmatter {
-            title
-          }
-        }
-      }
-    }
-  }
-`;
diff --git a/src/templates/markdown.module.less b/src/templates/markdown.module.less
deleted file mode 100644
index b4393a8da..000000000
--- a/src/templates/markdown.module.less
+++ /dev/null
@@ -1,165 +0,0 @@
-@import '~antd/es/style/themes/default.less';
-
-.markdown {
-  font-size: 14px;
-  line-height: 2;
-  color: #222;
-
-  > img {
-    max-width: ~'calc(100% - 32px)';
-    margin: 34px 0;
-  }
-
-  h1 {
-    margin-top: 8px;
-    margin-bottom: 20px;
-    font-weight: 500;
-    font-size: 30px;
-    font-family: Avenir, @font-family, sans-serif;
-    line-height: 38px;
-  }
-
-  h2 {
-    font-size: 24px;
-    line-height: 32px;
-  }
-
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    clear: both;
-    margin: 1.6em 0 0.6em;
-    font-weight: 500;
-    font-family: Avenir, @font-family, sans-serif;
-  }
-
-  h3 {
-    font-size: 18px;
-  }
-  h4 {
-    font-size: 16px;
-  }
-  h5 {
-    font-size: 14px;
-  }
-  h6 {
-    font-size: 12px;
-  }
-
-  hr {
-    clear: both;
-    height: 1px;
-    margin: 56px 0;
-    background: @border-color-split;
-    border: 0;
-  }
-
-  p,
-  pre {
-    margin: 1em 0;
-  }
-
-  ul,
-  ol {
-    margin: 0;
-    padding: 0;
-  }
-
-  ul > li {
-    margin-left: 20px;
-    padding-left: 4px;
-    list-style-type: circle;
-    &:empty {
-      display: none;
-    }
-  }
-
-  ol > li {
-    margin-left: 20px;
-    padding-left: 4px;
-    list-style-type: decimal;
-  }
-
-  ul > li > p,
-  ol > li > p {
-    margin: 0.2em 0;
-  }
-
-  strong,
-  b {
-    font-weight: 500;
-  }
-
-  > table {
-    width: 100%;
-    margin: 8px 0 16px;
-    empty-cells: show;
-    border: 1px solid @border-color-split;
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-
-  > table th {
-    color: #5c6b77;
-    font-weight: 500;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, 0.02);
-  }
-
-  > table th,
-  > table td {
-    padding: 16px 24px;
-    text-align: left;
-    border: 1px solid @border-color-split;
-  }
-
-  blockquote {
-    margin: 1em 0;
-    padding-left: 0.8em;
-    color: @text-color-secondary;
-    font-size: 90%;
-    border-left: 4px solid @border-color-split;
-  }
-
-  blockquote p {
-    margin: 0;
-  }
-
-  > br,
-  > p > br {
-    clear: both;
-  }
-}
-
-.editOnGtiHubButton {
-  margin-left: 0.5em;
-  font-size: 16px;
-  color: #999;
-  vertical-align: middle;
-  position: relative;
-  top: -2px;
-}
-
-.main {
-  width: calc(100% - 160px);
-  padding-right: 24px;
-  padding-bottom: 60px;
-}
-
-.toc {
-  width: 160px;
-  border-left: 2px solid #eee;
-  float: right;
-  font-size: 13px;
-
-  ul > li {
-    list-style: none;
-    padding: 0;
-    margin-left: 16px;
-    a {
-      color: rgba(0, 0, 0, 0.65);
-    }
-  }
-}
diff --git a/tsconfig.json b/tsconfig.json
index acdefd4a8..a595aa4e0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["./src/**/*"],
+  "include": ["site"],
   "compilerOptions": {
     "target": "esnext",
     "module": "commonjs",

From b6af47039b4b76aa4a76cda131b7e9d2c3bd7107 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 20:23:38 +0800
Subject: [PATCH 66/75] upgrade theme to 0.2.0

---
 gatsby-browser.js       |  4 ++++
 package.json            |  4 +++-
 site/externals.d.ts     |  1 +
 site/locale.json        |  4 +---
 site/pages/index.en.tsx | 20 ++------------------
 site/pages/index.zh.tsx | 31 +++++++++++++++++--------------
 6 files changed, 28 insertions(+), 36 deletions(-)
 create mode 100644 gatsby-browser.js

diff --git a/gatsby-browser.js b/gatsby-browser.js
new file mode 100644
index 000000000..fbf4f2179
--- /dev/null
+++ b/gatsby-browser.js
@@ -0,0 +1,4 @@
+import i18n from 'i18next';
+import locale from './site/locale.json';
+
+i18n.addResources('en', 'translation', locale.en.translation);
diff --git a/package.json b/package.json
index f92f253b1..7d28d1713 100644
--- a/package.json
+++ b/package.json
@@ -18,16 +18,18 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@antv/gatsby-theme-antv": "^0.1.1",
+    "@antv/gatsby-theme-antv": "^0.2.0",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",
     "gatsby": "^2.15.36",
     "husky": "^3.0.8",
+    "i18next": "^17.2.0",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
+    "react-i18next": "^10.13.1",
     "typescript": "^3.6.4"
   },
   "license": "MIT",
diff --git a/site/externals.d.ts b/site/externals.d.ts
index 1ea39606b..75da982de 100644
--- a/site/externals.d.ts
+++ b/site/externals.d.ts
@@ -1 +1,2 @@
 declare module '*.less';
+declare module '*.png';
diff --git a/site/locale.json b/site/locale.json
index 821a1b707..89ad092bc 100644
--- a/site/locale.json
+++ b/site/locale.json
@@ -1,9 +1,7 @@
 {
   "en": {
     "translation": {
-      "所有产品": "All products",
-      "生态": "Ecosystem",
-      "搜索…": "Search..."
+      "首页": "Home Page"
     }
   }
 }
diff --git a/site/pages/index.en.tsx b/site/pages/index.en.tsx
index 149a43134..4f2095ca1 100644
--- a/site/pages/index.en.tsx
+++ b/site/pages/index.en.tsx
@@ -1,19 +1,3 @@
-import React from 'react';
-import { Skeleton } from 'antd';
-import Layout from '@antv/gatsby-theme-antv/site/components/layout';
-import SEO from '@antv/gatsby-theme-antv/site/components/seo';
+import Index from './index.zh';
 
-const IndexPage = () => (
-  <Layout>
-    <SEO title="Home" lang="en" />
-    <div style={{ margin: '0 auto', padding: '0 80px' }}>
-      Home Page
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-    </div>
-  </Layout>
-);
-
-export default IndexPage;
+export default Index;
diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx
index 375126780..4fd640bfb 100644
--- a/site/pages/index.zh.tsx
+++ b/site/pages/index.zh.tsx
@@ -1,21 +1,24 @@
 import React from 'react';
 import { Skeleton } from 'antd';
-import Layout from '@antv/gatsby-theme-antv/site/components/layout';
+import { useTranslation } from 'react-i18next';
 import SEO from '@antv/gatsby-theme-antv/site/components/seo';
 import astronaut from '../images/gatsby-astronaut.png';
 
-const IndexPage = () => (
-  <Layout>
-    <SEO title="蚂蚁数据可视化" lang="zh" />
-    <div style={{ margin: '0 auto', padding: '0 80px' }}>
-      中文首页
-      <img src={astronaut} alt="astronaut" width="200" />
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-    </div>
-  </Layout>
-);
+const IndexPage = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <SEO title="蚂蚁数据可视化" lang="zh" />
+      <div style={{ margin: '0 auto', padding: '0 80px' }}>
+        {t('首页')}
+        <img src={astronaut} alt="astronaut" height="200" />
+        <Skeleton />
+        <Skeleton />
+        <Skeleton />
+        <Skeleton />
+      </div>
+    </>
+  );
+};
 
 export default IndexPage;

From f8cc608f3089dcbc6ef03b0dfaa964ba88291059 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 20:39:13 +0800
Subject: [PATCH 67/75] use build in ci

---
 .github/workflows/nodejs.yml | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index d1b746769..9938885d5 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -4,18 +4,17 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js 10.x 
-      uses: actions/setup-node@v1
-      with:
-        node-version: 10.x
-    - name: npm install, and test
-      run: |
-        npm install
-        npm test
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.x
+      - name: npm install, and build
+        run: |
+          npm install
+          npm run build
+        env:
+          CI: true

From afd6ddd918ab1997bed37ad51bdcfd0d066fcd4d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 20:47:53 +0800
Subject: [PATCH 68/75] add tsc in test case

---
 .github/workflows/nodejs.yml | 1 +
 package.json                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 9938885d5..ad164315c 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -15,6 +15,7 @@ jobs:
       - name: npm install, and build
         run: |
           npm install
+          npm run tsc
           npm run build
         env:
           CI: true
diff --git a/package.json b/package.json
index 7d28d1713..6ec5f8309 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "build": "gatsby build",
     "develop": "gatsby develop --open",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,less}\"",
+    "tsc": "tsc",
     "serve": "gatsby serve"
   },
   "husky": {

From 49ff341641a8f021b4c5c76c9d7e9eac91c57a91 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 20:53:57 +0800
Subject: [PATCH 69/75] :up: upgrade @antv/gatsby-theme-antv to fix site build

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6ec5f8309..d6a143ab0 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@antv/gatsby-theme-antv": "^0.2.0",
+    "@antv/gatsby-theme-antv": "^0.2.2",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",

From b30700f0c7f30cd4ec9d93f85f681a55e27bdba8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 20:56:33 +0800
Subject: [PATCH 70/75] :memo: upgrade README.md

---
 README.md | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 8298aa485..13ef62cd7 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,16 @@
 # AntV New Site 📈
 
+New AntV site built on [@antv/gatsby-theme-antv](https://github.com/antvis/gatsby-theme-antv).
+
 ![CI status](https://github.com/antvis/antvis.github.io/workflows/Node%20CI/badge.svg)
 [![Dependency Status](https://david-dm.org/antvis/antvis.github.io.svg?style=flat-square)](https://david-dm.org/antvis/antvis.github.io)
 [![devDependencies Status](https://david-dm.org/antvis/antvis.github.io/dev-status.svg)](https://david-dm.org/antvis/antvis.github.io?type=dev)
 ![prettier code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)
 
-## Install
+## Install & Preview
 
 ```bash
 npm install
-```
-
-## Preview
-
-```bash
 npm start
 ```
 
@@ -25,21 +22,6 @@ Visit https://127.0.0.1:8000
 npm run format
 ```
 
-## Test
-
-```bash
-npm test
-```
-
 ## Deploy
 
 Not ready.
-
-## Used libraries
-
-- [Gatsby](https://www.gatsbyjs.org/docs/)
-- [Ant Design](https://github.com/ant-design/ant-design)
-- [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/)
-- [Jest](https://jestjs.io/)
-- [Testing Library](https://testing-library.com/)
-- [react-i18next](https://react.i18next.com/)

From ba4a4d72a4fbcfc1ca7f3be6ec2f0466ff8706b6 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sat, 12 Oct 2019 21:14:35 +0800
Subject: [PATCH 71/75] :bug: fix edit githubUrl

---
 gatsby-config.js | 5 ++++-
 package.json     | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 24d37e0a4..dfeddb941 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,3 +1,5 @@
+const { homepage, repository } = require('./package.json');
+
 module.exports = {
   plugins: [
     {
@@ -7,8 +9,9 @@ module.exports = {
   ],
   siteMetadata: {
     title: `AntV`,
-    siteUrl: `https://antvis.github.io`,
     description: `Ant Visualization solution home page`,
+    siteUrl: homepage,
+    githubUrl: repository.url,
     languages: {
       langs: ['en', 'zh'],
       defaultLangKey: 'zh',
diff --git a/package.json b/package.json
index d6a143ab0..0737015e7 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@antv/gatsby-theme-antv": "^0.2.2",
+    "@antv/gatsby-theme-antv": "^0.2.3",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",

From 27dd93115881b1bbebdb5cf98439dc8d07955fa5 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Oct 2019 11:29:48 +0800
Subject: [PATCH 72/75] :up: upgrade @antv/gatsby-theme-antv to 0.2.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0737015e7..68ceca5a5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@antv/gatsby-theme-antv": "^0.2.3",
+    "@antv/gatsby-theme-antv": "^0.2.4",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",

From 7679b01ce4ec7bfa0e94cdef1066bcb161cb566f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Oct 2019 17:14:54 +0800
Subject: [PATCH 73/75] :up: upgrade @antv/gatsby-theme-antv to 0.2.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 68ceca5a5..44a03c072 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@antv/gatsby-theme-antv": "^0.2.4",
+    "@antv/gatsby-theme-antv": "^0.2.5",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",

From c9a6362524e77d40725ae254a21d999f940084bc Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Oct 2019 18:31:49 +0800
Subject: [PATCH 74/75] :up: upgrade @antv/gatsby-theme-antv to 0.2.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 44a03c072..feef01a26 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "url": "https://github.com/antvis/antvis.github.io/issues"
   },
   "dependencies": {
-    "@antv/gatsby-theme-antv": "^0.2.5",
+    "@antv/gatsby-theme-antv": "^0.2.6",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "antd": "^3.23.6",

From 8ecdae2c0169c016ae9f940869dfe5b8b9d549e1 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Oct 2019 18:42:27 +0800
Subject: [PATCH 75/75] Add GATrackingId

---
 gatsby-config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index dfeddb941..c6042826b 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,7 +4,9 @@ module.exports = {
   plugins: [
     {
       resolve: `@antv/gatsby-theme-antv`,
-      options: {},
+      options: {
+        GATrackingId: 'UA-148148901-1',
+      },
     },
   ],
   siteMetadata: {