docs: fix site issue

This commit is contained in:
MadCcc 2022-11-17 01:22:09 +08:00
parent a77f1aa8fc
commit 04da1f3fdf
6 changed files with 17 additions and 21 deletions

View File

@ -6,7 +6,7 @@ import classNames from 'classnames';
import DemoContext from '../../slots/DemoContext'; import DemoContext from '../../slots/DemoContext';
const DemoWrapper: typeof DumiDemoGrid = ({ items }) => { const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
const { showDebug, setShowDebug, setDebugDemos } = useContext(DemoContext); const { showDebug, setShowDebug } = useContext(DemoContext);
const [expandAll, setExpandAll] = useState(false); const [expandAll, setExpandAll] = useState(false);
@ -18,16 +18,12 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
setShowDebug?.(!showDebug); setShowDebug?.(!showDebug);
}; };
useLayoutEffect(() => {
setDebugDemos?.(items.filter(item => item.previewerProps.debug).map(item => item.demo.id));
}, []);
const handleExpandToggle = () => { const handleExpandToggle = () => {
setExpandAll(!expandAll); setExpandAll(!expandAll);
}; };
const visibleDemos = showDebug ? items : items.filter(item => !item.previewerProps.debug); const visibleDemos = showDebug ? items : items.filter((item) => !item.previewerProps.debug);
const filteredItems = visibleDemos.map(item => ({ const filteredItems = visibleDemos.map((item) => ({
...item, ...item,
previewerProps: { ...item.previewerProps, expand: expandAll }, previewerProps: { ...item.previewerProps, expand: expandAll },
})); }));

View File

@ -115,14 +115,17 @@ const Content: FC<{ children: ReactNode }> = ({ children }) => {
const { direction } = useContext(SiteContext); const { direction } = useContext(SiteContext);
const [showDebug, setShowDebug] = useState(false); const [showDebug, setShowDebug] = useState(false);
const [debugDemos, setDebugDemos] = useState<string[]>([]); const debugDemos = useMemo(
() => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [],
[meta],
);
useLayoutEffect(() => { useLayoutEffect(() => {
setShowDebug(process.env.NODE_ENV === 'development'); setShowDebug(process.env.NODE_ENV === 'development');
}, []); }, []);
const contextValue = useMemo<DemoContextProps>( const contextValue = useMemo<DemoContextProps>(
() => ({ showDebug, setShowDebug, debugDemos, setDebugDemos }), () => ({ showDebug, setShowDebug }),
[showDebug, debugDemos], [showDebug, debugDemos],
); );

View File

@ -7,8 +7,6 @@ export type DemoContextProps = {
const DemoContext = createContext<{ const DemoContext = createContext<{
showDebug?: boolean; showDebug?: boolean;
setShowDebug?: (showDebug: boolean) => void; setShowDebug?: (showDebug: boolean) => void;
debugDemos?: string[];
setDebugDemos?: (visibleItems: string[]) => void;
}>({}); }>({});
export default DemoContext; export default DemoContext;

View File

@ -21,7 +21,7 @@ FloatButton. Available since `5.0.0`.
<code src="./demo/shape.tsx" iframe>Shape</code> <code src="./demo/shape.tsx" iframe>Shape</code>
<code src="./demo/description.tsx" iframe>Description</code> <code src="./demo/description.tsx" iframe>Description</code>
<code src="./demo/tooltip.tsx" iframe>FloatButton with tooltip</code> <code src="./demo/tooltip.tsx" iframe>FloatButton with tooltip</code>
<code src="./demo/group.tsx" iframe>FloatButton Group</code> <code src="./demo/group.tsx" iframe="300">FloatButton Group</code>
<code src="./demo/group-menu.tsx" iframe>Menu mode</code> <code src="./demo/group-menu.tsx" iframe>Menu mode</code>
<code src="./demo/back-top.tsx" iframe>BackTop</code> <code src="./demo/back-top.tsx" iframe>BackTop</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>

View File

@ -22,7 +22,7 @@ demo:
<code src="./demo/shape.tsx" iframe>形状</code> <code src="./demo/shape.tsx" iframe>形状</code>
<code src="./demo/description.tsx" iframe>描述</code> <code src="./demo/description.tsx" iframe>描述</code>
<code src="./demo/tooltip.tsx" iframe>含有气泡卡片的悬浮按钮</code> <code src="./demo/tooltip.tsx" iframe>含有气泡卡片的悬浮按钮</code>
<code src="./demo/group.tsx" iframe>浮动按钮组</code> <code src="./demo/group.tsx" iframe="300">浮动按钮组</code>
<code src="./demo/group-menu.tsx" iframe>菜单模式</code> <code src="./demo/group-menu.tsx" iframe>菜单模式</code>
<code src="./demo/back-top.tsx" iframe>回到顶部</code> <code src="./demo/back-top.tsx" iframe>回到顶部</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>

View File

@ -14,14 +14,14 @@ const components = uniq(
cwd: join(process.cwd()), cwd: join(process.cwd()),
dot: false, dot: false,
}) })
.map(path => path.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')), .map((path) => path.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')),
); );
describe('site test', () => { describe('site test', () => {
let server; let server;
const port = 3000; const port = 3000;
const render = async path => { const render = async (path) => {
const resp = await fetch(`http://127.0.0.1:${port}${path}`).then(async res => { const resp = await fetch(`http://127.0.0.1:${port}${path}`).then(async (res) => {
const html = await res.text(); const html = await res.text();
const $ = cheerio.load(html, { decodeEntities: false, recognizeSelfClosing: true }); const $ = cheerio.load(html, { decodeEntities: false, recognizeSelfClosing: true });
return { return {
@ -33,12 +33,12 @@ describe('site test', () => {
return resp; return resp;
}; };
const handleComponentName = name => { const handleComponentName = (name) => {
const componentName = name.split('/')[1]; const componentName = name.split('/')[1];
return componentName.toLowerCase().replace('-', ''); return componentName.toLowerCase().replace('-', '');
}; };
const expectComponent = async component => { const expectComponent = async (component) => {
const { status, $ } = await render(`/${component}/`); const { status, $ } = await render(`/${component}/`);
expect(status).toBe(200); expect(status).toBe(200);
expect($('h1').text().toLowerCase()).toMatch(handleComponentName(component)); expect($('h1').text().toLowerCase()).toMatch(handleComponentName(component));
@ -59,8 +59,7 @@ describe('site test', () => {
} }
}); });
// FIXME: should not skip if helmet is done it('Basic Pages en', async () => {
it.skip('Basic Pages en', async () => {
const { status, $ } = await render('/'); const { status, $ } = await render('/');
expect($('title').text()).toEqual( expect($('title').text()).toEqual(
`Ant Design - The world's second most popular React UI framework`, `Ant Design - The world's second most popular React UI framework`,
@ -68,7 +67,7 @@ describe('site test', () => {
expect(status).toBe(200); expect(status).toBe(200);
}); });
it.skip('Basic Pages zh', async () => { it('Basic Pages zh', async () => {
const { status, $ } = await render('/index-cn'); const { status, $ } = await render('/index-cn');
expect($('title').text()).toEqual(`Ant Design - 一套企业级 UI 设计语言和 React 组件库`); expect($('title').text()).toEqual(`Ant Design - 一套企业级 UI 设计语言和 React 组件库`);
expect(status).toBe(200); expect(status).toBe(200);