antvis · afc163 · Nov 13, 2019 · Nov 13, 2019 · Nov 13, 2019 · Nov 13, 2019
diff --git a/@antv/gatsby-theme-antv/README.md b/@antv/gatsby-theme-antv/README.md
@@ -41,8 +41,11 @@ module.exports = {
       options: {
         // pagesPath: './site/pages',
         GATrackingId: `UA-XXXXXXXXX-X`,
-        primaryColor: '#722ED1',
         pathPrefix: '/g2',
+        // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+        theme: {
+          'primary-color': '#722ED1',
+        },
       },
     },
   ],
@@ -59,6 +62,12 @@ module.exports = {
       playgroundDidMount: 'console.log("playgroundDidMount");',
       playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
     },
+    redirects: [
+      {
+        from: /\/old-url/,
+        to: '/new-url', // 不指定 to 时直接跳转到 https://antv-2018.alipay.com/***
+      },
+    ],
   },
 };
 ```
@@ -72,15 +81,83 @@ module.exports = {
 - [Header Props](https://github.com/antvis/gatsby-theme-antv/blob/master/%40antv/gatsby-theme-antv/site/components/Header.tsx#L13-L39)
 - [Footer Props](https://github.com/antvis/gatsby-theme-antv/blob/046a9c4e32eea50b49347b114714425a9f99b4b7/%40antv/gatsby-theme-antv/site/components/Footer.tsx#L149-L159)
 - [SEO Props](https://github.com/antvis/gatsby-theme-antv/blob/046a9c4e32eea50b49347b114714425a9f99b4b7/%40antv/gatsby-theme-antv/site/components/Seo.tsx#L12-L17)
+- [Banner Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Banner.tsx#L8-L31)
+- [Features Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Features.tsx#L7-L17)
+- [Cases Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Cases.tsx#L14-L25)
+- [Companies Props](https://github.com/antvis/gatsby-theme-antv/blob/c6178d1baeebce4ef4e31773a6b533020b662b27/%40antv/gatsby-theme-antv/site/components/Companies.tsx#L6-L16)
 
 ```jsx
 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';
