From 0cc531626f4955074405c759488400c638a2cbe1 Mon Sep 17 00:00:00 2001 From: Visiky <736929286@qq.com> Date: Tue, 15 Jun 2021 09:53:01 +0800 Subject: [PATCH] feat: add gatsby (#21) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 接入 gatsby 环境 & 使用 jest.setup.js * docs: 接入网站 examples --- .eslintignore | 4 + .gitignore | 3 + __tests__/unit/ui/icon/index.spec.ts | 1 - __tests__/unit/ui/marker/index.spec.ts | 1 - api-extractor.json | 33 +++ docs/api/api.en.md | 8 + docs/{api.md => api/api.zh.md} | 7 + docs/{ui/arrow.md => api/ui/arrow.en.md} | 5 + docs/api/ui/arrow.zh.md | 6 + docs/{ui/icon.md => api/ui/icon.en.md} | 5 + docs/api/ui/icon.zh.md | 6 + examples/gallery/index.en.md | 7 + examples/gallery/index.zh.md | 7 + examples/icon/basic/API.en.md | 1 + examples/icon/basic/API.zh.md | 1 + examples/icon/basic/demo/meta.json | 16 ++ examples/icon/basic/demo/triangle.ts | 30 +++ examples/icon/basic/index.en.md | 4 + examples/icon/basic/index.zh.md | 4 + examples/marker/basic/API.en.md | 1 + examples/marker/basic/API.zh.md | 1 + examples/marker/basic/demo/meta.json | 24 +++ examples/marker/basic/demo/register-symbol.ts | 36 ++++ examples/marker/basic/demo/triangle.ts | 29 +++ examples/marker/basic/index.en.md | 4 + examples/marker/basic/index.zh.md | 4 + gatsby-browser.js | 4 + gatsby-config.js | 93 +++++++++ jest.setup.js | 1 + package.json | 19 +- site/locale.json | 5 + site/pages/index.en.tsx | 3 + site/pages/index.less | 196 ++++++++++++++++++ site/pages/index.zh.tsx | 51 +++++ 34 files changed, 617 insertions(+), 3 deletions(-) create mode 100644 .eslintignore create mode 100644 api-extractor.json create mode 100644 docs/api/api.en.md rename docs/{api.md => api/api.zh.md} (62%) rename docs/{ui/arrow.md => api/ui/arrow.en.md} (91%) create mode 100644 docs/api/ui/arrow.zh.md rename docs/{ui/icon.md => api/ui/icon.en.md} (91%) create mode 100644 docs/api/ui/icon.zh.md create mode 100644 examples/gallery/index.en.md create mode 100644 examples/gallery/index.zh.md create mode 100644 examples/icon/basic/API.en.md create mode 100644 examples/icon/basic/API.zh.md create mode 100644 examples/icon/basic/demo/meta.json create mode 100644 examples/icon/basic/demo/triangle.ts create mode 100644 examples/icon/basic/index.en.md create mode 100644 examples/icon/basic/index.zh.md create mode 100644 examples/marker/basic/API.en.md create mode 100644 examples/marker/basic/API.zh.md create mode 100644 examples/marker/basic/demo/meta.json create mode 100644 examples/marker/basic/demo/register-symbol.ts create mode 100644 examples/marker/basic/demo/triangle.ts create mode 100644 examples/marker/basic/index.en.md create mode 100644 examples/marker/basic/index.zh.md create mode 100644 gatsby-browser.js create mode 100644 gatsby-config.js create mode 100644 jest.setup.js create mode 100644 site/locale.json create mode 100644 site/pages/index.en.tsx create mode 100644 site/pages/index.less create mode 100644 site/pages/index.zh.tsx diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..2b1012bd5 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +node_modules +dist/ +build/ +examples/ \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4cfc812ce..e17140831 100644 --- a/.gitignore +++ b/.gitignore @@ -73,3 +73,6 @@ esm *.sw* *.un~ +# website +.cache +public \ No newline at end of file diff --git a/__tests__/unit/ui/icon/index.spec.ts b/__tests__/unit/ui/icon/index.spec.ts index b867d8ba0..37989bc52 100644 --- a/__tests__/unit/ui/icon/index.spec.ts +++ b/__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'; diff --git a/__tests__/unit/ui/marker/index.spec.ts b/__tests__/unit/ui/marker/index.spec.ts index 9e0ca4558..74743881b 100644 --- a/__tests__/unit/ui/marker/index.spec.ts +++ b/__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'; diff --git a/api-extractor.json b/api-extractor.json new file mode 100644 index 000000000..d35d49b93 --- /dev/null +++ b/api-extractor.json @@ -0,0 +1,33 @@ +{ + "mainEntryPointFilePath": "/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" + } + } + } +} diff --git a/docs/api/api.en.md b/docs/api/api.en.md new file mode 100644 index 000000000..b5eaa04b5 --- /dev/null +++ b/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` \ No newline at end of file diff --git a/docs/api.md b/docs/api/api.zh.md similarity index 62% rename from docs/api.md rename to docs/api/api.zh.md index c8d1f02b5..a1180f986 100644 --- a/docs/api.md +++ b/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. diff --git a/docs/ui/arrow.md b/docs/api/ui/arrow.en.md similarity index 91% rename from docs/ui/arrow.md rename to docs/api/ui/arrow.en.md index 67338acd7..f0c2ef2d7 100644 --- a/docs/ui/arrow.md +++ b/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. diff --git a/docs/api/ui/arrow.zh.md b/docs/api/ui/arrow.zh.md new file mode 100644 index 000000000..565755842 --- /dev/null +++ b/docs/api/ui/arrow.zh.md @@ -0,0 +1,6 @@ +--- +title: Arrow +order: 1 +--- + +`markdown:docs/api/arrow.en.md` \ No newline at end of file diff --git a/docs/ui/icon.md b/docs/api/ui/icon.en.md similarity index 91% rename from docs/ui/icon.md rename to docs/api/ui/icon.en.md index a46230f4f..ad2637e2f 100644 --- a/docs/ui/icon.md +++ b/docs/api/ui/icon.en.md @@ -1,3 +1,8 @@ +--- +title: Icon +order: 2 +--- + # Icon > An icon with text description for clicking. diff --git a/docs/api/ui/icon.zh.md b/docs/api/ui/icon.zh.md new file mode 100644 index 000000000..2474a4e0c --- /dev/null +++ b/docs/api/ui/icon.zh.md @@ -0,0 +1,6 @@ +--- +title: Icon +order: 2 +--- + +`markdown:docs/api/icon.zh.md` diff --git a/examples/gallery/index.en.md b/examples/gallery/index.en.md new file mode 100644 index 000000000..2be38ce94 --- /dev/null +++ b/examples/gallery/index.en.md @@ -0,0 +1,7 @@ +--- +title: Gallery +order: -1 +icon: other +redirect_from: + - /en/examples +--- diff --git a/examples/gallery/index.zh.md b/examples/gallery/index.zh.md new file mode 100644 index 000000000..7e2cf889d --- /dev/null +++ b/examples/gallery/index.zh.md @@ -0,0 +1,7 @@ +--- +title: 所有图表 +order: -1 +icon: other +redirect_from: + - /zh/examples +--- diff --git a/examples/icon/basic/API.en.md b/examples/icon/basic/API.en.md new file mode 100644 index 000000000..4473dabd2 --- /dev/null +++ b/examples/icon/basic/API.en.md @@ -0,0 +1 @@ +`markdown:docs/api/ui/icon.en.md` \ No newline at end of file diff --git a/examples/icon/basic/API.zh.md b/examples/icon/basic/API.zh.md new file mode 100644 index 000000000..49cc1c007 --- /dev/null +++ b/examples/icon/basic/API.zh.md @@ -0,0 +1 @@ +`markdown:docs/api/ui/icon.zh.md` \ No newline at end of file diff --git a/examples/icon/basic/demo/meta.json b/examples/icon/basic/demo/meta.json new file mode 100644 index 000000000..21ecadd5b --- /dev/null +++ b/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": "" + } + ] +} diff --git a/examples/icon/basic/demo/triangle.ts b/examples/icon/basic/demo/triangle.ts new file mode 100644 index 000000000..c14f1c60e --- /dev/null +++ b/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); diff --git a/examples/icon/basic/index.en.md b/examples/icon/basic/index.en.md new file mode 100644 index 000000000..126dddce9 --- /dev/null +++ b/examples/icon/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: Icon +order: 1 +--- diff --git a/examples/icon/basic/index.zh.md b/examples/icon/basic/index.zh.md new file mode 100644 index 000000000..126dddce9 --- /dev/null +++ b/examples/icon/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Icon +order: 1 +--- diff --git a/examples/marker/basic/API.en.md b/examples/marker/basic/API.en.md new file mode 100644 index 000000000..59fb3ffd3 --- /dev/null +++ b/examples/marker/basic/API.en.md @@ -0,0 +1 @@ +`markdown:docs/api/ui/arrow.en.md` diff --git a/examples/marker/basic/API.zh.md b/examples/marker/basic/API.zh.md new file mode 100644 index 000000000..6bc62fcdf --- /dev/null +++ b/examples/marker/basic/API.zh.md @@ -0,0 +1 @@ +`markdown:docs/api/ui/arrow.zh.md` diff --git a/examples/marker/basic/demo/meta.json b/examples/marker/basic/demo/meta.json new file mode 100644 index 000000000..4aa30d10b --- /dev/null +++ b/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": "" + } + ] +} diff --git a/examples/marker/basic/demo/register-symbol.ts b/examples/marker/basic/demo/register-symbol.ts new file mode 100644 index 000000000..77c23bf50 --- /dev/null +++ b/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( + `` + ) +); + +const marker = new Marker({ + attrs: { + symbol: 'star', + x: 50, + y: 50, + r: 16, + fill: 'orange', + }, +}); + +canvas.appendChild(marker); diff --git a/examples/marker/basic/demo/triangle.ts b/examples/marker/basic/demo/triangle.ts new file mode 100644 index 000000000..e57227e31 --- /dev/null +++ b/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); diff --git a/examples/marker/basic/index.en.md b/examples/marker/basic/index.en.md new file mode 100644 index 000000000..8f74a4018 --- /dev/null +++ b/examples/marker/basic/index.en.md @@ -0,0 +1,4 @@ +--- +title: Marker +order: 0 +--- diff --git a/examples/marker/basic/index.zh.md b/examples/marker/basic/index.zh.md new file mode 100644 index 000000000..8f74a4018 --- /dev/null +++ b/examples/marker/basic/index.zh.md @@ -0,0 +1,4 @@ +--- +title: Marker +order: 0 +--- diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 000000000..3698cfdbf --- /dev/null +++ b/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'); diff --git a/gatsby-config.js b/gatsby-config.js new file mode 100644 index 000000000..cef4bbd2a --- /dev/null +++ b/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', + }, + }, +}; diff --git a/jest.setup.js b/jest.setup.js new file mode 100644 index 000000000..ac43f2a04 --- /dev/null +++ b/jest.setup.js @@ -0,0 +1 @@ +import 'babel-polyfill'; \ No newline at end of file diff --git a/package.json b/package.json index 32f0043e9..69f2ab5b3 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,16 @@ "dist" ], "scripts": { + "start": "gatsby clean && npm run site:develop", + "site:develop": "PORT=3000 gatsby develop --open -H 0.0.0.0", + "site:build": "npm run site:clean && gatsby build --prefix-paths", "clean": "rimraf lib esm dist", "lint-staged": "lint-staged", "size": "limit-size", "lint": "eslint ./src/**/*.ts ./__tests__/**/*.ts && prettier ./src ./__tests__ --check ", "fix": "eslint ./src/**/*.ts ./__tests__/**/*.ts --fix && prettier ./src ./__tests__ --write ", "test": "jest", + "test-live": "DEBUG_MODE=1 jest --watch ./__tests__", "build": "father-build & limit-size", "ci": "run-s lint test build", "prepublishOnly": "npm run ci", @@ -35,7 +39,11 @@ "@antv/g": "^1.0.0-alpha.0", "@antv/g-canvas": "^1.0.0-alpha.0", "@antv/util": "^2.0.13", - "svg-path-parser": "^1.1.0" + "svg-path-parser": "^1.1.0", + "react": "^16.11.0", + "react-dom": "^16.11.0", + "react-i18next": "^11.7.0", + "@antv/gatsby-theme-antv": "^1.1.5" }, "devDependencies": { "@commitlint/cli": "^11.0.0", @@ -51,6 +59,7 @@ "eslint-plugin-import": "^2.22.1", "eslint-plugin-prettier": "^3.3.1", "father-build": "^1.19.6", + "gatsby": "^2.24.63", "husky": "^5.0.9", "jest": "^26.6.3", "jest-electron": "^0.1.11", @@ -70,6 +79,9 @@ "preset": "ts-jest", "collectCoverage": true, "testRegex": "(/__tests__/.*\\.(test|spec))\\.ts$", + "setupFilesAfterEnv": [ + "./jest.setup.js" + ], "collectCoverageFrom": [ "src/**/*.ts" ] @@ -102,5 +114,10 @@ }, "bugs": { "url": "https://github.com/antvis/gui/issues" + }, + "resolutions": { + "monaco-editor": "0.21.3", + "@babel/plugin-transform-spread": "7.12.1", + "@babel/standalone": "7.12.6" } } diff --git a/site/locale.json b/site/locale.json new file mode 100644 index 000000000..8cdcb4099 --- /dev/null +++ b/site/locale.json @@ -0,0 +1,5 @@ +{ + "GUI": "GUI", + "图表示例": "Examples", + "开始使用": "Getting Started" +} diff --git a/site/pages/index.en.tsx b/site/pages/index.en.tsx new file mode 100644 index 000000000..4f2095ca1 --- /dev/null +++ b/site/pages/index.en.tsx @@ -0,0 +1,3 @@ +import Index from './index.zh'; + +export default Index; diff --git a/site/pages/index.less b/site/pages/index.less new file mode 100644 index 000000000..50d9be0af --- /dev/null +++ b/site/pages/index.less @@ -0,0 +1,196 @@ +div[class^='PlayGround-module--exampleContainerWrapper'] { + overflow: hidden; + + #container { + display: flex; + align-items: center; + justify-content: center; + } +} + +@media (max-width: 480px) { + .teaser-img img { + margin-left: 0 !important; + margin-top: 60px !important; + } +} + +@media (max-width: 900px) { + .teaser-img img { + margin-left: 0 !important; + margin-top: 0 !important; + } +} + +// 自定义 G2Plot 官网样式 +pre[class*='language-'] { + margin: 0.6em 0 0.8em; + padding: 0.6em 1em; + font-size: 90%; +} + +code.language-sign, +pre.language-sign, +.sign .language-ts { + background: #e6f7ff !important; +} + +description code.language-text { + color: #3c43d1; +} + +code.language-text { + padding: 2px 4px; + color: #8085e8; + font-size: 90%; + background-color: #f5f5f5 !important; + border: none; + border-radius: 4px; +} + +:not(pre) > code[class*='language-'] { + padding: 1px 4px; +} + +[class*='markdown-module--markdown--'] table { + margin: 0.5em 0 24px 0 !important; +} + +// 复写 H 边距 +[class*='markdown-module--markdown'] h3 { + margin: 1em 0 0.6em; + line-height: 36px; +} + +/** 教程文档 自定义样式 **/ + +// 自定义 playground 样式 +.manual-docs .lake-table td [class*='MdPlayGround-module--playground'] { + border: none; +} + +.manual-docs .lake-table .SplitPane .Pane:first-child { + width: 100% !important; +} + +.lake-table img.lake-drag-image { + max-height: unset; +} + +.lake-table [class*='markdown-module--markdown'] table td:first-child { + width: auto; +} + +.manual-docs img[alt='design'] { + max-width: 100%; + max-height: unset; + display: block; +} + +.manual-docs table img[data-role='image'] { + max-width: 100%; + max-height: unset; + margin: 0 auto; + display: block; +} + +.manual-docs .lake-table td[colspan='1'] { + vertical-align: top; + background-color: rgb(255, 255, 255); + color: rgb(38, 38, 38); + min-width: 90px; + font-size: 14px; + white-space: normal; + overflow-wrap: break-word; + border: 1px solid rgb(217, 217, 217); + padding: 4px 8px; + cursor: default; +} + +.manual-docs .lake-table td.style1 { + min-width: 90px; + font-size: 14px; + white-space: normal; + overflow-wrap: break-word; + border: 1px solid rgb(217, 217, 217); + padding: 4px 8px; + cursor: default; +} + +.design-guide-list li, +.manual-docs .lake-fontsize-12 { + color: rgba(0, 0, 0, 0.65); + font-size: 12px; + font-weight: 400; +} + +.manual-docs .lake-table strong { + font-size: 12px; + color: rgb(38, 38, 38); + line-height: 1.74; + letter-spacing: 0.05em; +} + +[class*='markdown-module--markdown'] .manual-docs { + h1 { + margin: 40px 0 20px; + } + p { + margin: 0 !important; + } +} + +// 自定义一个 marker START +a.ant-anchor-link-title[href='#快速上手'], +a.ant-anchor-link-title[href='#quick-start'], +a.ant-anchor-link-title[href='#事件监听'], +a.ant-anchor-link-title[href='#event-listener'] { + transform: translateX(-10px); +} + +a.ant-anchor-link-title[href='#快速上手']::before, +a.ant-anchor-link-title[href='#quick-start']::before, +a.ant-anchor-link-title[href='#事件监听']::before, +a.ant-anchor-link-title[href='#event-listener']::before { + content: ' '; + display: inline-flex; + width: 10px; + height: 10px; + transform: translateY(-4.5px); + border: 5px solid rgb(140, 140, 140); + border-right-color: transparent; + border-top-color: transparent; + border-bottom-color: transparent; +} +// 自定义一个 marker END + +/** 教程文档 自定义样式 END **/ + +/** 图表示例 API 文档样式 START */ +[class*='markdown-module--exampleContent'] [class*='APIDoc-module--docContent'] { + h5::before { + content: '👉 '; + display: inline-block; + width: 14px; + height: 18px; + margin-right: 8px; + } +} +/** 图表示例 API 文档样式 END */ + +/** 自定义 组件-API 文档页样式 START **/ + +[class*="markdown-module--main"] [class*="markdown-module--content"] .component-img { + display: block; + margin: 0 auto; + max-height: 400px; + border: 1px solid #efefef; + padding: 4px; +} + +img.img-400 { + max-width: 400px !important; + border: 1px solid #efefef; +} + +/** 自定义 组件-API 文档页样式 END **/ diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx new file mode 100644 index 000000000..e5e151399 --- /dev/null +++ b/site/pages/index.zh.tsx @@ -0,0 +1,51 @@ +// eslint-disable-next-line +import React from 'react'; +import SEO from '@antv/gatsby-theme-antv/site/components/Seo'; +import { useTranslation } from 'react-i18next'; +import Banner from '@antv/gatsby-theme-antv/site/components/Banner'; +import Features from '@antv/gatsby-theme-antv/site/components/Features'; +import Cases from '@antv/gatsby-theme-antv/site/components/Cases'; +import './index.less'; + +const IndexPage = () => { + const { t, i18n } = useTranslation(); + + const features = []; + + const bannerButtons = [ + { + text: t('图表示例'), + link: `/${i18n.language}/examples/gallery`, + type: 'primary', + }, + { + text: t('开始使用'), + link: `/${i18n.language}/docs/manual/introduction`, + }, + ]; + + const cases = []; + + return ( + <> + + + } + title={t('GUI')} + description={t('')} + className="banner" + buttons={bannerButtons} + /> + + + + ); +}; + +export default IndexPage;