feat: add gatsby (antvis#21)

* feat: 接入 gatsby 环境 & 使用 jest.setup.js

* docs: 接入网站 examples

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist/
+build/
+examples/

.gitignore

@@ -73,3 +73,6 @@ esm
 *.sw*
 *.un~
 
+# website
+.cache
+public

__tests__/unit/ui/icon/index.spec.ts

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import { Canvas } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Icon } from '../../../../src';

__tests__/unit/ui/marker/index.spec.ts

@@ -1,4 +1,3 @@
-import 'babel-polyfill';
 import { Canvas } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Marker, svg2marker } from '../../../../src';

api-extractor.json

@@ -0,0 +1,33 @@
+{
+  "mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
+  "apiReport": {
+    "enabled": false
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "dtsRollup": {
+    "enabled": true
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  },
+  "messages": {
+    "extractorMessageReporting": {
+      "ae-missing-release-tag": {
+        "logLevel": "none"
+      },
+      "ae-forgotten-export": {
+        "logLevel": "none"
+      }
+    },
+    "tsdocMessageReporting": {
+      "tsdoc-param-tag-missing-hyphen": {
+        "logLevel": "none"
+      },
+      "tsdoc-escape-greater-than": {
+        "logLevel": "none"
+      }
+    }
+  }
+}

docs/api/api.en.md

@@ -0,0 +1,8 @@
+---
+title: Common API
+order: 0
+redirect_from:
+  - /en/docs/api
+---
+
+`markdown:docs/api/api.zh.md`

docs/api.md → docs/api/api.zh.md

@@ -1,3 +1,10 @@
+---
+title: 通用 API
+order: 0
+redirect_from:
+  - /zh/docs/api
+---
+
 # API
 
 > Global API for all the components.

docs/ui/arrow.md → docs/api/ui/arrow.en.md

@@ -1,3 +1,8 @@
+---
+title: Arrow
+order: 1
+---
+
 # Arrow
 
 > A mark or sign like an arrow (→), used to show direction or position.

docs/api/ui/arrow.zh.md

@@ -0,0 +1,6 @@
+---
+title: Arrow
+order: 1
+---
+
+`markdown:docs/api/arrow.en.md`

docs/ui/icon.md → docs/api/ui/icon.en.md

@@ -1,3 +1,8 @@
+---
+title: Icon
+order: 2
+---
+
 # Icon
 
 > An icon with text description for clicking.

docs/api/ui/icon.zh.md

@@ -0,0 +1,6 @@
+---
+title: Icon
+order: 2
+---
+
+`markdown:docs/api/icon.zh.md`

examples/gallery/index.en.md

@@ -0,0 +1,7 @@
+---
+title: Gallery
+order: -1
+icon: other
+redirect_from:
+  - /en/examples
+---

examples/gallery/index.zh.md

@@ -0,0 +1,7 @@
+---
+title: 所有图表
+order: -1
+icon: other
+redirect_from:
+  - /zh/examples
+---

examples/icon/basic/API.en.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/icon.en.md`

examples/icon/basic/API.zh.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/icon.zh.md`

examples/icon/basic/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "triangle.ts",
+      "title": {
+        "zh": "三角形 icon",
+        "en": "Triangle icon"
+      },
+      "screenshot": ""
+    }
+  ]
+}

examples/icon/basic/demo/triangle.ts

@@ -0,0 +1,30 @@
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Icon } from '@antv/gui';
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: 'container',
+  width: 300,
+  height: 300,
+  renderer,
+});
+
+const icon = new Icon({
+  attrs: {
+    symbol: 'triangle-down',
+    x: 50,
+    y: 50,
+    r: 16,
+    fill: 'green',
+    text: '10.24%',
+  },
+});
+
+canvas.appendChild(icon);

examples/icon/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Icon
+order: 1
+---

examples/icon/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Icon
+order: 1
+---

