import { CalendarOutlined } from '@ant-design/icons'; import { css } from '@emotion/react'; import ContributorsList from '@qixian.cs/github-contributors-list'; import { Affix, Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd'; import classNames from 'classnames'; import DayJS from 'dayjs'; import { FormattedMessage, useIntl, useRouteMeta, useTabMeta } from 'dumi'; import type { ReactNode } from 'react'; import React, { useContext, useLayoutEffect, useMemo, useState } from 'react'; import useLayoutState from '../../../hooks/useLayoutState'; import useLocation from '../../../hooks/useLocation'; import useSiteToken from '../../../hooks/useSiteToken'; import EditButton from '../../common/EditButton'; import PrevAndNext from '../../common/PrevAndNext'; import type { DemoContextProps } from '../DemoContext'; import DemoContext from '../DemoContext'; import Footer from '../Footer'; import SiteContext from '../SiteContext'; import ColumnCard from './ColumnCard'; const useStyle = () => { const { token } = useSiteToken(); const { antCls } = token; return { contributorsList: css` display: flex; flex-wrap: wrap; margin-top: 120px !important; clear: both; a, ${antCls}-avatar + ${antCls}-avatar { transition: all ${token.motionDurationSlow}; margin-inline-end: -8px; } &:hover { a, ${antCls}-avatar { margin-inline-end: 0; } } `, toc: css` ${antCls}-anchor { ${antCls}-anchor-link-title { font-size: 12px; } } `, tocWrapper: css` position: absolute; top: 8px; inset-inline-end: 0; width: 160px; margin: 12px 0; padding: 8px 0; padding-inline: 4px 8px; backdrop-filter: blur(8px); border-radius: ${token.borderRadius}px; box-sizing: border-box; .toc-debug { color: ${token.purple6}; &:hover { color: ${token.purple5}; } } > div { box-sizing: border-box; width: 100%; max-height: calc(100vh - 40px) !important; margin: 0 auto; overflow: auto; padding-inline: 4px; } @media only screen and (max-width: ${token.screenLG}px) { display: none; } `, articleWrapper: css` padding: 0 170px 32px 64px; &.rtl { padding: 0 64px 144px 170px; } @media only screen and (max-width: ${token.screenLG}px) { &, &.rtl { padding: 0 48px; } } `, }; }; type AnchorItem = { id: string; title: string; children?: AnchorItem[]; }; const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => ( <> {Array.from({ length: num }).map((_, i) => ( ))} ); const AuthorAvatar = ({ name, avatar }: { name: string; avatar: string }) => { const [loading, setLoading] = useState(true); const [error, setError] = useState(false); useLayoutEffect(() => { const img = new Image(); img.src = avatar; img.onload = () => setLoading(false); img.onerror = () => setError(true); }, []); if (error) return null; if (loading) return ; return ( {name} ); }; const Content: React.FC<{ children: ReactNode }> = ({ children }) => { const meta = useRouteMeta(); const tab = useTabMeta(); const { pathname, hash } = useLocation(); const { formatMessage } = useIntl(); const styles = useStyle(); const { token } = useSiteToken(); const { direction } = useContext(SiteContext); const [showDebug, setShowDebug] = useLayoutState(false); const debugDemos = useMemo( () => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [], [meta], ); const isDebugDemo = debugDemos.includes(hash.slice(1)); useLayoutEffect(() => { setShowDebug(process.env.NODE_ENV === 'development' || isDebugDemo); }, []); const contextValue = useMemo( () => ({ showDebug, setShowDebug }), [showDebug, debugDemos], ); const anchorItems = useMemo( () => (tab?.toc || meta.toc).reduce((result, item) => { if (item.depth === 2) { result.push({ ...item }); } else if (item.depth === 3) { const parent = result[result.length - 1]; if (parent) { parent.children = parent.children || []; parent.children.push({ ...item }); } } return result; }, []), [tab?.toc, meta.toc], ); const isRTL = direction === 'rtl'; // support custom author info in frontmatter // e.g. // --- // author: // - name: qixian // avatar: https://avatars.githubusercontent.com/u/11746742?v=4 // - name: yutingzhao1991 // avatar: https://avatars.githubusercontent.com/u/5378891?v=4 // --- const mergedAuthorInfos = useMemo(() => { const { author } = meta.frontmatter; if (!author) { return []; } if (typeof author === 'string') { return author.split(',').map((item) => ({ name: item, avatar: `https://github.com/${item}.png`, })); } if (Array.isArray(author)) { return author; } return []; }, [meta.frontmatter.author]); return (
({ href: `#${item.id}`, title: item.title, key: item.id, children: item.children ?.filter((child) => showDebug || !debugDemos.includes(child.id)) .map((child) => ({ key: child.id, href: `#${child.id}`, title: ( {child?.title} ), })), }))} />
{meta.frontmatter?.title ? ( {meta.frontmatter?.title} {meta.frontmatter.subtitle && ( {meta.frontmatter.subtitle} )} {!pathname.startsWith('/components/overview') && ( } filename={meta.frontmatter.filename} /> )} ) : null} {/* 添加作者、时间等信息 */} {meta.frontmatter.date || meta.frontmatter.author ? ( {meta.frontmatter.date && ( {DayJS(meta.frontmatter.date).format('YYYY-MM-DD')} )} {mergedAuthorInfos.map((info) => ( @{info.name} ))} ) : null} {!meta.frontmatter.__autoDescription && meta.frontmatter.description} {children} {(meta.frontmatter?.zhihu_url || meta.frontmatter?.yuque_url || meta.frontmatter?.juejin_url) && ( )} {meta.frontmatter.filename && ( { if (!item || loading) { return ; } if (item.username?.includes('github-actions')) { return null; } return ( {item.username} ); }} /> )}