+import Banner from '@antv/gatsby-theme-antv/site/components/Banner';
+import Features from '@antv/gatsby-theme-antv/site/components/Features';
+import Applications from '@antv/gatsby-theme-antv/site/components/Applications';
+import Companies from '@antv/gatsby-theme-antv/site/components/Companies';
 
 // @antv/gatsby-theme-antv/components/Header for commonjs version
 
 const Layout = () => {
+  const features = [
+    {
+      icon:
+        'https://gw.alipayobjects.com/zos/basement_prod/5dbaf094-c064-4a0d-9968-76020b9f1510.svg',
+      title: 'xxxxx',
+      description: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
+    },
+    {
+      icon:
+        'https://gw.alipayobjects.com/zos/basement_prod/0a0371ab-6bed-41ad-a99b-87a5044ba11b.svg',
+      title: 'xxxxx',
+      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+    },
+    {
+      icon:
+        'https://gw.alipayobjects.com/zos/basement_prod/716d0bc0-e311-4b28-b79f-afdd16e8148e.svg',
+      title: 'xxxxx',
+      description: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+    },
+  ];
+  const cases = [
+    {
+      logo:
+        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ',
+      title: '灯塔专业版',
+      description:
+        '深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金深入金融的基金',
+      link: '#',
+      image:
+        'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ',
+    },
+    // ...
+  ];
+  const companies = [
+    {
+      name: '公司1',
+      image:
+        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Z1NnQ6L4xCIAAAAAAAAAAABkARQnAQ',
+    },
+    {
+      name: '公司2',
+      image:
+        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*6u3hTpsd7h8AAAAAAAAAAABkARQnAQ',
+    },
+    // ...
+  ];
+  const notifications = [
+    {
+      type: '测试',
+      title: 'G6 3.2 全新上线！',
+      date: '2019.12.04',
+      link: '#',
+    },
+  ];
+
+  const downloadButton = {
+    text: '下载使用',
+    link: 'https://antv.alipay.com/zh-cn/index.html',
+  };
+
   return (
     <>
       <SEO title="蚂蚁数据可视化" lang="zh" />
@@ -104,6 +181,33 @@ const Layout = () => {
       // columns={[]}
       // bottom={<div>powered by antv</div>}
       />
+
+      <Banner
+        coverImage={<svg></svg>} // 右侧 banner svg 内容
+        title="主页标题"
+        description="主页描述内容描述内容描述内容描述内容"
+        buttonText="按钮文字"
+        buttonHref={'#按钮链接路径'}
+        notifications={notifications} // 可传 1-2 个内容，若不传则显示 2 个默认通知
+        style={{}}
+        className="Banner 的 className"
+        video="视频按钮点开后视频的链接，不传则不会出现视频按钮"
+        githubStarLink="Github Star 链接，不传则不会出现 GitHub Start 按钮"
+        downloadButton={downloadButton} // 不传则不会出现下载按钮
+      />
+      <Features
+        title="优势页面名称" // 可不传
+        features={features} // 必传
+        style={{}}
+        className="Features 的 className"
+      />
+      <Cases cases={cases} style={{}} className="Cases 的 className" />
+      <Companies
+        title="公司页面名称" // 必传
+        companies={companies} // 必传
+        style={{}}
+        className="Companies 的 className"
+      />
     </>
   );
 };
@@ -133,6 +237,19 @@ npm run deploy
 
 > Set envoironment variable `GATSBY_PATH_PREFIX` to `/` in deploy service like netlify to preview pathPrefix site in root domain.
 
+## Install dependency
+
+```bash
+cd @antv/gatsby-theme-antv
+yarn add shallowequal
+```
+
+or
+
+```bash
+yarn workspace @antv/gatsby-theme-antv shallowequal
+```
+
 ## Used libraries
 
 - [Gatsby](https://www.gatsbyjs.org/docs/)

diff --git a/@antv/gatsby-theme-antv/gatsby-node.js b/@antv/gatsby-theme-antv/gatsby-node.js
@@ -141,7 +141,7 @@ exports.onCreateNode = ({ node, actions, getNode, store }) => {
 };
 
 exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions;
+  const { createPage, createRedirect } = actions;
   const result = await graphql(`
     {
       allMarkdownRemark(limit: 1000) {
@@ -177,8 +177,15 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     reporter.panicOnBuild(`Error while running GraphQL query.`);
     return;
   }
-  const posts = result.data.allMarkdownRemark.edges;
-  const allDemos = result.data.allFile.nodes
+
+  const {
+    site: { siteMetadata },
+    allMarkdownRemark,
+    allFile,
+  } = result.data;
+
+  const posts = allMarkdownRemark.edges;
+  const allDemos = allFile.nodes
     .filter(node => /demo\/(.*)\.[t|j]sx?$/.test(node.relativePath))
     .map(item => {
       const source = fs.readFileSync(item.absolutePath, 'utf8');
@@ -248,7 +255,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
         design,
         API,
       };
-      const { siteMetadata } = result.data.site;
       const examplePosts = posts
         .filter(item => !!item)
         .filter(
@@ -352,13 +358,19 @@ exports.sourceNodes = ({ actions, schema }) => {
       target: String
     }
 
+    type SiteSiteMetadataRedirects implements Node {
+      from: String!
+      to: String
+    }
+
     type SiteSiteMetadata implements Node {
       title: String!
       description: String!
       githubUrl: String!
       navs: [SiteSiteMetadataNavs]
       docs: [SiteSiteMetadataDocs]
       examples: [SiteSiteMetadataExamples]
+      redirects: [SiteSiteMetadataRedirects]
       showLanguageSwitcher: Boolean
       playground: PlayGround
     }

diff --git a/@antv/gatsby-theme-antv/site/components/Footer.tsx b/@antv/gatsby-theme-antv/site/components/Footer.tsx
@@ -6,6 +6,8 @@ import { getProducts } from './getProducts';
 import styles from './Footer.module.less';
 import 'rc-footer/assets/index.less';
 
+export const OLD_SITE_DOMAIN = 'https://antv-2018.alipay.com';
+
 interface FooterProps extends RcFooterProps {
   rootDomain?: string;
   language?: string;
@@ -141,7 +143,7 @@ const Footer: React.FC<FooterProps> = ({
                 <Icon type="github" />
               </a>
               <a href={`${rootDomain}/about`}>{t('关于我们')}</a>
-              <a href="https://antv-2018.alipay.com" target="_blank">
+              <a href={OLD_SITE_DOMAIN} target="_blank">
                 {t('返回旧版')}
               </a>
             </div>

diff --git a/@antv/gatsby-theme-antv/site/layouts/layout.tsx b/@antv/gatsby-theme-antv/site/layouts/layout.tsx
@@ -3,8 +3,9 @@ import { useStaticQuery, graphql, withPrefix, Link } from 'gatsby';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { getCurrentLangKey } from 'ptz-i18n';
+import Helmet from 'react-helmet';
 import Header from '../components/Header';
-import Footer from '../components/Footer';
+import Footer, { OLD_SITE_DOMAIN } from '../components/Footer';
 import styles from './layout.module.less';
 
 i18n
@@ -43,13 +44,23 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
             }
             target
           }
+          redirects {
+            from
+            to
+          }
         }
       }
     }
   `;
   const { site } = useStaticQuery(query);
   const {
-    siteMetadata: { title, navs = [], githubUrl, showLanguageSwitcher },
+    siteMetadata: {
+      title,
+      navs = [],
+      githubUrl,
+      showLanguageSwitcher,
+      redirects = [],
+    },
   } = site;
   const pathPrefix = withPrefix('/').replace(/\/$/, '');
   const path = location.pathname.replace(pathPrefix, '');
@@ -69,8 +80,31 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
     return children;
   }
 
+  let rediectUrl;
+  (redirects || []).forEach(
+    ({ from, to }: { from: string | RegExp; to: string }) => {
+      // 支持字符串和正则表达式比较
+      if (
+        (typeof from === 'string' && location.pathname === from) ||
+        (from instanceof RegExp && from.test(location.pathname))
+      ) {
+        if (to) {
+          rediectUrl = to;
+        } else {
+          // 如果没有指定 to，则直接用替换成老版本的域名
+          rediectUrl = `${OLD_SITE_DOMAIN}${location.pathname}`;
+        }
+      }
+    },
+  );
+
   return (
     <>
+      {rediectUrl && (
+        <Helmet>
+          <meta http-equiv="refresh" content={`0;url=${rediectUrl}`} />
+        </Helmet>
+      )}
       <Header
         subTitle={pathPrefix === '' ? '' : title}
         path={path}

diff --git a/README.md b/README.md
@@ -62,6 +62,12 @@ module.exports = {
       playgroundDidMount: 'console.log("playgroundDidMount");',
       playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
     },
+    redirects: [
+      {
+        from: /\/old-url/,
+        to: '/new-url', // 不指定 to 时直接跳转到 https://antv-2018.alipay.com/***
+      },
+    ],
   },
 };
 ```

diff --git a/example/gatsby-config.js b/example/gatsby-config.js
@@ -83,5 +83,10 @@ module.exports = {
       playgroundDidMount: 'console.log("playgroundDidMount");',
       playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
     },
+    redirects: [
+      {
+        from: '/old-url',
+      },
+    ],
   },
 };