examples/marker/basic/API.en.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/arrow.en.md`

examples/marker/basic/API.zh.md

@@ -0,0 +1 @@
+`markdown:docs/api/ui/arrow.zh.md`

examples/marker/basic/demo/meta.json

@@ -0,0 +1,24 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "triangle.ts",
+      "title": {
+        "zh": "三角形 marker",
+        "en": "Triangle marker"
+      },
+      "screenshot": ""
+    },
+    {
+      "filename": "register-symbol.ts",
+      "title": {
+        "zh": "自定义 marker symbol",
+        "en": "Register marker symbol"
+      },
+      "screenshot": ""
+    }
+  ]
+}

examples/marker/basic/demo/register-symbol.ts

@@ -0,0 +1,36 @@
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Marker, svg2marker } from '@antv/gui';
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: 'container',
+  width: 300,
+  height: 300,
+  renderer,
+});
+
+Marker.registerSymbol(
+  'star',
+  svg2marker(
+    `<svg height="512" width="512" viewport="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M480 207H308.6L256 47.9 203.4 207H32l140.2 97.9L117.6 464 256 365.4 394.4 464l-54.7-159.1L480 207zM362.6 421.2l-106.6-76-106.6 76L192 298.7 84 224h131l41-123.3L297 224h131l-108 74.6 42.6 122.6z"/></svg>`
+  )
+);
+
+const marker = new Marker({
+  attrs: {
+    symbol: 'star',
+    x: 50,
+    y: 50,
+    r: 16,
+    fill: 'orange',
+  },
+});
+
+canvas.appendChild(marker);

examples/marker/basic/demo/triangle.ts

@@ -0,0 +1,29 @@
+import { Canvas } from '@antv/g';
+import { Renderer as CanvasRenderer } from '@antv/g-canvas';
+import { Marker } from '@antv/gui';
+
+const renderer = new CanvasRenderer({
+  enableDirtyRectangleRenderingDebug: false,
+  enableAutoRendering: true,
+  enableDirtyRectangleRendering: true,
+});
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: 'container',
+  width: 300,
+  height: 300,
+  renderer,
+});
+
+const marker = new Marker({
+  attrs: {
+    symbol: 'triangle-down',
+    x: 50,
+    y: 50,
+    r: 16,
+    fill: 'green',
+  },
+});
+
+canvas.appendChild(marker);

examples/marker/basic/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Marker
+order: 0
+---

examples/marker/basic/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Marker
+order: 0
+---

gatsby-browser.js

@@ -0,0 +1,4 @@
+window.gui = require('./src/index.ts');
+window.gCanvas = require('@antv/g-canvas');
+window.g = require('@antv/g');
+window.reactDom = require('react-dom');

gatsby-config.js

@@ -0,0 +1,93 @@
+const { repository, version } = require('./package.json');
+
+module.exports = {
+  plugins: [
+    {
+      resolve: '@antv/gatsby-theme-antv',
+      options: {
+        // eslint-disable-next-line quotes
+        // GATrackingId: `UA-148148901-2`,
+      },
+    },
+  ],
+  // Customize your site metadata:
+  siteMetadata: {
+    isAntVSite: false,
+    title: 'GUI',
+    description: 'UI made with G of AntV',
+    siteUrl: 'https://gui.antv.vision',
+    githubUrl: repository.url,
+    showAPIDoc: true, // 是否在demo页展示API文档
+    playground: {
+      extraLib: '',
+      devDependencies: {
+        typescript: 'latest',
+      },
+    },
+    mdPlayground: {
+      // markdown 文档中的 playground 若干设置
+      splitPaneMainSize: '50%',
+    },
+    versions: {
+      [version]: 'https://gui.antv.vision',
+    },
+    navs: [
+      {
+        slug: 'docs/api',
+        title: {
+          zh: 'API',
+          en: 'API',
+        },
+        order: 1,
+      },
+      {
+        slug: 'examples',
+        title: {
+          zh: '图表示例',
+          en: 'Examples',
+        },
+        order: 0,
+      },
+    ],
+    docs: [
+      {
+        slug: 'api/ui',
+        title: {
+          zh: '基础 UI',
+          en: 'Basic UI',
+        },
+        order: 2,
+      },
+    ],
+    examples: [
+      {
+        slug: 'gallery',
+        icon: 'gallery',
+        title: {
+          zh: '',
+          en: '',
+        },
+      },
+      {
+        slug: 'marker',
+        icon: 'gallery',
+        title: {
+          zh: 'Marker',
+          en: 'Marker',
+        },
+      },
+      {
+        slug: 'icon',
+        icon: 'gallery',
+        title: {
+          zh: 'Icon',
+          en: 'Icon',
+        },
+      },
+    ],
+    docsearchOptions: {
+      // apiKey: '0d19588d7661a81faa8b75f6ade80321',
+      indexName: 'antv_gui',
+    },
+  },
+};

jest.setup.js

@@ -0,0 +1 @@
+import 'babel-polyfill';