mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-08 18:39:20 +08:00
docs: load version data dynamically JSON (#56464)
* docs: load version data dynamically via JSON * update * update * Update .dumi/theme/slots/Header/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Fix window location check in Header component Update condition to check for window and location existence. Signed-off-by: lijianan <574980606@qq.com> * Refactor Header component for improved logic Signed-off-by: lijianan <574980606@qq.com> * Change import path for versions.json file Signed-off-by: lijianan <574980606@qq.com> * Refactor fetcher and update VersionItem interface Signed-off-by: lijianan <574980606@qq.com> * Fix version URL to use window.location.origin Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: liuqiang <qiang.liu@xinjifamily.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
ug
@@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { GithubOutlined, MenuOutlined } from '@ant-design/icons';
|
||||
import { Alert, Button, Col, ConfigProvider, Popover, Row, Select, Tooltip } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import type { DefaultOptionType } from 'antd/es/select';
|
||||
import { clsx } from 'clsx';
|
||||
import dayjs from 'dayjs';
|
||||
import { useLocation, useSiteData } from 'dumi';
|
||||
import DumiSearchBar from 'dumi/theme-default/slots/SearchBar';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import versionsFile from '../../../../public/versions.json';
|
||||
import useLocale from '../../../hooks/useLocale';
|
||||
import useLocalStorage from '../../../hooks/useLocalStorage';
|
||||
import { getBannerData } from '../../../pages/index/components/util';
|
||||
@@ -14,7 +17,6 @@ import ThemeSwitch from '../../common/ThemeSwitch';
|
||||
import DirectionIcon from '../../icons/DirectionIcon';
|
||||
import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout';
|
||||
import * as utils from '../../utils';
|
||||
import { getThemeConfig } from '../../utils';
|
||||
import SiteContext from '../SiteContext';
|
||||
import type { SharedProps } from './interface';
|
||||
import Logo from './Logo';
|
||||
@@ -149,19 +151,57 @@ interface HeaderState {
|
||||
searching: boolean;
|
||||
}
|
||||
|
||||
interface VersionItem {
|
||||
version: string;
|
||||
url: string;
|
||||
chineseMirrorUrl?: string;
|
||||
}
|
||||
|
||||
const fetcher = (...args: Parameters<typeof fetch>) => {
|
||||
// eslint-disable-next-line compat/compat
|
||||
return fetch(...args).then((res) => res.json());
|
||||
};
|
||||
|
||||
// ================================= Header =================================
|
||||
const Header: React.FC = () => {
|
||||
const [, lang] = useLocale();
|
||||
|
||||
const { pkg } = useSiteData();
|
||||
|
||||
const themeConfig = getThemeConfig();
|
||||
const isChineseMirror =
|
||||
typeof window !== 'undefined' && typeof window.location !== 'undefined'
|
||||
? window.location.hostname.includes('.antgroup.com')
|
||||
: false;
|
||||
|
||||
const { data: versions = [], isLoading } = useSWR<VersionItem[]>(
|
||||
process.env.NODE_ENV === 'production' && typeof window !== 'undefined'
|
||||
? `${window.location.origin}/versions.json`
|
||||
: null,
|
||||
fetcher,
|
||||
{
|
||||
fallbackData: versionsFile,
|
||||
errorRetryCount: 3,
|
||||
},
|
||||
);
|
||||
|
||||
const versionOptions = useMemo(() => {
|
||||
if (isLoading) {
|
||||
return [];
|
||||
}
|
||||
return versions.map<DefaultOptionType>((item) => {
|
||||
const isMatch = item.version.startsWith(pkg.version[0]);
|
||||
const label = isMatch ? pkg.version : item.version;
|
||||
const value = isChineseMirror && item.chineseMirrorUrl ? item.chineseMirrorUrl : item.url;
|
||||
return { value, label };
|
||||
});
|
||||
}, [versions, isLoading, pkg.version, isChineseMirror]);
|
||||
|
||||
const [headerState, setHeaderState] = useState<HeaderState>({
|
||||
menuVisible: false,
|
||||
windowWidth: 1400,
|
||||
searching: false,
|
||||
});
|
||||
|
||||
const { direction, isMobile, bannerVisible, updateSiteConfig } = React.use(SiteContext);
|
||||
const pingTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const location = useLocation();
|
||||
@@ -258,14 +298,6 @@ const Header: React.FC = () => {
|
||||
);
|
||||
|
||||
const { menuVisible, windowWidth, searching } = headerState;
|
||||
const docVersions: Record<string, string> = {
|
||||
[pkg.version]: pkg.version,
|
||||
...themeConfig?.docVersions,
|
||||
};
|
||||
const versionOptions = Object.keys(docVersions).map((version) => ({
|
||||
value: docVersions[version],
|
||||
label: version,
|
||||
}));
|
||||
|
||||
const isHome = ['', 'index', 'index-cn'].includes(pathname);
|
||||
const isZhCN = lang === 'cn';
|
||||
@@ -308,6 +340,7 @@ const Header: React.FC = () => {
|
||||
key="version"
|
||||
size="small"
|
||||
variant="filled"
|
||||
loading={isLoading}
|
||||
className={styles.versionSelect}
|
||||
defaultValue={pkg.version}
|
||||
onChange={handleVersionChange}
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
const chineseMirror =
|
||||
typeof location !== 'undefined' && location.hostname.includes('.antgroup.com');
|
||||
|
||||
export default {
|
||||
categoryOrder: {
|
||||
'Ant Design': 0,
|
||||
@@ -45,15 +42,4 @@ export default {
|
||||
模板文档: 3,
|
||||
'Template Document': 3,
|
||||
},
|
||||
docVersions: {
|
||||
'5.x': chineseMirror ? 'https://5x-ant-design.antgroup.com' : 'https://5x.ant.design',
|
||||
'4.x': chineseMirror ? 'https://4x-ant-design.antgroup.com' : 'https://4x.ant.design',
|
||||
'3.x': 'https://3x.ant.design',
|
||||
'2.x': 'https://2x.ant.design',
|
||||
'1.x': 'https://1x.ant.design',
|
||||
'0.12.x': 'https://012x.ant.design',
|
||||
'0.11.x': 'https://011x.ant.design',
|
||||
'0.10.x': 'https://010x.ant.design',
|
||||
'0.9.x': 'https://09x.ant.design',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -3,7 +3,6 @@ import flattenDeep from 'lodash/flattenDeep';
|
||||
import semver from 'semver';
|
||||
|
||||
import deprecatedVersions from '../../../BUG_VERSIONS.json';
|
||||
import themeConfig from '../themeConfig';
|
||||
|
||||
interface Meta {
|
||||
skip?: boolean;
|
||||
@@ -215,5 +214,3 @@ export function isOfficialHost(hostname: string) {
|
||||
const officialHostnames = ['ant.design', 'antgroup.com'];
|
||||
return officialHostnames.some((official) => hostname.includes(official));
|
||||
}
|
||||
|
||||
export const getThemeConfig = () => themeConfig;
|
||||
|
||||
45
public/versions.json
Normal file
45
public/versions.json
Normal file
@@ -0,0 +1,45 @@
|
||||
[
|
||||
{
|
||||
"version": "6.x",
|
||||
"url": "https://ant.design",
|
||||
"chineseMirrorUrl": "https://ant-design.antgroup.com"
|
||||
},
|
||||
{
|
||||
"version": "5.x",
|
||||
"url": "https://5x.ant.design",
|
||||
"chineseMirrorUrl": "https://5x-ant-design.antgroup.com"
|
||||
},
|
||||
{
|
||||
"version": "4.x",
|
||||
"url": "https://4x.ant.design",
|
||||
"chineseMirrorUrl": "https://4x-ant-design.antgroup.com"
|
||||
},
|
||||
{
|
||||
"version": "3.x",
|
||||
"url": "https://3x.ant.design"
|
||||
},
|
||||
{
|
||||
"version": "2.x",
|
||||
"url": "https://2x.ant.design"
|
||||
},
|
||||
{
|
||||
"version": "1.x",
|
||||
"url": "https://1x.ant.design"
|
||||
},
|
||||
{
|
||||
"version": "0.12.x",
|
||||
"url": "https://012x.ant.design"
|
||||
},
|
||||
{
|
||||
"version": "0.11.x",
|
||||
"url": "https://011x.ant.design"
|
||||
},
|
||||
{
|
||||
"version": "0.10.x",
|
||||
"url": "https://010x.ant.design"
|
||||
},
|
||||
{
|
||||
"version": "0.9.x",
|
||||
"url": "https://09x.ant.design"
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user