feat: versions select

@antv/gatsby-theme-antv/gatsby-node.js

@@ -514,6 +514,7 @@ exports.sourceNodes = ({ actions }) => {
       showAntVProductsCard: Boolean
       playground: PlayGround
       docsearchOptions: DocsearchOptions
+      versions: Json
     }
 
     type Site implements Node {

@antv/gatsby-theme-antv/site/common.json

@@ -7,6 +7,7 @@
   "代码演示": "Examples",
   "设计指引": "Design Guide",
   "English": "中文",
+  "🇺🇸": "🇨🇳",
   "进入全屏": "Enter Fullscreen",
   "离开全屏": "Exit Fullscreen",
   "产品首页": "Home Page",

@antv/gatsby-theme-antv/site/components/Header.module.less

@@ -110,7 +110,7 @@
 
       li {
         display: inline-block;
-        margin-right: 32px;
+        margin-right: 28px;
         transition: box-shadow 0.3s;
 
         &.activeItem {
@@ -158,9 +158,30 @@
         }
       }
 
+      .versions {
+        color: #697b8c;
+
+        :global {
+          .ant-select-selection {
+            border: none;
+            box-shadow: none;
+          }
+          .ant-select-selection__rendered {
+            margin-left: 0;
+            margin-right: 14px;
+          }
+          .ant-select-arrow {
+            font-size: 10px;
+            right: 0;
+          }
+        }
+      }
+
       .arrow {
-        font-size: 12px;
-        margin-left: 8px;
+        width: 14px;
+        margin-left: 2px;
+        position: relative;
+        top: -2px;
         transition: all 0.3s;
 
         &.open {

@antv/gatsby-theme-antv/site/components/Header.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Icon, Popover, Button, message } from 'antd';
+import { Icon, Popover, Button, Tooltip, Select, message } from 'antd';
 import GitUrlParse from 'git-url-parse';
 import Search, { SearchProps } from './Search';
 import Products from './Products';
@@ -13,6 +13,8 @@ import AntvLogo from '../images/antv.svg';
 import ExternalLink from '../images/external-link.svg';
 import styles from './Header.module.less';
 
+const { Option } = Select;
+
 interface HeaderProps {
   pathPrefix?: string;
   path?: string;
@@ -54,6 +56,8 @@ interface HeaderProps {
   showAntVProductsCard?: boolean;
   /** algolia 搜索配置 */
   docsearchOptions?: SearchProps['docsearchOptions'];
+  /** 展示版本切换 */
+  versions?: { [key: string]: string };
 }
 
 export const redirectToChinaMirror = (githubUrl: string) => {
@@ -106,6 +110,7 @@ const Header: React.FC<HeaderProps> = ({
   isHomePage,
   rootDomain = '',
   docsearchOptions,
+  versions,
 }) => {
   const { t, i18n } = useTranslation();
   const lang =
@@ -236,28 +241,6 @@ const Header: React.FC<HeaderProps> = ({
       })}
     >
       {navs && navs.length ? <NavMenuItems navs={navs} path={path} /> : null}
-      {showLanguageSwitcher && (
-        <li>
-          <a
-            onClick={e => {
-              e.preventDefault();
-              const value = lang === 'en' ? 'zh' : 'en';
-              i18n.changeLanguage(value);
-              if (onLanguageChange) {
-                return onLanguageChange(value);
-              }
-              if (path.endsWith(`/${lang}`)) {
-                return navigate(`/${value}`);
-              }
-              navigate(
-                path.replace(pathPrefix, '').replace(`/${lang}/`, `/${value}/`),
-              );
-            }}
-          >
-            {t('English')}
-          </a>
-        </li>
-      )}
       {showChinaMirror ? (
         <Popover
           title={null}
@@ -320,8 +303,9 @@ const Header: React.FC<HeaderProps> = ({
         <li {...productItemProps}>
           <a>
             {t('所有产品')}
-            <Icon
-              type="caret-down"
+            <img
+              src="https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png"
+              alt="antv logo arrow"
               className={classNames(styles.arrow, {
                 [styles.open]: productMenuVisible,
               })}
@@ -335,6 +319,64 @@ const Header: React.FC<HeaderProps> = ({
           />
         </li>
       ) : null}
+      {versions ? (
+        <li>
+          <Select
+            defaultValue={Object.keys(versions)[0]}
+            className={styles.versions}
+            dropdownMatchSelectWidth={false}
+            size="small"
+            onChange={value => {
+              window.location = value;
+            }}
+          >
+            {Object.keys(versions).map((version: string) => {
+              const url = versions[version];
+              if (url.startsWith('http')) {
+                return (
+                  <Option key={url} value={url}>
+                    {version}
+                  </Option>
+                );
+              }
+              return null;
+            })}
+          </Select>
+        </li>
+      ) : null}
+      {showLanguageSwitcher && (
+        <li>
+          <Tooltip
+            title={t('English')}
+            align={{
+              offset: [0, -16],
+            }}
+            placement="bottom"
+          >
+            <a
+              onClick={e => {
+                e.preventDefault();
+                const value = lang === 'en' ? 'zh' : 'en';
+                i18n.changeLanguage(value);
+                if (onLanguageChange) {
+                  return onLanguageChange(value);
+                }
+                if (path.endsWith(`/${lang}`)) {
+                  return navigate(`/${value}`);
+                }
+                navigate(
+                  path
+                    .replace(pathPrefix, '')
+                    .replace(`/${lang}/`, `/${value}/`),
+                );
+              }}
+              style={{ fontSize: 16 }}
+            >
+              {t('🇺🇸')}
+            </a>
+          </Tooltip>
+        </li>
+      )}
       {showGithubCorner && (
         <li className={styles.githubCorner}>
           <a href={githubUrl} target="_blank" rel="noopener noreferrer">

@antv/gatsby-theme-antv/site/layouts/layout.tsx

@@ -70,6 +70,7 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
             apiKey
             indexName
           }
+          versions
         }
       }
       locales {
@@ -94,6 +95,7 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
       showAntVProductsCard,
       redirects = [],
       docsearchOptions,
+      versions,
     },
   } = site;
   let resources = {};
@@ -187,6 +189,7 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
         showChinaMirror={parseNulltoUndefined(showChinaMirror)}
         showLanguageSwitcher={parseNulltoUndefined(showLanguageSwitcher)}
         docsearchOptions={docsearchOptions}
+        versions={versions}
         {...logoProps}
       />
       <main className={styles.main}>{children}</main>

README.md

@@ -93,6 +93,14 @@ module.exports = {
       playgroundDidMount: 'console.log("playgroundDidMount");',
       playgroundWillUnmount: 'console.log("playgroundWillUnmount");',
     },
+    versions: [
+      {
+        '1.x': 'https://1x.ant.design',
+        '2.x': 'https://2x.ant.design',
+        '3.x': 'https://ant.design',
+        '4.x': 'https://next.ant.design',
+      },
+    ],
     redirects: [
       {
         from: /\/old-url/,

example/gatsby-config.js

@@ -1,3 +1,5 @@
+const { version, repository, homepage } = require('./package.json');
+
 module.exports = {
   plugins: [
     {
@@ -8,8 +10,8 @@ module.exports = {
   siteMetadata: {
     title: 'AntV test site',
     description: 'Ant Visualization solution home page',
-    siteUrl: 'https://test.antv.vision/',
-    githubUrl: 'https://github.com/antvis/antvis.github.io',
+    siteUrl: homepage,
+    githubUrl: repository.url,
     navs: [
       {
         slug: 'docs/specification/getting-started',
@@ -77,6 +79,11 @@ module.exports = {
         },
       },
     ],
+    versions: {
+      [version]: 'https://ant.design',
+      '2.x': 'https://2x.ant.design',
+      '1.x': 'https://1x.ant.design',
+    },
     playground: {
       container: '<div id="container" class="ok" />',
       playgroundDidMount: 'console.log("playgroundDidMount");',

example/package.json

@@ -3,7 +3,7 @@
   "name": "example",
   "version": "1.0.0",
   "license": "MIT",
-  "homepage": "https://antvis.github.io",
+  "homepage": "https://test.antv.vision",
   "repository": {
     "type": "git",
     "url": "https://github.com/antvis/antvis.github.io"