From e4683563587902fe19e3c1645094f1c820cbc8bc Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Dec 2019 11:14:31 +0800 Subject: [PATCH 1/3] :lipstick: tweak header menu items --- @antv/gatsby-theme-antv/site/common.json | 1 + .../site/components/Header.module.less | 8 ++- .../site/components/Header.tsx | 62 +++++++++++-------- 3 files changed, 43 insertions(+), 28 deletions(-) diff --git a/@antv/gatsby-theme-antv/site/common.json b/@antv/gatsby-theme-antv/site/common.json index a21add46..75602802 100644 --- a/@antv/gatsby-theme-antv/site/common.json +++ b/@antv/gatsby-theme-antv/site/common.json @@ -7,6 +7,7 @@ "代码演示": "Examples", "设计指引": "Design Guide", "English": "中文", + "🇺🇸": "🇨🇳", "进入全屏": "Enter Fullscreen", "离开全屏": "Exit Fullscreen", "产品首页": "Home Page", diff --git a/@antv/gatsby-theme-antv/site/components/Header.module.less b/@antv/gatsby-theme-antv/site/components/Header.module.less index d37a1aab..d32a242a 100644 --- a/@antv/gatsby-theme-antv/site/components/Header.module.less +++ b/@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 { @@ -159,8 +159,10 @@ } .arrow { - font-size: 12px; - margin-left: 8px; + width: 14px; + margin-left: 2px; + position: relative; + top: -2px; transition: all 0.3s; &.open { diff --git a/@antv/gatsby-theme-antv/site/components/Header.tsx b/@antv/gatsby-theme-antv/site/components/Header.tsx index f4a85d9a..16e0687b 100644 --- a/@antv/gatsby-theme-antv/site/components/Header.tsx +++ b/@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, message } from 'antd'; import GitUrlParse from 'git-url-parse'; import Search, { SearchProps } from './Search'; import Products from './Products'; @@ -236,28 +236,6 @@ const Header: React.FC = ({ })} > {navs && navs.length ? : null} - {showLanguageSwitcher && ( -
  • - { - 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')} - -
    • - )} {showChinaMirror ? ( = ({
  • {t('所有产品')} - = ({ />
    • ) : null} + {showLanguageSwitcher && ( +
  • + + { + 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('🇺🇸')} + + +
    • + )} {showGithubCorner && (
  • From d8be35b3896eec34c097213359d6990eac39cd4b Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Dec 2019 11:36:49 +0800 Subject: [PATCH 2/3] :zap: support versions select in header menu close #84 --- @antv/gatsby-theme-antv/gatsby-node.js | 1 + .../site/components/Header.module.less | 19 +++++++++++ .../site/components/Header.tsx | 32 ++++++++++++++++++- .../gatsby-theme-antv/site/layouts/layout.tsx | 3 ++ README.md | 8 +++++ example/gatsby-config.js | 11 +++++-- example/package.json | 2 +- 7 files changed, 72 insertions(+), 4 deletions(-) diff --git a/@antv/gatsby-theme-antv/gatsby-node.js b/@antv/gatsby-theme-antv/gatsby-node.js index 923468c0..99c489a2 100644 --- a/@antv/gatsby-theme-antv/gatsby-node.js +++ b/@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 { diff --git a/@antv/gatsby-theme-antv/site/components/Header.module.less b/@antv/gatsby-theme-antv/site/components/Header.module.less index d32a242a..ebde6ba9 100644 --- a/@antv/gatsby-theme-antv/site/components/Header.module.less +++ b/@antv/gatsby-theme-antv/site/components/Header.module.less @@ -158,6 +158,25 @@ } } + .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 { width: 14px; margin-left: 2px; diff --git a/@antv/gatsby-theme-antv/site/components/Header.tsx b/@antv/gatsby-theme-antv/site/components/Header.tsx index 16e0687b..0e8e38c6 100644 --- a/@antv/gatsby-theme-antv/site/components/Header.tsx +++ b/@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, Tooltip, 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 = ({ isHomePage, rootDomain = '', docsearchOptions, + versions, }) => { const { t, i18n } = useTranslation(); const lang = @@ -314,6 +319,31 @@ const Header: React.FC = ({ />
    • ) : null} + {versions ? ( +
  • + +
    • + ) : null} {showLanguageSwitcher && (
  • = ({ children, location }) => { apiKey indexName } + versions } } locales { @@ -94,6 +95,7 @@ const Layout: React.FC = ({ children, location }) => { showAntVProductsCard, redirects = [], docsearchOptions, + versions, }, } = site; let resources = {}; @@ -187,6 +189,7 @@ const Layout: React.FC = ({ children, location }) => { showChinaMirror={parseNulltoUndefined(showChinaMirror)} showLanguageSwitcher={parseNulltoUndefined(showLanguageSwitcher)} docsearchOptions={docsearchOptions} + versions={versions} {...logoProps} />
    {children}
    diff --git a/README.md b/README.md index 93ed724e..a78faebb 100644 --- a/README.md +++ b/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/, diff --git a/example/gatsby-config.js b/example/gatsby-config.js index de124494..41ac28f3 100644 --- a/example/gatsby-config.js +++ b/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: '
    ', playgroundDidMount: 'console.log("playgroundDidMount");', diff --git a/example/package.json b/example/package.json index 2858996d..0ee36a1e 100644 --- a/example/package.json +++ b/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" From 25037bf2b4f5327f45bcf2db8639d263d2ea0703 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 20 Dec 2019 11:41:26 +0800 Subject: [PATCH 3/3] :white_check_mark: fix eslint error --- .eslintignore | 1 + @antv/gatsby-theme-antv/site/components/Header.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.eslintignore b/.eslintignore index 0c11a485..9a26446c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ @antv/gatsby-theme-antv/site/**/*.js @antv/gatsby-theme-antv/lib example/examples +node_modules diff --git a/@antv/gatsby-theme-antv/site/components/Header.tsx b/@antv/gatsby-theme-antv/site/components/Header.tsx index 0e8e38c6..0ccff143 100644 --- a/@antv/gatsby-theme-antv/site/components/Header.tsx +++ b/@antv/gatsby-theme-antv/site/components/Header.tsx @@ -326,8 +326,8 @@ const Header: React.FC = ({ className={styles.versions} dropdownMatchSelectWidth={false} size="small" - onChange={value => { - window.location = value; + onChange={(value: string) => { + window.location.href = value; }} > {Object.keys(versions).map((version: string) => {