Gatsby Theme for AntV ⚛

How to use it for AntV

• ✨ AntV 站点 接入方式
• 参考例子: https://github.com/antvis/gatsby-theme-antv/tree/master/example

Usage

npm install gatsby @antv/gatsby-theme-antv react-i18next --save-dev

Add gatsby-config.js:

// gatsby-config.js
const { repository } = require('./package.json');

module.exports = {
  plugins: [
    {
      resolve: `@antv/gatsby-theme-antv`,
      options: {
        // pagesPath: './site/pages',
        GATrackingId: `UA-XXXXXXXXX-X`,
        primaryColor: '#722ED1',
        pathPrefix: '/g2',
      },
    },
  ],
  siteMetadata: {
    title: `AntV`,
    description: `Ant Visualization solution home page`,
    githubUrl: repository.url,
    navs: [], // 用于定义顶部菜单
    docs: [], // 用于定义文档页面的二级分类菜单
    examples: [], // 用于定义演示页面的二级菜单，属性见下方
    exampleContainer: '<canvas id="container" />', // 定义演示的渲染节点，默认 <div id="container" />
    showLanguageSwitcher: true, // 用于定义是否展示语言切换
  },
};

• navs: props
• docs: props
• examples: props

Components

• Header Props
• Footer Props
• SEO Props

import SEO from '@antv/gatsby-theme-antv/site/components/Seo';
import Header from '@antv/gatsby-theme-antv/site/components/Header';
import Footer from '@antv/gatsby-theme-antv/site/components/Footer';

// @antv/gatsby-theme-antv/components/Header for commonjs version

const Layout = () => {
  return (
    <>
      <SEO title="蚂蚁数据可视化" lang="zh" />
      <Header
        subTitle="子产品名"
        logo={{
          link: 'https://antv.alipay.com',
          img: <img src="url" />,
        }}
        githubUrl="https://github.com/antvis/g2"
        // docs={[]}
        showSearch={false}
        showGithubCorner={false}
        showLanguageSwitcher={false}
        onLanguageChange={language => {
          console.log(language);
        }}
        defaultLanguage="zh"
      />
      <Footer
      // columns={[]}
      // bottom={<div>powered by antv</div>}
      />
    </>
  );
};

Develop

yarn install
yarn start

Visit https://localhost:8000 to preview.

Publish to npm

cd @antv/gatsby-theme-antv
npm publish

Deploy

npm run deploy

Set envoironment variable GATSBY_PATH_PREFIX to / in deploy service like netlify to preview pathPrefix site in root domain.

Used libraries

• Gatsby
• Ant Design
• gatsby-transformer-remark
• Jest
• Testing Library
• react-i18next

Websites using it

• https://github.com/antvis/antvis.github.io