@antv/dumi-theme-antv 0.1.0

package/src/antv/Products/getProducts.tsx

@@ -0,0 +1,626 @@
+import {
+  AreaChartOutlined,
+  DingdingOutlined,
+  GithubOutlined,
+  HistoryOutlined,
+  HomeOutlined,
+  PieChartOutlined,
+  ReadOutlined,
+  YuqueOutlined,
+} from "@ant-design/icons";
+import { each } from "lodash";
+import React from "react";
+import { getChinaMirrorHost } from "../utils";
+
+const tuple = <T extends string[]>(...args: T) => args;
+const Categories = tuple("basic", "extension", "ecology");
+const Link = tuple("home", "example", "api");
+
+export interface ProductItem {
+  title: string;
+  icon?: React.ReactNode;
+  slogan?: string;
+  description: string;
+  category: typeof Categories[number];
+  links?: Array<{
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    url?: string;
+    openExternal?: boolean;
+  }>;
+}
+
+const ANTV_DOMAIN = "antv.vision";
+
+export type ValuesOf<T extends any[]> = T[number];
+
+export const getProducts = ({
+  t,
+  language,
+  isChinaMirrorHost = false,
+}: {
+  t: (key: string) => string;
+  language: string;
+  isChinaMirrorHost?: boolean;
+}): ProductItem[] => {
+  const hosts: { [name: string]: string } = {};
+  [
+    "g2",
+    "g2plot",
+    "g6",
+    "l7",
+    "f2",
+    "f2native",
+    "graphin",
+    "g",
+    "x6",
+    "ava",
+  ].forEach((name: string) => {
+    hosts[name] = isChinaMirrorHost
+      ? getChinaMirrorHost(`${name}.${ANTV_DOMAIN}`)
+      : `${name}.${ANTV_DOMAIN}`;
+  });
+  const products = [
+    {
+      title: "G2",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/trEfLRh5pc/G2%252520keshihuatuxingyufa.svg",
+      slogan: t("可视化引擎"),
+      description: t("数据驱动，高度易用，可扩展的可视化图形语法。"),
+      category: Categories[0],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.g2}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.g2}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.g2}/${language}/docs/manual`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.g2}/${language}/docs/api`,
+        },
+        {
+          icon: <HistoryOutlined />,
+          title: t("更新日志"),
+          url: `https://github.com/antvis/g2/blob/master/CHANGELOG.md`,
+          openExternal: true,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/g2`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-g2.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "F2",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg",
+      slogan: t("移动可视化方案"),
+      description: t(
+        "专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境"
+      ),
+      category: Categories[0],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.f2}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.f2}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.f2}/${language}/docs/tutorial/getting-started`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.f2}/${language}/docs/api`,
+        },
+        {
+          icon: <HistoryOutlined />,
+          title: t("更新日志"),
+          url: `https://github.com/antvis/f2/blob/master/CHANGELOG.md`,
+          openExternal: true,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/f2`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-f2.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "G6",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/zS1wZZJVcJ/G6%252520tukeshihuayinqing.svg",
+      slogan: t("图可视化引擎"),
+      description: t("便捷的关系数据可视化引擎与图分析工具。"),
+      category: Categories[0],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.g6}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.g6}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.g6}/${language}/docs/manual`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.g6}/${language}/docs/api`,
+        },
+        {
+          icon: <HistoryOutlined />,
+          title: t("更新日志"),
+          url: `https://github.com/antvis/g6/blob/master/CHANGELOG.md`,
+          openExternal: true,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/g6`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-g6.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "X6",
+      icon:
+        "https://gw.alipayobjects.com/zos/bmw-prod/1d5e84d0-d153-4648-81c0-397b3d383d2c.svg",
+      slogan: t("图编辑引擎"),
+      description: t("极易定制、开箱即用、数据驱动的图编辑引擎"),
+      category: Categories[0],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.x6}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.x6}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.x6}/${language}/docs/tutorial/about/`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.x6}/${language}/docs/api/graph/`,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/x6`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-x6.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "L7",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/OI%26h7HXH33/L7%252520dilikongjianshujukeshihua.svg",
+      slogan: t("地理空间数据可视化"),
+      description: t("高性能/高渲染质量的地理空间数据可视化框架。"),
+      category: Categories[0],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.l7}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.l7}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.l7}/${language}/docs/tutorial`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.l7}/${language}/docs/api/l7`,
+        },
+        {
+          icon: <HistoryOutlined />,
+          title: t("更新日志"),
+          url: `https://github.com/antvis/L7/blob/master/CHANGELOG.md`,
+          openExternal: true,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/L7`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-l7.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "G2Plot",
+      icon: "https://gw.alipayobjects.com/zos/antfincdn/SlbIagEvT7/G2plot.svg",
+      slogan: t("开箱即用的图表库"),
+      description: t("开箱即用、易于配置、极致体验的通用图表库。"),
+      category: Categories[1],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.g2plot}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.g2plot}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.g2plot}/${language}/docs/manual`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.g2plot}/${language}/docs/api`,
+        },
+        {
+          icon: <HistoryOutlined />,
+          title: t("更新日志"),
+          url: `https://github.com/antvis/g2plot/blob/master/CHANGELOG.md`,
+          openExternal: true,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/g2plot`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-g2plot.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+
+    {
+      title: "F2Native",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/D%26fDbWqVkv/F2%252520yidongduankeshihuafangan.svg",
+      slogan: t("移动可视化方案"),
+      description: t(
+        "跨平台高性能的移动端可视化解决方案，满足你的各种图表需求。"
+      ),
+      category: Categories[1],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.f2native}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.f2native}/${language}/docs/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.f2native}/${language}/docs/tutorial/getting-started`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.f2native}/${language}/docs/api/API`,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/f2`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-f2.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+
+    {
+      title: "Graphin",
+      icon: "https://gw.alipayobjects.com/zos/antfincdn/0b4HzOcEJY/Graphin.svg",
+      slogan: t(""),
+      description: t("基于 G6 封装的图分析应用组件。"),
+      category: Categories[1],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.graphin}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("组件示例"),
+          url: `https://${hosts.graphin}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.graphin}/${language}/docs/manual/introduction`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.graphin}/${language}/docs/api/graphin`,
+        },
+        {
+          icon: <HistoryOutlined />,
+          title: t("更新日志"),
+          url: `https://github.com/antvis/graphin/blob/master/CHANGELOG.md`,
+          openExternal: true,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/graphin`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-graphin.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+
+    {
+      title: "AVA",
+      icon:
+        "https://gw.alipayobjects.com/zos/bmw-prod/1069c628-7460-4b09-a649-0f2ad64dfc78.svg",
+      slogan: t(""),
+      description: t("AVA 是为了更简便的可视分析而生的技术框架。"),
+      category: Categories[1],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://${hosts.ava}/${language}`,
+        },
+        {
+          icon: <PieChartOutlined />,
+          title: t("图表示例"),
+          url: `https://${hosts.ava}/${language}/examples`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("使用文档"),
+          url: `https://${hosts.ava}/${language}/docs/guide`,
+        },
+        {
+          icon: <ReadOutlined />,
+          title: t("API 文档"),
+          url: `https://${hosts.ava}/${language}/docs/api`,
+        },
+        {
+          icon: <GithubOutlined />,
+          title: t("GitHub 仓库"),
+          url: `https://github.com/antvis/ava`,
+          openExternal: true,
+        },
+        {
+          icon: "🇨🇳",
+          title: t("国内镜像"),
+          url: `https://antv-ava.gitee.io`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "ChartCube",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/Zr74jx8YNX/chartcube.svg",
+      slogan: t("图表魔方"),
+      description: t("AntV 在线图表制作利器。"),
+      category: Categories[1],
+      links: [
+        {
+          icon: <HomeOutlined />,
+          title: t("产品首页"),
+          url: `https://chartcube.alipay.com`,
+          openExternal: true,
+        },
+        {
+          icon: <AreaChartOutlined />,
+          title: t("生成图表"),
+          url: `https://chartcube.alipay.com/guide`,
+          openExternal: true,
+        },
+        {
+          icon: <YuqueOutlined />,
+          title: t("语雀社区"),
+          url: `https://www.yuque.com/chartcube`,
+          openExternal: true,
+        },
+        {
+          icon: <DingdingOutlined />,
+          title: t("钉钉服务群"),
+          url: `dingtalk://dingtalkclient/action/joingroup?cid=8305538734`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: t("墨者学院"),
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/12j36RPVldO/mozhexueyuan.svg",
+      description: t("数据可视化社团"),
+      category: Categories[2],
+      links: [
+        {
+          title: t("学院首页"),
+          url: `https://www.yuque.com/mo-college`,
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "BizCharts",
+      icon:
+        "https://gw.alipayobjects.com/zos/antfincdn/Q1pbg%26O2TM/BizCharts.svg",
+      description: t("基于商业场景下的数据可视化解决方案"),
+      category: Categories[2],
+      links: [
+        {
+          title: t("产品首页"),
+          url: "https://bizcharts.net",
+          openExternal: true,
+        },
+      ],
+    },
+    {
+      title: "Ant Design Charts",
+      icon:
+        "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
+      description: t("基于 G2Plot 实现的 React 可视化图表库"),
+      category: Categories[2],
+      links: [
+        {
+          title: t("产品首页"),
+          url: `https://charts.ant.design/`,
+          openExternal: true,
+        },
+      ],
+    },
+  ];
+
+  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<ProductType[]> {
+  // 如需要修改产品信息，请到 https://yuyan.antfin-inc.com/datavprod/antv-site-datas/schemas/site-products-h5data/console 修改区块内容
+  return fetch(
+    "https://render.alipay.com/p/h5data/antv-site-datas_site-products-h5data.json"
+  )
+    .then((res) => res.json())
+    .then((products: ProductType[]) => {
+      return products
+        .filter((d) => d.lang === language)
+        .map((d) => {
+          const links =
+            typeof d.links === "string" ? JSON.parse(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: newLinks };
+        });
+    });
+}

package/src/antv/Products/index.tsx

@@ -0,0 +1,70 @@
+import classNames from "classnames";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useChinaMirrorHost } from "../hooks";
+import { CATEGORIES, getNewProducts, ProductType } from "./getProducts";
+import Product from "./Product";
+//@ts-ignore
+import styles from "./Product.module.less";
+
+interface ProductsProps {
+  show: boolean;
+  rootDomain: string;
+  language?: "zh" | "en";
+  className?: string;
+}
+
+const Products: React.FC<ProductsProps> = ({ show, language, className }) => {
+  const { t, i18n } = useTranslation();
+  const [isChinaMirrorHost] = useChinaMirrorHost();
+  const [products, setProducts] = React.useState<ProductType[]>([]);
+
+  const lang = i18n.language === "zh" ? "zh" : "en";
+  React.useEffect(() => {
+    getNewProducts({
+      language: lang,
+      isChinaMirrorHost,
+    }).then((data) => {
+      setProducts(data);
+    });
+  }, [lang, isChinaMirrorHost]);
+
+  return (
+    <>
+      <div
+        className={classNames(styles.products, className, {
+          [styles.show]: !!show,
+        })}
+      >
+        <div className={styles.container}>
+          {CATEGORIES.map(({ name, type }, idx) => {
+            return (
+              <React.Fragment key={idx}>
+                <h3>{t(name)}</h3>
+                <ul>
+                  {products
+                    .filter((item) => item.category === type)
+                    .map((product) => (
+                      <Product
+                        key={product.title}
+                        name={product.title}
+                        slogan={product.slogan || ""}
+                        description={product.description}
+                        url={product.links?.home?.url}
+                        icon={product.icon as string}
+                        links={product.links}
+                        language={language || i18n.language}
+                      />
+                    ))}
+                </ul>
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </div>
+      <div className={styles.mask} />
+    </>
+  );
+};
+
+export default Products;