From 77e866a16c150c61d70033de595b7ba4983cd926 Mon Sep 17 00:00:00 2001 From: Visiky <736929286@qq.com> Date: Fri, 19 Nov 2021 09:07:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E5=A4=B4=E9=83=A8=E5=AF=BC=E8=88=AA=E5=A4=B4=E5=92=8Cfooter?= =?UTF-8?q?=E5=86=85=E5=AE=B9=20(#361)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 更新官网头部导航头和footer内容 * feat: 使用雨燕区块管理产品信息 * fix: 修复 ci 问题 * chore: 开启 github 自动 release * fix: 修复 jest 使用 fetch 问题 Co-authored-by: visiky --- .eslintrc | 1 + @antv/gatsby-theme-antv/jest.setup.js | 2 + @antv/gatsby-theme-antv/package.json | 3 - @antv/gatsby-theme-antv/site/common.json | 15 +- .../site/components/Footer.tsx | 262 ++++++++++-------- .../site/components/PlayGround.tsx | 9 - .../site/components/Product.tsx | 78 +++--- .../site/components/Products.tsx | 100 +++---- .../site/components/getProducts.tsx | 105 +++++-- 9 files changed, 334 insertions(+), 241 deletions(-) diff --git a/.eslintrc b/.eslintrc index d693b5ec6..40a1efe2a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -36,6 +36,7 @@ "react/state-in-constructor": 0, "react/jsx-props-no-spreading": 0, "react/no-array-index-key": 0, + "react/jsx-fragments": 0, "jsx-a11y/click-events-have-key-events": 0, "jsx-a11y/no-noninteractive-element-interactions": 0, "jsx-a11y/no-static-element-interactions": 0, diff --git a/@antv/gatsby-theme-antv/jest.setup.js b/@antv/gatsby-theme-antv/jest.setup.js index 296872731..6aff324e7 100644 --- a/@antv/gatsby-theme-antv/jest.setup.js +++ b/@antv/gatsby-theme-antv/jest.setup.js @@ -1,3 +1,5 @@ require('@testing-library/jest-dom/extend-expect'); require('matchmedia-polyfill'); require('matchmedia-polyfill/matchMedia.addListener'); + +global.fetch = jest.fn(() => Promise.resolve({})); diff --git a/@antv/gatsby-theme-antv/package.json b/@antv/gatsby-theme-antv/package.json index d49ce4b82..a446b7b8a 100644 --- a/@antv/gatsby-theme-antv/package.json +++ b/@antv/gatsby-theme-antv/package.json @@ -147,9 +147,6 @@ "git": { "commitMessage": ":sparkles: Release ${version}" }, - "github": { - "release": false - }, "hooks": { "before:init": [ "npm test", diff --git a/@antv/gatsby-theme-antv/site/common.json b/@antv/gatsby-theme-antv/site/common.json index ea6a2baf9..a5267d733 100644 --- a/@antv/gatsby-theme-antv/site/common.json +++ b/@antv/gatsby-theme-antv/site/common.json @@ -79,5 +79,18 @@ "返回旧版": "Old site", "查看详情": "More", - "上新啦，点击直达：": "New demos online. Click to visit: " + "上新啦，点击直达：": "New demos online. Click to visit: ", + + "React 应用开发框架": "React Application Framework", + "组件/文档研发工具": "Component doc generator", + "React Hooks 库": "React Hooks Library", + "设计动效": "Motion Solution", + "社区": "Community", + "StackOverflow": "StackOverflow", + "体验科技专栏": "Ant Financial Experience Tech", + "帮助": "Help", + "蚂蚁体验科技大会": "Experience Tech Conference", + "标准版基础产品": "Standard basic products", + "标准版扩展产品": "Standard extended products", + "移动定制（F版）产品": "Mobile (F series) products" } diff --git a/@antv/gatsby-theme-antv/site/components/Footer.tsx b/@antv/gatsby-theme-antv/site/components/Footer.tsx index aab7da7e0..ebca64eaf 100644 --- a/@antv/gatsby-theme-antv/site/components/Footer.tsx +++ b/@antv/gatsby-theme-antv/site/components/Footer.tsx @@ -6,11 +6,10 @@ import { GithubOutlined, WeiboOutlined, ZhihuOutlined, + QuestionCircleOutlined, } from '@ant-design/icons'; import classnames from 'classnames'; import omit from 'omit.js'; -import { getProducts } from './getProducts'; -import { useChinaMirrorHost } from '../hooks'; import styles from './Footer.module.less'; import 'rc-footer/assets/index.less'; @@ -35,96 +34,6 @@ const Footer: React.FC = ({ const [withMenu, setWithMenu] = useState(false); const { t, i18n } = useTranslation(); const lang = language || i18n.language; - const [isChinaMirrorHost] = useChinaMirrorHost(); - const products = getProducts({ - t, - language: lang, - rootDomain, - isChinaMirrorHost, - }); - - const more = { - icon: ( - more products - ), - title: t('更多产品'), - items: [ - { - icon: ( - Ant Design - ), - title: 'Ant Design', - url: 'https://ant.design', - description: t('企业级 UI 设计语言'), - openExternal: true, - }, - { - icon: ( - yuque - ), - title: t('语雀'), - url: 'https://yuque.com', - description: t('知识创作与分享工具'), - openExternal: true, - }, - { - icon: ( - Egg - ), - title: 'Egg', - url: 'https://eggjs.org', - description: t('企业级 Node 开发框架'), - openExternal: true, - }, - { - icon: ( - kitchen - ), - title: 'Kitchen', - description: t('Sketch 工具集'), - url: 'https://kitchen.alipay.com', - openExternal: true, - }, - { - icon: ( - xtech - ), - title: t('蚂蚁体验科技'), - url: 'https://xtech.antfin.com/', - openExternal: true, - }, - ], - }; - - const defaultColumns = products - .filter((product) => product.category !== 'ecology') - .map((product) => ({ - title: ( - - {product.title} - {product.slogan} - - ), - items: product.links, - })); useEffect(() => { // 有 menu 的模版 footer 表现不同，通过 location 判断加载的模版 @@ -147,10 +56,159 @@ const Footer: React.FC = ({ }, [location]); const getColums = () => { - if (products.length % 2 !== 0) { - return [...defaultColumns]; - } - return [...defaultColumns]; + // 如果外部没有传入 columns，则默认展示 antv footer + const col1 = { + title: t('Resources'), + items: [ + { + title: 'Ant Design', + url: 'https://ant.design', + openExternal: true, + }, + { + title: 'Ant Design Mobile', + url: 'https://mobile.ant.design', + openExternal: true, + }, + { + title: 'Umi', + description: t('React 应用开发框架'), + url: 'https://umijs.org', + openExternal: true, + }, + { + title: 'Dumi', + description: t('组件/文档研发工具'), + url: 'https://d.umijs.org', + openExternal: true, + }, + { + title: 'ahooks', + description: t('React Hooks 库'), + url: 'https://github.com/alibaba/hooks', + openExternal: true, + }, + { + title: t('国内镜像'), + url: 'https://antv.gitee.io/', + }, + ], + }; + + const col2 = { + title: t('社区'), + items: [ + { + icon: , + title: t('体验科技专栏'), + url: 'http://zhuanlan.zhihu.com/xtech', + openExternal: true, + }, + { + icon: ( + seeconf + ), + title: 'SEE Conf', + description: t('蚂蚁体验科技大会'), + url: 'https://seeconf.antfin.com/', + openExternal: true, + }, + ], + }; + + const col3 = { + title: t('帮助'), + items: [ + { + icon: , + title: 'GitHub', + url: 'https://github.com/antvis', + openExternal: true, + }, + { + icon: , + title: t('StackOverflow'), + url: 'http://stackoverflow.com/questions/tagged/antv', + openExternal: true, + }, + ], + }; + + const more = { + icon: ( + more products + ), + title: t('更多产品'), + items: [ + { + icon: ( + Ant Design + ), + title: 'Ant Design', + url: 'https://ant.design', + description: t('企业级 UI 设计语言'), + openExternal: true, + }, + { + icon: ( + yuque + ), + title: t('语雀'), + url: 'https://yuque.com', + description: t('知识创作与分享工具'), + openExternal: true, + }, + { + icon: ( + Egg + ), + title: 'Egg', + url: 'https://eggjs.org', + description: t('企业级 Node 开发框架'), + openExternal: true, + }, + { + icon: ( + kitchen + ), + title: 'Kitchen', + description: t('Sketch 工具集'), + url: 'https://kitchen.alipay.com', + openExternal: true, + }, + { + icon: ( + xtech + ), + title: t('蚂蚁体验科技'), + url: 'https://xtech.antfin.com/', + openExternal: true, + }, + ], + }; + + return [col1, col2, col3, more]; }; return ( @@ -164,18 +222,6 @@ const Footer: React.FC = ({ bottom={ bottom || ( <> -
- {more.title} - {more.items.map((item: any) => ( -
- - {item.icon} - {item.title} - - {item.description && {`- ${item.description}`}} -
- ))} -
; + links: ProductType['links']; style?: React.CSSProperties; language?: string; } @@ -30,36 +27,53 @@ const Product: React.FC = ({ url = '', slogan, description, - links = [], + links = {}, style, language, -}) => ( -
  • - - {name} - -
    +}) => { + const { t } = useTranslation(); + + return ( +
  • -

    - {name} - - {slogan} - -

    + {name}     -
    {description}
    -
    - {links.slice(0, 2).map(item => ( - - {item.title} - - ))} + -
    -
    • -); + + ); +}; export default Product; diff --git a/@antv/gatsby-theme-antv/site/components/Products.tsx b/@antv/gatsby-theme-antv/site/components/Products.tsx index 91bb2d3f6..b78fe3193 100644 --- a/@antv/gatsby-theme-antv/site/components/Products.tsx +++ b/@antv/gatsby-theme-antv/site/components/Products.tsx @@ -2,7 +2,7 @@ import React from 'react'; import classNames from 'classnames'; import { useTranslation } from 'react-i18next'; import Product from './Product'; -import { getProducts } from './getProducts'; +import { CATEGORIES, getNewProducts, ProductType } from './getProducts'; import { useChinaMirrorHost } from '../hooks'; import styles from './Product.module.less'; @@ -13,20 +13,21 @@ interface ProductsProps { className?: string; } -const Products: React.FC = ({ - show, - rootDomain = '', - language, - className, -}) => { +const Products: React.FC = ({ show, language, className }) => { const { t, i18n } = useTranslation(); const [isChinaMirrorHost] = useChinaMirrorHost(); - const data = getProducts({ - t, - language: language || i18n.language, - rootDomain, - isChinaMirrorHost, - }); + const [products, setProducts] = React.useState([]); + + const lang = i18n.language === 'zh' ? 'zh' : 'en'; + React.useEffect(() => { + getNewProducts({ + language: lang, + isChinaMirrorHost, + }).then((data) => { + setProducts(data); + }); + }, [lang, isChinaMirrorHost]); + return ( <>
    = ({ })} >
    -

    {t('基础产品')}

    -
      - {data - .filter(item => item.category === 'basic') - .map(product => ( - - ))} -
    -

    {t('拓展产品')}

    -
      - {data - .filter(item => item.category === 'extension') - .map(product => ( - - ))} -
    -

    {t('周边生态')}

    -
      - {data - .filter(item => item.category === 'ecology') - .map(product => ( - - ))} -
    + {CATEGORIES.map(({ name, type }, idx) => { + return ( + +

    {t(name)}

    +
      + {products + .filter((item) => item.category === type) + .map((product) => ( + + ))} +
    +     + ); + })}
    diff --git a/@antv/gatsby-theme-antv/site/components/getProducts.tsx b/@antv/gatsby-theme-antv/site/components/getProducts.tsx index 05355b48f..5ec1ae51f 100644 --- a/@antv/gatsby-theme-antv/site/components/getProducts.tsx +++ b/@antv/gatsby-theme-antv/site/components/getProducts.tsx @@ -1,5 +1,4 @@ import React from 'react'; - import { AreaChartOutlined, DingdingOutlined, @@ -10,11 +9,12 @@ import { ReadOutlined, YuqueOutlined, } from '@ant-design/icons'; - +import { each } from 'lodash'; import { getChinaMirrorHost } from '../utils'; const tuple = (...args: T) => args; const Categories = tuple('basic', 'extension', 'ecology'); +const Link = tuple('home', 'example', 'api'); export interface ProductItem { title: string; @@ -41,7 +41,6 @@ export const getProducts = ({ }: { t: (key: string) => string; language: string; - rootDomain?: string; isChinaMirrorHost?: boolean; }): ProductItem[] => { const hosts: { [name: string]: string } = {}; @@ -64,8 +63,7 @@ export const getProducts = ({ const products = [ { title: 'G2', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/trEfLRh5pc/G2%252520keshihuatuxingyufa.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/trEfLRh5pc/G2%252520keshihuatuxingyufa.svg', slogan: t('可视化引擎'), description: t('数据驱动，高度易用，可扩展的可视化图形语法。'), category: Categories[0], @@ -112,8 +110,7 @@ export const getProducts = ({ }, { title: 'F2', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg', slogan: t('移动可视化方案'), description: t( '专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境', @@ -162,8 +159,7 @@ export const getProducts = ({ }, { title: 'G6', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/zS1wZZJVcJ/G6%252520tukeshihuayinqing.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/zS1wZZJVcJ/G6%252520tukeshihuayinqing.svg', slogan: t('图可视化引擎'), description: t('便捷的关系数据可视化引擎与图分析工具。'), category: Categories[0], @@ -210,8 +206,7 @@ export const getProducts = ({ }, { title: 'X6', - icon: - 'https://gw.alipayobjects.com/zos/bmw-prod/1d5e84d0-d153-4648-81c0-397b3d383d2c.svg', + icon: 'https://gw.alipayobjects.com/zos/bmw-prod/1d5e84d0-d153-4648-81c0-397b3d383d2c.svg', slogan: t('图编辑引擎'), description: t('极易定制、开箱即用、数据驱动的图编辑引擎'), category: Categories[0], @@ -252,8 +247,7 @@ export const getProducts = ({ }, { title: 'L7', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/OI%26h7HXH33/L7%252520dilikongjianshujukeshihua.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/OI%26h7HXH33/L7%252520dilikongjianshujukeshihua.svg', slogan: t('地理空间数据可视化'), description: t('高性能/高渲染质量的地理空间数据可视化框架。'), category: Categories[0], @@ -348,8 +342,7 @@ export const getProducts = ({ { title: 'F2Native', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg', slogan: t('移动可视化方案'), description: t( '跨平台高性能的移动端可视化解决方案，满足你的各种图表需求。', @@ -441,8 +434,7 @@ export const getProducts = ({ { title: 'AVA', - icon: - 'https://gw.alipayobjects.com/zos/bmw-prod/1069c628-7460-4b09-a649-0f2ad64dfc78.svg', + icon: 'https://gw.alipayobjects.com/zos/bmw-prod/1069c628-7460-4b09-a649-0f2ad64dfc78.svg', slogan: t(''), description: t('AVA 是为了更简便的可视分析而生的技术框架。'), category: Categories[1], @@ -483,8 +475,7 @@ export const getProducts = ({ }, { title: 'ChartCube', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/Zr74jx8YNX/chartcube.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/Zr74jx8YNX/chartcube.svg', slogan: t('图表魔方'), description: t('AntV 在线图表制作利器。'), category: Categories[1], @@ -517,8 +508,7 @@ export const getProducts = ({ }, { title: t('墨者学院'), - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/12j36RPVldO/mozhexueyuan.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/12j36RPVldO/mozhexueyuan.svg', description: t('数据可视化社团'), category: Categories[2], links: [ @@ -531,8 +521,7 @@ export const getProducts = ({ }, { title: 'BizCharts', - icon: - 'https://gw.alipayobjects.com/zos/antfincdn/Q1pbg%26O2TM/BizCharts.svg', + icon: 'https://gw.alipayobjects.com/zos/antfincdn/Q1pbg%26O2TM/BizCharts.svg', description: t('基于商业场景下的数据可视化解决方案'), category: Categories[2], links: [ @@ -545,8 +534,7 @@ export const getProducts = ({ }, { title: 'Ant Design Charts', - icon: - 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', + icon: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg', description: t('基于 G2Plot 实现的 React 可视化图表库'), category: Categories[2], links: [ @@ -561,3 +549,70 @@ export const getProducts = ({ return products; }; + +const CATEGORY_TYPE = tuple('basic', 'extension', 'mobile', 'ecology'); +export const CATEGORIES: Array<{ + type: typeof CATEGORY_TYPE[number]; + name: string; +}> = [ + { type: 'basic', name: '标准版基础产品' }, + { type: 'extension', name: '标准版扩展产品' }, + { type: 'mobile', name: '移动定制（F版）产品' }, + { type: 'ecology', name: '周边生态' }, +]; + +export type ProductType = { + links: { + /** 产品首页 */ + readonly home?: { url: string; title?: string }; + /** 图表示例 */ + readonly example?: { url: string; title?: string }; + /** 使用文档 */ + readonly api?: { url: string; title?: string }; + }; + [k: string]: any; +}; + +export function getNewProducts({ + language, + isChinaMirrorHost, +}: { + language: 'zh' | 'en'; + isChinaMirrorHost: boolean; +}): Promise { + // 如需要修改产品信息，请到 https://yuyan.antfin-inc.com/datavprod/antv-site-datas/schemas/products-info-h5data/deploys/stages 修改区块内容 + return fetch( + 'https://render.alipay.com/p/h5data/antv-site-datas_products-info-h5data.json', + ) + .then((res) => res.json()) + .then(({ link }) => { + return fetch(link) + .then((data) => data.json()) + .then((products: ProductType[]) => { + return products + .filter((d) => d.lang === language) + .map((d) => { + const links = d.links ? { ...d.links } : {}; + const newLinks: any = {}; + + each(links, (value, k: string) => { + let actualUrl = value?.url || ''; + if (isChinaMirrorHost) { + // g2plot.antv.vision => antv-g2plot.gitee.io + const match = actualUrl.match( + /([http|https]):\/\/(.*)\.antv\.vision/, + ); + if (match && match[2]) { + actualUrl = actualUrl.replace( + `${match[2]}.antv.vision`, + `antv-${match[2]}.gitee.io`, + ); + } + } + newLinks[k] = { ...value, url: actualUrl }; + }); + return { ...d, links }; + }); + }); + }); +}